#107 #119 #41 #72 #40 #60 Bug Fix, Implementation of the map, startin…

…g Matomo implementations for tests
iodepo · Feb 15, 2024 · 2264957 · 2264957
1 parent 4adc876
commit 2264957
Show file tree

Hide file tree

Showing 22 changed files with 405 additions and 179 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -30,6 +30,7 @@
     "react-custom-scrollbars-2": "^4.5.0",
     "react-dom": "^18.1.0",
     "react-ga4": "^1.4.1",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-map-gl": "^6",
     "react-paginate": "^8.1.3",
     "react-redux": "^8.0.2",

diff --git a/frontend/src/components/home/MapViewerEntrypoint.js b/frontend/src/components/home/MapViewerEntrypoint.js
@@ -24,8 +24,17 @@ export default function MapViewerEntrypoint() {
         my: 6,
       }}
     >
-      <Grid container spacing={4}>
-        <Grid item xs={7} sx={{ display: "flex", justifyContent: "end" }}>
+      <Grid
+        container
+        spacing={4}
+        sx={{ flexDirection: { xs: "column-reverse", lg: "unset" } }}
+      >
+        <Grid
+          item
+          xs={12}
+          lg={7}
+          sx={{ display: "flex", justifyContent: "end" }}
+        >
           <Box
             sx={{
               height: "370px",
@@ -47,7 +56,7 @@ export default function MapViewerEntrypoint() {
             </Box>
           </Box>
         </Grid>
-        <Grid item xs={5}>
+        <Grid xs={12} item lg={5}>
           <Typography
             fontWeight={{ xs: 800, lg: 700 }}
             sx={{ fontSize: "36px", color: palette + "colorTypography" }}
@@ -68,7 +77,7 @@ export default function MapViewerEntrypoint() {
             disableElevation
             sx={{
               borderRadius: { xs: 2, lg: 1 },
-              width: { xs: "100%", lg: "auto" },
+              width: "auto",
               backgroundColor: palette + "buttonBgColor",
               marginTop: 2,
               textTransform: "none",

diff --git a/frontend/src/components/home/SearchHubEntrypoint.js b/frontend/src/components/home/SearchHubEntrypoint.js
@@ -35,7 +35,7 @@ export default function SearchHubEntrypoint() {
         disableElevation
         sx={{
           borderRadius: { xs: 2, lg: 1 },
-          width: { xs: "100%", lg: "auto" },
+          width: { xs: "unset", lg: "auto" },
           backgroundColor: palette + "buttonBgColor",
           marginTop: 2,
           textTransform: "none",

diff --git a/frontend/src/components/home/TypesCount.js b/frontend/src/components/home/TypesCount.js
@@ -78,18 +78,21 @@ export default function TypesCount() {
             maxWidth="false"
             sx={{
               backgroundColor: palette + "bgColorBox",
+              paddingRight: { xs: 0, md: "auto" },
+              paddingLeft: { xs: 0, md: "auto" },
             }}
           >
-            <Container maxWidth="xl" sx={{ py: 8 }}>
+            <Container maxWidth="xl" sx={{ py: { xs: 2, lg: 8 } }}>
               <Grid container spacing={2}>
-                <Grid item xs={5}>
+                <Grid item xs={12} lg={5}>
                   <SearchHubEntrypoint />
                 </Grid>
                 <Grid
                   item
                   container
                   spacing={2}
-                  xs={7} /* sx={{ p: "24px" }} */
+                  xs={12}
+                  lg={7} /* sx={{ p: "24px" }} */
                 >
                   <Grid item xs={12}>
                     <Search />
@@ -98,7 +101,7 @@ export default function TypesCount() {
                     {CATEGORIES.map((cat, index) => {
                       if (cat.id !== "SpatialData")
                         return (
-                          <Grid key={index} item lg={4} xs={6}>
+                          <Grid key={index} item lg={4} xs={12}>
                             <CardTopic
                               image={cat.icon}
                               text={

diff --git a/frontend/src/components/map-view/MapContainer.js b/frontend/src/components/map-view/MapContainer.js
@@ -1,4 +1,5 @@
-import { useRef, useReducer, useState, useEffect } from "react";
+import { useRef, useReducer, useState, useEffect, useCallback } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
 import ToolbarHome from "./components/ToolbarHome";
 import ToolbarMapView from "./components/ToolbarMapView";
 import { EMODNET, NO_CLUSTER } from "./utils/constants";
@@ -14,6 +15,7 @@ import { ITEMS_PER_PAGE } from "portability/configuration";
 import { dataServiceUrl } from "config/environment";
 import { mapLibreBounds_toQuery } from "utilities/mapUtility";
 import { throttle } from "lodash";
+import { useSearchParam } from "utilities/generalUtility";
 
 const MapContainer = (props) => {
   const { isHome } = props;
@@ -24,49 +26,76 @@ const MapContainer = (props) => {
     baseOpacity: 0.4,
     showPoints: false,
     showRegions: false,
-    zoom: "none",
+    zoom: 0,
     region: "Global",
+    isLoading: false,
   });
 
   //Maybe move inside useReducer? Discuss
 
+  const navigate = useNavigate();
   const [results, setResults] = useState([]);
-  const [searchText, setSearchText] = useState("");
+  const [params] = useSearchParams();
+  const [searchText, setSearchText] = useState(
+    params.has("search_text") ? params.get("search_text") : ""
+  );
   const [resultsCount, setResultsCount] = useState(0);
   const [mapBounds, setMapBounds] = useState(false);
+  const [open, setOpen] = useState(true);
 
   const mapRef = useRef(null);
 
+  const hrefFor = (region, query) =>
+    `/map-viewer?${new URLSearchParams({
+      ...(query ? { search_text: query } : {}),
+      ...(region && region.toUpperCase() !== "GLOBAL" ? { region } : {}),
+    })}`;
+
+  const handleSubmit = useCallback(
+    () => navigate(hrefFor("Global", searchText)),
+    [navigate, searchText]
+  );
   const changeBaseLayer = (layer) => {
     dispatch({ type: "setBaseLayer", baseLayer: layer });
   };
 
   const applyZoom = (zoomType) => {
-    dispatch({ type: "setZoom", zoom: zoomType });
-  };
-  const stopZoom = () => {
-    dispatch({ type: "setZoom", zoom: "none" });
+    let value;
+    if (zoomType === "out") {
+      if (state.zoom >= 0) {
+        value = -1;
+      } else if (state.zoom < 0) {
+        value = state.zoom - 1;
+      }
+    } else if (zoomType === "in") {
+      if (state.zoom <= 0) {
+        value = 1;
+      } else if (state.zoom > 0) {
+        value = state.zoom + 1;
+      }
+    }
+    dispatch({ type: "setZoom", zoom: value });
   };
-  const [open, setOpen] = useState(true);
 
-  const handleDrawerOpen = () => {
-    setOpen(true);
+  const handleDrawer = (isOpen) => {
+    setOpen(isOpen);
   };
 
-  const handleDrawerClose = () => {
-    setOpen(false);
+  const setLoading = (isLoading) => {
+    dispatch({ type: "setLoading", loading: isLoading });
   };
 
   useEffect(() => {
     getDataSpatialSearch();
-  }, []);
+  }, [navigate, params]);
 
-  const getDataSpatialSearch = throttle(() => {
+  const getDataSpatialSearch = throttle((page = 1) => {
+    page === 1 && setLoading(true);
     let URI = `${dataServiceUrl}/search?`;
     const params = new URLSearchParams({
       facetType: "the_geom",
       facetName: mapLibreBounds_toQuery(mapBounds, /* region */ "GLOBAL"),
-      rows: ITEMS_PER_PAGE,
+      rows: ITEMS_PER_PAGE * page,
       start: 0,
     });
     if (searchText !== "") {
@@ -83,6 +112,7 @@ const MapContainer = (props) => {
         setResults(json.docs);
         const count = json.count;
         setResultsCount(count);
+        page === 1 && setLoading(false);
       });
   }, 1000);
 
@@ -101,7 +131,6 @@ const MapContainer = (props) => {
           showPoints={state.showPoints}
           showRegions={state.showRegions}
           zoom={state.zoom}
-          stopZoom={stopZoom}
           isHome={isHome}
         />
       )}
@@ -125,9 +154,12 @@ const MapContainer = (props) => {
               <DrawerContent
                 results={results}
                 setSearchText={setSearchText}
+                searchText={searchText}
                 resultsCount={resultsCount}
                 mapBounds={mapBounds}
+                isLoading={state.loading}
                 getDataSpatialSearch={getDataSpatialSearch}
+                handleSubmit={handleSubmit}
               />
             </Drawer>
             {open ? (
@@ -147,7 +179,7 @@ const MapContainer = (props) => {
                     },
                   },
                 }}
-                onClick={handleDrawerClose}
+                onClick={() => handleDrawer(false)}
               >
                 <ChevronLeftIcon />
               </IconButton>
@@ -168,7 +200,7 @@ const MapContainer = (props) => {
                     },
                   },
                 }}
-                onClick={handleDrawerOpen}
+                onClick={() => handleDrawer(true)}
               >
                 <ChevronRightIcon />
               </IconButton>
@@ -198,7 +230,6 @@ const MapContainer = (props) => {
               showRegions={state.showRegions}
               isHome={isHome}
               zoom={state.zoom}
-              stopZoom={stopZoom}
             />
           </Box>
         </Box>