forked from Transparency/kgroad-frontend2
126 lines
3.4 KiB
TypeScript
126 lines
3.4 KiB
TypeScript
"use client";
|
||
|
||
import "./MapSection.scss";
|
||
import Switch from "@/Entities/Switch/Switch";
|
||
import SectionHeader from "@/Shared/UI/SectionHeader/SectionHeader";
|
||
import SearchBar from "@/Features/SearchBar/SearchBar";
|
||
import HomeMap from "@/Features/HomeMap/HomeMap";
|
||
import { useEffect, useState } from "react";
|
||
import { useMapStore } from "./map.store";
|
||
import { useShallow } from "zustand/react/shallow";
|
||
import { useDebounce } from "use-debounce";
|
||
import { useRouter } from "next/navigation";
|
||
|
||
enum ESwitch {
|
||
BUTTON,
|
||
A,
|
||
}
|
||
|
||
interface IMapSection {
|
||
[key: string]: string;
|
||
}
|
||
|
||
const MapSection: React.FC<IMapSection> = ({
|
||
queryMap,
|
||
queryRating,
|
||
categories = "1,2,3,4,5,6",
|
||
}: IMapSection) => {
|
||
const [searchLocation, setSearchLocation] =
|
||
useState<string>(queryMap);
|
||
const [query] = useDebounce(searchLocation, 500);
|
||
const router = useRouter();
|
||
const switches = [
|
||
{ title: "Разбитая дорога", category: "1", color: "#E64452" },
|
||
{ title: "В планах ремонта", category: "4", color: "#FFAC33" },
|
||
{ title: "Очаг аварийности", category: "2", color: "#C288E2" },
|
||
{ title: "Отремонтировано", category: "5", color: "#8FDE6A" },
|
||
{ title: "Локальный дефект", category: "3", color: "#87289D" },
|
||
{
|
||
title: "Локальный дефект исправлен'",
|
||
category: "6",
|
||
color: "#FED363",
|
||
},
|
||
];
|
||
|
||
const data = useMapStore(useShallow((state) => state.data));
|
||
const getRatings = useMapStore(
|
||
useShallow((state) => state.getRatings)
|
||
);
|
||
|
||
useEffect(() => {
|
||
getRatings(categories);
|
||
}, [categories]);
|
||
|
||
useEffect(() => {
|
||
router.push(
|
||
`/?тип-дороги=${categories}${
|
||
query ? `&карта-дорог=${query}` : ""
|
||
}${queryRating ? `&рейтинг=${queryRating}` : ""}`,
|
||
{
|
||
scroll: false,
|
||
}
|
||
);
|
||
}, [query, router, categories]);
|
||
|
||
const setSearchParams = (category: string) => {
|
||
const availableCategories: Record<string, number> = {
|
||
"1": 1,
|
||
"2": 2,
|
||
"3": 3,
|
||
"4": 4,
|
||
"5": 5,
|
||
"6": 6,
|
||
};
|
||
|
||
if (!categories || !availableCategories[category])
|
||
return categories;
|
||
|
||
if (categories?.includes(category)) {
|
||
const updatedString = categories
|
||
?.replace(category + ",", "")
|
||
.replace("," + category, "")
|
||
.replace(category, "");
|
||
|
||
return updatedString;
|
||
} else {
|
||
const newValue = category + ",";
|
||
const updatedString = newValue + categories;
|
||
return updatedString;
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="map-section">
|
||
<SectionHeader description="Yorem ipsum dolor sit amet, consectetur adipiscing elit.">
|
||
Карта дорог
|
||
</SectionHeader>
|
||
|
||
<SearchBar
|
||
value={searchLocation}
|
||
setValue={setSearchLocation}
|
||
placeholder="Введите город, село или регион"
|
||
/>
|
||
|
||
<div className="map-section__filters">
|
||
{switches.map((sw) => (
|
||
<div key={sw.category} className="map-section__switch">
|
||
<Switch
|
||
defaultState={
|
||
categories?.includes(sw.category) || categories === ""
|
||
}
|
||
href={`/?тип-дороги=${setSearchParams(sw.category)}`}
|
||
type={ESwitch.A}
|
||
color={sw.color}
|
||
/>
|
||
<h4>{sw.title}</h4>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<HomeMap data={data?.results} />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default MapSection;
|