🔨 Switch LikeHeart to use useOvermind (codesandbox#3144)

* 🔨 Switch LikeHeart to use useOvermind

* Fix types

Author: MichaelDeBoey

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -301,9 +301,10 @@ export const forkSandboxClicked: AsyncAction = async ({
   });
 };
 
-export const likeSandboxToggled: AsyncAction<{
-  id: string;
-}> = async ({ state, effects }, { id }) => {
+export const likeSandboxToggled: AsyncAction<string> = async (
+  { state, effects },
+  id
+) => {
   if (state.editor.sandboxes[id].userLiked) {
     state.editor.sandboxes[id].likeCount--;
     await effects.api.unlikeSandbox(id);

packages/app/src/app/pages/Sandbox/Editor/Header/Buttons/LikeButton/LikeButton.tsx

@@ -14,10 +14,10 @@ export const LikeButton: FunctionComponent = () => {
   return (
     <LikeHeart
       colorless
-      text={String(currentSandbox.likeCount)}
-      sandbox={currentSandbox}
       disableTooltip
       highlightHover
+      sandbox={currentSandbox}
+      text={currentSandbox.likeCount}
     />
   );
 };

packages/app/src/app/pages/common/LikeHeart/MaybeTooltip.tsx

@@ -0,0 +1,21 @@
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import React, { FunctionComponent } from 'react';
+
+type Props = {
+  disableTooltip: boolean;
+  loggedIn: boolean;
+  title: string;
+};
+export const MaybeTooltip: FunctionComponent<Props> = ({
+  children,
+  disableTooltip,
+  loggedIn,
+  title,
+}) =>
+  loggedIn && !disableTooltip ? (
+    <Tooltip content={title} style={{ display: 'flex' }}>
+      {children}
+    </Tooltip>
+  ) : (
+    <>{children}</>
+  );

packages/app/src/app/pages/common/LikeHeart/index.tsx

@@ -1,66 +1,60 @@
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 import { Sandbox } from '@codesandbox/common/lib/types';
-import noop from 'lodash/noop';
+import React, { ComponentProps, FunctionComponent } from 'react';
+
 import { useOvermind } from 'app/overmind';
-import React from 'react';
+
 // @ts-ignore
 import HeartIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/heart-open.svg'; // eslint-disable-line import/no-webpack-loader-syntax
 // @ts-ignore
 import FullHeartIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/heart.svg'; // eslint-disable-line import/no-webpack-loader-syntax
 
 import { Container } from './elements';
+import { MaybeTooltip } from './MaybeTooltip';
 
-const MaybeTooltip = ({ loggedIn, disableTooltip, title, children }) =>
-  loggedIn && !disableTooltip ? (
-    <Tooltip content={title} style={{ display: 'flex' }}>
-      {children}
-    </Tooltip>
-  ) : (
-    children
-  );
+const noop = () => undefined;
 
-interface ILikeHeartProps {
-  sandbox: Sandbox;
-  className?: string;
+type Props = {
   colorless?: boolean;
-  text?: string;
-  style?: React.CSSProperties;
-  disableTooltip?: boolean;
-  highlightHover?: boolean;
-}
-
-export const LikeHeart: React.FC<ILikeHeartProps> = ({
-  sandbox,
+  sandbox: Sandbox;
+  text?: number;
+} & Partial<Pick<ComponentProps<typeof MaybeTooltip>, 'disableTooltip'>> &
+  Pick<
+    ComponentProps<typeof Container>,
+    'className' | 'highlightHover' | 'style'
+  >;
+export const LikeHeart: FunctionComponent<Props> = ({
   className,
   colorless,
-  text,
-  style,
   disableTooltip,
-  highlightHover,
+  highlightHover = false,
+  sandbox: { id, userLiked },
+  style,
+  text,
 }) => {
   const {
+    actions: {
+      editor: { likeSandboxToggled },
+    },
     state: { isLoggedIn },
-    actions: { editor },
   } = useOvermind();
+
   return (
     <Container
-      style={style}
-      hasText={text !== undefined}
-      loggedIn={isLoggedIn}
-      liked={sandbox.userLiked}
       className={className}
+      hasText={text !== undefined}
       highlightHover={highlightHover}
-      onClick={
-        isLoggedIn ? () => editor.likeSandboxToggled({ id: sandbox.id }) : noop
-      }
+      liked={userLiked}
+      loggedIn={isLoggedIn}
+      onClick={isLoggedIn ? () => likeSandboxToggled(id) : noop}
+      style={style}
     >
       <MaybeTooltip
-        loggedIn={isLoggedIn}
         disableTooltip={disableTooltip}
-        title={sandbox.userLiked ? 'Undo like' : 'Like'}
+        loggedIn={isLoggedIn}
+        title={userLiked ? 'Undo like' : 'Like'}
       >
-        {sandbox.userLiked ? (
-          <FullHeartIcon style={colorless ? null : { color: '#E01F4E' }} />
+        {userLiked ? (
+          <FullHeartIcon style={colorless ? {} : { color: '#E01F4E' }} />
         ) : (
           <HeartIcon />
         )}