forked from Transparency/kgroad-frontend2
138 lines
4.4 KiB
TypeScript
138 lines
4.4 KiB
TypeScript
import Typography from "@/shared/ui/components/Typography/Typography";
|
||
import "./MapSection.scss";
|
||
import Paragraph from "@/shared/ui/components/Paragraph/Paragraph";
|
||
import MapSearch from "./MapSearch/MapSearch";
|
||
import dynamic from "next/dynamic";
|
||
import { apiInstance } from "@/shared/config/apiConfig";
|
||
import { IReport } from "@/shared/types/report-type";
|
||
import Switch from "./Switch/Switch";
|
||
import {
|
||
ROAD_TYPES,
|
||
ROAD_TYPES_COLORS,
|
||
} from "@/shared/variables/road-types";
|
||
|
||
const DynamicMap = dynamic(() => import("./HomeMap/HomeMap"), {
|
||
ssr: false,
|
||
});
|
||
|
||
interface IMapSectionProps {
|
||
searchParams: {
|
||
["тип-дороги"]: string;
|
||
["поиск-на-карте"]: string;
|
||
["поиск-рейтинг"]: string;
|
||
["страница-рейтинга"]: string;
|
||
};
|
||
}
|
||
|
||
const MapSection: React.FC<IMapSectionProps> = async ({
|
||
searchParams,
|
||
}: IMapSectionProps) => {
|
||
const getReports = async (categories: string) => {
|
||
const res = await apiInstance<IReport[]>(
|
||
`/report/?category=${categories}`
|
||
);
|
||
|
||
return res.data;
|
||
};
|
||
|
||
const data =
|
||
(await getReports(searchParams["тип-дороги"] || "1,2,3,4,5,6")) ||
|
||
[];
|
||
|
||
const setCategories = (category: string) => {
|
||
if (searchParams["тип-дороги"] === undefined) {
|
||
const categories = ["1", "2", "3", "4", "5", "6"];
|
||
return categories.filter((cat) => cat !== category).join(",");
|
||
}
|
||
|
||
const categories = Array.from(searchParams["тип-дороги"]).filter(
|
||
(part) => part !== ","
|
||
);
|
||
|
||
if (categories.includes(category))
|
||
return categories.filter((cat) => cat !== category).join(",");
|
||
|
||
categories.push(category);
|
||
return categories.join(",");
|
||
};
|
||
|
||
return (
|
||
<div className="map-section">
|
||
<div className="map-section__header">
|
||
<Typography element="h3">Карта дорог</Typography>
|
||
<Paragraph>
|
||
Будьте в курсе последних новостей о дорожном движении,
|
||
строительствах и мероприятиях!
|
||
</Paragraph>
|
||
</div>
|
||
|
||
<div className="map-section__categories">
|
||
<ul>
|
||
{[1, 2, 3].map((sw) => (
|
||
<li key={sw}>
|
||
<Switch
|
||
defaultState={
|
||
searchParams["тип-дороги"]
|
||
? searchParams["тип-дороги"]?.includes(
|
||
sw.toString()
|
||
)
|
||
: true
|
||
}
|
||
color={ROAD_TYPES_COLORS[sw]}
|
||
href={`?${new URLSearchParams({
|
||
["тип-дороги"]: setCategories(
|
||
sw.toString()
|
||
) as string,
|
||
["поиск-на-карте"]:
|
||
searchParams["поиск-на-карте"] || "",
|
||
["поиск-рейтинг"]:
|
||
searchParams["поиск-рейтинг"] || "",
|
||
["страница-рейтинга"]:
|
||
searchParams["страница-рейтинга"] || "",
|
||
})}`}
|
||
/>
|
||
<p>{ROAD_TYPES[sw]}</p>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<ul>
|
||
{[4, 5, 6].map((sw) => (
|
||
<li key={sw}>
|
||
<Switch
|
||
defaultState={
|
||
searchParams["тип-дороги"]
|
||
? searchParams["тип-дороги"]?.includes(
|
||
sw.toString()
|
||
)
|
||
: true
|
||
}
|
||
color={ROAD_TYPES_COLORS[sw]}
|
||
href={`?${new URLSearchParams({
|
||
["тип-дороги"]: setCategories(
|
||
sw.toString()
|
||
) as string,
|
||
["поиск-на-карте"]:
|
||
searchParams["поиск-на-карте"] || "",
|
||
["поиск-рейтинг"]:
|
||
searchParams["поиск-рейтинг"] || "",
|
||
["страница-рейтинга"]:
|
||
searchParams["страница-рейтинга"] || "",
|
||
})}`}
|
||
/>
|
||
<p>{ROAD_TYPES[sw]}</p>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<MapSearch searchParams={searchParams} />
|
||
|
||
<div className="map-section__categories"></div>
|
||
|
||
<DynamicMap reports={data} />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default MapSection;
|