From 4e415aaf455d0b85eeb6e5f67da26f6d47ce45ae Mon Sep 17 00:00:00 2001 From: kim Date: Mon, 25 Mar 2024 17:00:41 +0100 Subject: [PATCH 1/4] refactor: add geolocation modal --- package.json | 8 +- .../item/settings/GeolocationModalButton.tsx | 164 +++++++++++++++ .../item/settings/GeolocationPicker.tsx | 61 +++--- yarn.lock | 193 ++++++++++-------- 4 files changed, 314 insertions(+), 112 deletions(-) create mode 100644 src/components/item/settings/GeolocationModalButton.tsx diff --git a/package.json b/package.json index 712cf4804..392734905 100644 --- a/package.json +++ b/package.json @@ -20,11 +20,11 @@ "@emotion/react": "11.11.4", "@emotion/styled": "11.11.0", "@graasp/chatbox": "3.1.0", - "@graasp/map": "1.4.0", - "@graasp/query-client": "3.0.1", - "@graasp/sdk": "4.2.1", + "@graasp/map": "1.5.0", + "@graasp/query-client": "github:graasp/graasp-query-client#helper-label-geoloc", + "@graasp/sdk": "4.3.1", "@graasp/translations": "1.25.3", - "@graasp/ui": "4.11.0", + "@graasp/ui": "4.12.1", "@mui/icons-material": "5.15.11", "@mui/lab": "5.0.0-alpha.166", "@mui/material": "5.15.11", diff --git a/src/components/item/settings/GeolocationModalButton.tsx b/src/components/item/settings/GeolocationModalButton.tsx new file mode 100644 index 000000000..a3851e0b7 --- /dev/null +++ b/src/components/item/settings/GeolocationModalButton.tsx @@ -0,0 +1,164 @@ +import { useRef, useState } from 'react'; + +import { + DialogActions, + DialogContent, + DialogContentText, + Stack, + TextField, +} from '@mui/material'; +import Dialog from '@mui/material/Dialog'; +import DialogTitle from '@mui/material/DialogTitle'; + +import { CountryForm } from '@graasp/map'; +import { DiscriminatedItem } from '@graasp/sdk'; +import { Button } from '@graasp/ui'; + +import { useBuilderTranslation, useCommonTranslation } from '@/config/i18n'; +import notifier from '@/config/notifier'; +import { hooks, mutations } from '@/config/queryClient'; + +type Props = { + item: DiscriminatedItem; +}; + +export const GeolocationModalButton = ({ item }: Props): JSX.Element => { + const { t } = useBuilderTranslation(); + const { t: commonT } = useCommonTranslation(); + const [open, setOpen] = useState(false); + const { data: geoloc } = hooks.useItemGeolocation(item.id); + const { mutate: saveGeoloc } = mutations.usePutItemGeolocation(); + + const helperLabelRef = useRef(null); + const addressLabelRef = useRef(null); + const latRef = useRef(null); + const lngRef = useRef(null); + const [country, setCountry] = useState(); + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = (value: string) => { + setOpen(false); + // eslint-disable-next-line no-console + console.log(value); + }; + + const onSave = () => { + const lat = latRef.current?.value ?? geoloc?.lat; + const lng = lngRef.current?.value ?? geoloc?.lng; + + if (!lat || !lng) { + notifier({ + type: 'geolocation error', + payload: { error: new Error('error') }, + }); + return; + } + + saveGeoloc({ + itemId: item.id, + geolocation: { + helperLabel: helperLabelRef.current?.value ?? geoloc?.helperLabel, + addressLabel: addressLabelRef.current?.value ?? geoloc?.addressLabel, + country: country ?? geoloc?.country, + lat: +lat, + lng: +lng, + }, + }); + setOpen(false); + }; + + // const onChangeOption: GeolocationPickerProps['onChangeOption'] = (option: { + // addressLabel: string; + // lat: number; + // lng: number; + // country?: string; + // }): void => { + // const { addressLabel, lat, lng, country } = option; + // // putGeoloc({ + // // itemId: item.id, + // // geolocation: { + // // addressLabel, + // // lat, + // // lng, + // // country, + // // }, + // // }); + // }; + + return ( + <> + + + {t('Geolocation Advanced Settings')} + + + + + + {t( + "Any information submitted with this form won't be validated. You are responsible for the accuracy of the data.", + )} + + + + + + + + + + + + + + + + + + { + // eslint-disable-next-line no-console + setCountry(e.alpha2); + }} + /> + + + + + + + + + + ); +}; + +export default GeolocationModalButton; diff --git a/src/components/item/settings/GeolocationPicker.tsx b/src/components/item/settings/GeolocationPicker.tsx index da32cd82d..69b05c1d4 100644 --- a/src/components/item/settings/GeolocationPicker.tsx +++ b/src/components/item/settings/GeolocationPicker.tsx @@ -11,6 +11,8 @@ import { useBuilderTranslation } from '@/config/i18n'; import { hooks, mutations } from '@/config/queryClient'; import { BUILDER } from '@/langs/constants'; +import GeolocationModalButton from './GeolocationModalButton'; + const GeolocationPicker = ({ item, }: { @@ -48,37 +50,40 @@ const GeolocationPicker = ({ const isDisabled = Boolean(geoloc && geoloc?.item?.id !== item.id); return ( - - - - {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_TITLE)} - - - {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_EXPLANATION)} - - - - - - + <> + - - - - - + + {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_TITLE)} + + + {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_EXPLANATION)} + + + + + + + + + + + + + + {isDisabled && ( + + {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_INHERITED_EXPLANATION)} + + )} - {isDisabled && ( - - {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_INHERITED_EXPLANATION)} - - )} - + + ); }; diff --git a/yarn.lock b/yarn.lock index a369997d5..a29a4f105 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1715,18 +1715,18 @@ __metadata: languageName: node linkType: hard -"@graasp/map@npm:1.4.0": - version: 1.4.0 - resolution: "@graasp/map@npm:1.4.0" +"@graasp/map@npm:1.5.0": + version: 1.5.0 + resolution: "@graasp/map@npm:1.5.0" dependencies: "@emotion/react": "npm:11.11.4" "@emotion/styled": "npm:11.11.0" - "@graasp/sdk": "npm:4.1.0" + "@graasp/sdk": "github:graasp/graasp-sdk#packed" "@graasp/translations": "npm:1.23.0" - "@graasp/ui": "npm:4.9.1" - "@mui/icons-material": "npm:5.15.12" - "@mui/lab": "npm:5.0.0-alpha.167" - "@mui/material": "npm:5.15.12" + "@graasp/ui": "npm:4.9.3" + "@mui/icons-material": "npm:5.15.13" + "@mui/lab": "npm:5.0.0-alpha.168" + "@mui/material": "npm:5.15.13" leaflet: "npm:^1.9.4" leaflet-easybutton: "npm:2.4.0" leaflet-geosearch: "npm:3.11.1" @@ -1750,13 +1750,13 @@ __metadata: react: "*" react-dom: "*" react-i18next: ^14.0.0 - checksum: 10/6ceb43f5bd79a1ead819012d47cc03fdc318af4a2e63f6b16ee98d5a2569b16305b0d1f6c3dae9b48248a52849ad181e7d831d35e525f32cba2475e192a93277 + checksum: 10/a10f4e50a1425334713edd7f3da1e92613b0881b3181e5caa437343a2f4a435682295d65e7174c1524d49df4bdf2b5742e835173498ab9305c012698930ca313 languageName: node linkType: hard -"@graasp/query-client@npm:3.0.1": - version: 3.0.1 - resolution: "@graasp/query-client@npm:3.0.1" +"@graasp/query-client@github:graasp/graasp-query-client#helper-label-geoloc": + version: 3.1.0 + resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=60cdf7e21b0b337df1a008645ed87cddfbc66a56" dependencies: "@tanstack/react-query": "npm:4.36.1" "@tanstack/react-query-devtools": "npm:4.36.1" @@ -1767,13 +1767,13 @@ __metadata: "@graasp/sdk": ^4.0.0 "@graasp/translations": ^1.23.0 react: ^18.0.0 - checksum: 10/f4a343d47157e1d79fdbfb423e38d8670e8b289528b30671b6cfafa87f9d99c116fdb385e46b75bcd8cb3e6fa4c258a15ec1c542a9d47ba8ca4b02b2a3eae045 + checksum: 10/d726c9a8cd9b20919746aacad6dec99fb120dc2f687f4777c5469d731eecc25dda98d79b52ab13818cc1bf3cba870ebe8557155cf202606df113a4470c0511aa languageName: node linkType: hard -"@graasp/sdk@npm:4.1.0": - version: 4.1.0 - resolution: "@graasp/sdk@npm:4.1.0" +"@graasp/sdk@github:graasp/graasp-sdk#packed": + version: 4.2.1 + resolution: "@graasp/sdk@https://github.com/graasp/graasp-sdk.git#commit=b75dcdf6bd46a7d509b8b483ca2add3fed042d63" dependencies: "@faker-js/faker": "npm:8.4.1" js-cookie: "npm:3.0.5" @@ -1781,13 +1781,13 @@ __metadata: peerDependencies: date-fns: ^3 uuid: ^9 - checksum: 10/80c8b07bd04f90b0ad399a673626a9299faefac381f78fff158110968191453e3cce7b8a77be0ffa19d98f6711b9be43269b993099367c98dc3ae196b28a5d1c + checksum: 10/027a81948c7ec9aac0e2ebc398fab57e590145c5dbd488364ae1cc06ce616ac9882348771e0124e75980b7a3428cd3f65291cfe2dcf19ddd61af48e3c8a972f1 languageName: node linkType: hard -"@graasp/sdk@npm:4.2.1": - version: 4.2.1 - resolution: "@graasp/sdk@npm:4.2.1" +"@graasp/sdk@npm:4.3.1": + version: 4.3.1 + resolution: "@graasp/sdk@npm:4.3.1" dependencies: "@faker-js/faker": "npm:8.4.1" js-cookie: "npm:3.0.5" @@ -1795,7 +1795,7 @@ __metadata: peerDependencies: date-fns: ^3 uuid: ^9 - checksum: 10/04e00d13a806ef62183b7314d39345a001981b31754d6ca5f61b80bd919a3de42d3310390bdc5834c0c03f95cf5480fb23d4a06da0a4cd4f3b67f01e067349a0 + checksum: 10/d2715dde95901fbe67eb788f324d212f556c9ea607cb2041e6d7f9a12e41dc21d25a867ca92add5cd3cf8407daf2efa7e5c1f08f2e95f8db956018ff44275a33 languageName: node linkType: hard @@ -1817,9 +1817,9 @@ __metadata: languageName: node linkType: hard -"@graasp/ui@npm:4.11.0": - version: 4.11.0 - resolution: "@graasp/ui@npm:4.11.0" +"@graasp/ui@npm:4.12.1": + version: 4.12.1 + resolution: "@graasp/ui@npm:4.12.1" dependencies: "@ag-grid-community/client-side-row-model": "npm:31.1.1" "@ag-grid-community/react": "npm:^31.1.1" @@ -1827,14 +1827,14 @@ __metadata: "@storybook/react-vite": "npm:7.6.17" http-status-codes: "npm:2.3.0" interweave: "npm:13.1.0" - katex: "npm:0.16.9" + katex: "npm:0.16.10" lodash.truncate: "npm:4.4.2" react-cookie-consent: "npm:9.0.0" react-quill: "npm:2.0.0" react-rnd: "npm:10.4.1" react-text-mask: "npm:5.5.0" uuid: "npm:9.0.1" - vitest: "npm:1.3.1" + vitest: "npm:1.4.0" peerDependencies: "@emotion/cache": ~11.10.7 || ~11.11.0 "@emotion/react": ~11.10.6 || ~11.11.0 @@ -1851,13 +1851,13 @@ __metadata: react-router-dom: ^6.11.0 stylis: ^4.1.3 stylis-plugin-rtl: ^2.1.1 - checksum: 10/4fefdb4e23d0f4838cfbd895512ed55b2757167edee68f3d76220b130cff4bbb7b093480a32f361be63d0ff8d74f5ca8b7a6367156d13060fa24d0e6876797f5 + checksum: 10/a7593f588d50798f0daf43a05dc332d3c4604dc3d50a2beb66f652d402a02deff6ab341f4bdb9a52eeb6f17d6c209d9ec409022a961deea185cd3452a5bf7ae9 languageName: node linkType: hard -"@graasp/ui@npm:4.9.1": - version: 4.9.1 - resolution: "@graasp/ui@npm:4.9.1" +"@graasp/ui@npm:4.9.3": + version: 4.9.3 + resolution: "@graasp/ui@npm:4.9.3" dependencies: "@ag-grid-community/client-side-row-model": "npm:31.1.1" "@ag-grid-community/react": "npm:^31.1.1" @@ -1889,7 +1889,7 @@ __metadata: react-router-dom: ^6.11.0 stylis: ^4.1.3 stylis-plugin-rtl: ^2.1.1 - checksum: 10/a101ff9b7a6365d9959c331f07a77f1f96bb0293bd354763a1633b719162f3e57c709990c014f42639184f78a30fb5077837a820cb6d7abde13267f126510731 + checksum: 10/190d5c7bf0dbb1fe7fc042359c0f9f6f6fb8fb7fd72c1631082bf98ef4bc422a7792a0f89f1a67b7463ac63dbce70598f39903fe74c79decc646508457474549 languageName: node linkType: hard @@ -2094,14 +2094,14 @@ __metadata: languageName: node linkType: hard -"@mui/base@npm:5.0.0-beta.38": - version: 5.0.0-beta.38 - resolution: "@mui/base@npm:5.0.0-beta.38" +"@mui/base@npm:5.0.0-beta.39": + version: 5.0.0-beta.39 + resolution: "@mui/base@npm:5.0.0-beta.39" dependencies: "@babel/runtime": "npm:^7.23.9" "@floating-ui/react-dom": "npm:^2.0.8" "@mui/types": "npm:^7.2.13" - "@mui/utils": "npm:^5.15.12" + "@mui/utils": "npm:^5.15.13" "@popperjs/core": "npm:^2.11.8" clsx: "npm:^2.1.0" prop-types: "npm:^15.8.1" @@ -2112,7 +2112,7 @@ __metadata: peerDependenciesMeta: "@types/react": optional: true - checksum: 10/551eacaf4de2f0c049694ee5c1fbc2a05d60c580984caf9b2a8c1e92dbaf4041b4e138904f8411c8ec65c2436dba91b6a7f3cfdd188075f1423a90963cab2cab + checksum: 10/320aeedb6c32df9807e2581065e98c3dd0510dcd8666c1c4804fc2281fa42e4e2111152961ded0ba1c3b9dc320936ee73d1a0861c0985a0da86a7bd7bf8cbada languageName: node linkType: hard @@ -2123,10 +2123,10 @@ __metadata: languageName: node linkType: hard -"@mui/core-downloads-tracker@npm:^5.15.12": - version: 5.15.12 - resolution: "@mui/core-downloads-tracker@npm:5.15.12" - checksum: 10/bbece78282ca224ee8aee67f67c7840962ccdfa9753e93c0c4ede2d6a37853ad7523996c39be530077a7ecb49fb82f6e60bed7ce7937b05ca485a2d091aac3d8 +"@mui/core-downloads-tracker@npm:^5.15.13": + version: 5.15.14 + resolution: "@mui/core-downloads-tracker@npm:5.15.14" + checksum: 10/0a1c63d906af594d0a7fb63d1d574482b3916351ea8908e8621c8bfa16ac38cf4edb5a334f0e28084f583ac928b587cab6e031f992195e0a590186faba13b9a5 languageName: node linkType: hard @@ -2146,9 +2146,9 @@ __metadata: languageName: node linkType: hard -"@mui/icons-material@npm:5.15.12": - version: 5.15.12 - resolution: "@mui/icons-material@npm:5.15.12" +"@mui/icons-material@npm:5.15.13": + version: 5.15.13 + resolution: "@mui/icons-material@npm:5.15.13" dependencies: "@babel/runtime": "npm:^7.23.9" peerDependencies: @@ -2158,7 +2158,7 @@ __metadata: peerDependenciesMeta: "@types/react": optional: true - checksum: 10/06e168c45b39d699745a823a8563795b44b7bdfb779bada97f67799b94ff34acd853031dc359b9984115c1b6fd7b56429cc121187aef95e2e27ef0a8c2a2208d + checksum: 10/89e79ebe4a0ab8594934f4056034dcffe57cc7c4468717545d67310cb74626c38ea79a7129d16fbf265745ceca7e8c35d21c3f59a4519e0776f774f6ea228fd3 languageName: node linkType: hard @@ -2191,15 +2191,15 @@ __metadata: languageName: node linkType: hard -"@mui/lab@npm:5.0.0-alpha.167": - version: 5.0.0-alpha.167 - resolution: "@mui/lab@npm:5.0.0-alpha.167" +"@mui/lab@npm:5.0.0-alpha.168": + version: 5.0.0-alpha.168 + resolution: "@mui/lab@npm:5.0.0-alpha.168" dependencies: "@babel/runtime": "npm:^7.23.9" - "@mui/base": "npm:5.0.0-beta.38" - "@mui/system": "npm:^5.15.12" + "@mui/base": "npm:5.0.0-beta.39" + "@mui/system": "npm:^5.15.13" "@mui/types": "npm:^7.2.13" - "@mui/utils": "npm:^5.15.12" + "@mui/utils": "npm:^5.15.13" clsx: "npm:^2.1.0" prop-types: "npm:^15.8.1" peerDependencies: @@ -2216,7 +2216,7 @@ __metadata: optional: true "@types/react": optional: true - checksum: 10/b5e5dc242f850819516f5e6108769bf496086a41b7e59fe2bd98e3dcd682eed551f4846ca48c6b9f31b659ee2a8360d77098bd9b2785fd204d82f6d2d91ea156 + checksum: 10/eaa4ddf343296b26393efcf1e568c2c2dc81d94bcf2b3ccf2f53c7f1b9fe6b6f1bc6fc1c5bc02b14d7733acb5d9ce79a4c8e91aaa6d0706e4461bead696ac8c5 languageName: node linkType: hard @@ -2253,16 +2253,16 @@ __metadata: languageName: node linkType: hard -"@mui/material@npm:5.15.12": - version: 5.15.12 - resolution: "@mui/material@npm:5.15.12" +"@mui/material@npm:5.15.13": + version: 5.15.13 + resolution: "@mui/material@npm:5.15.13" dependencies: "@babel/runtime": "npm:^7.23.9" - "@mui/base": "npm:5.0.0-beta.38" - "@mui/core-downloads-tracker": "npm:^5.15.12" - "@mui/system": "npm:^5.15.12" + "@mui/base": "npm:5.0.0-beta.39" + "@mui/core-downloads-tracker": "npm:^5.15.13" + "@mui/system": "npm:^5.15.13" "@mui/types": "npm:^7.2.13" - "@mui/utils": "npm:^5.15.12" + "@mui/utils": "npm:^5.15.13" "@types/react-transition-group": "npm:^4.4.10" clsx: "npm:^2.1.0" csstype: "npm:^3.1.3" @@ -2282,7 +2282,7 @@ __metadata: optional: true "@types/react": optional: true - checksum: 10/adee362d8367c4dec08fd4cec6b41fbe05699290b98e334c0203a73a4a13c24f2f4387b7f54b2000704b33182c3704fe873222227ccb58cc2099f9124bf02763 + checksum: 10/565e219d58f93bd8cdcc5e9d432046d6bfc3b2d81e3f1b8d4b93347f895f26d3f348a312fe2b943c41275fb3ea492e76d9651ce16f64e5773fe2be07309c67a2 languageName: node linkType: hard @@ -2303,12 +2303,12 @@ __metadata: languageName: node linkType: hard -"@mui/private-theming@npm:^5.15.12": - version: 5.15.12 - resolution: "@mui/private-theming@npm:5.15.12" +"@mui/private-theming@npm:^5.15.14": + version: 5.15.14 + resolution: "@mui/private-theming@npm:5.15.14" dependencies: "@babel/runtime": "npm:^7.23.9" - "@mui/utils": "npm:^5.15.12" + "@mui/utils": "npm:^5.15.14" prop-types: "npm:^15.8.1" peerDependencies: "@types/react": ^17.0.0 || ^18.0.0 @@ -2316,7 +2316,7 @@ __metadata: peerDependenciesMeta: "@types/react": optional: true - checksum: 10/9e4e144d3de79536ec7cb46c98cabbe334ec7368c49ec3aa5a312e37fb8571cc95bad60b799e3252bbce7f2de6cc467f250cb217ca60316ead5303b5f5f2a660 + checksum: 10/6a14311ed53ee4adccfe0ba93275b43773d22fdd10c0d4ba680b9368fc0616a5e0f38f29d2080bcd7e4ed79123047e5f245c403d3fd822e960a97762be65218d languageName: node linkType: hard @@ -2341,6 +2341,27 @@ __metadata: languageName: node linkType: hard +"@mui/styled-engine@npm:^5.15.14": + version: 5.15.14 + resolution: "@mui/styled-engine@npm:5.15.14" + dependencies: + "@babel/runtime": "npm:^7.23.9" + "@emotion/cache": "npm:^11.11.0" + csstype: "npm:^3.1.3" + prop-types: "npm:^15.8.1" + peerDependencies: + "@emotion/react": ^11.4.1 + "@emotion/styled": ^11.3.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + checksum: 10/2a5e03bb20502aef94cfb908898c50abb769192deb32d7f4237039683ce5266104cdc4055a7f0a8342aa62447d52b7439a4f2d0dda0fa6709c227c3621468cab + languageName: node + linkType: hard + "@mui/system@npm:^5.15.11": version: 5.15.11 resolution: "@mui/system@npm:5.15.11" @@ -2369,15 +2390,15 @@ __metadata: languageName: node linkType: hard -"@mui/system@npm:^5.15.12": - version: 5.15.12 - resolution: "@mui/system@npm:5.15.12" +"@mui/system@npm:^5.15.13": + version: 5.15.14 + resolution: "@mui/system@npm:5.15.14" dependencies: "@babel/runtime": "npm:^7.23.9" - "@mui/private-theming": "npm:^5.15.12" - "@mui/styled-engine": "npm:^5.15.11" - "@mui/types": "npm:^7.2.13" - "@mui/utils": "npm:^5.15.12" + "@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" @@ -2393,7 +2414,7 @@ __metadata: optional: true "@types/react": optional: true - checksum: 10/23642eea1f5948cf0c57674569af9df3e7630d888da80d5d34afe6259a21631424f86b23a431a76a4046a6caa738d81d8a1b36ca438c6695aa93ca62b08afd50 + checksum: 10/64a9eac1bebefad3042cce28a75d0af2828aa71acd4c32fb0267f5e68bc75b16a093b6fb30709db83ec32130f14f1d67c1c27457ef62733e54a9d04f9b027cee languageName: node linkType: hard @@ -2409,6 +2430,18 @@ __metadata: languageName: node linkType: hard +"@mui/types@npm:^7.2.14": + version: 7.2.14 + resolution: "@mui/types@npm:7.2.14" + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/b10cca8f63ea522be4f7c185acd1f4d031947e53824cbf9dc5649c165bcfa8a2749e83fd0bd1809b8e2698f58638ab2b4ce03550095989189d14434ea5c6c0b6 + languageName: node + linkType: hard + "@mui/utils@npm:^5.15.11": version: 5.15.11 resolution: "@mui/utils@npm:5.15.11" @@ -2427,9 +2460,9 @@ __metadata: languageName: node linkType: hard -"@mui/utils@npm:^5.15.12": - version: 5.15.12 - resolution: "@mui/utils@npm:5.15.12" +"@mui/utils@npm:^5.15.13, @mui/utils@npm:^5.15.14": + version: 5.15.14 + resolution: "@mui/utils@npm:5.15.14" dependencies: "@babel/runtime": "npm:^7.23.9" "@types/prop-types": "npm:^15.7.11" @@ -2441,7 +2474,7 @@ __metadata: peerDependenciesMeta: "@types/react": optional: true - checksum: 10/e4c40d73a0367ccc89491835fb98baafaea046fbcdd46d407689b8cda95ead1d45bb3b4364a135c1fa20d1c3b23ad69705e228943e5995d597860be9b5ab8c2b + checksum: 10/b3cbe2d0aa7ec65969752dababc39fc6e0b8bb1a9cf8b9bac42ca40e3dd3eaa59b79765bd259019318acc7421d64b9f421bc67e776a581d7c9da6a1c0c50bfbc languageName: node linkType: hard @@ -8031,11 +8064,11 @@ __metadata: "@emotion/react": "npm:11.11.4" "@emotion/styled": "npm:11.11.0" "@graasp/chatbox": "npm:3.1.0" - "@graasp/map": "npm:1.4.0" - "@graasp/query-client": "npm:3.0.1" - "@graasp/sdk": "npm:4.2.1" + "@graasp/map": "npm:1.5.0" + "@graasp/query-client": "github:graasp/graasp-query-client#helper-label-geoloc" + "@graasp/sdk": "npm:4.3.1" "@graasp/translations": "npm:1.25.3" - "@graasp/ui": "npm:4.11.0" + "@graasp/ui": "npm:4.12.1" "@mui/icons-material": "npm:5.15.11" "@mui/lab": "npm:5.0.0-alpha.166" "@mui/material": "npm:5.15.11" From dcbd664dc2f86c6e23255a6b5f612fcb6235e314 Mon Sep 17 00:00:00 2001 From: kim Date: Mon, 25 Mar 2024 17:18:52 +0100 Subject: [PATCH 2/4] refactor: add translations --- .../item/settings/GeolocationModalButton.tsx | 64 ++++++++----------- src/langs/constants.ts | 19 ++++++ src/langs/en.json | 12 +++- src/langs/fr.json | 12 +++- 4 files changed, 69 insertions(+), 38 deletions(-) diff --git a/src/components/item/settings/GeolocationModalButton.tsx b/src/components/item/settings/GeolocationModalButton.tsx index a3851e0b7..bf681f4e4 100644 --- a/src/components/item/settings/GeolocationModalButton.tsx +++ b/src/components/item/settings/GeolocationModalButton.tsx @@ -12,11 +12,13 @@ import DialogTitle from '@mui/material/DialogTitle'; import { CountryForm } from '@graasp/map'; import { DiscriminatedItem } from '@graasp/sdk'; +import { COMMON } from '@graasp/translations'; import { Button } from '@graasp/ui'; import { useBuilderTranslation, useCommonTranslation } from '@/config/i18n'; import notifier from '@/config/notifier'; import { hooks, mutations } from '@/config/queryClient'; +import { BUILDER } from '@/langs/constants'; type Props = { item: DiscriminatedItem; @@ -39,10 +41,8 @@ export const GeolocationModalButton = ({ item }: Props): JSX.Element => { setOpen(true); }; - const handleClose = (value: string) => { + const handleClose = () => { setOpen(false); - // eslint-disable-next-line no-console - console.log(value); }; const onSave = () => { @@ -51,8 +51,10 @@ export const GeolocationModalButton = ({ item }: Props): JSX.Element => { if (!lat || !lng) { notifier({ - type: 'geolocation error', - payload: { error: new Error('error') }, + type: 'PUT_GEOLOCATION_ERROR', + payload: { + error: new Error(t(BUILDER.ITEM_GEOLOCATION_ADVANCED_MODAL_ERROR)), + }, }); return; } @@ -70,39 +72,21 @@ export const GeolocationModalButton = ({ item }: Props): JSX.Element => { setOpen(false); }; - // const onChangeOption: GeolocationPickerProps['onChangeOption'] = (option: { - // addressLabel: string; - // lat: number; - // lng: number; - // country?: string; - // }): void => { - // const { addressLabel, lat, lng, country } = option; - // // putGeoloc({ - // // itemId: item.id, - // // geolocation: { - // // addressLabel, - // // lat, - // // lng, - // // country, - // // }, - // // }); - // }; - return ( <> - {t('Geolocation Advanced Settings')} + + {t(BUILDER.ITEM_GEOLOCATION_ADVANCED_MODAL_TITLE)} + - {t( - "Any information submitted with this form won't be validated. You are responsible for the accuracy of the data.", - )} + {t(BUILDER.ITEM_GEOLOCATION_ADVANCED_MODAL_DESCRIPTION)} @@ -110,7 +94,9 @@ export const GeolocationModalButton = ({ item }: Props): JSX.Element => { @@ -118,7 +104,9 @@ export const GeolocationModalButton = ({ item }: Props): JSX.Element => { @@ -126,7 +114,7 @@ export const GeolocationModalButton = ({ item }: Props): JSX.Element => { @@ -136,13 +124,17 @@ export const GeolocationModalButton = ({ item }: Props): JSX.Element => { inputRef={helperLabelRef} defaultValue={geoloc?.helperLabel ?? undefined} multiline - label="Complementary information (optional)" - placeholder="red door on the right, ..." + label={t( + BUILDER.ITEM_GEOLOCATION_ADVANCED_MODAL_SECONDARY_ADDRESS_LABEL, + )} + placeholder={t( + BUILDER.ITEM_GEOLOCATION_ADVANCED_MODAL_SECONDARY_ADDRESS_PLACEHOLDER, + )} /> { // eslint-disable-next-line no-console @@ -153,8 +145,8 @@ export const GeolocationModalButton = ({ item }: Props): JSX.Element => { - - + + diff --git a/src/langs/constants.ts b/src/langs/constants.ts index 456ff262d..6b9f354de 100644 --- a/src/langs/constants.ts +++ b/src/langs/constants.ts @@ -420,4 +420,23 @@ export const BUILDER = { 'ITEM_SETTINGS_DESCRIPTION_PLACEMENT_BELOW', ITEM_SETTINGS_DESCRIPTION_PLACEMENT_TITLE: 'ITEM_SETTINGS_DESCRIPTION_PLACEMENT_TITLE', + ITEM_GEOLOCATION_ADVANCED_BUTTON: 'ITEM_GEOLOCATION_ADVANCED_BUTTON', + ITEM_GEOLOCATION_ADVANCED_MODAL_TITLE: + 'ITEM_GEOLOCATION_ADVANCED_MODAL_TITLE', + ITEM_GEOLOCATION_ADVANCED_MODAL_DESCRIPTION: + 'ITEM_GEOLOCATION_ADVANCED_MODAL_DESCRIPTION', + ITEM_GEOLOCATION_ADVANCED_MODAL_LATITUDE_LABEL: + 'ITEM_GEOLOCATION_ADVANCED_MODAL_LATITUDE_LABEL', + ITEM_GEOLOCATION_ADVANCED_MODAL_LONGITUDE_LABEL: + 'ITEM_GEOLOCATION_ADVANCED_MODAL_LONGITUDE_LABEL', + ITEM_GEOLOCATION_ADVANCED_MODAL_ADDRESS_LABEL: + 'ITEM_GEOLOCATION_ADVANCED_MODAL_ADDRESS_LABEL', + ITEM_GEOLOCATION_ADVANCED_MODAL_SECONDARY_ADDRESS_LABEL: + 'ITEM_GEOLOCATION_ADVANCED_MODAL_SECONDARY_ADDRESS_LABEL', + ITEM_GEOLOCATION_ADVANCED_MODAL_SECONDARY_ADDRESS_PLACEHOLDER: + 'ITEM_GEOLOCATION_ADVANCED_MODAL_SECONDARY_ADDRESS_PLACEHOLDER', + ITEM_GEOLOCATION_ADVANCED_MODAL_COUNTRY_LABEL: + 'ITEM_GEOLOCATION_ADVANCED_MODAL_COUNTRY_LABEL', + ITEM_GEOLOCATION_ADVANCED_MODAL_ERROR: + 'ITEM_GEOLOCATION_ADVANCED_MODAL_ERROR', }; diff --git a/src/langs/en.json b/src/langs/en.json index 3bbcd0859..ba546e865 100644 --- a/src/langs/en.json +++ b/src/langs/en.json @@ -355,5 +355,15 @@ "ITEM_SETTINGS_IS_COLLAPSED_TITLE": "Collapse item", "ITEM_SETTINGS_DESCRIPTION_PLACEMENT_ABOVE": "Above the content", "ITEM_SETTINGS_DESCRIPTION_PLACEMENT_BELOW": "Below the content", - "ITEM_SETTINGS_DESCRIPTION_PLACEMENT_TITLE": "Placement of the description" + "ITEM_SETTINGS_DESCRIPTION_PLACEMENT_TITLE": "Placement of the description", + "ITEM_GEOLOCATION_ADVANCED_BUTTON": "Advanced Location", + "ITEM_GEOLOCATION_ADVANCED_MODAL_TITLE": "Geolocation Advanced Settings", + "ITEM_GEOLOCATION_ADVANCED_MODAL_DESCRIPTION": "Any information submitted with this form won't be validated. You are responsible for the accuracy of the data.", + "ITEM_GEOLOCATION_ADVANCED_MODAL_LATITUDE_LABEL": "Latitude", + "ITEM_GEOLOCATION_ADVANCED_MODAL_LONGITUDE_LABEL": "Longitude", + "ITEM_GEOLOCATION_ADVANCED_MODAL_ADDRESS_LABEL": "Address", + "ITEM_GEOLOCATION_ADVANCED_MODAL_SECONDARY_ADDRESS_LABEL": "Complementary information (optional)", + "ITEM_GEOLOCATION_ADVANCED_MODAL_SECONDARY_ADDRESS_PLACEHOLDER": "red door on the right, ...", + "ITEM_GEOLOCATION_ADVANCED_MODAL_COUNTRY_LABEL": "Country", + "ITEM_GEOLOCATION_ADVANCED_MODAL_ERROR": "Latitude and longitude have to be defined" } diff --git a/src/langs/fr.json b/src/langs/fr.json index c0fd927a8..c410199cf 100644 --- a/src/langs/fr.json +++ b/src/langs/fr.json @@ -340,5 +340,15 @@ "ITEM_SETTINGS_IS_COLLAPSED_TITLE": "Minifier un élément", "ITEM_SETTINGS_DESCRIPTION_PLACEMENT_ABOVE": "Au-dessus du contenu", "ITEM_SETTINGS_DESCRIPTION_PLACEMENT_BELOW": "En-dessous du contenu", - "ITEM_SETTINGS_DESCRIPTION_PLACEMENT_TITLE": "Placement de la description" + "ITEM_SETTINGS_DESCRIPTION_PLACEMENT_TITLE": "Placement de la description", + "ITEM_GEOLOCATION_ADVANCED_BUTTON": "Localisation avancée", + "ITEM_GEOLOCATION_ADVANCED_MODAL_TITLE": "Paramètres avancés pour la localisation", + "ITEM_GEOLOCATION_ADVANCED_MODAL_DESCRIPTION": "Aucune information soumise par ce formulaire ne sera validée. L'exactitude des données revient à l'éditeur.", + "ITEM_GEOLOCATION_ADVANCED_MODAL_LATITUDE_LABEL": "Latitude", + "ITEM_GEOLOCATION_ADVANCED_MODAL_LONGITUDE_LABEL": "Longitude", + "ITEM_GEOLOCATION_ADVANCED_MODAL_ADDRESS_LABEL": "Adresse", + "ITEM_GEOLOCATION_ADVANCED_MODAL_SECONDARY_ADDRESS_LABEL": "Informations complémentaires (optionel)", + "ITEM_GEOLOCATION_ADVANCED_MODAL_SECONDARY_ADDRESS_PLACEHOLDER": "porte rouge sur la droite, ...", + "ITEM_GEOLOCATION_ADVANCED_MODAL_COUNTRY_LABEL": "Pays", + "ITEM_GEOLOCATION_ADVANCED_MODAL_ERROR": "La latitude et longitude doivent être définies" } From ce0743e40c5083206a1a21ba93cf9d9c82dea429 Mon Sep 17 00:00:00 2001 From: kim Date: Tue, 26 Mar 2024 12:02:46 +0100 Subject: [PATCH 3/4] refactor: update fr trans --- src/langs/fr.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/langs/fr.json b/src/langs/fr.json index c410199cf..85469018a 100644 --- a/src/langs/fr.json +++ b/src/langs/fr.json @@ -343,7 +343,7 @@ "ITEM_SETTINGS_DESCRIPTION_PLACEMENT_TITLE": "Placement de la description", "ITEM_GEOLOCATION_ADVANCED_BUTTON": "Localisation avancée", "ITEM_GEOLOCATION_ADVANCED_MODAL_TITLE": "Paramètres avancés pour la localisation", - "ITEM_GEOLOCATION_ADVANCED_MODAL_DESCRIPTION": "Aucune information soumise par ce formulaire ne sera validée. L'exactitude des données revient à l'éditeur.", + "ITEM_GEOLOCATION_ADVANCED_MODAL_DESCRIPTION": "Les informations fournies via ce formulaire ne sont pas validées. Vérifiez l'exactitude des données.", "ITEM_GEOLOCATION_ADVANCED_MODAL_LATITUDE_LABEL": "Latitude", "ITEM_GEOLOCATION_ADVANCED_MODAL_LONGITUDE_LABEL": "Longitude", "ITEM_GEOLOCATION_ADVANCED_MODAL_ADDRESS_LABEL": "Adresse", From 35a43fa50f95643cbd63cdf746a44bb3ad2811f5 Mon Sep 17 00:00:00 2001 From: kim Date: Tue, 26 Mar 2024 13:44:09 +0100 Subject: [PATCH 4/4] refactor: upgrade query client --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 392734905..565cd918b 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@emotion/styled": "11.11.0", "@graasp/chatbox": "3.1.0", "@graasp/map": "1.5.0", - "@graasp/query-client": "github:graasp/graasp-query-client#helper-label-geoloc", + "@graasp/query-client": "3.2.0", "@graasp/sdk": "4.3.1", "@graasp/translations": "1.25.3", "@graasp/ui": "4.12.1", diff --git a/yarn.lock b/yarn.lock index a29a4f105..48b7dffd1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1754,9 +1754,9 @@ __metadata: languageName: node linkType: hard -"@graasp/query-client@github:graasp/graasp-query-client#helper-label-geoloc": - version: 3.1.0 - resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=60cdf7e21b0b337df1a008645ed87cddfbc66a56" +"@graasp/query-client@npm:3.2.0": + version: 3.2.0 + resolution: "@graasp/query-client@npm:3.2.0" dependencies: "@tanstack/react-query": "npm:4.36.1" "@tanstack/react-query-devtools": "npm:4.36.1" @@ -1767,7 +1767,7 @@ __metadata: "@graasp/sdk": ^4.0.0 "@graasp/translations": ^1.23.0 react: ^18.0.0 - checksum: 10/d726c9a8cd9b20919746aacad6dec99fb120dc2f687f4777c5469d731eecc25dda98d79b52ab13818cc1bf3cba870ebe8557155cf202606df113a4470c0511aa + checksum: 10/58a27034f5c7fb4cd2530f3d15d5a22259e28f9d8fa028e2e3a93a10bbf7f5916b3f126d5b85a7a1c256103d9f26802751112ee74ba1cff4484676ad55940797 languageName: node linkType: hard @@ -8065,7 +8065,7 @@ __metadata: "@emotion/styled": "npm:11.11.0" "@graasp/chatbox": "npm:3.1.0" "@graasp/map": "npm:1.5.0" - "@graasp/query-client": "github:graasp/graasp-query-client#helper-label-geoloc" + "@graasp/query-client": "npm:3.2.0" "@graasp/sdk": "npm:4.3.1" "@graasp/translations": "npm:1.25.3" "@graasp/ui": "npm:4.12.1"