Merge pull request #4 from mfrederic/fix/map-markers

Add numerous map features and fix minor issues

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "realt-properties-map-frontend",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "license": "Apache-2.0",
   "scripts": {
     "start": "PORT=3010 react-scripts start",
@@ -34,6 +34,7 @@
     "@emotion/styled": "^11.11.0",
     "@graphql-codegen/cli": "^5.0.2",
     "@heroicons/react": "^2.1.3",
+    "@mantine/carousel": "^7.7.0",
     "@mantine/core": "^7.7.0",
     "@mantine/form": "^7.7.0",
     "@mantine/hooks": "^7.7.0",
@@ -43,6 +44,8 @@
     "@reduxjs/toolkit": "^2.2.2",
     "axios": "^1.6.8",
     "axios-cache-interceptor": "^1.5.1",
+    "dayjs": "^1.11.10",
+    "embla-carousel-react": "^8.0.0",
     "ethers": "^6.11.1",
     "graphql": "^16.8.1",
     "i18next": "^23.10.1",

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import { Provider } from 'react-redux';
 import store from './store/store';
-import { RealtMap } from './components/Map/MapWrapper';
+import { MapWrapper } from './components/Map/MapWrapper';
 import { AppActions } from './components/Settings/AppActions';
 import { MantineProviders } from './providers/MantineProvider';
 import { HotkeysProvider } from './providers/HotkeysProvider';
@@ -13,7 +13,7 @@ function App() {
       <InitStoreProvider>
         <MantineProviders>
           <HotkeysProvider>
-            <RealtMap />
+            <MapWrapper />
             <AppActions />
           </HotkeysProvider>
         </MantineProviders>

frontend/src/components/Map/MapEvents.tsx

@@ -3,13 +3,15 @@ import { LatLng } from 'leaflet';
 import { useLeafletContext } from '@react-leaflet/core';
 import { useAppSelector } from '../../hooks/useInitStore';
 import { selectedLatLng } from '../../store/marker/markerSelector';
-import { selectMarkerOpacity } from '../../store/mapOptions/mapOptionsSelector';
+import { selectDifferentiateOwned, selectMarkerOpacity } from '../../store/mapOptions/mapOptionsSelector';
+import { CSSCLASSES, OWNED_SELECTOR } from './MapMarkers';
 
 let previousLatLng: Pick<LatLng, 'lat' | 'lng'> | undefined;
 export function MapEvents() {
   const { map } = useLeafletContext();
   const latLng = useAppSelector(selectedLatLng);
   const markerOpacity = useAppSelector(selectMarkerOpacity);
+  const differentiateOwned = useAppSelector(selectDifferentiateOwned);
 
   useEffect(() => {
     if (latLng) {
@@ -30,5 +32,20 @@ export function MapEvents() {
       });
   }, [markerOpacity]);
 
+  useEffect(() => {
+    const owned = CSSCLASSES.owned.split(' ');
+    const notOwned = CSSCLASSES.notOwned.split(' ');
+    document
+      .querySelectorAll(`${OWNED_SELECTOR} .marker-svg`)
+      .forEach((el) => {
+        el.classList.remove(...notOwned, ...owned);
+        if (differentiateOwned) {
+          el.classList.add(...owned);
+          return;
+        }
+        el.classList.add(...notOwned);
+      });
+  }, [differentiateOwned]);
+
   return null;
 }

frontend/src/components/Map/MapMarkers.ts

@@ -9,6 +9,13 @@ import { Property } from '../../types/property';
 import { useAppDispatch, useAppSelector } from '../../hooks/useInitStore';
 import { setSelected } from '../../store/marker/markerReducer';
 
+export const OWNED_SELECTOR = '[data-marker-owned]';
+export const CSSCLASSES = {
+  owned: 'stroke-white owned drop-shadow-lg',
+  notOwned: 'opacity-80',
+}
+
+
 function pinSvg(cssClasses: string) {
   return `<svg width="50" height="50" viewBox="0 0 50 78" class="marker-svg ${cssClasses
     }"><path class="at-176__pin" d="M24,0A24,24,0,0,0,0,24C0,37.25,20,72,24,72S48,37.25,48,24A24,24,0,0,0,24,0Zm0,33a9,9,0,1,1,9-9A9,9,0,0,1,24,33Z"/></svg>`;
@@ -17,9 +24,11 @@ function pinSvg(cssClasses: string) {
 // TODO - Map options for opacity
 export function generateIcon(
   property: Property,
+  differentiateOwned: boolean,
   markerOpacity: number,
 ) {
   const owned = property.ownedAmount > 0;
+  const ownedClass = differentiateOwned && owned ? CSSCLASSES.owned : CSSCLASSES.notOwned;
   return new DivIcon({
     html:
       `<div class="relative marker-icon"
@@ -28,7 +37,7 @@ export function generateIcon(
   ${owned ? 'data-marker-owned' : ''}
   ${property.source ? `data-marker-${property.source}` : ''}
   ${property.ownerWallets.length ? `data-marker-wallet="${property.ownerWallets.join(' ')}"` : ''}>
-  ${pinSvg(`${property.iconColorClass}-icon ${owned ? 'stroke-white owned drop-shadow-lg' : 'opacity-80'}`)}
+  ${pinSvg(`${property.iconColorClass}-icon ${ownedClass}`)}
   <i class="text-3xl drop-shadow-sm mf-icon material-icons absolute top-0 left-[20%]">${property.icon}</i>
 </div>`,
     iconSize: [50, 50],
@@ -41,7 +50,6 @@ function filterProperties(
   displayAll: boolean,
   displayGnosis: boolean,
   displayRmm: boolean,
-  displayedWalletsAddresses: string[],
 ) {
   return properties
     .filter((property) => {
@@ -55,20 +63,18 @@ function filterProperties(
       if (!displayRmm && property.source === 'rmm') {
         toInclude = false;
       }
-      if (
-        displayedWalletsAddresses.length > 0
-        && property.ownerWallets.length > 0
-        && !property.ownerWallets.some((address) => displayedWalletsAddresses.includes(address.toLowerCase()))
-      ) {
-        toInclude = false;
-      }
       return toInclude;
     })
 }
 
-function createMarker(property: Property, markerOpacity: number, t: TFunction<"common", undefined>): Marker {
+function createMarker(
+  property: Property,
+  markerOpacity: number,
+  differentiateOwned: boolean,
+  t: TFunction<"common", undefined>,
+): Marker {
   return marker([property.coordinate.lat, property.coordinate.lng], {
-    icon: generateIcon(property, markerOpacity),
+    icon: generateIcon(property, differentiateOwned, markerOpacity),
     alt: property.propertyTypeName,
     title: t('propertyType.' + property.propertyTypeName),
   });
@@ -113,13 +119,10 @@ export function MapMarkers({
     displayAll,
     displayGnosis,
     displayRmm,
+    differentiateOwned,
     markerOpacity,
   } = useAppSelector((state) => state.mapOptions);
 
-  const displayedWalletsAddresses = wallets
-    .filter((wallet) => wallet.visible)
-    .map((wallet) => wallet.address.toLowerCase());
-
   function onMarkerClicked(event: LeafletMouseEvent, property: Property) {
     const currentZoom = map.getZoom();
     map.setView({
@@ -170,17 +173,17 @@ export function MapMarkers({
     clearMap();
     markerCluster = getCleanMarkerCluster();
 
-    filterProperties(properties, displayAll, displayGnosis, displayRmm, displayedWalletsAddresses)
+    filterProperties(properties, displayAll, displayGnosis, displayRmm)
       .forEach((property) => {
-        const marker = createMarker(property, markerOpacity, t)
+        const marker = createMarker(property, markerOpacity, differentiateOwned, t)
           .addEventListener('click', (event) => onMarkerClicked(event, property));
         markers.push(marker);
         markerCluster.addLayer(marker);
       });
     map.addLayer(markerCluster);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [properties, displayAll, displayGnosis, displayRmm, displayedWalletsAddresses]);
+  }, [properties, displayAll, displayGnosis, displayRmm, differentiateOwned, markerOpacity]);
 
   return null;
 }

frontend/src/components/Map/MapWrapper.tsx

@@ -11,7 +11,7 @@ import { PropertyPanel } from './PropertyPanel';
 import { MapMarkers } from './MapMarkers';
 import { MapEvents } from './MapEvents';
 
-export function RealtMap() {
+export function MapWrapper() {
   const realToken = useAppSelector(selectRealtokensList);
   const wallets = useAppSelector(selectWalletsList);