Add Landing Page to differ logged vs. not logged in users on root

Author: cskrov

src/pages/landing-page/landing-page.tsx

@@ -0,0 +1,39 @@
+import NavFrontendSpinner from 'nav-frontend-spinner';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Redirect } from 'react-router-dom';
+import InngangInnsendingDigital from '../../components/inngang/inngang-innsendingsvalg-digital';
+import { checkAuth, setValgtTema } from '../../store/actions';
+import { Store } from '../../store/reducer';
+import { CenteredContainer } from '../../styled-components/main-styled-components';
+import { Tema, TemaKey } from '../../types/tema';
+
+const LandingPage = (temaKey: TemaKey, saksnummer: string | null = null) => {
+    const { loading, person } = useSelector((state: Store) => state);
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        dispatch(checkAuth(false));
+    }, [dispatch]);
+
+    useEffect(() => {
+        dispatch(setValgtTema(temaKey));
+    }, [dispatch, temaKey]);
+
+    if (loading) {
+        return (
+            <CenteredContainer>
+                <NavFrontendSpinner type={'XL'} />
+            </CenteredContainer>
+        );
+    }
+
+    if (person === null) {
+        return InngangInnsendingDigital(temaKey, Tema[temaKey], saksnummer);
+    }
+
+    const saksnummerQuery = saksnummer === null ? '' : `&saksnummer=${saksnummer}`;
+    return <Redirect to={`/begrunnelse?tema=${temaKey}${saksnummerQuery}`} />;
+};
+
+export default LandingPage;

src/pages/oppsummering-skjema-page/oppsummering-skjema-page.tsx

@@ -67,7 +67,7 @@ const OppsummeringSkjemaPage = (props: Props) => {
             });
     };
 
