fix: add limit on bookmarks shown (#916)

* fix: add limit on bookmarks shown * fix: grow item cards to fit the grid space * chore: rename component
graasp · Feb 14, 2025 · 1cfa568 · 1cfa568
1 parent 0573eea
commit 1cfa568
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 19 deletions.
diff --git a/src/locales/en/home.json b/src/locales/en/home.json
@@ -5,5 +5,9 @@
     "BOOKMARKED_ITEMS": "Bookmarks",
     "PUBLISHED_ITEMS": "Published",
     "RECYCLED_ITEMS": "Trash"
+  },
+  "BOOKMARKED_ITEMS": {
+    "SHOW_LESS": "Show less",
+    "SHOW_MORE": "Show more"
   }
 }
diff --git a/src/modules/home/bookmarks/ItemCard.tsx → src/modules/home/bookmarks/BookmarkCard.tsx b/src/modules/home/bookmarks/ItemCard.tsx → src/modules/home/bookmarks/BookmarkCard.tsx
@@ -19,7 +19,7 @@ type Props = {
   item: PackedItem;
 };
 
-export function ItemCard({ item }: Readonly<Props>): JSX.Element {
+export function BookmarkCard({ item }: Readonly<Props>): JSX.Element {
   const { i18n } = useTranslation(NS.Player);
 
   const itemId =
@@ -28,12 +28,13 @@ export function ItemCard({ item }: Readonly<Props>): JSX.Element {
       : item.id;
 
   return (
-    <Card id={`bookmark-${item.id}`}>
+    <Card sx={{ height: '100%' }} id={`bookmark-${item.id}`}>
       <Stack
         direction="row"
         alignItems="stretch"
         justifyContent="space-between"
         width="100%"
+        height="100%"
       >
         <CardActionAreaLink
           id={`bookmarkCardAction-${item.id}`}

diff --git a/src/modules/home/bookmarks/BookmarkedItems.tsx b/src/modules/home/bookmarks/BookmarkedItems.tsx
@@ -1,13 +1,22 @@
-import { type JSX, type ReactNode } from 'react';
+import { type JSX, type ReactNode, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
-import { Alert, Grid2 as Grid, Skeleton } from '@mui/material';
+import {
+  Alert,
+  Button,
+  Grid2 as Grid,
+  Skeleton,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
 
 import { v4 } from 'uuid';
 
+import { NS } from '@/config/constants';
 import { BOOKMARKED_ITEMS_ID } from '@/config/selectors';
 import { useBookmarkedItems } from '@/query/hooks/itemBookmark';
 
-import { ItemCard } from './ItemCard';
+import { BookmarkCard } from './BookmarkCard';
 
 const GridWrapper = ({ children }: { children: ReactNode }): JSX.Element => (
   <Grid size={{ xs: 12, sm: 4, md: 3, xl: 2 }}>{children}</Grid>
@@ -16,25 +25,57 @@ const GridWrapper = ({ children }: { children: ReactNode }): JSX.Element => (
 // mock data for placeholder skeleton
 const placeholderItems = Array(6).map(() => ({ id: v4() }));
 
+const useResponsiveMaxItems = () => {
+  const theme = useTheme();
+  const largerThanXl = useMediaQuery(theme.breakpoints.up('xl'));
+  const largerThanMd = useMediaQuery(theme.breakpoints.up('md'));
+  const largerThanSm = useMediaQuery(theme.breakpoints.up('sm'));
+
+  if (largerThanXl) {
+    return 24;
+  }
+  if (largerThanMd) {
+    return 12;
+  }
+  if (largerThanSm) {
+    return 6;
+  }
+  return 4;
+};
+
 export function BookmarkedItems() {
+  const { t } = useTranslation(NS.Home, { keyPrefix: 'BOOKMARKED_ITEMS' });
   const { data: bookmarkedItems, isPending, isError } = useBookmarkedItems();
+  const [showAll, setShowAll] = useState(false);
+
+  const maxItems = useResponsiveMaxItems();
 
   if (bookmarkedItems) {
+    const shownBookmarks = showAll
+      ? bookmarkedItems
+      : bookmarkedItems.slice(0, maxItems);
     return (
-      <Grid
-        id={BOOKMARKED_ITEMS_ID}
-        width="100%"
-        container
-        // needs to be "spacing" because with gap it does not fill the whole line
-        spacing={2}
-        justifyItems="center"
-      >
-        {bookmarkedItems.map(({ item }) => (
-          <GridWrapper key={item.id}>
-            <ItemCard key={item.id} item={item} />
-          </GridWrapper>
-        ))}
-      </Grid>
+      <>
+        <Grid
+          id={BOOKMARKED_ITEMS_ID}
+          width="100%"
+          container
+          // needs to be "spacing" because with gap it does not fill the whole line
+          spacing={2}
+          justifyItems="center"
+        >
+          {shownBookmarks.map(({ item }) => (
+            <GridWrapper key={item.id}>
+              <BookmarkCard key={item.id} item={item} />
+            </GridWrapper>
+          ))}
+        </Grid>
+        {maxItems < bookmarkedItems.length ? (
+          <Button onClick={() => setShowAll((s) => !s)}>
+            {showAll ? t('SHOW_LESS') : t('SHOW_MORE')}
+          </Button>
+        ) : null}
+      </>
     );
   }