From 899aa8c4bc5eb2429457b1e6428900915449aa92 Mon Sep 17 00:00:00 2001
From: Thibault Reidy <thibault.reidy@hotmail.ch>
Date: Tue, 24 Sep 2024 11:17:22 +0200
Subject: [PATCH] feat: use Thumbnails from PackedItem

---
 package.json                         |  2 +-
 src/modules/common/ItemCard.tsx      |  4 ++--
 src/modules/common/ItemThumbnail.tsx | 17 ++++++-----------
 src/modules/item/Item.tsx            | 14 ++++----------
 src/modules/item/SectionHeader.tsx   | 12 ++++--------
 yarn.lock                            | 10 +++++-----
 6 files changed, 22 insertions(+), 37 deletions(-)

diff --git a/package.json b/package.json
index 3143cdcf..0772897c 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@emotion/styled": "11.13.0",
     "@graasp/chatbox": "3.3.0",
     "@graasp/query-client": "3.23.0",
-    "@graasp/sdk": "4.29.1",
+    "@graasp/sdk": "4.31.0",
     "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.37.1",
     "@graasp/ui": "5.1.0",
diff --git a/src/modules/common/ItemCard.tsx b/src/modules/common/ItemCard.tsx
index 84b1eb2f..28bece0b 100644
--- a/src/modules/common/ItemCard.tsx
+++ b/src/modules/common/ItemCard.tsx
@@ -6,7 +6,7 @@ import CardActionArea from '@mui/material/CardActionArea';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
 
-import { DiscriminatedItem, ItemType, formatDate } from '@graasp/sdk';
+import { ItemType, PackedItem, formatDate } from '@graasp/sdk';
 
 import { usePlayerTranslation } from '@/config/i18n';
 
