✨ undertema chip data & render

navikt · Dec 6, 2023 · c692206 · c692206
1 parent 5ba0f32
commit c692206
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 36 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
@@ -7,7 +7,6 @@ import ChipNav from "./chips/ChipNav";
 import Hero from "./hero/Hero";
 
 function GodPraksisPage(props: GpEntryPageProps) {
-  console.log(JSON.stringify(props.chipData));
   return (
     /* TODO: Add surface-subtle to page-component props */
     <Page
@@ -23,9 +22,9 @@ function GodPraksisPage(props: GpEntryPageProps) {
               <Hero tema={props.tema} heroNav={props.heroNav} />
               <VStack gap="4">
                 {props.tema && (
-                  <ChipNav type="undertema" data={props.chipData} />
+                  <ChipNav type="undertema" data={props.chipsUndertema} />
                 )}
-                <ChipNav type="innholdstype" data={props.chipData} />
+                <ChipNav type="innholdstype" data={props.chipsInnholdstype} />
               </VStack>
             </VStack>
             <ArticleList articles={props.articles} />

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/chips/ChipNav.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/chips/ChipNav.tsx
@@ -4,13 +4,13 @@ import { useRouter } from "next/router";
 import { useId } from "react";
 import { Chips, HGrid, Label } from "@navikt/ds-react";
 import { capitalize } from "@/utils";
-import { GpChipDataT } from "../types";
+import { GpChipsInnholdstypeT } from "../types";
 import styles from "./Chips.module.css";
 import ScrollFade from "./ScrollFade";
 
 type ChipsNavProps = {
   type: "innholdstype" | "undertema";
-  data?: GpChipDataT["chipData"];
+  data?: GpChipsInnholdstypeT["chipsInnholdstype"];
   slug?: string;
 };
 

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/queries.ts b/aksel.nav.no/website/components/layout/god-praksis-page/queries.ts
@@ -1,21 +1,31 @@
 import { groq } from "next-sanity";
 
-export const heroNavQuery = groq`"heroNav": *[_type == "gp.tema"]{
+export const heroNavQuery = groq`
+"heroNav": *[_type == "gp.tema"]{
   title,
   "slug": slug.current,
   "hasRefs": count(*[_type=="aksel_artikkel"
       && (^._id in undertema[]->tema._ref)]) > 0
 }
 `;
 
-export const innholdstypeQuery = groq`"innholdstype": *[_type == "gp.innholdstype"]{
+export const innholdstypeQuery = groq`
+"innholdstype": *[_type == "gp.innholdstype"]{
   ...,
   "hasRefs": count(*[_type=="aksel_artikkel"
       && ^._id == innholdstype._ref]) > 0
 }`;
 
-export const chipDataQuery = groq`
-"chipData": *[_type == "gp.tema.undertema"] {
+export const chipsUndertemaQuery = groq`
+"chipsUndertema": *[_type == "gp.tema.undertema"]{
+  title,
+  "tema": tema->slug.current,
+  "count": count(*[_type=="aksel_artikkel"
+      && ^._id in undertema[]._ref])
+}`;
+
+export const chipsInnholdstypeQuery = groq`
+"chipsInnholdstype": *[_type == "gp.tema.undertema"] {
   title,
   "slug": tema->slug.current,
   "types": *[_type== "gp.innholdstype"] {

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
@@ -33,26 +33,38 @@ export type GpInnholdstypeT = {
   }[];
 };
 
-export type GpChipDataRawT = {
-  chipData: {
+export type GpChipsInnholdstypeRawT = {
+  chipsInnholdstype: {
     title: string;
     slug: string;
-    types: {
-      title: string;
-      count: number;
-    }[];
+    types: ChipsDataT;
   }[];
 };
 
-export type GpChipDataT = {
-  chipData: {
+export type GpChipsInnholdstypeT = {
+  chipsInnholdstype: ChipsDataT;
+};
+
+export type GpChipsUndertemaRawT = {
+  chipsUndertema: {
     title: string;
+    tema: string;
     count: number;
   }[];
 };
 
+export type GpChipsUndertemaT = {
+  chipsUndertema: ChipsDataT;
+};
+
+export type ChipsDataT = {
+  title: string;
+  count: number;
+}[];
+
 export type GpEntryPageProps = HeroNavT &
   GpInnholdstypeT &
   GpArticleListT &
   GpTemaT &
-  GpChipDataT;
+  GpChipsInnholdstypeT &
+  GpChipsUndertemaT;
diff --git a/aksel.nav.no/website/pages/gp/[slug].tsx b/aksel.nav.no/website/pages/gp/[slug].tsx
@@ -3,15 +3,17 @@ import { GetStaticPaths, GetStaticProps } from "next/types";
 import { Suspense, lazy } from "react";
 import GodPraksisPage from "@/layout/god-praksis-page/GodPraksisPage";
 import {
-  chipDataQuery,
+  chipsInnholdstypeQuery,
+  chipsUndertemaQuery,
   firstArticlesQuery,
   heroNavQuery,
   innholdstypeQuery,
   temaQuery,
 } from "@/layout/god-praksis-page/queries";
 import {
   GpArticleListT,
-  GpChipDataRawT,
+  GpChipsInnholdstypeRawT,
+  GpChipsUndertemaRawT,
   GpEntryPageProps,
   GpInnholdstypeT,
   GpTemaT,
@@ -30,7 +32,8 @@ const query = groq`
   ${innholdstypeQuery},
   ${temaQuery},
   ${firstArticlesQuery},
-  ${chipDataQuery}
+  ${chipsInnholdstypeQuery},
+  ${chipsUndertemaQuery}
 }
 `;
 
@@ -59,20 +62,29 @@ export const getStaticProps: GetStaticProps = async ({
     tema,
     innholdstype,
     articles,
-    chipData,
-  }: HeroNavT & GpTemaT & GpInnholdstypeT & GpArticleListT & GpChipDataRawT =
-    await getClient().fetch(query, {
-      slug,
-    });
+    chipsInnholdstype,
+    chipsUndertema,
+  }: HeroNavT &
+    GpTemaT &
+    GpInnholdstypeT &
+    GpArticleListT &
+    GpChipsInnholdstypeRawT &
+    GpChipsUndertemaRawT = await getClient().fetch(query, {
+    slug,
+  });
+
+  console.log({ slug, chipsUndertema });
 
-  console.log("getStaticProps", { slug });
   return {
     props: {
       articles,
       tema,
       heroNav: heroNav.filter((x) => x.hasRefs),
       innholdstype: innholdstype.filter((x) => x.hasRefs),
-      chipData: chipData.find((x) => x.slug === slug).types,
+      chipsInnholdstype: chipsInnholdstype.find((x) => x.slug === slug).types,
+      chipsUndertema: chipsUndertema
+        .filter((c) => c.tema === slug)
+        .map((c) => ({ title: c.title, count: c.count })),
       slug,
       preview,
       id: "",

diff --git a/aksel.nav.no/website/pages/gp/index.tsx b/aksel.nav.no/website/pages/gp/index.tsx
@@ -4,13 +4,13 @@ import { Suspense, lazy } from "react";
 import GodPraksisPage from "@/layout/god-praksis-page/GodPraksisPage";
 import {
   articlesQuery,
-  chipDataQuery,
+  chipsInnholdstypeQuery,
   heroNavQuery,
   innholdstypeQuery,
 } from "@/layout/god-praksis-page/queries";
 import {
   GpArticleListT,
-  GpChipDataRawT,
+  GpChipsInnholdstypeRawT,
   GpEntryPageProps,
   GpInnholdstypeT,
   HeroNavT,
@@ -26,13 +26,15 @@ const query = groq`
   ${heroNavQuery},
   ${innholdstypeQuery},
   ${articlesQuery},
-  ${chipDataQuery}
+  ${chipsInnholdstypeQuery}
 }
 `;
 
-const chipDataForMain = (data: GpChipDataRawT["chipData"]) => {
+const chipDataForMain = (
+  dataRaw: GpChipsInnholdstypeRawT["chipsInnholdstype"]
+) => {
   const map = new Map<string, number>();
-  for (const entry of data) {
+  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);
@@ -52,8 +54,8 @@ export const getStaticProps: GetStaticProps = async ({
     heroNav,
     articles,
     innholdstype,
-    chipData,
-  }: GpArticleListT & HeroNavT & GpInnholdstypeT & GpChipDataRawT =
+    chipsInnholdstype,
+  }: GpArticleListT & HeroNavT & GpInnholdstypeT & GpChipsInnholdstypeRawT =
     await getClient().fetch(query);
 
   return {
@@ -62,10 +64,11 @@ export const getStaticProps: GetStaticProps = async ({
       articles,
       heroNav: heroNav.filter((x) => x.hasRefs),
       innholdstype: innholdstype.filter((x) => x.hasRefs),
-      chipData: chipDataForMain(chipData),
+      chipsInnholdstype: chipDataForMain(chipsInnholdstype),
       preview,
       id: "",
       title: "",
+      chipsUndertema: [],
     },
     notFound: false,
     revalidate: 60,