feat: add map view (#1060)

* feat: add map view * refactor: fix types * refactor: changes * refactor: update query-client and map * refactor: fix tests
graasp · Mar 11, 2024 · 95df7a5 · 95df7a5
1 parent b8f7011
commit 95df7a5
Show file tree

Hide file tree

Showing 9 changed files with 408 additions and 188 deletions.
diff --git a/cypress/e2e/item/duplicate/duplicateItem.cy.ts b/cypress/e2e/item/duplicate/duplicateItem.cy.ts
@@ -6,7 +6,7 @@ import { SAMPLE_ITEMS } from '../../../fixtures/items';
 import duplicateItem from '../../../support/actionsUtils';
 
 describe('duplicate Item in Home', () => {
-  Object.values(ItemLayoutMode).forEach((view) => {
+  Object.values([ItemLayoutMode.Grid, ItemLayoutMode.List]).forEach((view) => {
     it(`duplicate item on Home in ${view} view`, () => {
       cy.setUpApi(SAMPLE_ITEMS);
       cy.visit(HOME_PATH);
@@ -25,7 +25,7 @@ describe('duplicate Item in Home', () => {
   });
 });
 describe('duplicate Item in item', () => {
-  Object.values(ItemLayoutMode).forEach((view) => {
+  Object.values([ItemLayoutMode.Grid, ItemLayoutMode.List]).forEach((view) => {
     it(`duplicate item in item in ${view} view`, () => {
       cy.setUpApi(SAMPLE_ITEMS);
       const { id, path } = SAMPLE_ITEMS.items[0];

diff --git a/package.json b/package.json
@@ -20,10 +20,11 @@
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "3.1.0",
-    "@graasp/query-client": "2.8.0",
+    "@graasp/map": "1.4.0",
+    "@graasp/query-client": "2.9.0",
     "@graasp/sdk": "4.1.0",
     "@graasp/translations": "1.25.2",
-    "@graasp/ui": "4.9.0",
+    "@graasp/ui": "4.9.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/MapView.tsx b/src/components/item/MapView.tsx
@@ -0,0 +1,45 @@
+import { Typography } from '@mui/material';
+
+import { Map } from '@graasp/map';
+import { type DiscriminatedItem, redirect } from '@graasp/sdk';
+
+import { buildGraaspPlayerView } from '@/config/externalPaths';
+import { hooks, mutations } from '@/config/queryClient';
+import { buildPlayerTabName } from '@/config/selectors';
+
+type Props = {
+  parentId?: DiscriminatedItem['id'];
+  title: string;
+};
+
+const MapView = ({ parentId, title }: Props): JSX.Element => {
+  const { data: currentMember } = hooks.useCurrentMember();
+
+  return (
+    <>
+      <Typography variant="h4" sx={{ wordWrap: 'break-word' }}>
+        {title}
+      </Typography>
+      <div style={{ width: '100%', height: '80vh' }}>
+        <Map
+          useDeleteItemGeolocation={mutations.useDeleteItemGeolocation}
+          usePostItem={mutations.usePostItem}
+          useRecycleItems={mutations.useRecycleItems}
+          useAddressFromGeolocation={hooks.useAddressFromGeolocation}
+          useSuggestionsForAddress={hooks.useSuggestionsForAddress}
+          useItemsInMap={hooks.useItemsInMap}
+          viewItem={(item) => {
+            redirect(window, buildGraaspPlayerView(item.id), {
+              name: buildPlayerTabName(item.id),
+              openInNewTab: true,
+            });
+          }}
+          currentMember={currentMember}
+          itemId={parentId}
+        />
+      </div>
+    </>
+  );
+};
+
+export default MapView;
diff --git a/src/components/item/header/ModeButton.tsx b/src/components/item/header/ModeButton.tsx
@@ -4,7 +4,7 @@ import {
   List as ListIcon,
   ViewModule as ViewModuleIcon,
 } from '@mui/icons-material';
-// import MapIcon from '@mui/icons-material/Map';
+import MapIcon from '@mui/icons-material/Map';
 import { IconButton } from '@mui/material';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
@@ -16,8 +16,8 @@ import { useLayoutContext } from '../../context/LayoutContext';
 
 const modeToIcon = (mode: ItemLayoutMode) => {
   switch (mode) {
-    // case ItemLayoutMode.Map:
-    //   return <MapIcon color="primary" />;
+    case ItemLayoutMode.Map:
+      return <MapIcon color="primary" />;
     case ItemLayoutMode.Grid:
       return <ViewModuleIcon color="primary" />;
     case ItemLayoutMode.List:

diff --git a/src/components/item/settings/GeolocationPicker.tsx b/src/components/item/settings/GeolocationPicker.tsx
@@ -1,27 +1,16 @@
-import { ChangeEventHandler } from 'react';
-
 import Clear from '@mui/icons-material/Clear';
-import {
-  Box,
-  IconButton,
-  InputAdornment,
-  LinearProgress,
-  List,
-  ListItemButton,
-  OutlinedInput,
-  Stack,
-  Tooltip,
-  Typography,
-} from '@mui/material';
+import { IconButton, Stack, Tooltip, Typography } from '@mui/material';
 
+import {
+  type GeolocationPickerProps,
+  GeolocationPicker as MapGeolocationPicker,
+} from '@graasp/map';
 import { DiscriminatedItem } from '@graasp/sdk';
 
 import { useBuilderTranslation } from '@/config/i18n';
 import { hooks, mutations } from '@/config/queryClient';
 import { BUILDER } from '@/langs/constants';
 
-import { OpenStreetMapResult, useSearchAddress } from './hooks';
-
 const GeolocationPicker = ({
   item,
 }: {
@@ -32,42 +21,26 @@ const GeolocationPicker = ({
   const { mutate: putGeoloc } = mutations.usePutItemGeolocation();
   const { mutate: deleteGeoloc } = mutations.useDeleteItemGeolocation();
 
-  const {
-    query,
-    setQuery,
-    isDebounced,
-    setResults,
-    results,
-    loading,
-    clearQuery,
-  } = useSearchAddress({
-    lang: item.lang,
-    geoloc,
-  });
-
-  const onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setQuery(e.target.value);
-  };
-
-  const onChangeOption = (option: OpenStreetMapResult): void => {
-    const {
-      raw: { lat, lon: lng },
-      label,
-    } = option;
+  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: {
-        lng: parseFloat(lng),
-        lat: parseFloat(lat),
-        addressLabel: label,
+        addressLabel,
+        lat,
+        lng,
+        country,
       },
     });
-    setResults([]);
   };
 
   const clearGeoloc = () => {
     deleteGeoloc({ itemId: item.id });
-    clearQuery();
   };
 
   // the input is disabled if the geoloc is defined in parent
@@ -86,57 +59,25 @@ const GeolocationPicker = ({
       </Stack>
       <Stack direction="row" alignItems="center">
         <Stack flexGrow={1}>
-          <OutlinedInput
-            disabled={isDisabled}
-            fullWidth
-            multiline
-            placeholder={t(BUILDER.ITEM_SETTINGS_GEOLOCATION_PLACEHOLDER)}
-            onChange={onChange}
-            value={query}
-            endAdornment={
-              query && !isDisabled ? (
-                <InputAdornment position="end">
-                  <Tooltip title={t(BUILDER.ITEM_SETTINGS_CLEAR_GEOLOCATION)}>
-                    <IconButton onClick={clearGeoloc}>
-                      <Clear />
-                    </IconButton>
-                  </Tooltip>
-                </InputAdornment>
-              ) : undefined
-            }
+          <MapGeolocationPicker
+            onChangeOption={onChangeOption}
+            initialValue={geoloc?.addressLabel ?? undefined}
+            useSuggestionsForAddress={hooks.useSuggestionsForAddress}
           />
-          {loading && (
-            <Box sx={{ width: '100%' }}>
-              <LinearProgress />
-            </Box>
-          )}
+        </Stack>
+        <Stack>
+          <Tooltip title={t(BUILDER.ITEM_SETTINGS_CLEAR_GEOLOCATION)}>
+            <IconButton onClick={clearGeoloc}>
+              <Clear />
+            </IconButton>
+          </Tooltip>
         </Stack>
       </Stack>
       {isDisabled && (
         <Typography variant="caption">
           {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_INHERITED_EXPLANATION)}
         </Typography>
       )}
-      <Stack>
-        {results && (
-          <List>
-            {results.map((r) => (
-              <ListItemButton
-                key={r.raw.osm_id}
-                onClick={() => onChangeOption(r)}
-              >
-                {r.label}
-              </ListItemButton>
-            ))}
-            {!results.length &&
-              query &&
-              query !== geoloc?.addressLabel &&
-              !loading &&
-              !isDebounced &&
-              t(BUILDER.ITEM_SETTINGS_GEOLOCATION_NO_ADDRESS)}
-          </List>
-        )}
-      </Stack>
     </Stack>
   );
 };

diff --git a/src/components/item/settings/hooks.ts b/src/components/item/settings/hooks.ts
diff --git a/src/components/main/Items.tsx b/src/components/main/Items.tsx
@@ -5,6 +5,7 @@ import { ShowOnlyMeChangeType } from '@/config/types';
 import { hooks } from '../../config/queryClient';
 import { ItemLayoutMode } from '../../enums';
 import { useLayoutContext } from '../context/LayoutContext';
+import MapView from '../item/MapView';
 import { useItemsStatuses } from '../table/BadgesCellRenderer';
 import ItemsGrid from './ItemsGrid';
 import ItemsTable from './ItemsTable';
@@ -75,6 +76,8 @@ const Items = ({
     itemsTags,
   });
   switch (mode) {
+    case ItemLayoutMode.Map:
+      return <MapView title={title} parentId={parentId} />;
     case ItemLayoutMode.Grid:
       return (
         <ItemsGrid

diff --git a/src/enums/itemLayoutMode.ts b/src/enums/itemLayoutMode.ts
@@ -1,8 +1,7 @@
 enum ItemLayoutMode {
-  Grid = 'grid',
   List = 'list',
-  // todo: enable when adding the map
-  // Map = 'map',
+  Grid = 'grid',
+  Map = 'map',
 }
 
 export const DEFAULT_ITEM_LAYOUT_MODE = ItemLayoutMode.List;