From 27155c6fb462b480db63f3c74315f30e029c2950 Mon Sep 17 00:00:00 2001 From: Kim Lan Phan Hoang Date: Mon, 15 Apr 2024 15:22:35 +0200 Subject: [PATCH] feat: use builder modal for new item with map (#1147) * feat: use builder modal on map, provide current location * refactor: update map, rename * refactor: update map version --- package.json | 2 +- src/components/item/MapView.tsx | 88 +++++++++++++++-------- src/components/main/NewItemModal.tsx | 15 +++- yarn.lock | 103 ++++++++++++++++++--------- 4 files changed, 142 insertions(+), 66 deletions(-) diff --git a/package.json b/package.json index 1e528fc34..e6c754f4f 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@emotion/react": "11.11.4", "@emotion/styled": "11.11.0", "@graasp/chatbox": "3.1.0", - "@graasp/map": "1.6.0", + "@graasp/map": "1.8.0", "@graasp/query-client": "3.3.0", "@graasp/sdk": "4.6.0", "@graasp/translations": "1.25.3", diff --git a/src/components/item/MapView.tsx b/src/components/item/MapView.tsx index 48a179ebd..9286d6b82 100644 --- a/src/components/item/MapView.tsx +++ b/src/components/item/MapView.tsx @@ -1,12 +1,17 @@ +import { useState } from 'react'; + import { Stack, Typography } from '@mui/material'; import { Map } from '@graasp/map'; -import { type DiscriminatedItem, redirect } from '@graasp/sdk'; +import { type DiscriminatedItem, ItemGeolocation, redirect } from '@graasp/sdk'; +import { useMobileView } from '@graasp/ui'; import { buildGraaspPlayerView } from '@/config/externalPaths'; import { hooks, mutations } from '@/config/queryClient'; import { buildPlayerTabName } from '@/config/selectors'; +import NewItemModal from '../main/NewItemModal'; + type Props = { parentId?: DiscriminatedItem['id']; title?: string; @@ -15,37 +20,62 @@ type Props = { const MapView = ({ parentId, title, height = '100vh' }: Props): JSX.Element => { const { data: currentMember } = hooks.useCurrentMember(); + const { isMobile } = useMobileView(); + const [geolocation, setGeolocation] = useState>(); + const [open, setOpen] = useState(false); + + const handleAddOnClick = (args: { location: Partial }) => { + setGeolocation(args.location); + setOpen(true); + }; + + const handleClose = () => { + setGeolocation(undefined); + setOpen(false); + }; return ( - - - {title && ( - - {title} - - )} - - -
- { - redirect(window, buildGraaspPlayerView(item.id), { - name: buildPlayerTabName(item.id), - openInNewTab: true, - }); - }} - currentMember={currentMember} - itemId={parentId} - /> -
+ <> + + + {title && ( + + {title} + + )} + + +
+ { + redirect(window, buildGraaspPlayerView(item.id), { + name: buildPlayerTabName(item.id), + openInNewTab: true, + }); + }} + currentMember={currentMember} + itemId={parentId} + // use builder modal to add new item if the screen is big enough + // todo: always use builder modal when it is responsive + handleAddOnClick={isMobile ? undefined : handleAddOnClick} + /> +
+ - + {!isMobile && ( + + )} + ); }; diff --git a/src/components/main/NewItemModal.tsx b/src/components/main/NewItemModal.tsx index 671a4e92c..62820be0b 100644 --- a/src/components/main/NewItemModal.tsx +++ b/src/components/main/NewItemModal.tsx @@ -15,6 +15,7 @@ import { DiscriminatedItem, DocumentItemType, FolderItemType, + ItemGeolocation, ItemType, LinkItemType, } from '@graasp/sdk'; @@ -60,6 +61,7 @@ type PropertiesPerType = { type Props = { open: boolean; handleClose: () => void; + geolocation?: Partial; }; const DEFAULT_PROPERTIES: PropertiesPerType = { @@ -69,7 +71,11 @@ const DEFAULT_PROPERTIES: PropertiesPerType = { [ItemType.DOCUMENT]: { type: ItemType.DOCUMENT }, }; -const NewItemModal = ({ open, handleClose }: Props): JSX.Element => { +const NewItemModal = ({ + open, + handleClose, + geolocation, +}: Props): JSX.Element => { const { t: translateBuilder } = useBuilderTranslation(); const { t: translateCommon } = useCommonTranslation(); @@ -119,7 +125,12 @@ const NewItemModal = ({ open, handleClose }: Props): JSX.Element => { // todo: fix types return submitAndDisableConfirmButtonFor( - () => postItem({ parentId, ...(updatedPropertiesPerType[type] as any) }), + () => + postItem({ + geolocation, + parentId, + ...(updatedPropertiesPerType[type] as any), + }), DOUBLE_CLICK_DELAY_MS, ); }; diff --git a/yarn.lock b/yarn.lock index fd50619f6..0a229f65b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1483,18 +1483,18 @@ __metadata: languageName: node linkType: hard -"@graasp/map@npm:1.6.0": - version: 1.6.0 - resolution: "@graasp/map@npm:1.6.0" +"@graasp/map@npm:1.8.0": + version: 1.8.0 + resolution: "@graasp/map@npm:1.8.0" dependencies: "@emotion/react": "npm:11.11.4" "@emotion/styled": "npm:11.11.5" - "@graasp/sdk": "github:graasp/graasp-sdk#packed" + "@graasp/sdk": "npm:4.7.1" "@graasp/translations": "npm:1.23.0" "@graasp/ui": "npm:4.9.3" - "@mui/icons-material": "npm:5.15.14" - "@mui/lab": "npm:5.0.0-alpha.169" - "@mui/material": "npm:5.15.14" + "@mui/icons-material": "npm:5.15.15" + "@mui/lab": "npm:5.0.0-alpha.170" + "@mui/material": "npm:5.15.15" leaflet: "npm:^1.9.4" leaflet-easybutton: "npm:2.4.0" leaflet-geosearch: "npm:3.11.1" @@ -1518,7 +1518,7 @@ __metadata: react: "*" react-dom: "*" react-i18next: ^14.0.0 - checksum: 10/0ef607e177aae6eaa23babcaf04e038fe3e6a329732f4d48de653c72409665967fb286aac5449dd8cc54cbfc6471fc3456c0a346333dae9ac454fe7cdff9ae54 + checksum: 10/6a31cba71c3c4a2e0e3f0db05d716897dcdf064348b8e9896695b9addbd5152311f6e7f2760a1262570841124e246d1a9783520d37a1d9744e685474d78b00d1 languageName: node linkType: hard @@ -1539,9 +1539,9 @@ __metadata: languageName: node linkType: hard -"@graasp/sdk@github:graasp/graasp-sdk#packed": - version: 4.2.1 - resolution: "@graasp/sdk@https://github.com/graasp/graasp-sdk.git#commit=b75dcdf6bd46a7d509b8b483ca2add3fed042d63" +"@graasp/sdk@npm:4.6.0": + version: 4.6.0 + resolution: "@graasp/sdk@npm:4.6.0" dependencies: "@faker-js/faker": "npm:8.4.1" js-cookie: "npm:3.0.5" @@ -1549,13 +1549,13 @@ __metadata: peerDependencies: date-fns: ^3 uuid: ^9 - checksum: 10/027a81948c7ec9aac0e2ebc398fab57e590145c5dbd488364ae1cc06ce616ac9882348771e0124e75980b7a3428cd3f65291cfe2dcf19ddd61af48e3c8a972f1 + checksum: 10/85456a68c8498375b298c7677db1aa221deb9c73406204b84bf15da6a699cee4f992600c0fd2b2280b71aff442c2afe7c5bfa92dbea2e4863e6edca70e49e9e3 languageName: node linkType: hard -"@graasp/sdk@npm:4.6.0": - version: 4.6.0 - resolution: "@graasp/sdk@npm:4.6.0" +"@graasp/sdk@npm:4.7.1": + version: 4.7.1 + resolution: "@graasp/sdk@npm:4.7.1" dependencies: "@faker-js/faker": "npm:8.4.1" js-cookie: "npm:3.0.5" @@ -1563,7 +1563,7 @@ __metadata: peerDependencies: date-fns: ^3 uuid: ^9 - checksum: 10/85456a68c8498375b298c7677db1aa221deb9c73406204b84bf15da6a699cee4f992600c0fd2b2280b71aff442c2afe7c5bfa92dbea2e4863e6edca70e49e9e3 + checksum: 10/182e2a33fbdf7ed2cac7fbdf5a01378a059415a753345cca501d2ddda4985b9448c81bb2931a7157dc34cd613412c5da42da38cb037e9a46438755707e4ea2aa languageName: node linkType: hard @@ -1884,13 +1884,20 @@ __metadata: languageName: node linkType: hard -"@mui/core-downloads-tracker@npm:^5.15.11, @mui/core-downloads-tracker@npm:^5.15.14": +"@mui/core-downloads-tracker@npm:^5.15.11": version: 5.15.14 resolution: "@mui/core-downloads-tracker@npm:5.15.14" checksum: 10/0a1c63d906af594d0a7fb63d1d574482b3916351ea8908e8621c8bfa16ac38cf4edb5a334f0e28084f583ac928b587cab6e031f992195e0a590186faba13b9a5 languageName: node linkType: hard +"@mui/core-downloads-tracker@npm:^5.15.15": + version: 5.15.15 + resolution: "@mui/core-downloads-tracker@npm:5.15.15" + checksum: 10/3e99a04e03f66d5fa5f0c23cdce0f9fa2331ba08c99a75dc2347ccaa1c6ed520153e04aaeb0d613c9dca099a3e6242558a6284c33d93f95cc65e3243b17860bc + languageName: node + linkType: hard + "@mui/icons-material@npm:5.15.11": version: 5.15.11 resolution: "@mui/icons-material@npm:5.15.11" @@ -1907,9 +1914,9 @@ __metadata: languageName: node linkType: hard -"@mui/icons-material@npm:5.15.14": - version: 5.15.14 - resolution: "@mui/icons-material@npm:5.15.14" +"@mui/icons-material@npm:5.15.15": + version: 5.15.15 + resolution: "@mui/icons-material@npm:5.15.15" dependencies: "@babel/runtime": "npm:^7.23.9" peerDependencies: @@ -1919,7 +1926,7 @@ __metadata: peerDependenciesMeta: "@types/react": optional: true - checksum: 10/a5033b67d4ff455f5fdd91fc51d26d967d634e861cde194b9dde02a8cc3f557d1b3f7e0b3175bc654b8e944f2118d46620485734ecd9d2ed4a6f748386447933 + checksum: 10/e8810d7ffbba914baf21509e5d664f5f23bdba5d2a7ec7c485a3c7ddbbcb417e555c31feff2a3fa9c7d7fa0d22d4380f32488559ab3b170d891641dbc2161b22 languageName: node linkType: hard @@ -1952,13 +1959,13 @@ __metadata: languageName: node linkType: hard -"@mui/lab@npm:5.0.0-alpha.169": - version: 5.0.0-alpha.169 - resolution: "@mui/lab@npm:5.0.0-alpha.169" +"@mui/lab@npm:5.0.0-alpha.170": + version: 5.0.0-alpha.170 + resolution: "@mui/lab@npm:5.0.0-alpha.170" dependencies: "@babel/runtime": "npm:^7.23.9" "@mui/base": "npm:5.0.0-beta.40" - "@mui/system": "npm:^5.15.14" + "@mui/system": "npm:^5.15.15" "@mui/types": "npm:^7.2.14" "@mui/utils": "npm:^5.15.14" clsx: "npm:^2.1.0" @@ -1977,7 +1984,7 @@ __metadata: optional: true "@types/react": optional: true - checksum: 10/6d8b08ae40ff6726507fe1fcf87b9030bbbee613a80e0e2cd58bf8039616f7295aa52509688db553a64420d554a701c2f5dae3b8a67e7875597e9a487ab73b6d + checksum: 10/be723d3824a8c56681c2fa71f3bfda5cad9404ed527ab82258ae85219fbb28e8080b90870954c064491699c15409fc2aa4e008e29011cadae1cb978179166f2d languageName: node linkType: hard @@ -2014,14 +2021,14 @@ __metadata: languageName: node linkType: hard -"@mui/material@npm:5.15.14": - version: 5.15.14 - resolution: "@mui/material@npm:5.15.14" +"@mui/material@npm:5.15.15": + version: 5.15.15 + resolution: "@mui/material@npm:5.15.15" dependencies: "@babel/runtime": "npm:^7.23.9" "@mui/base": "npm:5.0.0-beta.40" - "@mui/core-downloads-tracker": "npm:^5.15.14" - "@mui/system": "npm:^5.15.14" + "@mui/core-downloads-tracker": "npm:^5.15.15" + "@mui/system": "npm:^5.15.15" "@mui/types": "npm:^7.2.14" "@mui/utils": "npm:^5.15.14" "@types/react-transition-group": "npm:^4.4.10" @@ -2043,7 +2050,7 @@ __metadata: optional: true "@types/react": optional: true - checksum: 10/a2c3355b39b86472bf2debb84d6c032b1ea4ba691fbda0f25803f2702f9106130bb85a7d2757545ce97540fe185f07cf24574d5786a29df26baa298ff7db063b + checksum: 10/e2803d078243ee5489bf693f7e9d421061dfda79b6ce74762f3a81e3c519cf69c18af179e4267fc9d0ce799898e6b3d7eac029e7dcfbea12dab5e867d641984b languageName: node linkType: hard @@ -2085,7 +2092,7 @@ __metadata: languageName: node linkType: hard -"@mui/system@npm:^5.15.11, @mui/system@npm:^5.15.14": +"@mui/system@npm:^5.15.11": version: 5.15.14 resolution: "@mui/system@npm:5.15.14" dependencies: @@ -2113,6 +2120,34 @@ __metadata: languageName: node linkType: hard +"@mui/system@npm:^5.15.15": + version: 5.15.15 + resolution: "@mui/system@npm:5.15.15" + dependencies: + "@babel/runtime": "npm:^7.23.9" + "@mui/private-theming": "npm:^5.15.14" + "@mui/styled-engine": "npm:^5.15.14" + "@mui/types": "npm:^7.2.14" + "@mui/utils": "npm:^5.15.14" + clsx: "npm:^2.1.0" + csstype: "npm:^3.1.3" + prop-types: "npm:^15.8.1" + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 10/90a84ad0bc1b401b6e53b13fe9cfe8a34668e84885d391abf5ab80b3cd0f37370be25cb40af253cdd468746386282fed24964315933fcb28d2d6e62de0db7bf1 + languageName: node + linkType: hard + "@mui/types@npm:^7.2.13, @mui/types@npm:^7.2.14": version: 7.2.14 resolution: "@mui/types@npm:7.2.14" @@ -7528,7 +7563,7 @@ __metadata: "@emotion/react": "npm:11.11.4" "@emotion/styled": "npm:11.11.0" "@graasp/chatbox": "npm:3.1.0" - "@graasp/map": "npm:1.6.0" + "@graasp/map": "npm:1.8.0" "@graasp/query-client": "npm:3.3.0" "@graasp/sdk": "npm:4.6.0" "@graasp/translations": "npm:1.25.3"