From a70a5806adcb0d49b02496cf6bc56198999a0f40 Mon Sep 17 00:00:00 2001 From: Kim Lan Phan Hoang Date: Tue, 14 May 2024 16:22:27 +0200 Subject: [PATCH] feat: get item and does not show current marker on read (#117) --- src/components/Map.stories.tsx | 50 ++++++++++++++++--- src/components/Map.tsx | 4 +- src/components/context/QueryClientContext.tsx | 9 ++-- src/components/map/AddItemButton.tsx | 4 +- src/components/map/InitialSetup.tsx | 4 +- src/components/map/ItemsMarkers.tsx | 4 +- src/components/map/MapContent.tsx | 12 ++++- 7 files changed, 67 insertions(+), 20 deletions(-) diff --git a/src/components/Map.stories.tsx b/src/components/Map.stories.tsx index 453b78a..16d94c3 100644 --- a/src/components/Map.stories.tsx +++ b/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; -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) => ( +
+ +
+ ), + ], + // cannot play inside an iframe +} satisfies Story; diff --git a/src/components/Map.tsx b/src/components/Map.tsx index 6e4cca4..ea6b541 100644 --- a/src/components/Map.tsx +++ b/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 ( ['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, ], diff --git a/src/components/map/AddItemButton.tsx b/src/components/map/AddItemButton.tsx index c606f37..038b03b 100644 --- a/src/components/map/AddItemButton.tsx +++ b/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, diff --git a/src/components/map/InitialSetup.tsx b/src/components/map/InitialSetup.tsx index de28496..c9c8805 100644 --- a/src/components/map/InitialSetup.tsx +++ b/src/components/map/InitialSetup.tsx @@ -12,13 +12,13 @@ const InitialSetup = ({ setShowMap: Dispatch; 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(() => { diff --git a/src/components/map/ItemsMarkers.tsx b/src/components/map/ItemsMarkers.tsx index 99d2b26..206a25a 100644 --- a/src/components/map/ItemsMarkers.tsx +++ b/src/components/map/ItemsMarkers.tsx @@ -19,10 +19,10 @@ const ItemsMarkers = ({ }; }): JSX.Element | JSX.Element[] | undefined => { const groupRef = useRef(null); - const { useItemsInMap, itemId } = useQueryClientContext(); + const { useItemsInMap, item } = useQueryClientContext(); const { data: itemGeolocations } = useItemsInMap({ ...bounds, - parentItemId: itemId, + parentItemId: item?.id, keywords: tags, }); diff --git a/src/components/map/MapContent.tsx b/src/components/map/MapContent.tsx index 429eb2d..f2f1681 100644 --- a/src/components/map/MapContent.tsx +++ b/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 ( <> - + {canWrite && } ); };