feat: add liked items page (#401)

* build: add liked items within header * fix: use my list route from contsants * style: style my list page * feat: have liked items within user menu * chore: fix dependencies issues with upgrade * build: merge main * build: pass custom user items as an array * fix: my liked items test remove tab click * build: update versions * fix: apply changes for PR * chore: update ui --------- Co-authored-by: spaenleh <spaenleh@gmail.com>
graasp · Nov 3, 2023 · de2a134 · de2a134
1 parent 152a8e6
commit de2a134
Show file tree

Hide file tree

Showing 17 changed files with 739 additions and 756 deletions.
diff --git a/cypress/e2e/myLists/myFavorites.cy.ts b/cypress/e2e/myLists/myFavorites.cy.ts
diff --git a/cypress/e2e/myLists/myLikes.cy.ts b/cypress/e2e/myLists/myLikes.cy.ts
@@ -1,8 +1,5 @@
-import { MY_LIST_ROUTE } from '../../../src/config/routes';
-import {
-  MY_LIKES_COLLECTIONS_ID,
-  buildMyListNavigationTabId,
-} from '../../../src/config/selectors';
+import { MY_LIKED_ITEMS_ROUTE } from '../../../src/config/routes';
+import { MY_LIKES_COLLECTIONS_ID } from '../../../src/config/selectors';
 import { PUBLISHED_ITEMS } from '../../fixtures/items';
 import { CURRENT_USER } from '../../fixtures/members';
 
@@ -11,10 +8,7 @@ describe('My Liked Items', () => {
     // check if title and headings are displayed correctly
     it('display liked items', () => {
       cy.setUpApi({ currentMember: CURRENT_USER, items: PUBLISHED_ITEMS });
-      cy.visit(MY_LIST_ROUTE);
-
-      // click my likes tab
-      cy.get(`#${buildMyListNavigationTabId('myLikes')}`).click();
+      cy.visit(MY_LIKED_ITEMS_ROUTE);
 
       cy.wait('@getLikedItemsForMember').then(({ response }) => {
         cy.get(`#${MY_LIKES_COLLECTIONS_ID}`)

diff --git a/package.json b/package.json
@@ -33,10 +33,10 @@
     "@emotion/react": "11.11.1",
     "@emotion/server": "11.11.0",
     "@emotion/styled": "11.11.0",
-    "@graasp/query-client": "https://github.com/graasp/graasp-query-client.git#main",
-    "@graasp/sdk": "1.9.1",
+    "@graasp/query-client": "1.11.1",
+    "@graasp/sdk": "1.9.2",
     "@graasp/translations": "1.19.1",
-    "@graasp/ui": "3.5.4",
+    "@graasp/ui": "3.7.0",
     "@mui/icons-material": "5.14.3",
     "@mui/lab": "5.0.0-alpha.140",
     "@mui/material": "5.14.5",
@@ -47,7 +47,7 @@
     "@trivago/prettier-plugin-sort-imports": "4.2.0",
     "http-status-codes": "2.2.0",
     "i18next": "23.4.6",
-    "immutable": "4.3.2",
+    "immutable": "4.3.4",
     "interweave": "13.1.0",
     "lodash": "4.17.21",
     "lodash.isobject": "3.0.2",
@@ -104,7 +104,7 @@
   },
   "resolutions": {
     "@types/react": "17.0.66",
-    "@graasp/sdk": "1.9.1",
+    "@graasp/sdk": "1.9.2",
     "immutable": "4.3.4"
   },
   "nyc": {

diff --git a/pages/my-list.tsx → pages/liked.tsx b/pages/my-list.tsx → pages/liked.tsx
@@ -6,7 +6,7 @@ import Wrapper from '../src/components/common/Wrapper';
 import MyList from '../src/components/pages/MyList';
 import { QUERY_CLIENT_OPTIONS } from '../src/config/queryClient';
 
-const MyListPage = ({
+const MyLikedItemsPage = ({
   dehydratedState,
 }: {
   dehydratedState: DehydratedState;
@@ -29,4 +29,4 @@ export async function getServerSideProps() {
   return { props: { dehydratedState: dehydrate(queryClient) } };
 }
 
-export default MyListPage;
+export default MyLikedItemsPage;
diff --git a/src/components/collection/ChildrenCard.tsx b/src/components/collection/ChildrenCard.tsx
@@ -15,7 +15,11 @@ import {
 } from '@mui/material';
 import Typography from '@mui/material/Typography';
 
-import { ThumbnailSize } from '@graasp/sdk';
+import {
+  LocalFileItemExtra,
+  S3FileItemExtra,
+  ThumbnailSize,
+} from '@graasp/sdk';
 import { ItemRecord } from '@graasp/sdk/frontend';
 
 import { COLLECTION_CARD_BORDER_RADIUS } from '../../config/cssStyles';
@@ -180,7 +184,7 @@ export const FileChildrenCard: React.FC<FileChildrenCardProps> = ({
           <ItemIcon
             alt={item.type}
             type={item.type}
-            extra={item.extra}
+            extra={item.extra as LocalFileItemExtra | S3FileItemExtra}
             // TODO: replace with theme values
             sx={{ fontSize: '2.1875rem', color: '#5050d2' }}
           />

diff --git a/src/components/collection/Items.tsx b/src/components/collection/Items.tsx
@@ -70,7 +70,7 @@ const CollapsibleItemCategory: React.FC<CollapsibleItemCategoryProps> = ({
         )}
       </Box>
       <Grid container spacing={2} id={CHILDREN_ITEMS_GRID_ID} marginBottom={3}>
-        {shownItems.map((item) => (
+        {shownItems.map((item: ItemRecord) => (
           <Grow in key={item.id}>
             <Grid item xs={12} sm={12} md={6} lg={4} xl={3}>
               {children(item)}

diff --git a/src/components/common/Error.tsx b/src/components/common/Error.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-import { Stack, Typography, styled } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
 
 import { APP_AUTHOR } from '../../config/constants';
 import { useLibraryTranslation } from '../../config/i18n';
@@ -12,12 +12,6 @@ import { HOME_ROUTE } from '../../config/routes';
 import LIBRARY from '../../langs/constants';
 import Seo from './Seo';
 
-const StyledLink = styled(Link)(({ theme }) => ({
-  display: 'block',
-  margin: 'auto',
-  marginTop: theme.spacing(2),
-}));
-
 type Props = {
   code?: keyof typeof ErrorMessages;
 };
@@ -37,11 +31,11 @@ const Error = ({ code = ERROR_UNEXPECTED_ERROR_CODE }: Props) => {
         <Typography variant="h4" align="center">
           {t(message)}
         </Typography>
-        <StyledLink href={HOME_ROUTE}>
+        <Box marginTop={2} component={Link} href={HOME_ROUTE}>
           <Typography variant="subtitle1">
             {t(LIBRARY.ERROR_RETURN_TO_HOME)}
           </Typography>
-        </StyledLink>
+        </Box>
       </Stack>
     </>
   );

diff --git a/src/components/layout/HeaderLeftContent.tsx b/src/components/layout/HeaderLeftContent.tsx
@@ -3,7 +3,10 @@ import React, { FC, useContext } from 'react';
 import { Box, SxProps } from '@mui/material';
 
 import { useLibraryTranslation } from '../../config/i18n';
-import { ALL_COLLECTIONS_ROUTE, MY_LIST_ROUTE } from '../../config/routes';
+import {
+  ALL_COLLECTIONS_ROUTE,
+  MY_LIKED_ITEMS_ROUTE,
+} from '../../config/routes';
 import {
   ALL_COLLECTIONS_HEADER_ID,
   HEADER_MY_LIST_ID,
@@ -25,7 +28,7 @@ const MyListHeaderLink = () => {
 
   return (
     <HeaderLink
-      href={MY_LIST_ROUTE}
+      href={MY_LIKED_ITEMS_ROUTE}
       text={t(LIBRARY.HEADER_MY_LISTS)}
       id={HEADER_MY_LIST_ID}
     />

diff --git a/src/components/layout/UserSwitchWrapper.tsx b/src/components/layout/UserSwitchWrapper.tsx
@@ -2,10 +2,14 @@ import dynamic from 'next/dynamic';
 
 import { FC, useContext } from 'react';
 
+import FavoriteIcon from '@mui/icons-material/Favorite';
 import Box from '@mui/material/Box';
 
 import { MEMBER_AVATAR_ICON_SIZE } from '../../config/constants';
+import { useLibraryTranslation } from '../../config/i18n';
 import { MEMBER_PROFILE_ROUTE, SIGN_IN_ROUTE } from '../../config/paths';
+import { MY_LIKED_ITEMS_ROUTE } from '../../config/routes';
+import LIBRARY from '../../langs/constants';
 import { QueryClientContext } from '../QueryClientContext';
 import MemberAvatar from './MemberAvatar';
 
@@ -24,7 +28,15 @@ const UserSwitchWrapper: FC<Props> = ({ ButtonContent }) => {
   const { hooks, mutations } = useContext(QueryClientContext);
   const { data: member, isLoading } = hooks.useCurrentMember();
   const { mutateAsync: signOut } = mutations.useSignOut();
-
+  const { t } = useLibraryTranslation();
+
+  const userItems = [
+    {
+      icon: <FavoriteIcon fontSize="large" />,
+      text: t(LIBRARY.LIKED_ITEMS),
+      redirect_path: MY_LIKED_ITEMS_ROUTE,
+    },
+  ];
   return (
     <Box mr={1}>
       <GraaspUserSwitch
@@ -41,6 +53,7 @@ const UserSwitchWrapper: FC<Props> = ({ ButtonContent }) => {
             memberId={m?.id}
           />
         )}
+        userMenuItems={userItems}
       />
     </Box>
   );

diff --git a/src/components/pages/MyFavorites.tsx b/src/components/pages/MyFavorites.tsx
@@ -19,7 +19,7 @@ const MyFavorites = ({ tab, index }: Props) => {
     <TabPanel value={tab} index={index}>
       <CollectionsGrid
         id={MY_FAVORITES_COLLECTIONS_ID}
-        collections={collections}
+        collections={collections as any}
         isLoading={isLoading}
       />
     </TabPanel>

diff --git a/src/components/pages/MyLikes.tsx b/src/components/pages/MyLikes.tsx
@@ -7,28 +7,20 @@ import { ItemRecord } from '@graasp/sdk/frontend';
 import { MY_LIKES_COLLECTIONS_ID } from '../../config/selectors';
 import { QueryClientContext } from '../QueryClientContext';
 import CollectionsGrid from '../collection/CollectionsGrid';
-import TabPanel from '../common/TabPanel';
 
-type Props = {
-  tab: number;
-  index: number;
-};
-
-const MyLikes = ({ tab, index }: Props) => {
+const MyLikes = () => {
   const { hooks } = useContext(QueryClientContext);
   const { data: member } = hooks.useCurrentMember();
   const { data: itemLikes, isLoading } = hooks.useLikesForMember(member?.id);
   const collections = itemLikes?.map((itemLike) => itemLike.item);
 
   return (
-    <TabPanel value={tab} index={index}>
-      <CollectionsGrid
-        id={MY_LIKES_COLLECTIONS_ID}
-        // todo: this is an issue because the ItemLike type uses Item instead of DiscriminatedItem
-        collections={collections as List<ItemRecord>}
-        isLoading={isLoading}
-      />
-    </TabPanel>
+    <CollectionsGrid
+      id={MY_LIKES_COLLECTIONS_ID}
+      // todo: this is an issue because the ItemLike type uses Item instead of DiscriminatedItem
+      collections={collections as List<ItemRecord>}
+      isLoading={isLoading}
+    />
   );
 };