Merge pull request #153 from graasp/1366-adds-thumbnails-in-packed-item

feat: use thumbnails from PackedItem
graasp · Sep 26, 2024 · 4762056 · 4762056
2 parents a08a388 + 1afa0dd
commit 4762056
Show file tree

Hide file tree

Showing 9 changed files with 12 additions and 64 deletions.
diff --git a/example/App.tsx b/example/App.tsx
@@ -31,7 +31,6 @@ const App = (): JSX.Element => {
           useSuggestionsForAddress={hooks.useSuggestionsForAddress}
           usePostItem={mutations.usePostItem}
           useRecycleItems={mutations.useRecycleItems}
-          useItemThumbnailUrl={hooks.useItemThumbnailUrl}
           lang="fr"
         />
       </I18nextProvider>

diff --git a/example/package.json b/example/package.json
@@ -22,7 +22,7 @@
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "@graasp/query-client": "3.17.0",
-    "@graasp/sdk": "4.20.0",
+    "@graasp/sdk": "4.31.0",
     "@graasp/translations": "1.23.0",
     "@graasp/ui": "4.5.1",
     "@mui/icons-material": "5.15.20",

diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "@graasp/query-client": "3.17.0",
-    "@graasp/sdk": "4.29.1",
+    "@graasp/sdk": "4.31.0",
     "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.30.3",
     "@graasp/ui": "5.0.0",

diff --git a/src/components/Map.stories.tsx b/src/components/Map.stories.tsx
@@ -26,7 +26,6 @@ export const Map = {
     viewItem: () => ({}) as any,
     currentMember: MemberFactory(),
     useDeleteItemGeolocation: () => ({}) as any,
-    useItemThumbnailUrl: () => ({}) as any,
     useItemsInMap: () =>
       ({
         data: [
@@ -377,7 +376,6 @@ export const MapSignedOut = {
     usePostItem: () => ({}) as any,
     useRecycleItems: () => ({}) as any,
     useSuggestionsForAddress: MOCK_USE_SUGGESTIONS as any,
-    useItemThumbnailUrl: () => ({}) as any,
   },
   decorators: [
     (Story) => (
@@ -411,7 +409,6 @@ export const MapMobile = {
     usePostItem: () => ({}) as any,
     useRecycleItems: () => ({}) as any,
     useSuggestionsForAddress: MOCK_USE_SUGGESTIONS as any,
-    useItemThumbnailUrl: () => ({}) as any,
   },
   decorators: [
     (Story) => (
@@ -437,7 +434,6 @@ export const MapSignOutMobile = {
     usePostItem: () => ({}) as any,
     useRecycleItems: () => ({}) as any,
     useSuggestionsForAddress: MOCK_USE_SUGGESTIONS as any,
-    useItemThumbnailUrl: () => ({}) as any,
   },
   decorators: [
     (Story) => (
@@ -460,7 +456,6 @@ export const MapFrench = {
     usePostItem: () => ({}) as any,
     useRecycleItems: () => ({}) as any,
     useSuggestionsForAddress: MOCK_USE_SUGGESTIONS as any,
-    useItemThumbnailUrl: () => ({}) as any,
   },
   decorators: [
     (Story) => (
@@ -482,7 +477,6 @@ export const MapRead = {
     },
     currentMember: MemberFactory({ extra: { lang: 'fr' } }),
     useDeleteItemGeolocation: () => ({}) as any,
-    useItemThumbnailUrl: () => ({}) as any,
     useItemsInMap: () =>
       ({
         data: [

diff --git a/src/components/Map.tsx b/src/components/Map.tsx
@@ -30,7 +30,6 @@ const MapComponent = ({
   usePostItem,
   viewItem,
   useDeleteItemGeolocation,
-  useItemThumbnailUrl,
   handleAddOnClick,
   currentPosition,
   viewItemInBuilder,
@@ -51,7 +50,6 @@ const MapComponent = ({
       currentPosition={currentPosition}
       handleAddOnClick={handleAddOnClick}
       item={item}
-      useItemThumbnailUrl={useItemThumbnailUrl}
       useAddressFromGeolocation={useAddressFromGeolocation}
       useDeleteItemGeolocation={useDeleteItemGeolocation}
       useItemsInMap={useItemsInMap}

diff --git a/src/components/context/QueryClientContext.tsx b/src/components/context/QueryClientContext.tsx
@@ -22,7 +22,6 @@ export interface QueryClientContextInterface {
   useRecycleItems: QueryClientMutations['useRecycleItems'];
   usePostItem: QueryClientMutations['usePostItem'];
   useDeleteItemGeolocation: QueryClientMutations['useDeleteItemGeolocation'];
-  useItemThumbnailUrl: QueryClientHooks['useItemThumbnailUrl'];
   useSuggestionsForAddress: QueryClientHooks['useSuggestionsForAddress'];
   viewItem: (item: DiscriminatedItem) => void;
   viewItemInBuilder: (item: DiscriminatedItem) => void;
@@ -47,7 +46,6 @@ export const QueryClientContext = createContext<QueryClientContextInterface>({
   useDeleteItemGeolocation: () => ({}) as any,
   viewItem: () => ({}) as any,
   viewItemInBuilder: () => ({}) as any,
-  useItemThumbnailUrl: () => ({ data: null }) as any,
 });
 
 export const QueryClientContextProvider = ({
@@ -59,7 +57,6 @@ export const QueryClientContextProvider = ({
   usePostItem,
   useDeleteItemGeolocation,
   useSuggestionsForAddress,
-  useItemThumbnailUrl,
   viewItem,
   item,
   currentPosition,
@@ -75,7 +72,6 @@ export const QueryClientContextProvider = ({
       usePostItem,
       useDeleteItemGeolocation,
       viewItem,
-      useItemThumbnailUrl,
       item,
       useSuggestionsForAddress,
       currentPosition,
@@ -90,7 +86,6 @@ export const QueryClientContextProvider = ({
       usePostItem,
       useDeleteItemGeolocation,
       useSuggestionsForAddress,
-      useItemThumbnailUrl,
       viewItem,
       item,
       currentPosition,

diff --git a/src/components/map/ItemMarker.tsx b/src/components/map/ItemMarker.tsx
@@ -1,10 +1,9 @@
 import { Marker } from 'react-leaflet';
 
-import { ItemGeolocation, ThumbnailSize } from '@graasp/sdk';
+import { ItemGeolocation } from '@graasp/sdk';
 
 import L from 'leaflet';
 
-import { useQueryClientContext } from '../context/QueryClientContext';
 import { marker } from '../icons/icons';
 import MarkerPopup from './MarkerPopup';
 
@@ -13,11 +12,7 @@ const ItemMarker = ({
 }: {
   geolocation: ItemGeolocation;
 }): JSX.Element => {
-  const { useItemThumbnailUrl } = useQueryClientContext();
-  const { data: thumbnailUrl } = useItemThumbnailUrl({
-    item: geolocation.item,
-    size: ThumbnailSize.Small,
-  });
+  const thumbnailUrl = geolocation.item.thumbnails?.small;
 
   return (
     <Marker

diff --git a/src/components/map/MarkerPopup.tsx b/src/components/map/MarkerPopup.tsx
@@ -6,7 +6,6 @@ import {
   ItemGeolocation,
   PermissionLevel,
   PermissionLevelCompare,
-  ThumbnailSize,
 } from '@graasp/sdk';
 
 import { useMapTranslation } from '../../config/i18n';
@@ -21,12 +20,9 @@ const MarkerPopup = ({
   geolocation: ItemGeolocation;
 }): JSX.Element => {
   const { item } = geolocation;
-  const { viewItemInBuilder, useItemThumbnailUrl } = useQueryClientContext();
+  const { viewItemInBuilder } = useQueryClientContext();
   const { t } = useMapTranslation();
-  const { data: thumbnailUrl } = useItemThumbnailUrl({
-    item: geolocation.item,
-    size: ThumbnailSize.Small,
-  });
+  const thumbnailUrl = geolocation.item.thumbnails?.small;
 
   return (
     <Popup autoPan={false}>

diff --git a/yarn.lock b/yarn.lock
@@ -2275,13 +2275,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@faker-js/faker@npm:8.4.1":
-  version: 8.4.1
-  resolution: "@faker-js/faker@npm:8.4.1"
-  checksum: 10/5983c2ea64f26055ad6648de748878e11ebe2fb751e3c7435ae141cdffabc2dccfe4c4f49da69a3d2add71e21b415c683ac5fba196fab0d5ed6779fbec436c80
-  languageName: node
-  linkType: hard
-
 "@faker-js/faker@npm:9.0.1":
   version: 9.0.1
   resolution: "@faker-js/faker@npm:9.0.1"
@@ -2352,7 +2345,7 @@ __metadata:
     "@emotion/react": "npm:11.11.4"
     "@emotion/styled": "npm:11.11.5"
     "@graasp/query-client": "npm:3.17.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.30.3"
     "@graasp/ui": "npm:5.0.0"
@@ -2454,24 +2447,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/sdk@npm:4.20.0":
-  version: 4.20.0
-  resolution: "@graasp/sdk@npm:4.20.0"
-  dependencies:
-    "@faker-js/faker": "npm:8.4.1"
-    filesize: "npm:10.1.4"
-    js-cookie: "npm:3.0.5"
-    validator: "npm:13.12.0"
-  peerDependencies:
-    date-fns: ^3
-    uuid: ^9 || ^10.0.0
-  checksum: 10/81e336d68094bcd234b4983217ce9f05d41501032fac00810bf927b8289ef933e18cdfb0e1b0275df6af5a7683b54a8ebf509134aa95b4c7ecfce4a5f313752d
-  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"
@@ -2480,7 +2458,7 @@ __metadata:
   peerDependencies:
     date-fns: ^3 || ^4.0.0
     uuid: ^9 || ^10
-  checksum: 10/f35a4c2dfbc7b9ac7d2112536dcded3da6d7fb32a3f4593921329340f96f21ccd558f68a77d723828f23055a6fb4d77493effbc746986ce7fcce913f3775a725
+  checksum: 10/9b2bf85a51cc12b6f2bdefeb7bbc0c615db9ea3188ace6d460b14e61503763aeab13fd2aa1c4135cee602c2c58465895569b2845b91d942982f96f5594dfd1d4
   languageName: node
   linkType: hard
 
@@ -10052,7 +10030,7 @@ __metadata:
     "@emotion/react": "npm:11.11.4"
     "@emotion/styled": "npm:11.11.5"
     "@graasp/query-client": "npm:3.17.0"
-    "@graasp/sdk": "npm:4.20.0"
+    "@graasp/sdk": "npm:4.31.0"
     "@graasp/translations": "npm:1.23.0"
     "@graasp/ui": "npm:4.5.1"
     "@mui/icons-material": "npm:5.15.20"
@@ -10390,13 +10368,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"filesize@npm:10.1.4":
-  version: 10.1.4
-  resolution: "filesize@npm:10.1.4"
-  checksum: 10/ac2b95f4ee8d42ad4b12f8f918baeb1127065dcb319abca30c0d9ef115b602e31a06c8150953b13dc52e52ebb1238e18e6001ab5fca14a10957e788bd6012f1c
-  languageName: node
-  linkType: hard
-
 "filesize@npm:10.1.6":
   version: 10.1.6
   resolution: "filesize@npm:10.1.6"