feat: show item thumbnails

example/App.tsx

@@ -31,6 +31,7 @@ const App = (): JSX.Element => {
           useSuggestionsForAddress={hooks.useSuggestionsForAddress}
           usePostItem={mutations.usePostItem}
           useRecycleItems={mutations.useRecycleItems}
+          useItemThumbnailUrl={hooks.useItemThumbnailUrl}
           lang="fr"
         />
       </I18nextProvider>

example/package.json

@@ -21,8 +21,8 @@
   "dependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@graasp/query-client": "github:graasp/graasp-query-client#item-packed",
-    "@graasp/sdk": "github:graasp/graasp-sdk#packed",
+    "@graasp/query-client": "3.17.0",
+    "@graasp/sdk": "4.20.0",
     "@graasp/translations": "1.23.0",
     "@graasp/ui": "4.5.1",
     "@mui/icons-material": "5.15.20",

package.json

@@ -78,7 +78,7 @@
   "devDependencies": {
     "@commitlint/cli": "17.8.1",
     "@commitlint/config-conventional": "17.8.1",
-    "@graasp/query-client": "2.9.1",
+    "@graasp/query-client": "3.17.0",
     "@storybook/addon-coverage": "1.0.4",
     "@storybook/addon-essentials": "7.6.19",
     "@storybook/addon-interactions": "7.6.19",

src/components/Map.stories.tsx

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

src/components/Map.tsx

@@ -29,6 +29,7 @@ const Map = ({
   usePostItem,
   viewItem,
   useDeleteItemGeolocation,
+  useItemThumbnailUrl,
   handleAddOnClick,
   currentPosition,
   viewItemInBuilder,
@@ -49,6 +50,7 @@ const Map = ({
       currentPosition={currentPosition}
       handleAddOnClick={handleAddOnClick}
       item={item}
+      useItemThumbnailUrl={useItemThumbnailUrl}
       useAddressFromGeolocation={useAddressFromGeolocation}
       useDeleteItemGeolocation={useDeleteItemGeolocation}
       useItemsInMap={useItemsInMap}

src/components/context/QueryClientContext.tsx

@@ -22,6 +22,7 @@ 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;
@@ -46,6 +47,7 @@ export const QueryClientContext = createContext<QueryClientContextInterface>({
   useDeleteItemGeolocation: () => ({}) as any,
   viewItem: () => ({}) as any,
   viewItemInBuilder: () => ({}) as any,
+  useItemThumbnailUrl: () => ({ data: null }) as any,
 });
 
 export const QueryClientContextProvider = ({
@@ -57,6 +59,7 @@ export const QueryClientContextProvider = ({
   usePostItem,
   useDeleteItemGeolocation,
   useSuggestionsForAddress,
+  useItemThumbnailUrl,
   viewItem,
   item,
   currentPosition,
@@ -72,6 +75,7 @@ export const QueryClientContextProvider = ({
       usePostItem,
       useDeleteItemGeolocation,
       viewItem,
+      useItemThumbnailUrl,
       item,
       useSuggestionsForAddress,
       currentPosition,
@@ -86,6 +90,7 @@ export const QueryClientContextProvider = ({
       usePostItem,
       useDeleteItemGeolocation,
       useSuggestionsForAddress,
+      useItemThumbnailUrl,
       viewItem,
       item,
       currentPosition,

src/components/map/ItemMarker.tsx

@@ -0,0 +1,39 @@
+import { Marker } from 'react-leaflet';
+
+import { ItemGeolocation, ThumbnailSize } from '@graasp/sdk';
+
+import L from 'leaflet';
+
+import { useQueryClientContext } from '../context/QueryClientContext';
+import { marker } from '../icons/icons';
+import MarkerPopup from './MarkerPopup';
+
+const ItemMarker = ({
+  geolocation,
+}: {
+  geolocation: ItemGeolocation;
+}): JSX.Element => {
+  const { useItemThumbnailUrl } = useQueryClientContext();
+  const { data: thumbnailUrl } = useItemThumbnailUrl({
+    item: geolocation.item,
+    size: ThumbnailSize.Small,
+  });
+
+  return (
+    <Marker
+      icon={
+        thumbnailUrl
+          ? L.icon({
+              iconUrl: thumbnailUrl,
+              iconSize: [30, 30],
+            })
+          : marker
+      }
+      position={[geolocation.lat, geolocation.lng]}
+    >
+      <MarkerPopup geolocation={geolocation} />
+    </Marker>
+  );
+};
+
+export default ItemMarker;

src/components/map/ItemsMarkers.tsx

@@ -1,12 +1,11 @@
 import { useEffect, useRef, useState } from 'react';
-import { FeatureGroup, Marker, useMap } from 'react-leaflet';
+import { FeatureGroup, useMap } from 'react-leaflet';
 import MarkerClusterGroup from 'react-leaflet-cluster';
 
 import { Box, CircularProgress, Stack } from '@mui/material';
 
 import { useQueryClientContext } from '../context/QueryClientContext';
-import { marker } from '../icons/icons';
-import MarkerPopup from './MarkerPopup';
+import ItemMarker from './ItemMarker';
 
 const ItemsMarkers = ({
   tags,
@@ -69,13 +68,7 @@ const ItemsMarkers = ({
     <FeatureGroup ref={groupRef}>
       <MarkerClusterGroup chunkedLoading showCoverageOnHover={false}>
         {itemGeolocations?.map((geoloc) => (
-          <Marker
-            key={geoloc.id}
-            icon={marker}
-            position={[geoloc.lat, geoloc.lng]}
-          >
-            <MarkerPopup geolocation={geoloc} />
-          </Marker>
+          <ItemMarker key={geoloc.id} geolocation={geoloc} />
         ))}
       </MarkerClusterGroup>
     </FeatureGroup>

src/components/map/MarkerPopup.tsx

@@ -6,6 +6,7 @@ import {
   ItemGeolocation,
   PermissionLevel,
   PermissionLevelCompare,
+  ThumbnailSize,
 } from '@graasp/sdk';
 
 import { useMapTranslation } from '../../config/i18n';
@@ -20,27 +21,36 @@ const MarkerPopup = ({
   geolocation: ItemGeolocation;
 }): JSX.Element => {
   const { item } = geolocation;
-  const { viewItemInBuilder } = useQueryClientContext();
+  const { viewItemInBuilder, useItemThumbnailUrl } = useQueryClientContext();
   const { t } = useMapTranslation();
+  const { data: thumbnailUrl } = useItemThumbnailUrl({
+    item: geolocation.item,
+    size: ThumbnailSize.Small,
+  });
 
   return (
     <Popup autoPan={false}>
-      <Tooltip title={t('VIEW_ITEM_BUILDER_TOOLTIP')}>
-        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-        <Link
-          component={Typography}
-          onClick={() => viewItemInBuilder(item)}
-          variant="h5"
-          sx={{
-            '&:hover': {
-              cursor: 'pointer',
-            },
-          }}
-        >
-          {item.name}
-        </Link>
-      </Tooltip>
-      {/* TODO: slice and show html  */}
+      <Stack direction="row" gap={1} alignItems="center" mt={1}>
+        {thumbnailUrl && (
+          <img alt={item.name} src={thumbnailUrl} width={30} height={30} />
+        )}
+        <Tooltip title={t('VIEW_ITEM_BUILDER_TOOLTIP')}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <Link
+            component={Typography}
+            onClick={() => viewItemInBuilder(item)}
+            variant="h5"
+            sx={{
+              margin: '0 !important',
+              '&:hover': {
+                cursor: 'pointer',
+              },
+            }}
+          >
+            {item.name}
+          </Link>
+        </Tooltip>
+      </Stack>
       {item.description && (
         <Typography
           component="p"