🐛 "alle tema" page now also has working chip data

navikt · Dec 13, 2023 · f75530e · f75530e
1 parent a23519a
commit f75530e
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 86 deletions.
diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/GodPraksisPage.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/GodPraksisPage.tsx
@@ -1,7 +1,7 @@
 import dynamic from "next/dynamic";
 import { Box, Heading, Page, VStack } from "@navikt/ds-react";
 import Footer from "@/layout/footer/Footer";
-import { ChipData, GpEntryPageProps } from "@/layout/god-praksis-page/types";
+import { ChipsData, GpEntryPageProps } from "@/layout/god-praksis-page/types";
 import useInitialState from "@/layout/god-praksis-page/useInitialState";
 import Header from "@/layout/header/Header";
 import ChipNav from "./chips/ChipNav";
@@ -15,9 +15,8 @@ export type ChipsRenderData = { title: string; count: number }[];
 
 const countUniques = (
   lens: "innholdstype-title" | "undertema-title",
-  chipDatas: ChipData
+  chipDatas: ChipsData
 ): ChipsRenderData => {
-  console.log({ lens, chipDatas });
   const map = new Map<string, number>();
   for (const entry of chipDatas) {
     const count = map.get(entry[lens]) || 0;
@@ -32,10 +31,6 @@ const countUniques = (
 
 function GodPraksisPage(props: GpEntryPageProps) {
   const { initialData } = useInitialState(props.initialArticles);
-
-  console.log("#### GodPraksisPage ####");
-  console.log({ chipsDataAll: props.chipsDataAll });
-
   return (
     /* TODO: Add surface-subtle to page-component props */
     <Page
@@ -53,12 +48,12 @@ function GodPraksisPage(props: GpEntryPageProps) {
                 {props.tema && (
                   <ChipNav
                     type="undertema"
-                    data={countUniques("undertema-title", props.chipsDataAll)}
+                    data={countUniques("undertema-title", props.chipsData)}
                   />
                 )}
                 <ChipNav
                   type="innholdstype"
-                  data={countUniques("innholdstype-title", props.chipsDataAll)}
+                  data={countUniques("innholdstype-title", props.chipsData)}
                 />
               </VStack>
             </VStack>

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/chips/dataTransforms.ts b/aksel.nav.no/website/components/layout/god-praksis-page/chips/dataTransforms.ts
@@ -0,0 +1,41 @@
+import { chipsDataAllQueryResponse } from "../queries";
+import { ChipsData, ChipsDataGroupedByTema } from "../types";
+
+export const groupByTema = (
+  chipsData: chipsDataAllQueryResponse["chipsDataAll"]
+): ChipsDataGroupedByTema => {
+  const chipNavData: ChipsDataGroupedByTema = {};
+  for (const entry of chipsData) {
+    for (const undertema of entry.undertema) {
+      if (!chipNavData[undertema.temaSlug]) {
+        chipNavData[undertema.temaSlug] = [
+          {
+            "undertema-title": undertema.title,
+            "innholdstype-title": entry.innholdstype,
+          },
+        ];
+        continue;
+      }
+      chipNavData[undertema.temaSlug].push({
+        "undertema-title": undertema.title,
+        "innholdstype-title": entry.innholdstype,
+      });
+    }
+  }
+  return chipNavData;
+};
+
+export const chipsDataForAllTema = (
+  chipsData: chipsDataAllQueryResponse["chipsDataAll"]
+): ChipsData => {
+  const chipNavData: ChipsData = [];
+  for (const entry of chipsData) {
+    for (const undertema of entry.undertema) {
+      chipNavData.push({
+        "undertema-title": undertema.title,
+        "innholdstype-title": entry.innholdstype,
+      });
+    }
+  }
+  return chipNavData;
+};
diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/types.ts b/aksel.nav.no/website/components/layout/god-praksis-page/types.ts
@@ -30,11 +30,6 @@ export type HeroNavT = {
   }[];
 };
 
-export type ChipsDataT = {
-  title: string;
-  count: number;
-}[];
-
 export type GpGroupedArticlesT = {
   innholdstype: string | null;
   undertema: string | null;
@@ -53,11 +48,11 @@ export type GpGroupedArticlesInputT = {
   }[];
 };
 
-export type ChipDataGroupedByTema = {
-  [temaSlug: string]: ChipData;
+export type ChipsDataGroupedByTema = {
+  [temaSlug: string]: ChipsData;
 };
 
-export type ChipData = {
+export type ChipsData = {
   "undertema-title": string;
   "innholdstype-title": string;
 }[];
@@ -66,4 +61,4 @@ export type GpEntryPageProps = HeroNavT & {
   tema: GpTemaT | null;
 } & {
   initialArticles: GpGroupedArticlesT;
-} & { chipsDataAll: ChipData };
+} & { chipsData: ChipsData };
diff --git a/aksel.nav.no/website/pages/gp/[slug].tsx b/aksel.nav.no/website/pages/gp/[slug].tsx
@@ -2,6 +2,7 @@ import { groq } from "next-sanity";
 import { GetStaticPaths, GetStaticProps } from "next/types";
 import { Suspense, lazy } from "react";
 import GodPraksisPage from "@/layout/god-praksis-page/GodPraksisPage";
+import { groupByTema } from "@/layout/god-praksis-page/chips/dataTransforms";
 import { groupArticles } from "@/layout/god-praksis-page/initial-load/group-articles";
 import {
   chipsDataAllQuery,
@@ -13,10 +14,7 @@ import {
   temaQuery,
   temaQueryResponse,
 } from "@/layout/god-praksis-page/queries";
-import {
-  ChipDataGroupedByTema,
-  GpEntryPageProps,
-} from "@/layout/god-praksis-page/types";
+import { GpEntryPageProps } from "@/layout/god-praksis-page/types";
 import { getClient } from "@/sanity/client.server";
 import { getGpTema } from "@/sanity/interface";
 import { NextPageT } from "@/types";
@@ -32,6 +30,10 @@ const query = groq`
   ${initialTemaPageArticles},
 }
 `;
+type QueryResponse = chipsDataAllQueryResponse &
+  heroNavQueryResponse &
+  temaQueryResponse &
+  initialTemaPageArticlesResponse;
 
 export const getStaticPaths: GetStaticPaths = async () => {
   return {
@@ -46,47 +48,6 @@ export const getStaticPaths: GetStaticPaths = async () => {
   };
 };
 
-export const groupByTema = (
-  chipsData: chipsDataAllQueryResponse["chipsDataAll"]
-): ChipDataGroupedByTema => {
-  console.log(`chipsData.length: ${chipsData.length}`);
-  console.log(`chipsData: ${JSON.stringify(chipsData, null, 2)}`);
-
-  const chipNavData: ChipDataGroupedByTema = {};
-  for (const entry of chipsData) {
-    for (const undertema of entry.undertema) {
-      if (!chipNavData[undertema.temaSlug]) {
-        chipNavData[undertema.temaSlug] = [
-          {
-            "undertema-title": undertema.title,
-            "innholdstype-title": entry.innholdstype,
-          },
-        ];
-        continue;
-      }
-      chipNavData[undertema.temaSlug].push({
-        "undertema-title": undertema.title,
-        "innholdstype-title": entry.innholdstype,
-      });
-    }
-  }
-  console.log("--- after processing chipsData: ", { chipNavData });
-  return chipNavData;
-  // return {
-  //   navno: [
-  //     {
-  //       "undertema-title": "undertema-title",
-  //       "innholdstype-title": "innholdstype-title",
-  //     },
-  //   ],
-  // };
-};
-
-type QueryResponse = chipsDataAllQueryResponse &
-  heroNavQueryResponse &
-  temaQueryResponse &
-  initialTemaPageArticlesResponse;
-
 export const getStaticProps: GetStaticProps = async ({
   params: { slug },
   preview = false,
@@ -108,7 +69,7 @@ export const getStaticProps: GetStaticProps = async ({
       preview,
       id: "",
       title: "",
-      chipsDataAll: groupByTema(chipsDataAll)[slug],
+      chipsData: groupByTema(chipsDataAll)[slug],
     },
     notFound: !tema || !heroNav.some((nav) => nav.slug === slug),
     revalidate: 60,

diff --git a/aksel.nav.no/website/pages/gp/index.tsx b/aksel.nav.no/website/pages/gp/index.tsx
@@ -2,11 +2,15 @@ import { groq } from "next-sanity";
 import { GetStaticProps } from "next/types";
 import { Suspense, lazy } from "react";
 import GodPraksisPage from "@/layout/god-praksis-page/GodPraksisPage";
+import { chipsDataForAllTema } from "@/layout/god-praksis-page/chips/dataTransforms";
 import { groupArticles } from "@/layout/god-praksis-page/initial-load/group-articles";
 import {
   chipsDataAllQuery,
+  chipsDataAllQueryResponse,
   heroNavQuery,
+  heroNavQueryResponse,
   initialGpMainPageArticles,
+  initialGpMainPageArticlesResponse,
 } from "@/layout/god-praksis-page/queries";
 import { GpEntryPageProps } from "@/layout/god-praksis-page/types";
 import { getClient } from "@/sanity/client.server";
@@ -22,32 +26,15 @@ const query = groq`
   ${initialGpMainPageArticles}
 }
 `;
-
-/**
- * TODO: Move to separate file
- */
-// const chipDataForMain = (
-//   dataRaw: GpChipsInnholdstypeRawT["chipsInnholdstype"]
-// ) => {
-//   const map = new Map<string, number>();
-//   for (const entry of dataRaw) {
-//     for (const innholdstype of entry.types) {
-//       const count = map.get(innholdstype.title) || 0;
-//       map.set(innholdstype.title, count + innholdstype.count);
-//     }
-//   }
-//   const chipData = [];
-//   for (const [key, value] of map.entries()) {
-//     chipData.push({ title: key, count: value });
-//   }
-//   return chipData;
-// };
+type QueryResponse = heroNavQueryResponse &
+  chipsDataAllQueryResponse &
+  initialGpMainPageArticlesResponse;
 
 export const getStaticProps: GetStaticProps = async ({
   preview = false,
 }): Promise<PageProps> => {
   const { heroNav, initialInnholdstype, chipsDataAll } =
-    await getClient().fetch(query);
+    await getClient().fetch<QueryResponse>(query);
 
   return {
     props: {
@@ -59,7 +46,7 @@ export const getStaticProps: GetStaticProps = async ({
       preview,
       id: "",
       title: "",
-      chipsDataAll,
+      chipsData: chipsDataForAllTema(chipsDataAll),
     },
     notFound: false,
     revalidate: 60,