-    if (typeof activeKlage === 'undefined') {
+    if (typeof activeKlage === 'undefined' || person === null) {
         return null;
     }
 

src/pages/root-with-query/root-with-query.tsx

@@ -1,19 +1,21 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
 import queryString from 'query-string';
-import { ensureStringIsTema, Tema } from '../../types/tema';
+import { ensureStringIsTema } from '../../types/tema';
 import InngangHovedkategorier from '../../components/inngang/inngang-hovedkategorier';
-import InngangInnsendingDigital from '../../components/inngang/inngang-innsendingsvalg-digital';
+import LandingPage from '../landing-page/landing-page';
 
 const RootWithQuery = () => {
     const { search } = useLocation();
+
     const query = queryString.parse(search);
     const temaKey = ensureStringIsTema(getQueryValue(query.tema));
     if (temaKey === null) {
         return <InngangHovedkategorier />;
     }
+
     const saksnummer = getQueryValue(query.saksnummer);
-    return InngangInnsendingDigital(temaKey, Tema[temaKey], saksnummer);
+    return LandingPage(temaKey, saksnummer);
 };
 
 function getQueryValue(queryValue: string | string[] | null | undefined) {

src/store/actions.ts

@@ -1,5 +1,4 @@
 import { Dispatch } from 'react';
-import { getUserDataUrl } from '../clients/apiUrls';
 import { Klage, KlageSkjema, klageSkjemaToKlage, klageSkjemaToKlageDraft } from '../types/klage';
 import { postKlage, putKlage, getKlage } from '../services/klageService';
 import { Vedlegg, VedleggFile } from '../types/vedlegg';
@@ -8,6 +7,8 @@ import { logError } from '../utils/logger/frontendLogger';
 import { StorageKey } from '../utils/get-resume-state';
 import { AxiosError } from 'axios';
 import { login } from '../utils/login';
+import { getUser, JsonParseError, NotLoggedInError, RequestError } from '../utils/get-user';
+import { TemaKey } from '../types/tema';
 
 export type ActionTypes =
     | {
@@ -47,7 +48,7 @@ export type ActionTypes =
       }
     | {
           type: 'TEMA_SET';
-          value: string;
+          value: TemaKey;
       }
     | {
           type: 'KLAGE_ID_SET';
@@ -56,26 +57,32 @@ export type ActionTypes =
     | {
           type: 'SET_FINALIZED_DATE';
           value: string | null;
+      }
+    | {
+          type: 'SET_LOADING';
+          value: boolean;
       };
 
-export function checkAuth() {
-    return function (dispatch: Dispatch<ActionTypes>) {
-        return fetch(getUserDataUrl(), {
-            method: 'GET',
-            credentials: 'include'
-        })
-            .then(response => sjekkAuth(response))
-            .then(sjekkHttpFeil)
-            .then(response => response.json() as Promise<Bruker>)
-            .then(bruker => {
-                dispatch({ type: 'CHECK_AUTH_SUCCESS', payload: bruker });
-            })
-            .catch(error => {
-                if (error !== 401 && error !== 403) {
-                    dispatch({ type: 'CHECK_AUTH_ERROR' });
-                    logError(error, 'Login failed');
+export function checkAuth(required: boolean = true) {
+    return async function (dispatch: Dispatch<ActionTypes>) {
+        dispatch({ type: 'SET_LOADING', value: true });
+        try {
+            const user = await getUser();
+            dispatch({ type: 'CHECK_AUTH_SUCCESS', payload: user });
+            return user;
+        } catch (error) {
+            if (error instanceof NotLoggedInError) {
+                if (required) {
+                    login();
+                } else {
+                    dispatch({ type: 'SET_LOADING', value: false });
                 }
-            });
+            } else if (error instanceof RequestError || error instanceof JsonParseError) {
+                dispatch({ type: 'CHECK_AUTH_ERROR' });
+                logError(error);
+            }
+            return null;
+        }
     };
 }
 
@@ -121,7 +128,7 @@ export function setValgtYtelse(ytelse: string) {
     };
 }
 
-export function setValgtTema(tema: string) {
+export function setValgtTema(tema: TemaKey) {
     return function (dispatch: Dispatch<ActionTypes>) {
         return dispatch({ type: 'TEMA_SET', value: tema });
     };

src/store/reducer.ts

@@ -12,7 +12,7 @@ export interface Store {
     chosenYtelse: string;
 
     // Auth response
-    person: Bruker;
+    person: Bruker | null;
 
     activeKlage?: Klage;
 
@@ -33,21 +33,7 @@ export const initialState: Store = {
     chosenTema: null,
     chosenYtelse: '',
 
-    person: {
-        navn: {
-            fornavn: '',
-            etternavn: ''
-        },
-        adresse: {
-            adressenavn: '',
-            postnummer: '',
-            poststed: ''
-        },
-        folkeregisteridentifikator: {
-            type: '',
-            identifikasjonsnummer: ''
-        }
-    },
+    person: null,
 
     activeKlageSkjema: {
         id: null,
@@ -142,6 +128,11 @@ const reducer = (state = initialState, action: ActionTypes): Store => {
                 ...state,
                 finalizedDate: action.value
             };
+        case 'SET_LOADING':
+            return {
+                ...state,
+                loading: action.value
+            };
         default:
             return state;
     }

src/utils/get-resume-state.ts

@@ -1,10 +1,10 @@
 import queryString from 'query-string';
-import { ensureStringIsTema, getYtelseByTema, Tema } from '../types/tema';
+import { ensureStringIsTema, getYtelseByTema, Tema, TemaKey } from '../types/tema';
 
 interface ResumeState {
     klageId: string | null;
     ytelse: string | null;
-    tema: string | null;
+    tema: TemaKey | null;
     saksnummer: string | null;
 }
 
@@ -28,7 +28,7 @@ export function getResumeState(queryParams: string, storage: Storage, pathName:
     }
 
     const storedKlageId = getStorageItem(StorageKey.KLAGE_ID, storage);
-    const storedTema = getStorageItem(StorageKey.TEMA, storage);
+    const storedTema = ensureStringIsTema(getStorageItem(StorageKey.TEMA, storage));
     const storedYtelse = getStorageItem(StorageKey.YTELSE, storage);
     const storedSaksnummer = getStorageItem(StorageKey.SAKSNUMMER, storage);
 
@@ -41,7 +41,7 @@ export function getResumeState(queryParams: string, storage: Storage, pathName:
         };
     }
 
-    const queryTema = getQueryString(query, 'tema');
+    const queryTema = ensureStringIsTema(getQueryString(query, 'tema'));
     const queryYtelse = getQueryString(query, 'ytelse') ?? getDefaultYtelse(queryTema);
     const querySaksnummer = getQueryString(query, 'saksnummer');
 
@@ -61,7 +61,7 @@ export function getResumeState(queryParams: string, storage: Storage, pathName:
 
     return {
         klageId: null,
-        tema: ensureStringIsTema(queryTema),
+        tema: queryTema,
         ytelse: queryYtelse,
         saksnummer: querySaksnummer
     };

src/utils/get-user.ts

@@ -0,0 +1,41 @@
+import { getUserDataUrl } from '../clients/apiUrls';
+import { Bruker } from '../types/bruker';
+
+export async function getUser() {
+    const response = await fetch(getUserDataUrl(), {
+        method: 'GET',
+        credentials: 'include'
+    });
+    if (response.status === 401 || response.status === 403) {
+        throw new NotLoggedInError(response);
+    }
+    if (!response.ok) {
+        throw new RequestError(response);
+    }
+    try {
+        const user: Bruker = await response.json();
+        return user;
+    } catch (error) {
+        throw new JsonParseError(`Failed to parse bosy as JSON. Got:\n${response.text()}`);
+    }
+}
+
+export class RequestError extends Error {
+    public statusCode: number;
+
+    constructor(response: Response) {
+        super(`Request error. Status code ${response.status}`);
+        this.statusCode = response.status;
+    }
+}
+
+export class NotLoggedInError extends Error {
+    public statusCode: number;
+
+    constructor(response: Response) {
+        super(`User is not logged in. Response status: ${response.status}.`);
+        this.statusCode = response.status;
+    }
+}
+
+export class JsonParseError extends Error {}