Merge pull request #851 from navikt/useIsDebug

Lager en egen useIsDebug så det blir lettere å ta i bruke denne funksjonen andre steder
navikt · Nov 1, 2024 · 9c61fa3 · 9c61fa3
2 parents 3e838d4 + ff96ef5
commit 9c61fa3
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 58 deletions.
diff --git a/src/app/(sok)/_components/IsDebugProvider.tsx b/src/app/(sok)/_components/IsDebugProvider.tsx
@@ -0,0 +1,44 @@
+import React, { ReactElement, useEffect, useState } from "react";
+
+export const IsDebugContext: React.Context<IsDebugContextValues> = React.createContext({} as IsDebugContextValues);
+
+export type IsDebugContextValues = {
+    isDebug: boolean;
+};
+
+interface IsDebugProviderProps {
+    children: React.ReactNode;
+}
+
+export function IsDebugProvider({ children }: IsDebugProviderProps): ReactElement {
+    const [isDebug, setIsDebug] = useState(false);
+
+    useEffect(() => {
+        try {
+            const valueFromLocalStorage = localStorage.getItem("isDebug");
+            if (valueFromLocalStorage && valueFromLocalStorage === "true") {
+                setIsDebug(true);
+            }
+        } catch (err) {
+            // ignore
+        }
+    }, []);
+
+    return (
+        <IsDebugContext.Provider
+            // eslint-disable-next-line
+            value={{
+                isDebug,
+            }}
+        >
+            {children}
+        </IsDebugContext.Provider>
+    );
+}
+
+const useIsDebug = (): IsDebugContextValues => {
+    const context = React.useContext(IsDebugContext);
+    return context;
+};
+
+export default useIsDebug;
diff --git a/src/app/(sok)/_components/searchResult/SearchResult.tsx b/src/app/(sok)/_components/searchResult/SearchResult.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useRef, useState } from "react";
+import React, { ReactElement, useEffect, useRef } from "react";
 import { VStack } from "@navikt/ds-react";
 import FavouritesButton from "@/app/favoritter/_components/FavouritesButton";
 import useQuery from "@/app/(sok)/_components/QueryProvider";
@@ -8,14 +8,15 @@ import { SortByValues } from "@/app/(sok)/_components/searchResult/Sorting";
 import { StillingFraSokeresultatDTO } from "@/app/lib/stillingSoekSchema";
 import { SEARCH_CHUNK_SIZE } from "../../_utils/query";
 import SearchResultItem from "./SearchResultItem";
+import useIsDebug from "@/app/(sok)/_components/IsDebugProvider";
 
 interface SearchResultProps {
     searchResult: { totalAds: number; ads: StillingFraSokeresultatDTO[] };
 }
 
 export default function SearchResult({ searchResult }: SearchResultProps): ReactElement | null {
     const query = useQuery();
-    const [isDebug, setIsDebug] = useState(false);
+    const { isDebug } = useIsDebug();
 
     const resultsPerPage: number = query.has(QueryNames.FROM)
         ? parseInt(query.get(QueryNames.FROM)!, 10)
@@ -34,20 +35,6 @@ export default function SearchResult({ searchResult }: SearchResultProps): React
         (ad) => ad.score && ad.score < SCORE_THRESHOLD,
     );
 
-    /**
-     *  Check if we should render ad details for debug
-     */
-    useEffect(() => {
-        try {
-            const valueFromLocalStorage = localStorage.getItem("isDebug");
-            if (valueFromLocalStorage && valueFromLocalStorage === "true") {
-                setIsDebug(true);
-            }
-        } catch (err) {
-            // ignore
-        }
-    }, []);
-
     /**
      * Set focus to top of result list when user paginate to next search result section
      */

diff --git a/src/app/Providers.jsx b/src/app/Providers.jsx
@@ -6,16 +6,19 @@ import UserPreferenceProvider from "@/app/_common/user/UserPreferenceProvider";
 import AuthenticationProvider from "./_common/auth/contexts/AuthenticationProvider";
 import UserProvider from "./_common/user/UserProvider";
 import FavouritesProvider from "./favoritter/_components/FavouritesProvider";
