diff --git a/package.json b/package.json index 223e00200..0773e0ecb 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@emotion/react": "11.11.4", "@emotion/styled": "11.11.5", "@graasp/chatbox": "3.1.0", - "@graasp/map": "1.12.1", + "@graasp/map": "1.14.0", "@graasp/query-client": "3.9.0", "@graasp/sdk": "4.12.0", "@graasp/translations": "1.28.0", diff --git a/src/components/item/MapView.tsx b/src/components/item/MapView.tsx index 571836d90..37363818b 100644 --- a/src/components/item/MapView.tsx +++ b/src/components/item/MapView.tsx @@ -16,6 +16,7 @@ type Props = { title?: string; height?: string; viewItem: (item: DiscriminatedItem) => void; + viewItemInBuilder: (item: DiscriminatedItem) => void; enableGeolocation?: boolean; }; @@ -83,6 +84,7 @@ const MapView = ({ title, height = '100vh', viewItem, + viewItemInBuilder, enableGeolocation = true, }: Props): JSX.Element => { const { data: currentMember } = hooks.useCurrentMember(); @@ -131,6 +133,7 @@ const MapView = ({ useSuggestionsForAddress={hooks.useSuggestionsForAddress} useItemsInMap={hooks.useItemsInMap} viewItem={viewItem} + viewItemInBuilder={viewItemInBuilder} currentMember={currentMember} item={parent} // use builder modal to add new item if the screen is big enough diff --git a/src/components/item/header/ItemHeaderActions.tsx b/src/components/item/header/ItemHeaderActions.tsx index 63d5b21a5..33261f5e9 100644 --- a/src/components/item/header/ItemHeaderActions.tsx +++ b/src/components/item/header/ItemHeaderActions.tsx @@ -2,7 +2,7 @@ import { useParams } from 'react-router-dom'; import { Stack } from '@mui/material'; -import { ItemType, PermissionLevel, PermissionLevelCompare } from '@graasp/sdk'; +import { PermissionLevel, PermissionLevelCompare } from '@graasp/sdk'; import { ChatboxButton } from '@graasp/ui'; import EditButton from '@/components/common/EditButton'; @@ -82,10 +82,7 @@ const ItemHeaderActions = (): JSX.Element => { return ( {renderItemActions()} - { - // show only for content with tables : root or folders - (item?.type === ItemType.FOLDER || !item?.id) && - } + ); }; diff --git a/src/components/item/settings/GeolocationPicker.tsx b/src/components/item/settings/GeolocationPicker.tsx index 3edfe7c70..23e6683f4 100644 --- a/src/components/item/settings/GeolocationPicker.tsx +++ b/src/components/item/settings/GeolocationPicker.tsx @@ -64,12 +64,16 @@ const GeolocationPicker = ({ onChangeOption={onChangeOption} initialValue={geoloc?.addressLabel ?? undefined} useSuggestionsForAddress={hooks.useSuggestionsForAddress} + disabled={isDisabled} /> - - - - - + {/* show clear only if not disabled */} + {!isDisabled && ( + + + + + + )} {isDisabled && ( diff --git a/src/components/main/Items.tsx b/src/components/main/Items.tsx index 352ac69da..cbc02c488 100644 --- a/src/components/main/Items.tsx +++ b/src/components/main/Items.tsx @@ -1,6 +1,10 @@ +import { useNavigate } from 'react-router'; +import { useSearchParams } from 'react-router-dom'; + import { DiscriminatedItem, PackedItem, redirect } from '@graasp/sdk'; import { buildGraaspPlayerView } from '@/config/externalPaths'; +import { buildItemPath } from '@/config/paths'; import { buildPlayerTabName } from '@/config/selectors'; import { ShowOnlyMeChangeType } from '@/config/types'; @@ -63,6 +67,8 @@ const Items = ({ showDropzoneHelper = false, }: Props): JSX.Element | null => { const { mode } = useLayoutContext(); + const [searchParams] = useSearchParams(); + const navigate = useNavigate(); const itemsStatuses = useItemsStatuses({ items, }); @@ -71,13 +77,21 @@ const Items = ({ const viewItem = (item: DiscriminatedItem) => { redirect(window, buildGraaspPlayerView(item.id), { name: buildPlayerTabName(item.id), - openInNewTab: true, + openInNewTab: false, + }); + }; + const viewItemInBuilder = (item: DiscriminatedItem) => { + // navigate to item in map + navigate({ + pathname: buildItemPath(item.id), + search: searchParams.toString(), }); }; return ( { const [urlSearchParams] = useSearchParams(); + const navigate = useNavigate(); const isMobileApp = urlSearchParams.get('isMobileApp') === 'true'; const enableGeolocation = urlSearchParams.get('enableGeolocation') @@ -30,9 +32,25 @@ const MapItemScreen = (): JSX.Element | null => { } }; + const viewItemInBuilder = (item: DiscriminatedItem) => { + if (isMobileApp) { + // todo: replace with universal/deep link? not sure it works inside iframe.. + window.parent.postMessage( + JSON.stringify({ item, action: 'open-builder' }), + ); + } else { + // navigate to item in map + navigate({ + pathname: buildItemPath(item.id), + search: urlSearchParams.toString(), + }); + } + }; + return ( diff --git a/yarn.lock b/yarn.lock index 72deefee2..3ddca2c54 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1540,9 +1540,9 @@ __metadata: languageName: node linkType: hard -"@graasp/map@npm:1.12.1": - version: 1.12.1 - resolution: "@graasp/map@npm:1.12.1" +"@graasp/map@npm:1.14.0": + version: 1.14.0 + resolution: "@graasp/map@npm:1.14.0" dependencies: "@emotion/react": "npm:11.11.4" "@emotion/styled": "npm:11.11.5" @@ -1577,7 +1577,7 @@ __metadata: react: "*" react-dom: "*" react-i18next: ^14.0.0 - checksum: 10/4274d83b66105867ddebcb9a515dd528d3aa18b8036461b3e35e90333180e21ea8046f49af15fc54da22b108d34f32be6f9d3e784583cb6be8c1b178357f6b1f + checksum: 10/ab968e938b7133fdd110406865c364c5f4bb053702bec7441e2c488402c0e98c75fb49aece3225970d9a0119b3390c5eb16248284d3ca45dfba0b66fbd729a8b languageName: node linkType: hard @@ -7918,7 +7918,7 @@ __metadata: "@emotion/react": "npm:11.11.4" "@emotion/styled": "npm:11.11.5" "@graasp/chatbox": "npm:3.1.0" - "@graasp/map": "npm:1.12.1" + "@graasp/map": "npm:1.14.0" "@graasp/query-client": "npm:3.9.0" "@graasp/sdk": "npm:4.12.0" "@graasp/translations": "npm:1.28.0"