🚧 wip getting chipData into chips

navikt · Dec 6, 2023 · b6d1392 · b6d1392
1 parent 1e47c1b
commit b6d1392
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 26 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,6 +7,7 @@ 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
@@ -22,15 +23,9 @@ function GodPraksisPage(props: GpEntryPageProps) {
               <Hero tema={props.tema} heroNav={props.heroNav} />
               <VStack gap="4">
                 {props.tema && (
-                  <ChipNav
-                    type="undertema"
-                    options={props.tema.undertema.map((ut) => ut.title)}
-                  />
+                  <ChipNav type="undertema" data={props.chipData} />
                 )}
-                <ChipNav
-                  type="innholdstype"
-                  options={props.innholdstype.map((i) => i.title)}
-                />
+                <ChipNav type="innholdstype" data={props.chipData} />
               </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,15 +4,16 @@ 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 styles from "./Chips.module.css";
 import ScrollFade from "./ScrollFade";
 
 type ChipsNavProps = {
   type: "innholdstype" | "undertema";
-  options: string[];
+  data?: GpChipDataT["chipData"];
 };
 
-function ChipNav({ type, options }: ChipsNavProps) {
+function ChipNav({ type, data }: ChipsNavProps) {
   const id = useId();
 
   const { query, replace } = useRouter();
@@ -37,16 +38,16 @@ function ChipNav({ type, options }: ChipsNavProps) {
           id={id}
           className={cl("overflow-x-scroll flex gap-2 p-1", styles.chips)}
         >
-          {options.map((option) => (
-            <li key={option}>
+          {data?.map((entry) => (
+            <li key={entry.title}>
               <Chips.Toggle
                 variant="neutral"
                 checkmark={false}
-                selected={encodeURIComponent(option) === query?.[type]}
-                onClick={() => handleSelect(encodeURIComponent(option))}
+                selected={encodeURIComponent(entry.title) === query?.[type]}
+                onClick={() => handleSelect(encodeURIComponent(entry.title))}
                 className="whitespace-nowrap"
               >
-                {`${option} 4`}
+                {`${entry.title} ${entry.count}`}
               </Chips.Toggle>
             </li>
           ))}

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
@@ -11,3 +11,27 @@ export const innholdstypeQuery = groq`"innholdstype": *[_type == "gp.innholdstyp
   ...,
   "hasRefs": count(*[_type=="aksel_artikkel" && ^._id == innholdstype._ref]) > 0
 }`;
+
+export const chipDataQuery = groq`
+"chipData": *[_type == "gp.tema.undertema"] {
+  title,
+  "types": *[_type== "gp.innholdstype"] {
+    title,
+    "count": count(*[_type == "aksel_artikkel" && (^._id == innholdstype._ref ) && (^.^._id in undertema[]._ref)])
+  }
+}`;
+
+export const chipDataFrontpageQuery = groq`
+ "chipData": *[_type== "gp.innholdstype"] {
+    title,
+    "count": count(*[_type == "aksel_artikkel" && (^._id == innholdstype._ref )])
+  }`;
+
+export const articlesQuery = groq`
+"articles": *[_type == "aksel_artikkel" && defined(undertema)][0...9] | order(publishedAt desc){
+  heading,
+  ingress ,
+  "undertema": undertema[]->title,
+  "innholdstype": innholdstype->title,
+  "slug": slug.current
+}`;
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,7 +33,15 @@ export type GpInnholdstypeT = {
   }[];
 };
 
+export type GpChipDataT = {
+  chipData: {
+    title: string;
+    count: number;
+  }[];
+};
+
 export type GpEntryPageProps = HeroNavT &
   GpInnholdstypeT &
   GpArticleListT &
-  GpTemaT;
+  GpTemaT &
+  GpChipDataT;
diff --git a/aksel.nav.no/website/pages/gp/index.tsx b/aksel.nav.no/website/pages/gp/index.tsx
@@ -3,11 +3,14 @@ import { GetStaticProps } from "next/types";
 import { Suspense, lazy } from "react";
 import GodPraksisPage from "@/layout/god-praksis-page/GodPraksisPage";
 import {
+  articlesQuery,
+  chipDataFrontpageQuery,
   heroNavQuery,
   innholdstypeQuery,
 } from "@/layout/god-praksis-page/queries";
 import {
   GpArticleListT,
+  GpChipDataT,
   GpEntryPageProps,
   GpInnholdstypeT,
   HeroNavT,
@@ -22,13 +25,8 @@ const query = groq`
 {
   ${heroNavQuery},
   ${innholdstypeQuery},
-  "articles": *[_type == "aksel_artikkel" && defined(undertema)][0...9] | order(publishedAt desc){
-    heading,
-    ingress ,
-    "undertema": undertema[]->title,
-    "innholdstype": innholdstype->title,
-    "slug": slug.current
-  }
+  ${articlesQuery},
+  ${chipDataFrontpageQuery}
 }
 `;
 
@@ -39,16 +37,17 @@ export const getStaticProps: GetStaticProps = async ({
     heroNav,
     articles,
     innholdstype,
-  }: GpArticleListT & HeroNavT & GpInnholdstypeT = await getClient().fetch(
-    query
-  );
+    chipData,
+  }: GpArticleListT & HeroNavT & GpInnholdstypeT & GpChipDataT =
+    await getClient().fetch(query);
 
   return {
     props: {
       tema: null,
       articles,
       heroNav: heroNav.filter((x) => x.hasRefs),
       innholdstype: innholdstype.filter((x) => x.hasRefs),
+      chipData,
       preview,
       id: "",
       title: "",