forked from Transparency/kgroad-frontend2
148 lines
4.6 KiB
TypeScript
148 lines
4.6 KiB
TypeScript
import "./MapSection.scss";
|
|
import Typography from "@/shared/ui/components/Typography/Typography";
|
|
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_COLORS } from "@/shared/variables/road-types";
|
|
import { useTranslations } from "next-intl";
|
|
import { getTranslations } from "next-intl/server";
|
|
|
|
const DynamicMap = dynamic(() => import("./HomeMap/HomeMap"), {
|
|
ssr: false,
|
|
});
|
|
|
|
interface IMapSectionProps {
|
|
searchParams: {
|
|
["тип-дороги"]: string;
|
|
["поиск-на-карте"]: string;
|
|
["поиск-рейтинг"]: string;
|
|
["страница-рейтинга"]: string;
|
|
};
|
|
}
|
|
|
|
const MapSection: React.FC<IMapSectionProps> = async ({
|
|
searchParams,
|
|
}: IMapSectionProps) => {
|
|
const t = await getTranslations("home");
|
|
|
|
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(",");
|
|
};
|
|
|
|
const ROAD_TYPES: Record<number, string> = {
|
|
1: t("broken_roads"),
|
|
2: t("accident_hotspots"),
|
|
3: t("local_defects"),
|
|
4: t("repair_plans"),
|
|
5: t("repaired"),
|
|
6: t("fixed_local_defects"),
|
|
};
|
|
|
|
return (
|
|
<div className="map-section">
|
|
<div className="map-section__header">
|
|
<Typography element="h3">{t("road_map")}</Typography>
|
|
<Paragraph>{t("latest_news")}</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}
|
|
placeholder={t("enter_location")}
|
|
/>
|
|
|
|
<div className="map-section__categories"></div>
|
|
|
|
<DynamicMap reports={data} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MapSection;
|