From 1228b2b7b1ac23b7a8908f54f6dc5588a3f43b61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Thu, 3 Oct 2019 23:40:21 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Switch=20LikeHeart=20to=20use=20?=
 =?UTF-8?q?useOvermind?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/overmind/namespaces/editor/actions.ts |  7 ++-
 .../app/pages/Sandbox/Editor/Header/index.tsx |  2 +-
 .../pages/common/LikeHeart/MaybeTooltip.tsx   | 21 +++++++
 .../src/app/pages/common/LikeHeart/index.tsx  | 60 +++++++++----------
 4 files changed, 53 insertions(+), 37 deletions(-)
 create mode 100644 packages/app/src/app/pages/common/LikeHeart/MaybeTooltip.tsx

diff --git a/packages/app/src/app/overmind/namespaces/editor/actions.ts b/packages/app/src/app/overmind/namespaces/editor/actions.ts
index 8835c4fed47..f2f3601a800 100755
--- a/packages/app/src/app/overmind/namespaces/editor/actions.ts
+++ b/packages/app/src/app/overmind/namespaces/editor/actions.ts
@@ -253,9 +253,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);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx
index d8d38ab730d..a729b6c7eed 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx
@@ -50,7 +50,7 @@ const LikeButton = inject('store')(
       style,
       likeCount,
       store: { editor },
-    }: ButtonProps & { likeCount: string; store: any }) => (
+    }: ButtonProps & { likeCount: number; store: any }) => (
       <LikeHeart
         colorless
         style={style}
diff --git a/packages/app/src/app/pages/common/LikeHeart/MaybeTooltip.tsx b/packages/app/src/app/pages/common/LikeHeart/MaybeTooltip.tsx
new file mode 100644
index 00000000000..69cb0ddb6a4
--- /dev/null
+++ b/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 = false,
+  loggedIn,
+  title,
+}) =>
+  loggedIn && !disableTooltip ? (
+    <Tooltip content={title} style={{ display: 'flex' }}>
+      {children}
+    </Tooltip>
+  ) : (
+    <>{children}</>
+  );
diff --git a/packages/app/src/app/pages/common/LikeHeart/index.tsx b/packages/app/src/app/pages/common/LikeHeart/index.tsx
index f0aadf5782c..654e572dbb2 100644
--- a/packages/app/src/app/pages/common/LikeHeart/index.tsx
+++ b/packages/app/src/app/pages/common/LikeHeart/index.tsx
@@ -1,62 +1,56 @@
-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;
+} & Pick<ComponentProps<typeof MaybeTooltip>, 'disableTooltip'> &
+  Pick<
+    ComponentProps<typeof Container>,
+    'className' | 'highlightHover' | 'style'
+  >;
+export const LikeHeart: FunctionComponent<Props> = ({
   className,
   colorless,
-  text,
-  style,
   disableTooltip,
   highlightHover,
+  sandbox,
+  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={sandbox.userLiked}
+      loggedIn={isLoggedIn}
+      onClick={isLoggedIn ? () => likeSandboxToggled(sandbox.id) : noop}
+      style={style}
     >
       <MaybeTooltip
-        loggedIn={isLoggedIn}
         disableTooltip={disableTooltip}
+        loggedIn={isLoggedIn}
         title={sandbox.userLiked ? 'Undo like' : 'Like'}
       >
         {sandbox.userLiked ? (