🎨 Dynamic view of articles

navikt · Dec 5, 2023 · 30a903e · 30a903e
1 parent e24d03a
commit 30a903e
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 19 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,11 +4,8 @@ import Header from "@/layout/header/Header";
 import ArticleList from "./articles/ArticleList";
 import ChipNav from "./chips/ChipNav";
 import Hero from "./hero/Hero";
-import { GpArticleListT } from "./types";
 
-type GodPraksisPageProps = GpArticleListT;
-
-function GodPraksisPage({ articles }: GodPraksisPageProps) {
+function GodPraksisPage() {
   return (
     /* TODO: Add surface-subtle to page-component props */
     <Page
@@ -27,7 +24,7 @@ function GodPraksisPage({ articles }: GodPraksisPageProps) {
                 <ChipNav type="innholdstype" />
               </VStack>
             </VStack>
-            <ArticleList articles={articles} />
+            <ArticleList />
           </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,20 +1,24 @@
+import { useGpPageContext } from "@/layout/god-praksis-page/context";
 import ArticleGrid from "./ArticleGrid";
 
 const markRandomAsNew = (articles) => {
   return [...articles].map((a) => ({ ...a, isNew: Math.random() > 0.5 }));
 };
 
-function ArticleList({ articles }) {
-  if (!articles || articles.length === 0) {
-    return null;
-  }
-
-  const latest = markRandomAsNew(articles);
+function ArticleList() {
+  const ctx = useGpPageContext();
 
   return (
     <>
       {/* <ArticleBento name="Populære" articles={latest} /> */}
-      <ArticleGrid name="Siste" articles={latest} />
+
+      {ctx.views.map((view) => (
+        <ArticleGrid
+          key={view.title}
+          name={view.title}
+          articles={markRandomAsNew(view.articles)}
+        />
+      ))}
     </>
   );
 }

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
@@ -31,6 +31,15 @@ export type GpInnholdstypeT = {
   }[];
 };
 
-export type GpFrontPageProps = GpArticleListT & HeroNavT & GpInnholdstypeT;
+export type GpArticleViews = {
+  views: ({
+    title: string;
+  } & GpArticleListT)[];
+};
+
+export type GpFrontPageProps = HeroNavT & GpInnholdstypeT & GpArticleViews;
 
-export type GpTemaPageProps = HeroNavT & GpTemaT & GpInnholdstypeT;
+export type GpTemaPageProps = HeroNavT &
+  GpTemaT &
+  GpInnholdstypeT &
+  GpArticleViews;
diff --git a/aksel.nav.no/website/pages/gp/[slug].tsx b/aksel.nav.no/website/pages/gp/[slug].tsx
@@ -8,6 +8,7 @@ import {
   innholdstypeQuery,
 } from "@/layout/god-praksis-page/queries";
 import {
+  GpArticleListT,
   GpInnholdstypeT,
   GpTemaPageProps,
   GpTemaT,
@@ -30,20 +31,38 @@ const query = groq`
       title,
       description
     }
+  },
+  "articles": *[_type == "aksel_artikkel" && $slug in undertema[]->tema->slug.current] | order(publishedAt desc) {
+    heading,
+    ingress ,
+    "undertema": undertema[]->title,
+    "innholdstype": innholdstype->title,
+    "slug": slug.current
   }
 }
 `;
 
 export const getServerSideProps: GetServerSideProps = async (
   ctx
 ): Promise<PageProps> => {
-  const { heroNav, tema, innholdstype }: HeroNavT & GpTemaT & GpInnholdstypeT =
+  const {
+    heroNav,
+    tema,
+    innholdstype,
+    articles,
+  }: HeroNavT & GpTemaT & GpInnholdstypeT & GpArticleListT =
     await getClient().fetch(query, {
       slug: ctx.params.slug,
     });
 
   return {
     props: {
+      views: [
+        {
+          title: "Siste",
+          articles,
+        },
+      ],
       tema,
       heroNav,
       innholdstype,
@@ -64,7 +83,7 @@ const GpPage = (props: PageProps["props"]) => {
         /* description={page?.seo?.meta} */
         /* image={page?.seo?.image} */
       />
-      <GodPraksisPage articles={[]} />
+      <GodPraksisPage />
     </GpPageContext.Provider>
   );
 };

diff --git a/aksel.nav.no/website/pages/gp/index.tsx b/aksel.nav.no/website/pages/gp/index.tsx
@@ -23,7 +23,7 @@ const query = groq`
 {
   ${heroNavQuery},
   ${innholdstypeQuery},
-  "articles": *[_type == "aksel_artikkel" && defined(undertema)] {
+  "articles": *[_type == "aksel_artikkel" && defined(undertema)] | order(publishedAt desc){
     heading,
     ingress ,
     "undertema": undertema[]->title,
@@ -46,7 +46,12 @@ export const getServerSideProps: GetServerSideProps = async (
 
   return {
     props: {
-      articles,
+      views: [
+        {
+          title: "Siste",
+          articles,
+        },
+      ],
       heroNav,
       innholdstype,
       preview: ctx.preview ?? false,
@@ -65,7 +70,7 @@ const GpPage = (props: PageProps["props"]) => {
         /* description={page?.seo?.meta} */
         /* image={page?.seo?.image} */
       />
-      <GodPraksisPage articles={props.articles} />
+      <GodPraksisPage />
     </GpPageContext.Provider>
   );
 };