🏷️ Query and ts cleanup

navikt · Dec 5, 2023 · 47add93 · 47add93
1 parent 8c94380
commit 47add93
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 32 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
@@ -4,8 +4,11 @@ import Header from "@/layout/header/Header";
 import ArticleList from "./articles/ArticleList";
 import ChipNav from "./chips/ChipNav";
 import Hero from "./hero/Hero";
+import { GpArticleListT, HeroNavT } from "./types";
 
-function GodPraksisPage({ results, temaList }) {
+type GodPraksisPageProps = GpArticleListT & HeroNavT;
+
+function GodPraksisPage({ articles, heroNav }: GodPraksisPageProps) {
   return (
     /* TODO: Add surface-subtle to page-component props */
     <Page
@@ -18,7 +21,7 @@ function GodPraksisPage({ results, temaList }) {
         <Page.Block width="xl" gutters>
           <VStack gap="10">
             <VStack gap="6">
-              <Hero temaList={temaList}>
+              <Hero heroNav={heroNav}>
                 Alle som jobber med produktutvikling i NAV sitter på kunnskap og
                 erfaring som er nyttig for andre. Derfor deler vi god praksis
                 med hverandre her.
@@ -28,7 +31,7 @@ function GodPraksisPage({ results, temaList }) {
                 type="innholdstype"
               />
             </VStack>
-            <ArticleList results={results} />
+            <ArticleList articles={articles} />
           </VStack>
         </Page.Block>
       </Box>

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleList.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleList.tsx
@@ -1,13 +1,13 @@
 import ArticleBento from "./ArticleBento";
 import ArticleGrid from "./ArticleGrid";
 
-function ArticleList({ results }) {
-  if (!results || results.length === 0) {
+function ArticleList({ articles }) {
+  if (!articles || articles.length === 0) {
     return null;
   }
 
-  const popular = results.slice(0, 3);
-  const latest = results.slice(3);
+  const popular = articles.slice(0, 3);
+  const latest = articles.slice(3);
 
   return (
     <>

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/hero/Hero.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/hero/Hero.tsx
@@ -1,13 +1,13 @@
 import { useRouter } from "next/router";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyLong, Box, Heading, Select, VStack } from "@navikt/ds-react";
+import { HeroNavT } from "../types";
 
 type HeroProps = {
   children?: string;
-  temaList: { title: string; slug: { current: string } }[];
-};
+} & HeroNavT;
 
-function Hero({ children, temaList }: HeroProps) {
+function Hero({ children, heroNav }: HeroProps) {
   const router = useRouter();
 
   return (
@@ -34,8 +34,8 @@ function Hero({ children, temaList }: HeroProps) {
           defaultValue={router.query.slug ?? ""}
         >
           <option value="">Alle sider</option>
-          {temaList.map((x) => (
-            <option value={x.slug.current} key={x.slug.current}>
+          {heroNav.map((x) => (
+            <option value={x.slug} key={x.slug}>
               {x.title}
             </option>
           ))}

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
@@ -0,0 +1,6 @@
+import { groq } from "next-sanity";
+
+export const heroNavQuery = groq`"heroNav": *[_type == "gp.tema" && count(*[_type=="aksel_artikkel" && (^._id in undertema[]->tema._ref)]) > 0]{
+  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
@@ -0,0 +1,16 @@
+export type HeroNavT = {
+  heroNav: {
+    title: string;
+    slug: string;
+  }[];
+};
+
+export type GpArticleListT = {
+  articles: {
+    heading: string;
+    ingress: string;
+    undertema: string[];
+    innholdstype: string | null;
+    slug: { current: string };
+  }[];
+};
diff --git a/aksel.nav.no/website/pages/gp/[slug].tsx b/aksel.nav.no/website/pages/gp/[slug].tsx
@@ -2,26 +2,27 @@ import { groq } from "next-sanity";
 import { GetServerSideProps } from "next/types";
 import { Suspense, lazy } from "react";
 import GodPraksisPage from "@/layout/god-praksis-page/GodPraksisPage";
+import { heroNavQuery } from "@/layout/god-praksis-page/queries";
+import { HeroNavT } from "@/layout/god-praksis-page/types";
 import { getClient } from "@/sanity/client.server";
+import { NextPageT } from "@/types";
+
+type PageProps = NextPageT<HeroNavT>;
 
 const query = groq`
 {
-  "temaList": *[_type == "gp.tema" && count(*[_type=="aksel_artikkel" && (^._id in undertema[]->tema._ref)]) > 0]{
-    title,
-    description,
-    slug
-  },
+  ${heroNavQuery},
 }
 `;
 
 export const getServerSideProps: GetServerSideProps = async (
   ctx
-): Promise<any> => {
-  const { temaList } = await getClient().fetch(query);
+): Promise<PageProps> => {
+  const { heroNav } = await getClient().fetch(query);
 
   return {
     props: {
-      temaList,
+      heroNav,
       slug: ctx.params.slug as string,
       preview: ctx.preview ?? false,
       id: "",
@@ -31,8 +32,8 @@ export const getServerSideProps: GetServerSideProps = async (
   };
 };
 
-const GPPage = ({ results, temaList }) => {
-  return <GodPraksisPage results={results} temaList={temaList} />;
+const GPPage = ({ heroNav }: PageProps["props"]) => {
+  return <GodPraksisPage articles={[]} heroNav={heroNav} />;
 };
 
 const WithPreview = lazy(() => import("@/preview"));

diff --git a/aksel.nav.no/website/pages/gp/index.tsx b/aksel.nav.no/website/pages/gp/index.tsx
@@ -3,15 +3,17 @@ import { GetServerSideProps } from "next/types";
 import { Suspense, lazy } from "react";
 import { Heading } from "@navikt/ds-react";
 import GodPraksisPage from "@/layout/god-praksis-page/GodPraksisPage";
+import { heroNavQuery } from "@/layout/god-praksis-page/queries";
+import { GpArticleListT, HeroNavT } from "@/layout/god-praksis-page/types";
 import Header from "@/layout/header/Header";
 import { getClient } from "@/sanity/client.server";
+import { NextPageT } from "@/types";
+
+type PageProps = NextPageT<GpArticleListT & HeroNavT>;
 
 const query = groq`
 {
-  "temaList": *[_type == "gp.tema" && count(*[_type=="aksel_artikkel" && (^._id in undertema[]->tema._ref)]) > 0]{
-    title,
-    slug,
-  },
+  ${heroNavQuery},
   "articles": *[_type == "aksel_artikkel" && defined(undertema)] {
     heading,
     ingress ,
@@ -24,13 +26,13 @@ const query = groq`
 
 export const getServerSideProps: GetServerSideProps = async (
   ctx
-): Promise<any> => {
-  const { temaList, articles } = await getClient().fetch(query);
+): Promise<PageProps> => {
+  const { heroNav, articles } = await getClient().fetch(query);
 
   return {
     props: {
-      results: articles,
-      temaList,
+      articles,
+      heroNav,
       preview: ctx.preview ?? false,
       id: "",
       title: "",
@@ -39,8 +41,8 @@ export const getServerSideProps: GetServerSideProps = async (
   };
 };
 
-const GPPage = ({ results, temaList }) => {
-  return <GodPraksisPage results={results} temaList={temaList} />;
+const GPPage = ({ articles, heroNav }: PageProps["props"]) => {
+  return <GodPraksisPage articles={articles} heroNav={heroNav} />;
 
   return (
     <>