Add filter for layer in url (#109)

* Add filter for layer in url * Error with query params in usePopup hook * Add layer filter in hash * Add utils/hash.ts, add getLatLngFromHash, getFilterTypeFromHash and setHash functions * Move hash.ts from to helpers * Fix eslint error * Bug fixes
ekaterinburgdev · Oct 14, 2023 · 06f5f58 · 06f5f58
1 parent 6989b18
commit 06f5f58
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 16 deletions.
diff --git a/components/Layers/Houses/CardContent/CardContent.tsx b/components/Layers/Houses/CardContent/CardContent.tsx
@@ -1,20 +1,21 @@
 'use client';
 
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { useMap } from 'react-map-gl';
 
-import { Section } from 'components/UI/Card/components/Section/Section';
+import { HouseObject } from 'components/Layers/Houses/houseBase';
+import { MapContext } from 'components/Map/providers/MapProvider';
+import { usePopup } from 'components/Map/providers/usePopup';
+import { ConstructionInfo } from 'components/UI/Card/components/ConstructionInfo/ConstructionInfo';
 import { Header } from 'components/UI/Card/components/Header/Header';
-import { Label } from 'components/UI/Card/components/Label/Label';
 import { Info } from 'components/UI/Card/components/Info/Info';
-import { ConstructionInfo } from 'components/UI/Card/components/ConstructionInfo/ConstructionInfo';
+import { Label } from 'components/UI/Card/components/Label/Label';
+import { Section } from 'components/UI/Card/components/Section/Section';
 import { Sources } from 'components/UI/Card/components/Sources/Sources';
 import { EditObjectButtonLink } from 'components/UI/EditObjectButtonLink/EditObjectButtonLink';
 import { FilterLoader } from 'components/UI/Filters/components/Loader/FilterLoader';
-import { usePopup } from 'components/Map/providers/usePopup';
-import { MapContext } from 'components/Map/providers/MapProvider';
-import { HouseObject } from 'components/Layers/Houses/houseBase';
 
+import { getLatLngFromHash } from 'helpers/hash';
 import HealthProgress from '../HealthProgress/HealthProgress';
 import styles from './CardContent.module.css';
 
@@ -33,7 +34,7 @@ export function HousesCardContent() {
         }
 
         try {
-            const [lat, lng] = popupId.split('_');
+            const [lat, lng] = getLatLngFromHash();
 
             const house = map.queryRenderedFeatures(map.project({ lat: +lat, lng: +lng }), {
                 layers: ['building'],
@@ -102,7 +103,12 @@ export function HousesCardContent() {
                 name: 'Износ',
                 // eslint-disable-next-line no-irregular-whitespace
                 text: `${placemark?.attributes?.WearAndTear} %`,
-                content: <HealthProgress percent={placemark?.attributes?.WearAndTear} isEmergency={isEmergency} />,
+                content: (
+                    <HealthProgress
+                        percent={placemark?.attributes?.WearAndTear}
+                        isEmergency={isEmergency}
+                    />
+                ),
             });
         }
 
@@ -121,7 +127,13 @@ export function HousesCardContent() {
         }
 
         return result;
-    }, [placemark?.attributes?.Management_company, placemark?.attributes?.WearAndTear, placemark?.attributes?.Series, placemark?.attributes?.Floors, isEmergency]);
+    }, [
+        placemark?.attributes?.Management_company,
+        placemark?.attributes?.WearAndTear,
+        placemark?.attributes?.Series,
+        placemark?.attributes?.Floors,
+        isEmergency,
+    ]);
 
     if (loading) {
         return (

diff --git a/components/Map/providers/usePopup.ts b/components/Map/providers/usePopup.ts
@@ -1,6 +1,9 @@
 import { useCallback, useContext, useEffect, useState } from 'react';
-import { MapItemType } from 'types/map-item';
+import { useSelector } from 'react-redux';
+import { setHash } from 'helpers/hash';
+import { activeFilterSelector } from 'state/features/selectors';
 import { AboutProjectContext } from 'state/providers/AboutProjectProvider';
+import { MapItemType } from 'types/map-item';
 
 type PopupId = string;
 
@@ -10,12 +13,14 @@ export function usePopup() {
     const [popupId, setOpenedPopup] = useState<PopupId>(null);
     const [popupType, setPopupType] = useState<MapItemType>(null);
 
+    const activeFilter: string = useSelector(activeFilterSelector);
+
     const openPopup = useCallback(
         (id: PopupId, type: MapItemType) => {
             closeAboutProject();
-            window.location.hash = `${type}-${id}`;
+            setHash(type, id, activeFilter);
         },
-        [closeAboutProject],
+        [activeFilter, closeAboutProject],
     );
 
     const closePopup = useCallback(() => {
@@ -26,7 +31,7 @@ export function usePopup() {
     }, []);
 
     const handleOpenPopup = useCallback(() => {
-        const [type, ...id] = window.location.hash.slice(1).split('-');
+        const [type, ...id] = window.location.hash.slice(1).split('/')[0].split('-');
 
         setOpenedPopup(id.join('-'));
         setPopupType(type as MapItemType);

diff --git a/helpers/hash.ts b/helpers/hash.ts
@@ -0,0 +1,10 @@
+import { MapItemType } from 'types/map-item';
+
+export const getLatLngFromHash = (): string[] =>
+    window.location.hash.split('/')[0].split('-')[1].split('_');
+
+export const getFilterTypeFromHash = () => window.location.hash.split('/')[1];
+
+export const setHash = (type: MapItemType, id: string, activeFilter: string): void => {
+    window.location.hash = `${type}-${id}/${activeFilter}`;
+};
diff --git a/state/features/dataLayers.ts b/state/features/dataLayers.ts
@@ -1,10 +1,11 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
-import { ToggleDataPayload, SetFilterParamsPayload, SetFilterPayload, State } from 'state/state';
+import { getFilterTypeFromHash } from 'helpers/hash';
+import { SetFilterParamsPayload, SetFilterPayload, State, ToggleDataPayload } from 'state/state';
 import { FilterType } from 'types/Filters.types';
 
 export const initialState: State['dataLayer'] = {
-    activeFilter: Object.values(FilterType)[0],
+    activeFilter: (getFilterTypeFromHash() as FilterType) || Object.values(FilterType)[0],
     activeFilterParams: null,
 };