🔨 Switch LikeHeart to use useOvermind (#2635)

* Add @vanya829 as a contributor

* refactor LikeHeart to functional component

* convert likeCount to string to match typing

* refactor LikeHeart to functional component

convert likeCount to string to match typing

Author: vanya829

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

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

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

@@ -1,7 +1,7 @@
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 import { Sandbox } from '@codesandbox/common/lib/types';
 import noop from 'lodash/noop';
-import { inject, hooksObserver } from 'app/componentConnectors';
+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
@@ -19,58 +19,54 @@ const MaybeTooltip = ({ loggedIn, disableTooltip, title, children }) =>
     children
   );
 
-interface Props {
+interface ILikeHeartProps {
   sandbox: Sandbox;
   className?: string;
   colorless?: boolean;
   text?: string;
   style?: React.CSSProperties;
   disableTooltip?: boolean;
   highlightHover?: boolean;
-  store: any;
-  signals: any;
 }
 
-export const LikeHeart = inject('store', 'signals')(
-  hooksObserver(
-    ({
-      sandbox,
-      className,
-      colorless,
-      text,
-      style,
-      disableTooltip,
-      highlightHover,
-      store: { isLoggedIn },
-      signals: { editor },
-    }: Props) => (
-      <Container
-        style={style}
-        hasText={text !== undefined}
+export const LikeHeart: React.FC<ILikeHeartProps> = ({
+  sandbox,
+  className,
+  colorless,
+  text,
+  style,
+  disableTooltip,
+  highlightHover,
+}) => {
+  const {
+    state: { isLoggedIn },
+    actions: { editor },
+  } = useOvermind();
+  return (
+    <Container
+      style={style}
+      hasText={text !== undefined}
+      loggedIn={isLoggedIn}
+      liked={sandbox.userLiked}
+      className={className}
+      highlightHover={highlightHover}
+      onClick={
+        isLoggedIn ? () => editor.likeSandboxToggled({ id: sandbox.id }) : noop
+      }
+    >
+      <MaybeTooltip
         loggedIn={isLoggedIn}
-        liked={sandbox.userLiked}
-        className={className}
-        highlightHover={highlightHover}
-        onClick={
-          isLoggedIn
-            ? () => editor.likeSandboxToggled({ id: sandbox.id })
-            : noop
-        }
+        disableTooltip={disableTooltip}
+        title={sandbox.userLiked ? 'Undo like' : 'Like'}
       >
-        <MaybeTooltip
-          loggedIn={isLoggedIn}
-          disableTooltip={disableTooltip}
-          title={sandbox.userLiked ? 'Undo like' : 'Like'}
-        >
-          {sandbox.userLiked ? (
-            <FullHeartIcon style={colorless ? null : { color: '#E01F4E' }} />
-          ) : (
-            <HeartIcon />
-          )}
+        {sandbox.userLiked ? (
+          <FullHeartIcon style={colorless ? null : { color: '#E01F4E' }} />
+        ) : (
+          <HeartIcon />
+        )}
 
-          {text && <span>{text}</span>}
-        </MaybeTooltip>
-      </Container>
-    )
-  )
-);
+        {text && <span>{text}</span>}
+      </MaybeTooltip>
+    </Container>
+  );
+};