fix: use thumbnails and display date on cards (#498)

* fix: use thumbnails and display date on cards

* fix: add a fallback if thumbnail is not found

* fix: use ItemIcon in ItemThumbnail

package.json

@@ -33,52 +33,52 @@
   },
   "dependencies": {
     "@emotion/cache": "11.11.0",
-    "@emotion/react": "11.11.1",
+    "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "3.0.3",
-    "@graasp/query-client": "2.4.2",
+    "@graasp/query-client": "2.5.0",
     "@graasp/sdk": "3.6.0",
-    "@graasp/translations": "1.21.1",
+    "@graasp/translations": "1.23.0",
     "@graasp/ui": "4.5.1",
-    "@mui/icons-material": "5.14.19",
+    "@mui/icons-material": "5.15.7",
     "@mui/lab": "5.0.0-alpha.151",
-    "@mui/material": "5.14.19",
-    "@sentry/react": "7.93.0",
+    "@mui/material": "5.15.7",
+    "@sentry/react": "7.99.0",
     "classnames": "2.5.1",
-    "i18next": "23.7.7",
+    "i18next": "23.7.16",
     "lodash.truncate": "4.4.2",
     "react": "18.2.0",
     "react-accessible-treeview": "2.8.3",
     "react-dom": "18.2.0",
     "react-ga4": "2.1.0",
     "react-i18next": "13.5.0",
-    "react-intersection-observer": "9.5.3",
-    "react-router": "6.21.3",
-    "react-router-dom": "6.21.3",
+    "react-intersection-observer": "9.6.0",
+    "react-router": "6.22.0",
+    "react-router-dom": "6.22.0",
     "react-toastify": "10.0.4",
     "stylis": "4.3.1",
     "stylis-plugin-rtl": "2.1.1",
     "uuid": "9.0.1"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "18.6.0",
-    "@cypress/code-coverage": "3.12.18",
+    "@cypress/code-coverage": "3.12.19",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
     "@types/lodash.truncate": "^4.4.9",
-    "@types/node": "^20.10.1",
-    "@types/react": "18.2.48",
-    "@types/react-dom": "^18.2.17",
-    "@types/uuid": "9.0.7",
+    "@types/node": "^20.11.16",
+    "@types/react": "18.2.51",
+    "@types/react-dom": "^18.2.18",
+    "@types/uuid": "9.0.8",
     "@typescript-eslint/eslint-plugin": "6.20.0",
     "@typescript-eslint/parser": "6.20.0",
-    "@vitejs/plugin-react": "^4.2.0",
-    "commitlint": "18.4.4",
+    "@vitejs/plugin-react": "^4.2.1",
+    "commitlint": "18.6.0",
     "concurrently": "8.2.2",
-    "cypress": "13.6.3",
+    "cypress": "13.6.4",
     "cypress-iframe": "1.0.1",
     "cypress-vite": "1.5.0",
     "env-cmd": "10.1.0",
-    "eslint": "^8.54.0",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-typescript": "3.6.1",
@@ -87,16 +87,13 @@
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "http-status-codes": "2.3.0",
-    "husky": "8.0.3",
+    "husky": "9.0.10",
     "prettier": "3.2.4",
     "rollup-plugin-visualizer": "5.12.0",
-    "typescript": "^5.3.2",
-    "vite": "^5.0.4",
-    "vite-plugin-checker": "^0.6.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12",
+    "vite-plugin-checker": "^0.6.4",
     "vite-plugin-istanbul": "5.0.0"
   },
-  "resolutions": {
-    "@graasp/sdk": "3.6.0"
-  },
   "packageManager": "[email protected]"
 }

src/config/i18n.ts

@@ -21,5 +21,4 @@ i18n.addResourceBundle('ar', PLAYER_NAMESPACE, ar);
 export const usePlayerTranslation = () => useTranslation(PLAYER_NAMESPACE);
 export const useCommonTranslation = () => useTranslation(namespaces.common);
 export const useMessagesTranslation = () => useTranslation(namespaces.messages);
-export const useAuthTranslation = () => useTranslation(namespaces.auth);
 export default i18n;

src/langs/constants.ts

@@ -14,4 +14,5 @@ export const PLAYER = {
   ERROR_FETCHING_ITEM: 'ERROR_FETCHING_ITEM',
   ERROR_ACCESSING_ITEM: 'ERROR_ACCESSING_ITEM',
   ERROR_ACCESSING_ITEM_HELPER: 'ERROR_ACCESSING_ITEM_HELPER',
+  SIGN_IN_BUTTON_TEXT: 'SIGN_IN_BUTTON_TEXT',
 };

src/langs/en.json

@@ -12,5 +12,6 @@
   "DRAWER_ARIAL_LABEL": "Open drawer",
   "ERROR_FETCHING_ITEM": "There was an error fetching the requested item",
   "ERROR_ACCESSING_ITEM": "You cannot access this item",
-  "ERROR_ACCESSING_ITEM_HELPER": "Your current account does not have the rights to access this item."
+  "ERROR_ACCESSING_ITEM_HELPER": "Your current account does not have the rights to access this item.",
+  "SIGN_IN_BUTTON_TEXT": "Sign In"
 }

src/modules/common/ItemCard.tsx

@@ -6,52 +6,51 @@ import CardActionArea from '@mui/material/CardActionArea';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
 
