WIP Profiles: likes + pages (#4802)

packages/app/src/app/pages/Profile2/AllSandboxes.tsx

@@ -10,6 +10,7 @@ import {
 import css from '@styled-system/css';
 import { useOvermind } from 'app/overmind';
 import { SandboxCard, SkeletonCard } from './SandboxCard';
+import { SANDBOXES_PER_PAGE } from './constants';
 
 export const AllSandboxes = ({ menuControls }) => {
   const {
@@ -108,7 +109,7 @@ export const AllSandboxes = ({ menuControls }) => {
         }}
       >
         {isLoadingSandboxes
-          ? Array(15)
+          ? Array(SANDBOXES_PER_PAGE)
               .fill(true)
               .map((_, index) => (
                 // eslint-disable-next-line
@@ -127,7 +128,6 @@ export const AllSandboxes = ({ menuControls }) => {
   );
 };
 
-const SANDBOXES_PER_PAGE = 15;
 const Pagination = () => {
   const {
     actions: {

packages/app/src/app/pages/Profile2/ContextMenu.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { useOvermind } from 'app/overmind';
+import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
+import { useLocation } from 'react-router-dom';
+import { Menu } from '@codesandbox/components';
+
+export const ContextMenu = ({
+  visible,
+  setVisibility,
+  position,
+  sandboxId,
+}) => {
+  const {
+    actions: {
+      editor: { forkExternalSandbox },
+      profile: {
+        addFeaturedSandboxes,
+        removeFeaturedSandboxes,
+        changeSandboxPrivacy,
+        deleteSandboxClicked,
+      },
+    },
+    state: {
+      user: loggedInUser,
+      profile: { current: user },
+    },
+  } = useOvermind();
+  const location = useLocation();
+
+  if (!visible) return null;
+
+  const myProfile = loggedInUser?.username === user.username;
+  const likesPage = location.pathname === '/likes';
+
+  const isFeatured = user.featuredSandboxes
+    .map(sandbox => sandbox.id)
+    .includes(sandboxId);
+
+  return (
+    <Menu.ContextMenu
+      visible={visible}
+      setVisibility={setVisibility}
+      position={position}
+    >
+      {myProfile && !likesPage && (
+        <>
+          {isFeatured ? (
+            <Menu.Item onSelect={() => removeFeaturedSandboxes({ sandboxId })}>
+              Unpin sandbox
+            </Menu.Item>
+          ) : (
+            <Menu.Item onSelect={() => addFeaturedSandboxes({ sandboxId })}>
+              Pin sandbox
+            </Menu.Item>
+          )}
+          <Menu.Divider />
+        </>
+      )}
+      <Menu.Item
+        onSelect={() => {
+          window.location.href = sandboxUrl({ id: sandboxId });
+        }}
+      >
+        Open sandbox
+      </Menu.Item>
+      <Menu.Item
+        onSelect={() => {
+          forkExternalSandbox({ sandboxId, openInNewWindow: true });
+        }}
+      >
+        Fork sandbox
+      </Menu.Item>
+      {myProfile && !likesPage && !isFeatured && (
+        <>
+          <Menu.Divider />
+          <Menu.Item
+            onSelect={() => changeSandboxPrivacy({ sandboxId, privacy: 1 })}
+          >
+            Make sandbox unlisted
+          </Menu.Item>
+          <Menu.Item
+            onSelect={() => changeSandboxPrivacy({ sandboxId, privacy: 2 })}
+          >
+            Make sandbox private
+          </Menu.Item>
+          <Menu.Divider />
+          <Menu.Item onSelect={() => deleteSandboxClicked(sandboxId)}>
+            Delete sandbox
+          </Menu.Item>
+        </>
+      )}
+    </Menu.ContextMenu>
+  );
+};

packages/app/src/app/pages/Profile2/Header.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useOvermind } from 'app/overmind';
+import { useHistory, useLocation } from 'react-router-dom';
 import LogoIcon from '@codesandbox/common/lib/components/Logo';
 import { UserMenu } from 'app/pages/common/UserMenu';
-
 import { Stack, Input, Button, Link, Icon } from '@codesandbox/components';
 import css from '@styled-system/css';
 
@@ -20,6 +20,10 @@ export const Header: React.FC = () => {
     },
   } = useOvermind();
 
+  const history = useHistory();
+  const location = useLocation();
+  if (!location.search) searchQueryChanged('');
+
   return (
     <Stack
       as="header"
@@ -63,8 +67,22 @@ export const Header: React.FC = () => {
             paddingLeft: 7,
             width: [0, 360, 480],
           })}
-          defaultValue={searchQuery}
-          onChange={event => searchQueryChanged(event.target.value)}
+          value={searchQuery}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+            const query = event.target.value;
+            searchQueryChanged(query);
+
+            if (!query.length) {
+              history.push('');
+              return;
+            }
+
+            if (history.location.pathname === '/search') {
+              history.replace('/search?query=' + query);
+            } else {
+              history.push('/search?query=' + query);
+            }
+          }}
         />
       </Stack>
 

packages/app/src/app/pages/Profile2/LikedSandboxes.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Grid, Column, Stack, Text, IconButton } from '@codesandbox/components';
+import css from '@styled-system/css';
+import { useOvermind } from 'app/overmind';
+import { SandboxCard, SkeletonCard } from './SandboxCard';
+import { SANDBOXES_PER_PAGE } from './constants';
+
+export const LikedSandboxes = ({ menuControls }) => {
+  const {
+    actions: {
+      profile: { likedSandboxesPageChanged },
+    },
+    state: {
+      profile: {
+        current: { username },
+        isLoadingSandboxes,
+        currentLikedSandboxesPage,
+        likedSandboxes,
+      },
+    },
+  } = useOvermind();
+
+  // explicitly call it on first page render
+  React.useEffect(() => {
+    if (currentLikedSandboxesPage === 1) likedSandboxesPageChanged(1);
+  }, [currentLikedSandboxesPage, likedSandboxesPageChanged]);
+
+  const sandboxes = (
+    (likedSandboxes[username] &&
+      likedSandboxes[username][currentLikedSandboxesPage]) ||
+    []
+  )
+    // only show public sandboxes on profile
+    .filter(sandbox => sandbox.privacy === 0);
+
+  return (
+    <Stack as="section" direction="vertical" gap={6}>
+      <Stack justify="space-between" align="center">
+        <Text size={7} weight="bold">
+          Liked Sandboxes
+        </Text>
+      </Stack>
+
+      <Grid
+        rowGap={6}
+        columnGap={6}
+        css={{
+          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+        }}
+      >
+        {isLoadingSandboxes
+          ? Array(SANDBOXES_PER_PAGE)
+              .fill(true)
+              .map((_, index) => (
+                // eslint-disable-next-line
+                <Column key={index}>
+                  <SkeletonCard />
+                </Column>
+              ))
+          : sandboxes.map((sandbox, index) => (
+              <Column key={sandbox.id}>
+                <SandboxCard sandbox={sandbox} menuControls={menuControls} />
+              </Column>
+            ))}
+      </Grid>
+      <Pagination />
+    </Stack>
+  );
+};
+
+const Pagination = () => {
+  const {
+    actions: {
+      profile: { likedSandboxesPageChanged },
+    },
+    state: {
+      profile: {
+        currentLikedSandboxesPage,
+        current: { givenLikeCount },
+      },
+    },
+  } = useOvermind();
+
+  const numberOfPages = Math.ceil(givenLikeCount / SANDBOXES_PER_PAGE);
+
+  return (
+    <nav role="navigation" aria-label="Pagination Navigation">
+      <Stack
+        as="ul"
+        gap={4}
+        justify="center"
+        align="center"
+        css={css({ marginX: 0, marginY: 10, listStyle: 'none' })}
+      >
+        <li>
+          <IconButton
+            name="backArrow"
+            title="Previous page"
+            onClick={() =>
+              likedSandboxesPageChanged(currentLikedSandboxesPage - 1)
+            }
+            disabled={currentLikedSandboxesPage === 1}
+          />
+        </li>
+        <li>
+          <IconButton
+            name="backArrow"
+            title="Next page"
+            style={{ transform: 'scaleX(-1)' }}
+            onClick={() =>
+              likedSandboxesPageChanged(currentLikedSandboxesPage + 1)
+            }
+            disabled={currentLikedSandboxesPage === numberOfPages}
+          />
+        </li>
+      </Stack>
+    </nav>
+  );
+};

packages/app/src/app/pages/Profile2/ProfileCard.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { motion } from 'framer-motion';
+import { useOvermind } from 'app/overmind';
+import { Link as RouterLink } from 'react-router-dom';
 import {
   Stack,
   Avatar,
@@ -13,7 +15,6 @@ import {
 } from '@codesandbox/components';
 import { TeamAvatar } from 'app/components/TeamAvatar';
 import css from '@styled-system/css';
-import { useOvermind } from 'app/overmind';
 
 export const ProfileCard = ({ defaultEditing = false }) => {
   const {
@@ -99,13 +100,15 @@ export const ProfileCard = ({ defaultEditing = false }) => {
             <Stack direction="vertical" gap={3}>
               <Stack gap={2} align="center">
                 <Icon name="box" />
-                <Text size={3}>
+                <Link as={RouterLink} to="/" size={3}>
                   {user.sandboxCount + user.templateCount} Sandboxes
-                </Text>
+                </Link>
               </Stack>
               <Stack gap={2} align="center">
                 <Icon name="heart" />
-                <Text size={3}>{user.receivedLikeCount} Likes</Text>
+                <Link as={RouterLink} to="/likes" size={3}>
+                  {user.givenLikeCount} Likes
+                </Link>
               </Stack>
             </Stack>
           )}

packages/app/src/app/pages/Profile2/SandboxCard.tsx

@@ -90,7 +90,7 @@ export const SandboxCard = ({
             name="more"
             size={9}
             title="Sandbox actions"
-            onClick={event => onContextMenu(event, sandbox.id)}
+            onClick={event => onContextMenu(event, sandbox)}
           />
         </Stack>
       </Stack>

packages/app/src/app/pages/Profile2/constants.ts

@@ -0,0 +1 @@
+export const SANDBOXES_PER_PAGE = 15;