+import { IsDebugProvider } from "@/app/(sok)/_components/IsDebugProvider";
 
 function Providers({ children, userPreferences }) {
     return (
-        <AuthenticationProvider>
-            <UserProvider>
-                <UserPreferenceProvider userPreferences={userPreferences}>
-                    <FavouritesProvider>{children}</FavouritesProvider>
-                </UserPreferenceProvider>
-            </UserProvider>
-        </AuthenticationProvider>
+        <IsDebugProvider>
+            <AuthenticationProvider>
+                <UserProvider>
+                    <UserPreferenceProvider userPreferences={userPreferences}>
+                        <FavouritesProvider>{children}</FavouritesProvider>
+                    </UserPreferenceProvider>
+                </UserProvider>
+            </AuthenticationProvider>
+        </IsDebugProvider>
     );
 }
 

diff --git a/src/app/stilling/[id]/_components/DebugAd.tsx b/src/app/stilling/[id]/_components/DebugAd.tsx
@@ -1,13 +1,14 @@
-import React, { ReactNode, useEffect, useState } from "react";
+import React, { ReactNode, useState } from "react";
 import { BodyShort, Box, Button, Heading, HStack, VStack } from "@navikt/ds-react";
 import { labelForNeedDriversLicense } from "@/app/(sok)/_components/filters/DriversLicense";
 import { labelForExperience } from "@/app/(sok)/_components/filters/Experience";
 import { labelForEducation } from "@/app/(sok)/_components/filters/Education";
-import { CheckmarkIcon, ExclamationmarkTriangleIcon, ThumbUpIcon, XMarkIcon } from "@navikt/aksel-icons";
+import { CheckmarkIcon, ExclamationmarkTriangleIcon, ThumbUpIcon } from "@navikt/aksel-icons";
 import logAmplitudeEvent from "@/app/_common/monitoring/amplitude";
 import { useRouter } from "next/navigation";
 import { MappedAdDTO } from "@/app/lib/stillingSoekSchema";
 import { labelForUnder18 } from "@/app/(sok)/_components/filters/Under18";
+import useIsDebug from "@/app/(sok)/_components/IsDebugProvider";
 
 type DebugAdItemProps = {
     value: Value;
@@ -141,30 +142,10 @@ type PageProps = {
     adData: MappedAdDTO;
 };
 export default function DebugAd({ adData }: PageProps): ReactNode {
-    const [showDebugPanel, setShowDebugPanel] = useState(false);
     const router = useRouter();
+    const { isDebug } = useIsDebug();
 
-    useEffect(() => {
-        try {
-            const valueFromLocalStorage = localStorage.getItem("isDebug");
-            if (valueFromLocalStorage && valueFromLocalStorage === "true") {
-                setShowDebugPanel(true);
-            }
-        } catch (err) {
-            // ignore
-        }
-    }, []);
-
-    const hideDebugPanel = (): void => {
-        try {
-            localStorage.setItem("isDebug", "false");
-        } catch (err) {
-            // ignore
-        }
-        setShowDebugPanel(false);
-    };
-
-    if (!showDebugPanel) {
+    if (!isDebug) {
         return null;
     }
 
@@ -199,17 +180,9 @@ export default function DebugAd({ adData }: PageProps): ReactNode {
     return (
         <Box className="debugAd">
             <Box paddingInline="4 4" paddingBlock="4 0">
-                <HStack align="center" justify="space-between">
-                    <Heading level="2" size="medium">
-                        KI-kategorier
-                    </Heading>
-                    <Button
-                        aria-label="Lukk"
-                        variant="tertiary-neutral"
-                        icon={<XMarkIcon />}
-                        onClick={hideDebugPanel}
-                    />
-                </HStack>
+                <Heading level="2" size="medium">
+                    KI-kategorier
+                </Heading>
             </Box>
 
             <DebugAdGroup adUuid={adData.id} category="Erfaring" values={experienceValues} />