@@ -14,7 +14,7 @@ import { buildContentPagePath } from '../../config/paths';
 import ItemThumbnail from './ItemThumbnail';
 
 type Props = {
-  item: DiscriminatedItem;
+  item: PackedItem;
 };
 
 const SimpleCard = ({ item }: Props): JSX.Element => {
diff --git a/src/modules/common/ItemThumbnail.tsx b/src/modules/common/ItemThumbnail.tsx
index ea859998..fdf87634 100644
--- a/src/modules/common/ItemThumbnail.tsx
+++ b/src/modules/common/ItemThumbnail.tsx
@@ -1,25 +1,20 @@
 import {
-  DiscriminatedItem,
+  PackedItem,
   ThumbnailSize,
-  ThumbnailSizeType,
+  ThumbnailsBySize,
   getMimetype,
 } from '@graasp/sdk';
 import { ItemIcon } from '@graasp/ui';
 
-import { hooks } from '@/config/queryClient';
-
 type Props = {
-  item: DiscriminatedItem;
-  size?: ThumbnailSizeType;
+  item: PackedItem;
+  size?: keyof ThumbnailsBySize;
 };
 const ItemThumbnail = ({
   item,
-  size = ThumbnailSize.Small,
+  size = ThumbnailSize.Medium,
 }: Props): JSX.Element | null => {
-  const { data: thumbnailSrc } = hooks.useItemThumbnailUrl({
-    id: item.id,
-    size,
-  });
+  const thumbnailSrc = item.thumbnails?.[size];
 
   return (
     <ItemIcon
diff --git a/src/modules/item/Item.tsx b/src/modules/item/Item.tsx
index af1213da..82c76233 100644
--- a/src/modules/item/Item.tsx
+++ b/src/modules/item/Item.tsx
@@ -11,10 +11,8 @@ import {
   ActionTriggers,
   AppItemType,
   Context,
-  DiscriminatedItem,
   DocumentItemType,
   EtherpadItemType,
-  FolderItemType,
   H5PItemType,
   ItemType,
   LinkItemType,
@@ -23,7 +21,6 @@ import {
   PermissionLevel,
   S3FileItemType,
   ShortcutItemType,
-  ThumbnailSize,
 } from '@graasp/sdk';
 import { DEFAULT_LANG, FAILURE_MESSAGES } from '@graasp/translations';
 import {
@@ -356,14 +353,11 @@ const ShortcutContent = ({ item }: { item: ShortcutItemType }): JSX.Element => {
   );
 };
 
-const FolderButtonContent = ({ item }: { item: FolderItemType }) => {
+const FolderButtonContent = ({ item }: { item: PackedItem }) => {
   const [searchParams] = useSearchParams();
   const { itemId } = useParams();
   const { data: currentDisplayedItem } = useItem(itemId);
-  const { data: thumbnail } = hooks.useItemThumbnailUrl({
-    id: item.id,
-    size: ThumbnailSize.Medium,
-  });
+  const thumbnail = item.thumbnails?.medium;
 
   const newSearchParams = new URLSearchParams(searchParams.toString());
   newSearchParams.set('from', window.location.pathname);
@@ -390,7 +384,7 @@ const FolderButtonContent = ({ item }: { item: FolderItemType }) => {
 };
 
 type ItemContentProps = {
-  item: DiscriminatedItem;
+  item: PackedItem;
 };
 
 const ItemContent = ({ item }: ItemContentProps) => {
@@ -443,7 +437,7 @@ export const ItemContentWrapper = ({
 };
 
 type FolderContentProps = {
-  item: FolderItemType;
+  item: PackedItem;
   showPinnedOnly?: boolean;
 };
 const FolderContent = ({
diff --git a/src/modules/item/SectionHeader.tsx b/src/modules/item/SectionHeader.tsx
index 63172ccf..93300655 100644
--- a/src/modules/item/SectionHeader.tsx
+++ b/src/modules/item/SectionHeader.tsx
@@ -1,24 +1,20 @@
 import { Stack, Typography } from '@mui/material';
 
-import { FolderItemType, ThumbnailSize, formatDate } from '@graasp/sdk';
+import { PackedItem, formatDate } from '@graasp/sdk';
 import { TextDisplay, Thumbnail } from '@graasp/ui';
 
 import { usePlayerTranslation } from '@/config/i18n';
-import { hooks } from '@/config/queryClient';
 import { FOLDER_NAME_TITLE_CLASS } from '@/config/selectors';
 import { PLAYER } from '@/langs/constants';
 
-const { useItemThumbnailUrl } = hooks;
 type SectionHeaderProps = {
-  item: FolderItemType;
+  item: PackedItem;
 };
 
 const SectionHeader = ({ item }: SectionHeaderProps): JSX.Element => {
   const { t, i18n } = usePlayerTranslation();
-  const { data: thumbnailSrc } = useItemThumbnailUrl({
-    id: item.id,
-    size: ThumbnailSize.Medium,
-  });
+  const thumbnailSrc = item.thumbnails?.medium;
+
   return (
     <Stack direction="column" spacing={2}>
       <Stack direction="row" spacing={2} alignItems="center">
diff --git a/yarn.lock b/yarn.lock
index 92584370..998b46c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1580,9 +1580,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/sdk@npm:4.29.1":
-  version: 4.29.1
-  resolution: "@graasp/sdk@npm:4.29.1"
+"@graasp/sdk@npm:4.31.0":
+  version: 4.31.0
+  resolution: "@graasp/sdk@npm:4.31.0"
   dependencies:
     "@faker-js/faker": "npm:9.0.1"
     filesize: "npm:10.1.6"
@@ -1591,7 +1591,7 @@ __metadata:
   peerDependencies:
     date-fns: ^3 || ^4.0.0
     uuid: ^9 || ^10
-  checksum: 10/f35a4c2dfbc7b9ac7d2112536dcded3da6d7fb32a3f4593921329340f96f21ccd558f68a77d723828f23055a6fb4d77493effbc746986ce7fcce913f3775a725
+  checksum: 10/9b2bf85a51cc12b6f2bdefeb7bbc0c615db9ea3188ace6d460b14e61503763aeab13fd2aa1c4135cee602c2c58465895569b2845b91d942982f96f5594dfd1d4
   languageName: node
   linkType: hard
 
@@ -5949,7 +5949,7 @@ __metadata:
     "@eslint/js": "npm:9.10.0"
     "@graasp/chatbox": "npm:3.3.0"
     "@graasp/query-client": "npm:3.23.0"
-    "@graasp/sdk": "npm:4.29.1"
+    "@graasp/sdk": "npm:4.31.0"
     "@graasp/stylis-plugin-rtl": "npm:2.2.0"
     "@graasp/translations": "npm:1.37.1"
     "@graasp/ui": "npm:5.1.0"