merged main

packages/web/package.json

@@ -26,6 +26,7 @@
     "react-ga4": "^2.1.0",
     "react-icons": "^4.10.1",
     "react-leaflet": "^4.2.1",
+    "react-leaflet-cluster": "^2.1.0",
     "react-resizable": "^3.0.5",
     "react-resizable-panels": "^0.0.53",
     "react-router-dom": "^6.11.2",

packages/web/src/components/Home/Home.jsx

@@ -331,7 +331,7 @@ export default function Home() {
     >
       <Box
         w={"100vw"}
-        h={"100vh"}
+        h={"100dvh"}
         background={colorMode === "dark" ? "#1A1E22" : ""}
       >
         <Flex
@@ -847,4 +847,4 @@ export default function Home() {
       </Box>
     </DataContext.Provider>
   );
-}
+}

packages/web/src/components/Login/Login.jsx

@@ -19,7 +19,7 @@ export default function Login() {
   return (
     <Stack
       width={"100vw"}
-      minH={"100vh"}
+      minH={"100dvh"}
       direction={{ base: "column", md: "row" }}
     >
       <Flex p={8} flex={1} align={"center"} justify={"center"}>
@@ -47,7 +47,7 @@ export default function Login() {
       <Flex flex={1}>
         <Image
           width="100%"
-          height="100vh"
+          height="100dvh"
           alt={"Login Image"}
           objectFit={"cover"}
           src={wallpaper}

packages/web/src/components/Map/Map.css

@@ -3,7 +3,7 @@
 }
 
 .map-container {
-  height: 80vh;
+  height: 80dvh;
   width: 75vw;
   border-radius: 30px;
   z-index: 0;
@@ -12,7 +12,7 @@
 @media only screen and (max-width: 600px) {
   .map-container {
     border-radius: 0;
-    height: 83vh;
+    height: 83dvh;
     width: 100vw;
     z-index: 0;
   }

packages/web/src/components/Map/Map.jsx

@@ -34,6 +34,7 @@ import { UserAuth } from "../../context/AuthContext";
 import axios from "axios";
 
 import { filterItem } from "../../utils/Utils.js";
+import MarkerClusterGroup from 'react-leaflet-cluster'
 
 /**
  * Map is uses react-leaflet's API to communicate user actions to map entities and information
@@ -133,8 +134,8 @@ export default function Map({
   );
 
   const markersData = results.length > 0 ? results : data;
-  const allMarkers = markersData.filter(filterItemCallback).map((item) => {
-    return (
+  const allMarkers = useMemo(() => {
+    return markersData.filter(filterItemCallback).map((item) => (
       <Marker
         key={item.key}
         position={item.location}
@@ -151,8 +152,8 @@ export default function Map({
             : (iconsMap[item.type] || iconsMap["others"])[item.islost]
         }
       ></Marker>
-    );
-  });
+    ));
+  }, [markersData, filterItemCallback, onOpen, setItemData, setFocusLocation]);
 
   // moves map when focusLocation state changes
   function MapFocusLocation({ location }) {
@@ -353,8 +354,11 @@ export default function Map({
         {!isEdit && (
           <MapFocusLocation location={focusLocation} search={search} />
         )}
-        {!isEdit}
-        {!isEdit && allMarkers}
+        {!isEdit && (
+          <MarkerClusterGroup chunkedLoading>
+            {allMarkers}
+          </MarkerClusterGroup>
+        )}
 
         {isEdit && <NewItemMarker />}
         {showDonut && focusLocation && (

packages/web/src/components/ResultsBar/ResultsBar.jsx

@@ -1,4 +1,4 @@
-import { useContext, useCallback, useState } from "react";
+import { useContext, useCallback, useState, useEffect, useRef } from "react";
 import "./ResultsBar.css";
 import ResultCard from "../ResultCard/ResultCard";
 import { Box, Flex, Text, Button } from "@chakra-ui/react";
@@ -19,6 +19,8 @@ export default function ResultsBar({
   const { user } = UserAuth();
 
   const [itemsonScreenLimit, setItemsOnScreenLimit] = useState(10);
+  const [isAutoScrolling, setIsAutoScrolling] = useState(true);
+  const resultsBarRef = useRef(null);
 
   const filterItemCallback = useCallback(
     (item) => filterItem(item, findFilter, user),
@@ -60,7 +62,6 @@ export default function ResultsBar({
       ? data.filter(filterItemCallback).map(mapItem)
       : results.filter(filterItemCallback).map(mapItem);
 
-  // Callback function that increases the number of items displayed on the screen by 10
   const handleLoadMore = useCallback(() => {
     setItemsOnScreenLimit(itemsonScreenLimit + 10);
   }, [itemsonScreenLimit]);
@@ -80,15 +81,11 @@ export default function ResultsBar({
     </Button>
   );
 
-  // Retrieve all items that meet the filter criteria
-
-  // Display only the first 10 items on the screen, all items if there are less than 10 items left to be loaded
   const viewableResults = allResults.slice(
     0,
     Math.min(itemsonScreenLimit, allResults.length)
   );
 
-  // Define JSX for empty results bar (no result cards)
   const noResults = (
     <Flex height="80%" width="100%" justifyContent="center" alignItems="center">
       <Text fontSize="4xl" as="b" color="gray">
@@ -97,16 +94,38 @@ export default function ResultsBar({
     </Flex>
   );
 
+  useEffect(() => {
+    let scrollInterval;
+    if (isAutoScrolling && resultsBarRef.current) {
+      scrollInterval = setInterval(() => {
+        if (resultsBarRef.current.scrollTop + resultsBarRef.current.clientHeight < resultsBarRef.current.scrollHeight) {
+          resultsBarRef.current.scrollTop += 1;
+        } else {
+          resultsBarRef.current.scrollTop = 0;
+        }
+      }, 50);
+    }
+    return () => clearInterval(scrollInterval);
+  }, [isAutoScrolling]);
+
+  const handleUserInteraction = () => {
+    setIsAutoScrolling(false);
+  };
+
   return (
     <Box
       paddingX="5px"
       width={{ base: "90vw", md: "21vw" }}
-      height="80vh"
+      height="80dvh"
       overflowY="scroll"
       overflowX="hidden"
+      ref={resultsBarRef}
+      onMouseEnter={handleUserInteraction}
+      onWheel={handleUserInteraction}
+      onTouchStart={handleUserInteraction}
     >
       {allResults.length > 0 ? viewableResults : noResults}
       {viewableResults.length < allResults.length && loadMoreButton}
     </Box>
   );
-}
+}