add filter types to url

.eslintrc.json

@@ -59,6 +59,12 @@
                     { "from": "./features", "target": "./components" }
                 ]
             }
+        ],
+        "prettier/prettier": [
+            "error",
+            {
+                "endOfLine": "auto"
+            }
         ]
     }
 }

components/Filters/components/Toggle/Toggle.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
+import { useRouter } from 'next/router';
 import { FilterType } from 'types/Filters.types';
 
 import styles from './Toggle.module.css';
@@ -13,9 +14,16 @@ export interface ToggleProps {
 }
 
 export function Toggle({ id, label, onClick, type, isActive }: ToggleProps) {
+    const router = useRouter();
+
     const onChange = useCallback(() => {
         onClick(type);
-    }, [type, onClick]);
+        router.push({
+            pathname: '/',
+            query: type === FilterType.HouseAge ? {} : { filter: type },
+            hash: window.location.hash.slice(1),
+        });
+    }, [onClick, type, router]);
 
     return (
         <label className={styles.toggle} htmlFor={id}>

features/Buildings/BuildingSource.tsx

@@ -3,21 +3,22 @@ import {
     DataDrivenPropertyValueSpecification,
     ExpressionSpecification,
 } from 'maplibre-gl';
+import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import { useMap } from 'react-map-gl';
 import { useSelector } from 'react-redux';
-import { getLayerStyle } from 'features/Map/helpers/getFeatureState';
-import { colorLuminance } from 'features/Map/helpers/colorLuminance';
 import {
     AGE_FILTERS_DATA,
     FLOOR_FILTERS_DATA,
     WEAR_TEAR_FILTERS_DATA,
 } from 'features/Buildings/Houses.constants';
-import { activeFilterParamsSelector, activeFilterSelector } from 'state/features/selectors';
-import { FilterType } from 'types/Filters.types';
-import { MapItemType } from 'types/Content.types';
+import { colorLuminance } from 'features/Map/helpers/colorLuminance';
+import { getLayerStyle } from 'features/Map/helpers/getFeatureState';
 import useMapObjectState from 'features/Map/helpers/useMapObjectState';
 import { usePopup } from 'features/Map/providers/usePopup';
+import { activeFilterParamsSelector } from 'state/features/selectors';
+import { MapItemType } from 'types/Content.types';
+import { FilterType } from 'types/Filters.types';
 
 const BUILDING_LAYER_ID = 'building';
 
@@ -112,7 +113,8 @@ const healthRangeData = WEAR_TEAR_FILTERS_DATA.map((item) => ({ ...item, value:
 
 export function BuildingSource() {
     const ekbMap = useMap();
-    const activeFilter = useSelector(activeFilterSelector);
+    const router = useRouter();
+    const activeFilter = (router.query.filter as FilterType) || FilterType.HouseAge;
     const activeFilterParams = useSelector(activeFilterParamsSelector);
     const { openPopup } = usePopup();
 

features/Map/providers/usePopup.ts

@@ -1,8 +1,6 @@
 import { useCallback, useContext, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { setHash } from 'shared/helpers/hash';
-import { activeFilterSelector } from 'state/features/selectors';
 import { AboutProjectContext } from 'features/About/AboutProjectProvider';
+import { setHash } from 'shared/helpers/hash';
 import { MapItemType } from 'types/Content.types';
 
 type PopupId = string;
@@ -13,14 +11,12 @@ 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();
-            setHash(type, id, activeFilter);
+            setHash(type, id);
         },
-        [activeFilter, closeAboutProject],
+        [closeAboutProject],
     );
 
     const closePopup = useCallback(() => {

shared/helpers/hash.ts

@@ -1,8 +1,6 @@
 export const getLatLngFromHash = (): string[] =>
     window.location.hash.split('/')[0].split('-')[1].split('_');
 
-export const getFilterTypeFromHash = () => window.location.hash.split('/')[1];
-
-export const setHash = (type: string, id: string, activeFilter: string): void => {
-    window.location.hash = `${type}-${id}/${activeFilter}`;
+export const setHash = (type: string, id: string): void => {
+    window.location.hash = `${type}-${id}`;
 };

shared/scripts/extractHousesData.ts

@@ -1,10 +1,11 @@
 import fs from 'fs';
 import path from 'path';
 
-const SOURCE_FILE = path.join(__dirname, '..', 'public', `Facade Design Code 2023 (3).json`);
-const RESULT_FILE = path.join(__dirname, '..', 'public', `ekb-facades.json`);
+const FILE_NAME = 'Facade Design Code 2023 (3)';
+const FILE_PATH = path.join(__dirname, '..', 'public', `${FILE_NAME}.json`);
+const NEW_FILE_PATH = path.join(__dirname, '..', 'public', `${FILE_NAME}_extracted.json`);
 
-fs.readFile(SOURCE_FILE, 'utf8', (err, data) => {
+fs.readFile(FILE_PATH, 'utf8', (err, data) => {
     if (err) {
         console.error('Error reading file:', err);
         return;
@@ -23,7 +24,7 @@ fs.readFile(SOURCE_FILE, 'utf8', (err, data) => {
         };
     }
 
-    fs.writeFile(RESULT_FILE, JSON.stringify(extracedData, null, 2), 'utf8', (err: any) => {
+    fs.writeFile(NEW_FILE_PATH, JSON.stringify(extracedData, null, 2), 'utf8', (err: any) => {
         if (err) {
             console.error('Error writing file:', err);
         } else {

state/features/dataLayers.ts

@@ -1,11 +1,12 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
-import { getFilterTypeFromHash } from 'shared/helpers/hash';
 import { SetFilterParamsPayload, SetFilterPayload, State, ToggleDataPayload } from 'state/state';
 import { FilterType } from 'types/Filters.types';
 
 export const initialState: State['dataLayer'] = {
-    activeFilter: (getFilterTypeFromHash() as FilterType) || Object.values(FilterType)[0],
+    activeFilter:
+        (new URLSearchParams(window.location.search).get('filter') as FilterType) ||
+        Object.values(FilterType)[0],
     activeFilterParams: null,
 };