From 491f0f91ea75294143e823b6b202a7b2a7a07247 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 13 Dec 2023 11:08:11 +0100
Subject: [PATCH] :art: Only current undertema is shown

---
 .../layout/god-praksis-page/articles/ArticleCard.tsx | 12 +++++++-----
 .../components/layout/god-praksis-page/types.ts      |  1 +
 .../layout/god-praksis-page/useInitialState.ts       |  7 ++++---
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleCard.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleCard.tsx
index 3a80444385..3af148b3cd 100644
--- a/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleCard.tsx
+++ b/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleCard.tsx
@@ -32,7 +32,7 @@ export const ArticleCard = ({
   group,
   delay,
   innholdstype,
-  undertema,
+  currentUndertema,
 }: GpArticleT & {
   group: "initial" | "lazy";
   delay?: number;
@@ -80,10 +80,12 @@ export const ArticleCard = ({
         </div>
         <div className="flex gap-2 justify-between items-center mt-6">
           <div className="flex gap-3 flex-wrap items-center font-semibold">
-            <span className="text-deepblue-500 flex gap-05 items-center">
-              <TagFillIcon aria-hidden />
-              <span>{undertema}</span>
-            </span>
+            {currentUndertema && (
+              <span className="text-deepblue-500 flex gap-05 items-center">
+                <TagFillIcon aria-hidden />
+                <span>{currentUndertema}</span>
+              </span>
+            )}
             <span className="text-teal-700 flex gap-05 items-center">
               <FileFillIcon aria-hidden />
               <span>{innholdstype}</span>
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 2bdd025150..e1f4d64394 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
@@ -3,6 +3,7 @@ export type GpArticleT = {
   heading: string;
   ingress: string;
   undertema: string[];
+  currentUndertema: string;
   slug: string;
   innholdstype: string | null;
   publishedAt: string | null;
diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/useInitialState.ts b/aksel.nav.no/website/components/layout/god-praksis-page/useInitialState.ts
index 4b7a265c2e..74708465a0 100644
--- a/aksel.nav.no/website/components/layout/god-praksis-page/useInitialState.ts
+++ b/aksel.nav.no/website/components/layout/god-praksis-page/useInitialState.ts
@@ -20,9 +20,10 @@ function useInitialState(articles: GpGroupedArticlesT): {
   const { isReady } = useRouter();
 
   const initialData = isReady
-    ? getArticleList(articles, innholdstypeQuery, undertemaQuery).map(
-        (x) => x.article
-      )
+    ? getArticleList(articles, innholdstypeQuery, undertemaQuery).map((x) => ({
+        ...x.article,
+        currentUndertema: x.undertema,
+      }))
     : [];
 
   return {