Use loaders

navikt · Dec 5, 2023 · 6ab8791 · 6ab8791
1 parent 98a4ece
commit 6ab8791
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 39 deletions.
diff --git a/src/api/aktivitetsplanGraphql.ts b/src/api/aktivitetsplanGraphql.ts
@@ -1,6 +1,6 @@
 import { DEFAULT_CONFIG, sjekkStatuskode, toJson } from './utils';
 import { AKTIVITET_GRAPHQL_BASE_URL } from '../environment';
-import { hentFraLocalStorage, hentFraSessionStorage, LocalStorageElement } from '../mocks/demo/localStorage';
+import { hentFraSessionStorage, LocalStorageElement } from '../mocks/demo/localStorage';
 import { VeilarbAktivitet } from '../datatypes/internAktivitetTypes';
 
 const query: string = `

diff --git a/src/app.tsx b/src/app.tsx
@@ -4,12 +4,22 @@ import Timeoutbox from './felles-komponenter/timeoutbox/Timeoutbox';
 import { UpdateEventHandler } from './utils/UpdateHandler';
 import { HiddenIf } from './utils/utils';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { useFnr } from './Provider';
+import useAppDispatch from './felles-komponenter/hooks/useAppDispatch';
+import { Dispatch } from './store';
 
-function App({ Routes }: { Routes: ReturnType<typeof createBrowserRouter> }) {
+function App({
+    createRoutesForUser,
+}: {
+    createRoutesForUser: (dispatch: Dispatch, fnr?: string) => ReturnType<typeof createBrowserRouter>;
+}) {
+    const fnr = useFnr();
+    const dispatch = useAppDispatch();
+    const routes = createRoutesForUser(dispatch, fnr);
     return (
         <div className="aktivitetsplanfs" id={AKTIVITETSPLAN_ROOT_NODE_ID}>
             <div className="aktivitetsplan-wrapper w-full">
-                <RouterProvider router={Routes} />
+                <RouterProvider router={routes} />
                 {/*<Router>*/}
                 {/*    <Routes>*/}
                 {/*        <Route path={`/`}>*/}

diff --git a/src/hovedside/Hovedside.tsx b/src/hovedside/Hovedside.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react';
-import { Outlet, useNavigate } from 'react-router-dom';
+import React, { Suspense, useEffect } from 'react';
+import { Await, Outlet, useLoaderData, useNavigate, useNavigation } from 'react-router-dom';
 
 import useAppDispatch from '../felles-komponenter/hooks/useAppDispatch';
 import { useEventListener } from '../felles-komponenter/hooks/useEventListner';
@@ -16,9 +16,14 @@ import Verktoylinje from '../moduler/verktoylinje/Verktoylinje';
 import { useRoutes } from '../routes';
 import Aktivitetstavle from './tavle/Aktivitetstavle';
 import { ErrorCleanerOnRouteChange } from '../routingConfig';
+import { Heading, Loader } from '@navikt/ds-react';
 
 const Hovedside = () => {
     const navigate = useNavigate();
+    const navigation = useNavigation();
+    console.log({ navigation });
+    const loaderData = useLoaderData();
+    console.log({ loaderData });
     const { aktivitetRoute } = useRoutes();
     useEventListener('visAktivitetsplan', (event) => {
         const aktivitetId = event.detail as string | undefined;
@@ -29,29 +34,43 @@ const Hovedside = () => {
     const dispatch = useAppDispatch();
 
     useEffect(() => {
-        dispatch(hentDialoger());
+        // dispatch(hentDialoger());
         dispatch(hentEskaleringsvarsel());
     }, []);
 
     return (
-        <main id="main" className="hovedside">
-            <div className="flex items-center flex-col h-full">
-                <HovedsideFeilmelding />
-                <Nivaa4Feilmelding />
-                <OppfolgingStatus>
-                    <InformasjonsHenting />
-                    <Varslinger />
-                    <div className="container flex flex-col gap-y-6">
-                        <Navigasjonslinje />
-                        <Maal />
-                        <Verktoylinje />
+        <Suspense fallback={<Fallback />}>
+            <Await resolve={loaderData}>
+                <main id="main" className="hovedside">
+                    <div className="flex items-center flex-col h-full">
+                        <HovedsideFeilmelding />
+                        <Nivaa4Feilmelding />
+                        <OppfolgingStatus>
+                            <InformasjonsHenting />
+                            <Varslinger />
+                            <div className="container flex flex-col gap-y-6">
+                                <Navigasjonslinje />
+                                <Maal />
+                                <Verktoylinje />
+                            </div>
+                            <Aktivitetstavle />
+                        </OppfolgingStatus>
+                        <Outlet />
                     </div>
-                    <Aktivitetstavle />
-                </OppfolgingStatus>
-                <Outlet />
-            </div>
-            <ErrorCleanerOnRouteChange />
-        </main>
+                    <ErrorCleanerOnRouteChange />
+                </main>
+            </Await>
+        </Suspense>
+    );
+};
+
+const Fallback = () => {
+    console.log('Fallback');
+    return (
+        <div>
+            <Heading size="large">Laster aktivtietesplanene</Heading>
+            <Loader />
+        </div>
     );
 };
 

diff --git a/src/rootWrapper.tsx b/src/rootWrapper.tsx
@@ -11,16 +11,16 @@ import { hash } from './felles-komponenter/utils/hash';
 import Provider from './Provider';
 import { sentryCreateBrowserRouter } from './sentry';
 import { createRoot } from 'react-dom/client';
-import { createRouter } from './routingConfig';
+import { createRouterWithWrapper } from './routingConfig';
 
-const BrowserRoutes = createRouter(sentryCreateBrowserRouter);
+const createRoutesForUser = createRouterWithWrapper(sentryCreateBrowserRouter);
 
 export const renderAsReactRoot = (appElement: HTMLElement, props?: { fnr?: string }) => {
     const rootElement = createRoot(appElement || document.getElementById('root')!);
     Sentry.setUser({ id: hash(props?.fnr) });
     rootElement.render(
         <Provider fnr={props?.fnr}>
-            <App Routes={BrowserRoutes} key={'1'} />
+            <App createRoutesForUser={createRoutesForUser} key={'1'} />
         </Provider>,
     );
 };
diff --git a/src/routingConfig.tsx b/src/routingConfig.tsx
@@ -2,6 +2,9 @@ import React, { useEffect } from 'react';
 import {
     createBrowserRouter,
     createHashRouter,
+    defer,
+    json,
+    LoaderFunction,
     Navigate,
     Outlet,
     RouteObject,
@@ -20,7 +23,13 @@ import EndreAktivitet from './moduler/aktivitet/rediger/EndreAktivitet';
 import AktivitetvisningContainer from './moduler/aktivitet/visning/AktivitetvisningContainer';
 import useAppDispatch from './felles-komponenter/hooks/useAppDispatch';
 import { fjernDismissableErrors } from './moduler/feilmelding/feil-slice';
-import { Router } from '@sentry/react/types/types';
+import { hentDialoger } from './moduler/dialog/dialog-slice';
+import { Dispatch } from './store';
+import { hentMal } from './moduler/mal/aktivitetsmal-slice';
+import { hentOppfolging } from './moduler/oppfolging-status/oppfolging-slice';
+import { hentAktiviteter } from './moduler/aktivitet/aktivitet-actions';
+import { hentIdentitet } from './moduler/identitet/identitet-slice';
+import { hentArenaAktiviteter } from './moduler/aktivitet/arena-aktiviteter-slice';
 
 const RedirectToAktivitetWithoutFnr = () => {
     const params = useParams();
@@ -36,17 +45,33 @@ export const ErrorCleanerOnRouteChange = () => {
     return <Outlet />;
 };
 
-export const createRouter = (wrapper?: (routes: RouteObject[]) => Router) => {
-    if (import.meta.env.VITE_USE_HASH_ROUTER === 'true') {
-        return createHashRouter(routingConfig);
-    }
-    return wrapper ? wrapper(routingConfig) : createBrowserRouter(routingConfig);
-};
+// Sentry need to wrap createBrowserRouter to understand routes
+export const createRouterWithWrapper =
+    (wrapper?: typeof createBrowserRouter) =>
+    (dispatch: Dispatch, fnr?: string): ReturnType<typeof createBrowserRouter> => {
+        if (import.meta.env.VITE_USE_HASH_ROUTER === 'true') {
+            return createHashRouter(routingConfig(dispatch, fnr));
+        }
+        return wrapper ? wrapper(routingConfig(dispatch, fnr)) : createBrowserRouter(routingConfig(dispatch, fnr));
+    };
+
+const initialPageLoader =
+    (dispatch: Dispatch, fnr?: string): LoaderFunction =>
+    async () => {
+        const mal = dispatch(hentMal()).then((it) => it.payload);
+        const oppfolging = dispatch(hentOppfolging()).then((it) => it.payload);
+        const aktiviteter = dispatch(hentAktiviteter()).then((it) => it.payload);
+        const dialoger = dispatch(hentDialoger()).then((it) => it.payload);
+        const identitet = dispatch(hentIdentitet()).then((it) => it.payload);
+        const arenaAktiviteter = dispatch(hentArenaAktiviteter()).then((it) => it.payload);
+        return defer({ data: Promise.all([mal, oppfolging, aktiviteter, dialoger, identitet, arenaAktiviteter]) });
+    };
 
-const routingConfig: RouteObject[] = [
+const routingConfig: (dispatch: Dispatch, fnr?: string) => RouteObject[] = (dispatch, fnr) => [
     {
         path: '/',
         element: <Hovedside />,
+        loader: initialPageLoader(dispatch, fnr),
         children: [
             { path: 'mal', element: <Aktivitetsmal /> },
             { path: 'informasjon', element: <InformasjonModal /> },
@@ -63,7 +88,7 @@ const routingConfig: RouteObject[] = [
             },
         ],
     },
-    { path: 'utskrift', element: <AktivitetsplanPrint /> },
+    { path: 'utskrift', loader: initialPageLoader(dispatch, fnr), element: <AktivitetsplanPrint /> },
     { path: ':fnr/aktivitet/vis/:id', element: <RedirectToAktivitetWithoutFnr /> },
     { path: '*', element: <Navigate replace to={`/`} /> },
 ];
diff --git a/src/webcomponentWrapper.tsx b/src/webcomponentWrapper.tsx
@@ -14,14 +14,12 @@ import {
     RootState,
     saveReduxStateToSessionStorage,
 } from './store';
-import { createRouter } from './routingConfig';
+import { createRouterWithWrapper } from './routingConfig';
 
 // Clear redux-cache from session storage on page load to make sure new data is fetched
 // Cache is only supposed to be used when "jumping" between apps in veilarbpersonflate
 clearReduxCache();
 
-const Routes = createRouter();
-
 export class DabAktivitetsplan extends HTMLElement {
     setFnr?: (fnr: string) => void;
     root: Root | undefined;
@@ -57,7 +55,7 @@ export class DabAktivitetsplan extends HTMLElement {
                 fnr={fnr}
                 setFnrRef={(setFnr) => (this.setFnr = setFnr)}
             >
-                <App Routes={Routes} key={'1'} />
+                <App createRoutesForUser={createRouterWithWrapper()} key={'1'} />
             </Provider>,
         );
     }