Dra ut window.innerWidth til en provider for gjenbruk av state

src/contexts/window-inner-width.tsx

@@ -0,0 +1,34 @@
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+
+interface WindowInnerWidthProps {
+    innerWidth: number;
+}
+
+const WindowInnerWidthContext = createContext<WindowInnerWidthProps>({ innerWidth: window.innerWidth });
+function WindowInnerWidthProvider(props: { children: ReactNode }) {
+    const [innerWidth, setInnerWidth] = useState<number>(window.innerWidth);
+
+    useEffect(() => {
+        const updateInnerWidth = () => {
+            setInnerWidth(window.innerWidth);
+        };
+
+        window.addEventListener('resize', updateInnerWidth);
+
+        return () => window.removeEventListener('resize', updateInnerWidth);
+    }, []);
+
+    return <WindowInnerWidthContext.Provider value={{ innerWidth }}>{props.children}</WindowInnerWidthContext.Provider>;
+}
+
+function useWindowInnerWidth() {
+    const context = useContext(WindowInnerWidthContext);
+
+    if (context === undefined) {
+        throw new Error('useWindowInnerWidth må brukes under en WindowInnerWidthProvider');
+    }
+
+    return context;
+}
+
+export { WindowInnerWidthProvider, useWindowInnerWidth };

src/main-standard.tsx

@@ -17,6 +17,7 @@ import { ReaktiveringProvider } from './contexts/reaktivering';
 import { BesvarelseProvider } from './contexts/besvarelse';
 import { MeldepliktProvider } from './contexts/meldeplikt';
 import StandardWrapper from './standard-wrapper';
+import { WindowInnerWidthProvider } from './contexts/window-inner-width';
 
 const Mikrofrontend = () => {
     const [state, setState] = React.useState<Autentisering.State>(Autentisering.initialState);
@@ -67,7 +68,9 @@ const Mikrofrontend = () => {
                                 <MeldepliktProvider>
                                     <ReaktiveringProvider>
                                         <BesvarelseProvider>
-                                            <StandardWrapper />
+                                            <WindowInnerWidthProvider>
+                                                <StandardWrapper />
+                                            </WindowInnerWidthProvider>
                                         </BesvarelseProvider>
                                     </ReaktiveringProvider>
                                 </MeldepliktProvider>

src/standard-wrapper.tsx

@@ -1,21 +1,11 @@
-import { useEffect, useState } from 'react';
 import flex from './flex.module.css';
 import AiaTabs from './tabs/aia-tabs';
 import InnholdStandard from './innhold/innhold-standard';
+import { useWindowInnerWidth } from './contexts/window-inner-width';
 
 const MIN_TABS_BREDDE = 666;
 function StandardWrapper() {
-    const [innerWidth, setInnerWidth] = useState<number>(window.innerWidth);
-
-    useEffect(() => {
-        const updateInnerWidth = () => {
-            setInnerWidth(window.innerWidth);
-        };
-
-        window.addEventListener('resize', updateInnerWidth);
-
-        return () => window.removeEventListener('resize', updateInnerWidth);
-    }, []);
+    const { innerWidth } = useWindowInnerWidth();
 
     const brukTabs = innerWidth > MIN_TABS_BREDDE;