feat: get item and does not show current marker on read (#117)

src/components/Map.stories.tsx

@@ -1,4 +1,8 @@
-import { FolderItemFactory, MemberFactory } from '@graasp/sdk';
+import {
+  MemberFactory,
+  PackedFolderItemFactory,
+  PermissionLevel,
+} from '@graasp/sdk';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -13,11 +17,11 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const item = FolderItemFactory();
+const item = PackedFolderItemFactory();
 
 export const Map = {
   args: {
-    itemId: item.id,
+    item,
     viewItem: () => ({}) as any,
     currentMember: MemberFactory(),
     useDeleteItemGeolocation: () => ({}) as any,
@@ -362,7 +366,7 @@ export const Map = {
 // it shows the current location otherwise
 export const MapSignedOut = {
   args: {
-    itemId: 'd5a1c73d-cd4d-4f20-8a91-3c689ee87ea4',
+    item: PackedFolderItemFactory(),
     viewItem: () => ({}) as any,
     currentMember: null,
     useDeleteItemGeolocation: () => ({}) as any,
@@ -385,7 +389,7 @@ export const MapSignedOut = {
 export const MapMobile = {
   parameters: { viewport: { defaultViewport: 'mobile1' } },
   args: {
-    itemId: item.id,
+    item,
     viewItem: () => ({}) as any,
     currentMember: MemberFactory(),
     useDeleteItemGeolocation: () => ({}) as any,
@@ -420,7 +424,7 @@ export const MapMobile = {
 export const MapSignOutMobile = {
   parameters: { viewport: { defaultViewport: 'mobile1' } },
   args: {
-    itemId: 'd5a1c73d-cd4d-4f20-8a91-3c689ee87ea4',
+    item: PackedFolderItemFactory(),
     viewItem: () => ({}) as any,
     currentMember: null,
     useDeleteItemGeolocation: () => ({}) as any,
@@ -442,7 +446,7 @@ export const MapSignOutMobile = {
 
 export const MapFrench = {
   args: {
-    itemId: 'd5a1c73d-cd4d-4f20-8a91-3c689ee87ea4',
+    item: PackedFolderItemFactory(),
     viewItem: () => ({}) as any,
     currentMember: MemberFactory({ extra: { lang: 'fr' } }),
     useDeleteItemGeolocation: () => ({}) as any,
@@ -461,3 +465,35 @@ export const MapFrench = {
   ],
   // cannot play inside an iframe
 } satisfies Story;
+
+export const MapRead = {
+  args: {
+    item: PackedFolderItemFactory({}, { permission: PermissionLevel.Read }),
+    viewItem: () => ({}) as any,
+    currentMember: MemberFactory({ extra: { lang: 'fr' } }),
+    useDeleteItemGeolocation: () => ({}) as any,
+    useItemsInMap: () =>
+      ({
+        data: [
+          {
+            lat: 46.51,
+            lng: 6.5,
+            addressLabel: 'EPFL',
+            item,
+          },
+        ],
+      }) as any,
+    useAddressFromGeolocation: () => ({ data: 'address' }) as any,
+    usePostItem: () => ({}) as any,
+    useRecycleItems: () => ({}) as any,
+    useSuggestionsForAddress: MOCK_USE_SUGGESTIONS as any,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ margin: 'auto', width: '95vw', height: '95vh' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  // cannot play inside an iframe
+} satisfies Story;

src/components/Map.tsx

@@ -20,7 +20,7 @@ import MapContent from './map/MapContent';
 type Props = QueryClientContextInterface;
 
 const Map = ({
-  itemId,
+  item,
   currentMember,
   useAddressFromGeolocation,
   useItemsInMap,
@@ -42,7 +42,7 @@ const Map = ({
 
   return (
     <QueryClientContextProvider
-      itemId={itemId}
+      item={item}
       useSuggestionsForAddress={useSuggestionsForAddress}
       currentMember={currentMember}
       useAddressFromGeolocation={useAddressFromGeolocation}

src/components/context/QueryClientContext.tsx

@@ -5,6 +5,7 @@ import {
   CompleteMember,
   DiscriminatedItem,
   ItemGeolocation,
+  PackedItem,
 } from '@graasp/sdk';
 
 type QueryClientHooks = ReturnType<typeof configureQueryClient>['hooks'];
@@ -13,7 +14,7 @@ type QueryClientMutations = ReturnType<
 >['mutations'];
 
 export interface QueryClientContextInterface {
-  itemId?: DiscriminatedItem['id'];
+  item?: PackedItem;
   currentMember?: CompleteMember | null;
   currentPosition?: { lat: number; lng: number };
   useAddressFromGeolocation: QueryClientHooks['useAddressFromGeolocation'];
@@ -55,7 +56,7 @@ export const QueryClientContextProvider = ({
   useDeleteItemGeolocation,
   useSuggestionsForAddress,
   viewItem,
-  itemId,
+  item,
   currentPosition,
   handleAddOnClick,
 }: QueryClientContextInterface & { children: JSX.Element }): JSX.Element => {
@@ -68,7 +69,7 @@ export const QueryClientContextProvider = ({
       usePostItem,
       useDeleteItemGeolocation,
       viewItem,
-      itemId,
+      item,
       useSuggestionsForAddress,
       currentPosition,
       handleAddOnClick,
@@ -82,7 +83,7 @@ export const QueryClientContextProvider = ({
       useDeleteItemGeolocation,
       useSuggestionsForAddress,
       viewItem,
-      itemId,
+      item,
       currentPosition,
       handleAddOnClick,
     ],

src/components/map/AddItemButton.tsx

@@ -27,7 +27,7 @@ const AddItemButton = ({ location }: Props): JSX.Element | null => {
   const {
     handleAddOnClick,
     usePostItem,
-    itemId: parentId,
+    item: parent,
   } = useQueryClientContext();
   const { t: commonT } = useCommonTranslation();
   const { mutate: postItem } = usePostItem();
@@ -40,7 +40,7 @@ const AddItemButton = ({ location }: Props): JSX.Element | null => {
     const { name, description }: any = Object.fromEntries(formData);
     if (location && name) {
       await postItem({
-        parentId,
+        parentId: parent?.id,
         name,
         description,
         type: ItemType.FOLDER,

src/components/map/InitialSetup.tsx

@@ -12,13 +12,13 @@ const InitialSetup = ({
   setShowMap: Dispatch<boolean>;
   currentPosition?: { lat: number; lng: number };
 }): null => {
-  const { useItemsInMap, itemId } = useQueryClientContext();
+  const { useItemsInMap, item } = useQueryClientContext();
   const [isInitial, setIsInitial] = useState(true);
   const map = useMap();
 
   // central point
   const { data: itemGeolocations } = useItemsInMap({
-    parentItemId: itemId,
+    parentItemId: item?.id,
   });
 
   useEffect(() => {

src/components/map/ItemsMarkers.tsx

@@ -19,10 +19,10 @@ const ItemsMarkers = ({
   };
 }): JSX.Element | JSX.Element[] | undefined => {
   const groupRef = useRef<any>(null);
-  const { useItemsInMap, itemId } = useQueryClientContext();
+  const { useItemsInMap, item } = useQueryClientContext();
   const { data: itemGeolocations } = useItemsInMap({
     ...bounds,
-    parentItemId: itemId,
+    parentItemId: item?.id,
     keywords: tags,
   });
 

src/components/map/MapContent.tsx

@@ -1,5 +1,8 @@
 import { useState } from 'react';
 
+import { PermissionLevel, PermissionLevelCompare } from '@graasp/sdk';
+
+import { useQueryClientContext } from '../context/QueryClientContext';
 import TopBar from '../topbar/TopBar';
 import CurrentLocationMarker from './CurrentLocationMarker';
 import CurrentMarker from './CurrentMarker';
@@ -11,6 +14,7 @@ const MapContent = ({
 }: {
   currentPosition?: { lat: number; lng: number };
 }): JSX.Element => {
+  const { item } = useQueryClientContext();
   const [bounds, setBounds] = useState<{
     lat1: number;
     lat2: number;
@@ -23,13 +27,19 @@ const MapContent = ({
     setTags(newTags);
   };
 
+  // can write in root or with right permission in item
+  const canWrite =
+    !item ||
+    (item.permission &&
+      PermissionLevelCompare.gte(item.permission, PermissionLevel.Write));
+
   return (
     <>
       <MapEvents setBounds={setBounds} />
       <TopBar tags={tags} onChange={onChangeTags} />
       <ItemsMarkers tags={tags} bounds={bounds} />
       <CurrentLocationMarker position={currentPosition} />
-      <CurrentMarker />
+      {canWrite && <CurrentMarker />}
     </>
   );
 };