feat: filter url parameters

src/components/UI/FilterMenu/ChannelFilterMenu.tsx

@@ -20,6 +20,7 @@ export const ChannelFilterMenu: React.FC = () => {
       menuOptions={channelFilterMenuOptions}
       onChange={setChannelFilterMenuOption}
       translationPath="filter.channels"
+      parameterName="channel"
     />
   );
 };

src/components/UI/FilterMenu/CommonFilterMenu.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState, MouseEvent, ReactElement } from "react";
 import { Menu, MenuItem } from "@mui/material";
 import FilterMenuButton from "./FilterMenuButton";
 import { useTranslation } from "next-i18next";
+import { addParameterToURL, getParameterValueFromURL } from "@/utils/helpers";
 
 export type FilterMenuOption<ValueType> = {
   label: string;
@@ -13,13 +14,15 @@ export type FilterMenuProps<ValueType> = {
   initialValue: ValueType;
   menuOptions: FilterMenuOption<ValueType>[];
   translationPath: string;
+  parameterName: string;
 };
 
 function CommonFilterMenu<ValueType>({
   onChange,
   initialValue,
   menuOptions,
   translationPath,
+  parameterName,
 }: FilterMenuProps<ValueType>): ReactElement {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const [selectedValue, setSelectedValue] = useState<ValueType>(initialValue);
@@ -37,9 +40,18 @@ function CommonFilterMenu<ValueType>({
   const handleMenuItemClick = (event: MouseEvent<HTMLLIElement>) => {
     const value = (event.currentTarget.dataset.value ?? null) as ValueType;
     setSelectedValue(value);
+    addParameterToURL(
+      parameterName,
+      (event.currentTarget.dataset.value ?? "") as string
+    );
     handleClose();
   };
 
+  useEffect(() => {
+    const value = getParameterValueFromURL(parameterName);
+    setSelectedValue(value as ValueType);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   useEffect(() => {
     onChange(selectedValue);
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/components/UI/FilterMenu/FilterTimeMenu.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { Menu, MenuItem } from "@mui/material";
 import FilterMenuButton from "./FilterMenuButton";
 import { useTranslation } from "next-i18next";
+import { addParameterToURL, getParameterValueFromURL } from "@/utils/helpers";
 
 type TimeOption =
   | "last30Minutes"
@@ -81,6 +82,7 @@ const FilterTimeMenu: React.FC<FilterTimeMenuProps> = ({
   const [selectedValue, setSelectedValue] =
     useState<TimeOption>("last30Minutes");
   const open = Boolean(anchorEl);
+  const parameterName = "lastTime";
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
@@ -90,10 +92,17 @@ const FilterTimeMenu: React.FC<FilterTimeMenuProps> = ({
     setAnchorEl(null);
   };
 
+  useEffect(() => {
+    const value = getParameterValueFromURL(parameterName);
+    if (!value) return;
+    setSelectedValue(value as TimeOption);
+  }, []);
+
   const handleMenuItemClick = (event: React.MouseEvent<HTMLLIElement>) => {
     const value = event.currentTarget.dataset.value as TimeOption;
 
     setSelectedValue(value);
+    addParameterToURL(parameterName, value);
 
     handleClose();
   };

src/components/UI/FilterMenu/ReasonFilterMenu.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import { useTranslation } from "next-i18next";
 import Checkbox from "@mui/material/Checkbox";
 import ListItemText from "@mui/material/ListItemText";
+import { addParameterToURL, getParameterValueFromURL } from "@/utils/helpers";
 
 const reasonFilterMenuOptions: string[] = [
   "barinma",
@@ -29,6 +30,7 @@ export const ReasonFilterMenu: React.FC = () => {
   const [filterValues, setValues] = React.useState<string[]>(
     reasonFilterMenuOptions
   );
+  const parameterName = "reasons";
 
   const handleChange = (event: SelectChangeEvent<any>) => {
     const {
@@ -38,8 +40,16 @@ export const ReasonFilterMenu: React.FC = () => {
       typeof value === "string" ? value.split(",") : value;
 
     setValues(selectedReasons);
+    addParameterToURL(parameterName, value);
   };
 
+  React.useEffect(() => {
+    const value = getParameterValueFromURL(parameterName);
+    if (value) {
+      setValues(value.split(","));
+    }
+  }, []);
+
   React.useEffect(() => {
     setReasoningFilterMenuOption(filterValues.join(","));
   }, [filterValues, setReasoningFilterMenuOption]);

src/components/UI/Map/LeafletMap.tsx

@@ -136,12 +136,12 @@ const MapEvents = () => {
       const _lng = localCoordinates.getCenter().lng;
       const _zoomLevel = zoomLevel;
 
-      const locationWithZoomLevel = new URLSearchParams();
-      locationWithZoomLevel.append("lat", _lat.toString());
-      locationWithZoomLevel.append("lng", _lng.toString());
-      locationWithZoomLevel.append("zoom", _zoomLevel.toString());
+      const locationWithZoomLevel = new URLSearchParams(window.location.search);
+      locationWithZoomLevel.set("lat", _lat.toString());
+      locationWithZoomLevel.set("lng", _lng.toString());
+      locationWithZoomLevel.set("zoom", _zoomLevel.toString());
       if (id) {
-        locationWithZoomLevel.append("id", id.toString());
+        locationWithZoomLevel.set("id", id.toString());
       }
       const query = locationWithZoomLevel.toString();
       safeSetLocalStorage(localStorageKeys.coordinatesURL, query);

src/utils/helpers.ts

@@ -5,4 +5,15 @@ const capitalize = (str: string) => {
   return str.charAt(0).toUpperCase() + str.slice(1);
 };
 
-export { capitalize, isNaN };
+function addParameterToURL(param: string, value: string) {
+  let url = new URL(window.location.href);
+  url.searchParams.set(param, value);
+  window.history.pushState({}, "", url);
+}
+
+function getParameterValueFromURL(param: string) {
+  let url = new URL(window.location.href);
+  return url.searchParams.get(param);
+}
+
+export { capitalize, isNaN, addParameterToURL, getParameterValueFromURL };