From b6d13921212e043edeba20a9c96b088ec15c9d86 Mon Sep 17 00:00:00 2001 From: Julian Nymark Date: Wed, 6 Dec 2023 16:38:26 +0100 Subject: [PATCH] :construction: wip getting chipData into chips --- .../god-praksis-page/GodPraksisPage.tsx | 11 +++------ .../layout/god-praksis-page/chips/ChipNav.tsx | 15 ++++++------ .../layout/god-praksis-page/queries.ts | 24 +++++++++++++++++++ .../layout/god-praksis-page/types.ts | 10 +++++++- aksel.nav.no/website/pages/gp/index.tsx | 19 +++++++-------- 5 files changed, 53 insertions(+), 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 index 31f9e4c39e..0417f106bc 100644 --- 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 */ {props.tema && ( - ut.title)} - /> + )} - i.title)} - /> + 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 index c073a259aa..30e5acc233 100644 --- 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) => ( -
  • + {data?.map((entry) => ( +
  • handleSelect(encodeURIComponent(option))} + selected={encodeURIComponent(entry.title) === query?.[type]} + onClick={() => handleSelect(encodeURIComponent(entry.title))} className="whitespace-nowrap" > - {`${option} 4`} + {`${entry.title} ${entry.count}`}
    • ))} 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 index 06e512d498..20476f3c31 100644 --- 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 index 516d3265e1..a2ad7ba90d 100644 --- 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 index f9cb37645b..1bf5580e7c 100644 --- 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,9 +37,9 @@ 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: { @@ -49,6 +47,7 @@ export const getStaticProps: GetStaticProps = async ({ articles, heroNav: heroNav.filter((x) => x.hasRefs), innholdstype: innholdstype.filter((x) => x.hasRefs), + chipData, preview, id: "", title: "",