From c6f53fccef1bc9888647091b7a36218b1477d1e4 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 1/2] =?UTF-8?q?=F0=9F=94=A8=20Switch=20LikeHeart=20to=20us?=
 =?UTF-8?q?e=20useOvermind?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/overmind/namespaces/editor/actions.ts |  7 +-
 .../pages/common/LikeHeart/MaybeTooltip.tsx   | 21 ++++++
 .../src/app/pages/common/LikeHeart/index.tsx  | 68 +++++++++----------
 3 files changed, 56 insertions(+), 40 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 3b07492d2fd..236fc2724e9 100755
--- a/packages/app/src/app/overmind/namespaces/editor/actions.ts
+++ b/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);
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..157628da4a3
--- /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,
+  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..67ebffc2a31 100644
--- a/packages/app/src/app/pages/common/LikeHeart/index.tsx
+++ b/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 />
         )}

From 92e2a9a7ee300c02dbe99e110d3da787f6b12478 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Sat, 19 Oct 2019 19:56:41 +0200
Subject: [PATCH 2/2] Fix types

---
 .../Sandbox/Editor/Header/Buttons/LikeButton/LikeButton.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Buttons/LikeButton/LikeButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Buttons/LikeButton/LikeButton.tsx
index 9833301ad78..23a53b01717 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Buttons/LikeButton/LikeButton.tsx
+++ b/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}
     />
   );
 };