-import { DiscriminatedItem, ItemType, Triggers } from '@graasp/sdk';
-import { ItemIcon } from '@graasp/ui';
+import { DiscriminatedItem, Triggers, formatDate } from '@graasp/sdk';
 
+import { usePlayerTranslation } from '@/config/i18n';
 import { mutations } from '@/config/queryClient';
 
 import { buildMainPath } from '../../config/paths';
 import { HIDDEN_STYLE } from './HiddenWrapper';
+import ItemThumbnail from './ItemThumbnail';
 
 type Props = {
   item: DiscriminatedItem;
   isHidden?: boolean;
 };
 
 const SimpleCard = ({ item, isHidden = false }: Props): JSX.Element => {
+  const { i18n } = usePlayerTranslation();
   const link = buildMainPath({ rootId: item.id });
-  const extra =
-    item.type === ItemType.LOCAL_FILE || item.type === ItemType.S3_FILE
-      ? item.extra
-      : undefined;
 
   const { mutate: triggerAction } = mutations.usePostItemAction();
   const handleCardClick = () => {
     // trigger player Action for item view
     triggerAction({ itemId: item.id, payload: { type: Triggers.ItemView } });
   };
+
   return (
     <Card style={isHidden ? HIDDEN_STYLE : undefined}>
       <CardActionArea component={Link} to={link} onClick={handleCardClick}>
         <CardContent>
-          <Stack direction="row" alignItems="center">
-            <ItemIcon
-              type={item.type}
-              extra={extra}
-              alt={item.name}
-              sx={{ mr: 1 }}
-            />
-            <Typography
-              variant="h5"
-              component="h2"
-              alignItems="center"
-              textOverflow="ellipsis"
-              overflow="hidden"
-              noWrap
-            >
-              {item.name}
-            </Typography>
+          <Stack direction="row" alignItems="center" spacing={2}>
+            <ItemThumbnail item={item} />
+            <Stack minWidth={0}>
+              <Typography
+                variant="h5"
+                component="h2"
+                alignItems="center"
+                textOverflow="ellipsis"
+                overflow="hidden"
+                noWrap
+              >
+                {item.name}
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                {formatDate(item.updatedAt, { locale: i18n.language })}
+              </Typography>
+            </Stack>
           </Stack>
         </CardContent>
       </CardActionArea>

src/modules/common/ItemThumbnail.tsx

@@ -0,0 +1,34 @@
+import {
+  DiscriminatedItem,
+  ThumbnailSize,
+  ThumbnailSizeType,
+  getMimetype,
+} from '@graasp/sdk';
+import { ItemIcon } from '@graasp/ui';
+
+import { hooks } from '@/config/queryClient';
+
+type Props = {
+  item: DiscriminatedItem;
+  size?: ThumbnailSizeType;
+};
+const ItemThumbnail = ({
+  item,
+  size = ThumbnailSize.Small,
+}: Props): JSX.Element | null => {
+  const { data: thumbnailSrc } = hooks.useItemThumbnailUrl({
+    id: item.id,
+    size,
+  });
+
+  return (
+    <ItemIcon
+      type={item.type}
+      mimetype={getMimetype(item.extra)}
+      alt={item.name}
+      iconSrc={thumbnailSrc}
+      sx={{ borderRadius: 1 }}
+    />
+  );
+};
+export default ItemThumbnail;

src/modules/item/ItemForbiddenScreen.tsx

@@ -1,24 +1,20 @@
-import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import BlockIcon from '@mui/icons-material/Block';
 import { IconButton, Stack, Typography } from '@mui/material';
 
-import { AUTH } from '@graasp/translations';
 import { Button } from '@graasp/ui';
 
-import { useAuthTranslation } from '@/config/i18n';
 import { PLAYER } from '@/langs/constants';
 import UserSwitchWrapper from '@/modules/userSwitch/UserSwitchWrapper';
 
-const ItemForbiddenScreen: FC = () => {
-  const { t: translateAuth } = useAuthTranslation();
+const ItemForbiddenScreen = (): JSX.Element => {
   const { t } = useTranslation();
 
   const ButtonContent = (
     <Button variant="outlined" startIcon={<AccountCircleIcon />}>
-      {translateAuth(AUTH.SWITCH_ACCOUNT_TEXT)}
+      {t(PLAYER.SIGN_IN_BUTTON_TEXT)}
     </Button>
   );
 

src/modules/main/ItemGrid.tsx

@@ -1,4 +1,5 @@
-import { Box, Grid, Typography } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
+import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
 
 import { DiscriminatedItem } from '@graasp/sdk';
 
@@ -20,18 +21,18 @@ const ItemGrid = ({ isLoading, items, title }: Props): JSX.Element | null => {
     return null;
   }
   return (
-    <Box width="100%">
-      <Typography variant="h4" mb={1}>
+    <Stack direction="column" width="100%">
+      <Typography variant="h4" component="h1" mb={1}>
         {title}
       </Typography>
-      <Grid container spacing={3} justifyItems="center">
+      <Grid2 container spacing={3} justifyItems="center">
         {items?.map((item) => (
-          <Grid key={item.id} item lg={3} md={4} sm={6}>
+          <Grid2 key={item.id} xs={12} sm={6} md={4} xl={2}>
             <ItemCard item={item} />
-          </Grid>
+          </Grid2>
         ))}
-      </Grid>
-    </Box>
+      </Grid2>
+    </Stack>
   );
 };