126 lines
3.9 KiB
TypeScript
126 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { FC, useState, useEffect } from "react";
|
|
import { Box, Grid } from "@mui/material";
|
|
import { useTranslate } from "react-polyglot";
|
|
import taxonomy from "app/_config/taxonomy.json";
|
|
import { colors } from "@/app/_styles/theme";
|
|
import { useAppContext } from "./AppProvider";
|
|
|
|
export const QueryText: FC = () => {
|
|
const t = useTranslate();
|
|
const {
|
|
typography: { h6 },
|
|
query: q,
|
|
} = useAppContext();
|
|
|
|
const displayNames: any = {
|
|
incidentType: t("incidentType"),
|
|
startDate: t("startDate"),
|
|
endDate: t("endDate"),
|
|
relativeDate: t("relativeDate"),
|
|
targetedGroup: t("targetedGroup"),
|
|
platform: t("platform"),
|
|
device: t("device"),
|
|
service: t("service"),
|
|
maker: t("maker"),
|
|
country: t("country"),
|
|
subregion: t("subregion"),
|
|
continent: t("continent"),
|
|
};
|
|
|
|
const createClause = (query: any, key: string) => {
|
|
const { values, queryType } = query[key];
|
|
const color =
|
|
queryType === "include"
|
|
? colors.leafcutterElectricBlue
|
|
: colors.warningPink;
|
|
|
|
if (values.length > 0) {
|
|
return `where <span style="color: ${color};"><strong>${
|
|
displayNames[key]
|
|
}</strong> ${
|
|
queryType === "include" ? ` ${t("is")} ` : ` ${t("isNot")} `
|
|
} ${values
|
|
.map(
|
|
// @ts-expect-error
|
|
(value: string) => `<em>${taxonomy[key]?.[value]?.display ?? ""}</em>`
|
|
)
|
|
.join(` ${t("or")} `)}</span>`;
|
|
}
|
|
|
|
return null;
|
|
};
|
|
const createDateClause = (query: any, key: string) => {
|
|
const { values } = query[key];
|
|
const color = colors.leafcutterElectricBlue;
|
|
if (values.length > 0) {
|
|
const range = key === "startDate" ? t("onOrAfter") : t("onOrBefore");
|
|
return `${t("where")} <span style="color: ${color};"><strong>${
|
|
displayNames[key]
|
|
}</strong> is ${range} <em>${values[0]?.toLocaleDateString()}</em></span>`;
|
|
}
|
|
return null;
|
|
};
|
|
const createRelativeDateClause = (query: any, key: string) => {
|
|
const { values } = query[key];
|
|
const color = colors.leafcutterElectricBlue;
|
|
|
|
if (query[key].values.length > 0) {
|
|
const range = t("onOrAfter");
|
|
return `${t("where")} <span style="color: ${color};"><strong>${
|
|
displayNames[key]
|
|
}</strong> is ${range} <em>${values[0]} days ago</em></span>`;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const [queryText, setQueryText] = useState(t("findAllIncidents"));
|
|
useEffect(() => {
|
|
const generateQueryText = (query: any) => {
|
|
const incidentClause = createClause(query, "incidentType");
|
|
const startDateClause = createDateClause(query, "startDate");
|
|
const endDateClause = createDateClause(query, "endDate");
|
|
const relativeDateClause = createRelativeDateClause(
|
|
query,
|
|
"relativeDate"
|
|
);
|
|
const targetedGroupClause = createClause(query, "targetedGroup");
|
|
const platformClause = createClause(query, "platform");
|
|
const deviceClause = createClause(query, "device");
|
|
const serviceClause = createClause(query, "service");
|
|
const makerClause = createClause(query, "maker");
|
|
const countryClause = createClause(query, "country");
|
|
const subregionClause = createClause(query, "subregion");
|
|
const continentClause = createClause(query, "continent");
|
|
const joinedClauses = [
|
|
incidentClause,
|
|
startDateClause,
|
|
endDateClause,
|
|
relativeDateClause,
|
|
targetedGroupClause,
|
|
platformClause,
|
|
deviceClause,
|
|
serviceClause,
|
|
makerClause,
|
|
countryClause,
|
|
subregionClause,
|
|
continentClause,
|
|
]
|
|
.filter((clause) => clause !== null)
|
|
.join(" and ");
|
|
|
|
return `${t("findAllIncidents")} ${joinedClauses}`;
|
|
};
|
|
const text = generateQueryText(q);
|
|
setQueryText(text);
|
|
}, [q]);
|
|
|
|
return (
|
|
<Grid container direction="column">
|
|
<Grid item>
|
|
<Box sx={h6} dangerouslySetInnerHTML={{ __html: queryText }} />
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
};
|