Lag knapp for å bytte mellom ny & originale modia

src/components/NyModia.tsx

@@ -0,0 +1,38 @@
+import { ArrowUndoIcon, SparklesIcon } from '@navikt/aksel-icons';
+import { Box, Button } from '@navikt/ds-react';
+import { useLocation, useNavigate } from '@tanstack/react-router';
+import { useAtom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
+import { useCallback } from 'react';
+import { FeatureToggles } from './featureToggle/toggleIDs';
+import useFeatureToggle from './featureToggle/useFeatureToggle';
+
+export const nyModiaAtom = atomWithStorage('ny-modia', false);
+
+export const NyModia = () => {
+    const { isOn } = useFeatureToggle(FeatureToggles.NyModiaKnapp);
+    const [nyModia, setNyModia] = useAtom(nyModiaAtom);
+
+    const { href } = useLocation();
+    const navigate = useNavigate();
+
+    const handleClick = useCallback(() => {
+        setNyModia((v) => !v);
+
+        if (!nyModia) {
+            navigate({ to: `/new/${href}` });
+        } else {
+            navigate({ to: href.replace('/new', '') });
+        }
+    }, [navigate, setNyModia, nyModia, href]);
+
+    if (!isOn) return;
+
+    return (
+        <Box className="absolute bottom-0 right-0 m-12 overflow-hidden" borderRadius="xlarge">
+            <Button icon={nyModia ? <ArrowUndoIcon /> : <SparklesIcon />} variant="primary" onClick={handleClick}>
+                {nyModia ? 'Gamle modia' : 'Ny!'}
+            </Button>
+        </Box>
+    );
+};

src/components/featureToggle/toggleIDs.ts

@@ -7,5 +7,6 @@ export enum FeatureToggles {
     BrukNyTiltakspenger = 'modiapersonoversikt.bruk-ny-tiltakspenger',
     FnrSokForInnkreving = 'modiapersonoversikt.fnr-sok-for-innkreving',
     OrgnrSokForInnkreving = 'modiapersonoversikt.orgnr-sok-for-innkreving',
-    NyAvansertSok = 'modiapersonoversikt.ny-avansert-sok'
+    NyAvansertSok = 'modiapersonoversikt.ny-avansert-sok',
+    NyModiaKnapp = 'modiapersonoversikt.ny-modia-knapp'
 }

src/lib/state/theme.ts

@@ -1,18 +1,16 @@
-import { atom, useAtom, useAtomValue } from 'jotai';
+import { useAtomValue } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
 import { type PropsWithChildren, useEffect } from 'react';
 
-const localTheme = localStorage.getItem('theme');
-
-export const themeAtom = atom<'light' | 'dark'>(localTheme === 'light' || localTheme === 'dark' ? localTheme : 'light');
+export const themeAtom = atomWithStorage<'light' | 'dark'>('theme', 'light');
 
 export const useTheme = () => useAtomValue(themeAtom);
 
 export const ThemeProvider = ({ children }: PropsWithChildren) => {
-    const [theme] = useAtom(themeAtom);
+    const theme = useAtomValue(themeAtom);
 
     useEffect(() => {
         document.documentElement.setAttribute('data-theme', theme);
-        localStorage.setItem('theme', theme);
     }, [theme]);
 
     return children;

src/mock/featureToggle-mock.ts

@@ -15,6 +15,8 @@ export function mockFeatureToggle(toggleId: FeatureToggles): FeatureToggleRespon
             return true;
         case FeatureToggles.OrgnrSokForInnkreving:
             return true;
+        case FeatureToggles.NyModiaKnapp:
+            return true;
         default:
             return Math.random() > 0.5;
     }

src/routes/__root.tsx

@@ -10,6 +10,7 @@ import Decorator from 'src/app/internarbeidsflatedecorator/Decorator';
 import DemoBanner from 'src/components/DemoBanner';
 import ErrorBoundary from 'src/components/ErrorBoundary';
 import NotFound from 'src/components/NotFound';
+import { NyModia } from 'src/components/NyModia';
 import { ValgtEnhetProvider } from 'src/context/valgtenhet-state';
 import { aktivBrukerLastetAtom, aktivEnhetAtom } from 'src/lib/state/context';
 import { ThemeProvider } from 'src/lib/state/theme';
@@ -115,6 +116,7 @@ function RootLayout() {
                     <AppStyle>
                         <HandleLegacyUrls>
                             <DemoBanner />
+                            <NyModia />
                             <Decorator />
                             <ErrorBoundary boundaryName="app-content">
                                 <App>

src/utils/customHooks.ts

@@ -1,5 +1,5 @@
 import { useNavigate } from '@tanstack/react-router';
-import { useSetAtom } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 import type * as React from 'react';
 import {
     type DependencyList,
@@ -11,6 +11,7 @@ import {
     useRef
 } from 'react';
 import { useSelector } from 'react-redux';
+import { nyModiaAtom } from 'src/components/NyModia';
 import { aktivBrukerAtom, usePersonAtomValue } from 'src/lib/state/context';
 import { paths } from '../app/routes/routing';
 import type { AppState } from '../redux/reducers';
@@ -83,6 +84,7 @@ export function useFodselsnummer() {
 
 export function useSettAktivBruker() {
     const setBruker = useSetAtom(aktivBrukerAtom);
+    const nyModia = useAtomValue(nyModiaAtom);
     const navigate = useNavigate();
 
     return (fnr: string | null, redirect = true) => {
@@ -105,7 +107,7 @@ export function useSettAktivBruker() {
                 paths.innkrevingskrav
             ].some((path) => location.pathname.startsWith(path))
         ) {
-            navigate({ to: paths.personUri });
+            navigate({ to: nyModia ? '/new/person' : paths.personUri });
         }
     };
 }