Likes for community search (codesandbox#5620)

* locally managed likes

* managed like as well

Author: siddharthkp

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

@@ -1852,3 +1852,18 @@ export const unlikeSandbox = async (
     effects.notificationToast.error('There was a problem removing your like');
   }
 };
+
+export const likeCommunitySandbox = async (
+  { actions, effects }: Context,
+  id: string
+) => {
+  try {
+    // we don't have optimistic updates because the shape of
+    // a liked sandbox is not the same as a community sandbox
+    // so we refetch liked sandboxes from the api
+    await effects.api.likeSandbox(id);
+    actions.dashboard.getLikedSandboxes();
+  } catch (e) {
+    effects.notificationToast.error('There was a problem liking the sandbox');
+  }
+};

packages/app/src/app/pages/Dashboard/Components/CommunitySandbox/CommunitySandboxCard.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { Stack, Text, Icon, IconButton, Avatar } from '@codesandbox/components';
+import {
+  Stack,
+  Text,
+  Icon,
+  IconButton,
+  Avatar,
+  Button,
+} from '@codesandbox/components';
 import { formatNumber } from '@codesandbox/components/lib/components/Stats';
 import css from '@styled-system/css';
 import { AnonymousAvatar } from './AnonymousAvatar';
@@ -47,25 +54,35 @@ const SandboxTitle: React.FC<SandboxTitleProps> = React.memo(
 
 type StatsProps = Pick<
   CommunitySandboxItemComponentProps,
-  'forkCount' | 'likeCount' | 'liked'
+  'forkCount' | 'likeCount' | 'liked' | 'onLikeToggle'
 >;
-const Stats: React.FC<StatsProps> = React.memo(
-  ({ forkCount, likeCount, liked }) => (
-    <Stack as={Text} variant="muted" align="center" gap={2}>
-      <Stack align="center" gap={1}>
-        <Icon name="fork" size={14} />
-        <Text size={3}>{formatNumber(forkCount)}</Text>
-      </Stack>
-      <Stack align="center" gap={1}>
-        <Icon
-          name="heart"
-          size={14}
-          css={css({ color: liked ? 'reds.300' : 'inherit' })}
-        />
-        <Text size={3}>{formatNumber(likeCount)}</Text>
-      </Stack>
+const Stats: React.FC<StatsProps> = ({
+  forkCount,
+  likeCount,
+  liked,
+  onLikeToggle,
+}) => (
+  <Stack as={Text} variant="muted" align="center" gap={2}>
+    <Stack align="center" gap={1}>
+      <Icon name="fork" size={14} />
+      <Text size={3}>{formatNumber(forkCount)}</Text>
     </Stack>
-  )
+    <Stack
+      as={Button}
+      variant="link"
+      gap={1}
+      autoWidth
+      paddingX={0}
+      onClick={onLikeToggle}
+    >
+      <Icon
+        name="heart"
+        size={14}
+        css={css({ color: liked ? 'reds.300' : 'inherit' })}
+      />
+      <Text size={3}>{formatNumber(likeCount)}</Text>
+    </Stack>
+  </Stack>
 );
 
 type AuthorProps = Pick<CommunitySandboxItemComponentProps, 'author'>;
@@ -98,6 +115,7 @@ export const SandboxCard = ({
   onClick,
   onDoubleClick,
   onContextMenu,
+  onLikeToggle,
   ...props
 }: CommunitySandboxItemComponentProps) => {
   const [stoppedScrolling, setStoppedScrolling] = React.useState(false);
@@ -151,7 +169,12 @@ export const SandboxCard = ({
           marginRight={3}
         >
           <Author author={author} />
-          <Stats likeCount={likeCount} forkCount={forkCount} liked={liked} />
+          <Stats
+            likeCount={likeCount}
+            forkCount={forkCount}
+            liked={liked}
+            onLikeToggle={onLikeToggle}
+          />
         </Stack>
       </Stack>
     </Stack>

packages/app/src/app/pages/Dashboard/Components/CommunitySandbox/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { useAppState } from 'app/overmind';
+import { useAppState, useActions } from 'app/overmind';
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 import track from '@codesandbox/common/lib/utils/analytics';
 import { SandboxCard } from './CommunitySandboxCard';
@@ -22,6 +22,9 @@ export const CommunitySandbox = ({
   const {
     dashboard: { viewMode },
   } = useAppState();
+  const {
+    dashboard: { likeCommunitySandbox, unlikeSandbox },
+  } = useActions();
 
   const { sandbox } = item;
   const title = sandbox.title || sandbox.alias || sandbox.id;
@@ -73,14 +76,28 @@ export const CommunitySandbox = ({
     track('Dashboard - Community Search sandbox opened');
   };
 
+  const [managedLikeCount, setLikeCount] = React.useState(likeCount);
+  const [managedLiked, setLiked] = React.useState(liked);
+  const onLikeToggle = () => {
+    if (managedLiked) {
+      unlikeSandbox(sandbox.id);
+      setLiked(false);
+      setLikeCount(managedLikeCount - 1);
+    } else {
+      likeCommunitySandbox(sandbox.id);
+      setLiked(true);
+      setLikeCount(managedLikeCount + 1);
+    }
+  };
+
   const sandboxProps = {
     title,
     TemplateIcon,
     screenshotUrl,
     forkCount,
-    likeCount,
     author,
-    liked,
+    likeCount: managedLikeCount,
+    liked: managedLiked,
   };
 
   const interactionProps = {
@@ -94,6 +111,7 @@ export const CommunitySandbox = ({
     onDoubleClick,
     onContextMenu,
     'data-selection-id': sandbox.id,
+    onLikeToggle,
   };
 
   const Component = viewMode === 'list' ? SandboxListItem : SandboxCard;

packages/app/src/app/pages/Dashboard/Components/CommunitySandbox/types.ts

@@ -15,4 +15,5 @@ export type CommunitySandboxItemComponentProps = Pick<
   onClick: (evt: React.MouseEvent) => void;
   onDoubleClick: (evt: React.MouseEvent) => void;
   onContextMenu: (evt: React.MouseEvent) => void;
+  onLikeToggle: (evt: React.MouseEvent) => void;
 };