feat: hassu 1012 maakunnat haussa (#365)

* maakunta-api ja sen käyttö fe:ssä * Ota huomioon ruotsinkielisyys Co-authored-by: Valhe Kouneli <valhe.kouneli@cgi.com>
finnishtransportagency · Sep 16, 2022 · 98b546c · 98b546c
1 parent 40bceba
commit 98b546c
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 17 deletions.
diff --git a/src/components/kansalaisenEtusivu/Hakulomake.tsx b/src/components/kansalaisenEtusivu/Hakulomake.tsx
@@ -28,17 +28,18 @@ type HakulomakeFormValues = {
 type Props = {
   hakutulostenMaara: number | null | undefined;
   kuntaOptions: SelectOption[];
+  maakuntaOptions: SelectOption[];
   query: HookReturnType;
 };
 
-export default function HakulomakeWrapper({ hakutulostenMaara, kuntaOptions, query }: Props) {
+export default function HakulomakeWrapper({ hakutulostenMaara, maakuntaOptions, kuntaOptions, query }: Props) {
   if (!query) {
     return null;
   }
-  return <Hakulomake hakutulostenMaara={hakutulostenMaara} kuntaOptions={kuntaOptions} query={query} />;
+  return <Hakulomake hakutulostenMaara={hakutulostenMaara} maakuntaOptions={maakuntaOptions} kuntaOptions={kuntaOptions} query={query} />;
 }
 
-function Hakulomake({ hakutulostenMaara, kuntaOptions, query }: Props) {
+function Hakulomake({ hakutulostenMaara, kuntaOptions, maakuntaOptions, query }: Props) {
   const theme = useTheme();
   const desktop = useMediaQuery(theme.breakpoints.up("lg"));
   const [pienennaHakuState, setPienennaHakuState] = useState<boolean>(false);
@@ -201,7 +202,7 @@ function Hakulomake({ hakutulostenMaara, kuntaOptions, query }: Props) {
                       id="maakunta"
                       disabled
                       label={t("maakunta")}
-                      options={[{ label: "", value: "" }]}
+                      options={maakuntaOptions ? maakuntaOptions : [{ label: "", value: "" }]}
                       error={errors?.maakunta}
                       {...register("maakunta", { shouldUnregister: true })}
                     />
@@ -212,7 +213,7 @@ function Hakulomake({ hakutulostenMaara, kuntaOptions, query }: Props) {
                       addEmptyOption
                       id="vaylamuoto"
                       label={t("vaylamuoto")}
-                      options={Object.keys(ProjektiTyyppi).map((tyyppi) => ({ label: tyyppi, value: tyyppi }))}
+                      options={Object.keys(ProjektiTyyppi).map((tyyppi) => ({ label: t(`vaylamuodot.${tyyppi}`), value: tyyppi }))}
                       error={errors?.vaylamuoto}
                       {...register("vaylamuoto", { shouldUnregister: false })}
                     />

diff --git a/src/locales/fi/etusivu.json b/src/locales/fi/etusivu.json
@@ -9,5 +9,10 @@
   "hakuvinkki": "Vinkki: kokeile 'valtatie'-sanan sijaan 'vt', joko yhteen tai erikseen kirjoitettuna tien numeron kanssa. Katso lisää <a>hakuohjeista</a>.",
   "hae": "Hae",
   "loytyi-n-suunnitelmaa": "Löytyi {{lkm}} suunnitelmaa",
-  "nollaa-hakuehdot": "Nollaa hakuehdot"
+  "nollaa-hakuehdot": "Nollaa hakuehdot",
+  "vaylamuodot": {
+    "RATA": "Ratasuunnitelma",
+    "TIE": "Tiesuunnitelma",
+    "YLEINEN": "Yleissuunnitelma"
+  }
 }
diff --git a/src/locales/sv/etusivu.json b/src/locales/sv/etusivu.json
@@ -9,5 +9,10 @@
   "hakuvinkki": "RUOTSIKSI Vinkki: kokeile 'valtatie'-sanan sijaan 'vt', joko yhteen tai erikseen kirjoitettuna tien numeron kanssa. Katso lisää <a>hakuohjeista</a>.",
   "hae": "RUOTSIKSI Hae",
   "loytyi-n-suunnitelmaa": "RUOTSIKSI Löytyi {{lkm}} suunnitelmaa",
-  "nollaa-hakuehdot": "RUOTSIKSI Nollaa hakuehdot"
+  "nollaa-hakuehdot": "RUOTSIKSI Nollaa hakuehdot",
+  "vaylamuodot": {
+    "RATA": "RUOTSIKSI Ratasuunnitelma",
+    "TIE": "RUOTSIKSI Tiesuunnitelma",
+    "YLEINEN": "RUOTSIKSI Yleissuunnitelma"
+  }
 }
diff --git a/src/pages/api/kuntalista.json.ts b/src/pages/api/kuntalista.json.ts
@@ -5,12 +5,18 @@ import { setupLambdaMonitoring, wrapXrayAsync } from "../../../backend/src/aws/m
 
 const KUNTALISTA_TTL_SECONDS = 24 * 3 * 60 * 60;
 
+export type KuntaListaOption = {
+  label: string;
+  labelRuo: string;
+  value: string;
+};
+
 async function fetchKuntaLista() {
   const response = await fetch("http://rajapinnat.ymparisto.fi/api/Hakemistorajapinta/1.0/odata/Kunta");
 
   const data: any = await response.json();
   const list = data?.value?.map((kunta: any) => {
-    return { label: kunta.Nimi, value: kunta.Nimi.toUpperCase() };
+    return { label: kunta.Nimi, labelRuo: kunta.NimiRuo, value: kunta.Nimi.toUpperCase() };
   });
   list.unshift({ label: "", value: "" });
   return list;

diff --git a/src/pages/api/maakuntalista.json.ts b/src/pages/api/maakuntalista.json.ts
@@ -0,0 +1,51 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { S3Cache } from "../../../backend/src/cache/s3Cache";
+import log from "loglevel";
+import { setupLambdaMonitoring, wrapXrayAsync } from "../../../backend/src/aws/monitoring";
+
+const MAAKUNTALISTA_TTL_SECONDS = 24 * 3 * 60 * 60;
+
+export type MaakuntaListaOption = {
+  label: string;
+  labelRuo: string;
+  value: string;
+};
+
+async function fetchMaakuntaLista() {
+  const response = await fetch("http://rajapinnat.ymparisto.fi/api/Hakemistorajapinta/1.0/odata/Maakunta");
+
+  const data: any = await response.json();
+  const list = data?.value?.map((maakunta: any) => {
+    return { label: maakunta.Nimi, labelRuo: maakunta.NimiRuo, value: maakunta.Nimi.toUpperCase() };
+  });
+  list.unshift({ label: "", value: "" });
+  return list;
+}
+
+export default async function handler(_req: NextApiRequest, res: NextApiResponse) {
+  setupLambdaMonitoring();
+  return await wrapXrayAsync("handler", async () => {
+    const s3Cache = new S3Cache();
+    const kuntaList: Record<string, string> = await s3Cache.get(
+      "maakuntalista",
+      MAAKUNTALISTA_TTL_SECONDS * 1000,
+      async () => {
+        log.info("Updating maakuntalista, it has been expired");
+        const list = await fetchMaakuntaLista();
+        s3Cache.put("kuntalista", list);
+      },
+      async () => {
+        log.info("Updating maakuntalista, it is missing");
+        const list = await fetchMaakuntaLista();
+        s3Cache.put("kuntalista", list);
+        return list;
+      }
+    );
+
+    res.setHeader(
+      "Cache-Control",
+      "public, s-maxage=" + MAAKUNTALISTA_TTL_SECONDS + ", stale-while-revalidate=" + (MAAKUNTALISTA_TTL_SECONDS - 30)
+    );
+    res.status(200).json(kuntaList);
+  });
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -10,35 +10,70 @@ import Sivutus from "@components/kansalaisenEtusivu/Sivutus";
 import { useRouter } from "next/router";
 import { SelectOption } from "@components/form/Select";
 import { ProjektiTyyppi } from "../../common/graphql/apiModel";
+import { MaakuntaListaOption } from "./api/maakuntalista.json";
+import { KuntaListaOption } from "./api/kuntalista.json";
+
+function jarjestaOptionit(a: SelectOption, b: SelectOption) {
+  if (!a.label) {
+    return 1;
+  } else if (!b.label) {
+    return 0;
+  }
+  return a.label.localeCompare(b.label);
+}
 
 const SIVUN_KOKO = 10;
 
 const App = () => {
   const [kuntaOptions, setKuntaOptions] = useState<SelectOption[]>([]);
+  const [maakuntaOptions, setMaakuntaOptions] = useState<SelectOption[]>([]);
+
+  const { lang } = useTranslation();
+
+  const getKuntaLista = useCallback(
+    async (lang: string) => {
+      const list: KuntaListaOption[] = await (await fetch("/api/kuntalista.json")).json();
+      if (lang === "sv") {
+        setKuntaOptions(list.map((option) => ({ ...option, label: option.labelRuo })).sort(jarjestaOptionit));
+      } else {
+        setKuntaOptions(list);
+      }
+    },
+    [setKuntaOptions]
+  );
 
-  const getKuntaLista = useCallback(async () => {
-    const list = await (await fetch("/api/kuntalista.json")).json();
-    setKuntaOptions(list);
-  }, [setKuntaOptions]);
+  const getMaakuntaLista = useCallback(
+    async (lang: string) => {
+      const list: MaakuntaListaOption[] = await (await fetch("/api/maakuntalista.json")).json();
+      if (lang === "sv") {
+        setMaakuntaOptions(list.map((option) => ({ ...option, label: option.labelRuo })).sort(jarjestaOptionit));
+      } else {
+        setMaakuntaOptions(list);
+      }
+    },
+    [setMaakuntaOptions]
+  );
 
   useEffect(() => {
-    getKuntaLista();
-  }, [getKuntaLista]);
+    getKuntaLista(lang);
+    getMaakuntaLista(lang);
+  }, [getKuntaLista, getMaakuntaLista, lang]);
 
   const query = useHaunQueryparametrit({ kuntaOptions });
 
   if (!query) {
     return null;
   }
-  return <Etusivu query={query} kuntaOptions={kuntaOptions} />;
+  return <Etusivu query={query} maakuntaOptions={maakuntaOptions} kuntaOptions={kuntaOptions} />;
 };
 
 type Props = {
   query: HookReturnType;
   kuntaOptions: SelectOption[];
+  maakuntaOptions: SelectOption[];
 };
 
-function Etusivu({ query, kuntaOptions }: Props) {
+function Etusivu({ query, maakuntaOptions, kuntaOptions }: Props) {
   const { t } = useTranslation();
 
   const { vapaasanahaku, kunta, maakunta, vaylamuoto, sivu } = query;
@@ -86,7 +121,12 @@ function Etusivu({ query, kuntaOptions }: Props) {
       <Grid item lg={9} md={12}>
         <h2 className="mt-4">{t("projekti:ui-otsikot.valtion_liikennevaylien_suunnittelu")}</h2>
         <p>Tekstiä</p>
-        <Hakulomake hakutulostenMaara={hakutulos?.hakutulosMaara} kuntaOptions={kuntaOptions} query={query} />
+        <Hakulomake
+          hakutulostenMaara={hakutulos?.hakutulosMaara}
+          kuntaOptions={kuntaOptions}
+          maakuntaOptions={maakuntaOptions}
+          query={query}
+        />
         <h1>Suunnitelmat</h1>
         <Hakutulokset hakutulos={hakutulos} ladataan={ladataan} />
         <Sivutus sivuMaara={sivuMaara} nykyinenSivu={sivu} />