Client side loading Meldeperioder

Author: igorweber

src/pages/api/period/get.ts

@@ -0,0 +1,42 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { getSession } from "../../../auth.utils";
+import { v4 as uuid } from 'uuid';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  try {
+    const session = await getSession(req);
+
+    if (!session) {
+      return res.status(401).end(); //skal aldri skje siden vi har wonderwall med enforcedlogin
+    }
+
+    const audienceRappApi = `${process.env.NAIS_CLUSTER_NAME}:raptus:dp-rapp-api`;
+
+    const onBehalfOfToken = await session.apiToken(audienceRappApi);
+
+    const callId = uuid();
+    const dpRappApiUrl = process.env.DP_RAPP_API_URL;
+    const url = `${dpRappApiUrl}/api/v1/meldeperiode/hente`;
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+        Authorization: `Bearer ${onBehalfOfToken}`,
+        "X-Request-ID": callId
+      }
+    })
+
+    if (!response.ok) {
+      return res.status(500).send(`Unexpected response status: ${response.statusText}`)
+    }
+
+    const json = await response.json();
+
+    return res.json(json);
+  } catch (error) {
+    return res.status(500).send(error);
+  }
+}

src/pages/index.tsx

@@ -2,45 +2,69 @@ import { Table } from "@navikt/ds-react";
 import Menu from "../../components/Menu";
 import Spacer from "../../components/Spacer";
 import NavPanel from "../../components/NavPanel";
+import CenteredLoader from "../../components/CenteredLoader";
 import { format, getISOWeek, parseISO } from "date-fns";
 import { useTranslation } from "react-i18next";
 import { Meldeperiode } from "../../models/Meldeperiode";
+import { useEffect, useState } from "react";
 
-type InitialState = {
-  periods: Meldeperiode[];
-}
+export default function Page() {
 
-export async function getServerSideProps() {
-  let periods: Meldeperiode[] = [];
+  const { t } = useTranslation();
 
-  // Get saved values
-  try {
-    const response = await fetch(process.env.DP_RAPP_API_URL + '/api/v1/meldeperiode/hente');
-    if (response.ok) {
-      periods = await response.json();
-    }
-  } catch (e) {
-    // Couldn't load period list
-  }
+  const [data, setData] = useState<Meldeperiode[] | null>(null);
+  const [isLoading, setLoading] = useState(false)
 
-  // Data comes to page as props
-  return {
-    props: {
-      periods
-    },
-  };
-}
+  useEffect(() => {
+    setLoading(true)
+    fetch('/api/period/get')
+      .then((res) => res.json())
+      .then((data) => {
+        const periods: Meldeperiode[] = data;
+        setData(periods.map(period => ({
+          meldeperiodeId: period.meldeperiodeId,
+          fomDato: parseISO(period.fomDato + "T12:00:00"),
+          tomDato: parseISO(period.tomDato + "T12:00:00"),
+          frist: parseISO(period.frist + "T12:00:00")
+        })))
+        setLoading(false)
+      }).catch((error) => {
+      console.log(error)
+    });
+  }, [])
 
-export default function Page(props: InitialState) {
+  const dataTable = data && <>
+      <Table zebraStripes>
+          <Table.Header>
+              <Table.Row>
+                  <Table.HeaderCell scope="col">{t('period')}</Table.HeaderCell>
+                  <Table.HeaderCell scope="col">{t('date')}</Table.HeaderCell>
+                  <Table.HeaderCell scope="col">{t('deadline')}</Table.HeaderCell>
+              </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {data.map(({ fomDato, tomDato, frist }) => {
+              return (
+                <Table.Row key={fomDato.getTime()}>
+                  <Table.HeaderCell scope="row">
+                    {t('week')} {getISOWeek(fomDato)} - {getISOWeek(tomDato)}
+                  </Table.HeaderCell>
+                  <Table.DataCell>
+                    {format(fomDato, "dd.MM.yyyy")} - {format(tomDato, "dd.MM.yyyy")}
+                  </Table.DataCell>
+                  <Table.DataCell>
+                    {format(frist, "dd.MM.yyyy")}
+                  </Table.DataCell>
+                </Table.Row>
+              );
+            })}
+          </Table.Body>
+      </Table>
 
-  const { t } = useTranslation();
+      <Spacer />
 
-  const data = props.periods.map(period => ({
-    meldeperiodeId: period.meldeperiodeId,
-    fomDato: parseISO(period.fomDato + "T12:00:00"),
-    tomDato: parseISO(period.tomDato + "T12:00:00"),
-    frist: parseISO(period.frist + "T12:00:00")
-  }));
+      <NavPanel nextHref="/form" nextText={t('startFillingOut')} />
+  </>;
 
   return (
     <main>
@@ -49,36 +73,9 @@ export default function Page(props: InitialState) {
       <h1>{t('indexTitle')}</h1>
       <p>{t('indexDescription')}</p>
 
-      <Table zebraStripes>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell scope="col">{t('period')}</Table.HeaderCell>
-            <Table.HeaderCell scope="col">{t('date')}</Table.HeaderCell>
-            <Table.HeaderCell scope="col">{t('deadline')}</Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          {data.map(({ fomDato, tomDato, frist }) => {
-            return (
-              <Table.Row key={fomDato.getTime()}>
-                <Table.HeaderCell scope="row">
-                  {t('week')} {getISOWeek(fomDato)} - {getISOWeek(tomDato)}
-                </Table.HeaderCell>
-                <Table.DataCell>
-                  {format(fomDato, "dd.MM.yyyy")} - {format(tomDato, "dd.MM.yyyy")}
-                </Table.DataCell>
-                <Table.DataCell>
-                  {format(frist, "dd.MM.yyyy")}
-                </Table.DataCell>
-              </Table.Row>
-            );
-          })}
-        </Table.Body>
-      </Table>
+      {isLoading && <CenteredLoader />}
+      {!isLoading && dataTable}
 
-      <Spacer />
-
-      <NavPanel nextHref="/form" nextText={t('startFillingOut')} />
     </main>
   );
 }