Make logged out modal global

Author: eriksson-daniel

frontend/src/components/case/innlogget/begrunnelse/begrunnelse-page.tsx

@@ -5,7 +5,6 @@ import { Reasons } from '@app/components/case/common/reasons';
 import { DebouncedSaksnummer } from '@app/components/case/common/saksnummer';
 import { VedtakDate } from '@app/components/case/common/vedtak-date';
 import { BegrunnelseText } from '@app/components/case/innlogget/begrunnelse/begrunnelse-text';
-import { LoggedOutModal } from '@app/components/case/innlogget/begrunnelse/logged-out-modal';
 import { redirectToNav } from '@app/functions/redirect-to-nav';
 import { INITIAL_ERRORS } from '@app/hooks/errors/types';
 import { useCaseErrors } from '@app/hooks/errors/use-case-errors';
@@ -40,7 +39,7 @@ const RenderCasebegrunnelsePage = ({ data }: Props) => {
 
   const { skjema, user_loader } = useTranslation();
 
-  const [updateCase] = useUpdateCaseMutation({ fixedCacheKey: data.id });
+  const [updateCase] = useUpdateCaseMutation();
   const [deleteAttachment] = useDeleteAttachmentMutation();
   const [deleteCase, { isLoading }] = useDeleteCaseMutation();
 
@@ -182,8 +181,6 @@ const RenderCasebegrunnelsePage = ({ data }: Props) => {
           </Button>
         </CenteredContainer>
       </DigitalFormContainer>
-
-      <LoggedOutModal fixedCacheKey={data.id} />
     </>
   );
 };

frontend/src/components/case/innlogget/begrunnelse/logged-out-modal.tsx

@@ -1,18 +1,24 @@
-import { isError } from '@app/functions/is-api-error';
 import { useTranslation } from '@app/language/use-translation';
-import { useUpdateCaseMutation } from '@app/redux-api/case/api';
+import { AppEventEnum } from '@app/logging/action';
+import { appEvent } from '@app/logging/logger';
+import { useAppSelector } from '@app/redux/configure-store';
 import { getLoginRedirectPath } from '@app/user/login';
 import { BodyShort, Button, Modal } from '@navikt/ds-react';
+import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 
-export const LoggedOutModal = ({ fixedCacheKey }: { fixedCacheKey: string }) => {
-  const [, { error }] = useUpdateCaseMutation({ fixedCacheKey });
+export const LoggedOutModal = () => {
+  const { show } = useAppSelector(({ loggedOutModal }) => loggedOutModal);
   const { skjema } = useTranslation();
 
-  const unauthorized = isError(error) && error.status === 401;
+  useEffect(() => {
+    if (show) {
+      appEvent(AppEventEnum.LOGGED_OUT_MODAL_OPEN);
+    }
+  }, [show]);
 
-  if (!unauthorized) {
+  if (!show) {
     return null;
   }
 

frontend/src/logging/action.ts

@@ -25,4 +25,5 @@ export enum AppEventEnum {
   UPLOAD_FILES_START = 'Start uploading files',
   USER_LOGIN = 'Login',
   MISSING_AUTH = 'Missing authentication',
+  LOGGED_OUT_MODAL_OPEN = 'Logged out modal open',
 }

frontend/src/redux-api/common.ts

@@ -1,5 +1,7 @@
 import { isNotUndefined } from '@app/functions/is-not-type-guards';
 import { apiEvent } from '@app/logging/logger';
+import { reduxStore } from '@app/redux/configure-store';
+import { setShow } from '@app/redux/logged-out-modal';
 import { type FetchArgs, fetchBaseQuery, retry } from '@reduxjs/toolkit/query/react';
 
 const IS_LOCALHOST = window.location.hostname === 'localhost';
@@ -46,6 +48,7 @@ const staggeredBaseQuery = (baseUrl: string) => {
       }
 
       if (result.error.status === 401) {
+        reduxStore.dispatch(setShow(true));
         retry.fail(result.error.data);
       } else if (
         result.error.status === 400 ||
@@ -58,6 +61,8 @@ const staggeredBaseQuery = (baseUrl: string) => {
         retry.fail(result.error);
       }
 
+      reduxStore.dispatch(setShow(false));
+
       return result;
     },
     { maxRetries: 3 },

frontend/src/redux/logged-out-modal.ts

@@ -0,0 +1,19 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  show: false,
+};
+
+export const loggedOutModalSlice = createSlice({
+  name: 'loggedOutModal',
+  initialState,
+  reducers: {
+    setShow: (state, { payload }) => {
+      state.show = payload;
+
+      return state;
+    },
+  },
+});
+
+export const { setShow } = loggedOutModalSlice.actions;

frontend/src/redux/root.ts

@@ -1,6 +1,7 @@
 import { caseApi } from '@app/redux-api/case/api';
 import { innsendingsytelserApi } from '@app/redux-api/innsendingsytelser';
 import { oauthApi, userApi } from '@app/redux-api/user/api';
+import { loggedOutModalSlice } from '@app/redux/logged-out-modal';
 import { combineReducers } from 'redux';
 import { sessionSlice } from './session/session';
 
@@ -10,6 +11,7 @@ export const rootReducer = combineReducers({
   [caseApi.reducerPath]: caseApi.reducer,
   [oauthApi.reducerPath]: oauthApi.reducer,
   session: sessionSlice.reducer,
+  loggedOutModal: loggedOutModalSlice.reducer,
 });
 
 export type RootState = ReturnType<typeof rootReducer>;

frontend/src/routes/routes.tsx

@@ -1,4 +1,5 @@
 import { CaseBegrunnelsePage } from '@app/components/case/innlogget/begrunnelse/begrunnelse-page';
+import { LoggedOutModal } from '@app/components/case/innlogget/begrunnelse/logged-out-modal';
 import { CaseInnsendingPage } from '@app/components/case/innlogget/innsending/innsending-page';
 import { CaseKvitteringPage } from '@app/components/case/innlogget/kvittering/kvittering-page';
 import { CaseOppsummeringPage } from '@app/components/case/innlogget/summary/oppsummering-page';
@@ -75,6 +76,7 @@ export const Router = () => (
 
               <Route path="*" element={<NotFoundPage />} />
             </Routes>
+            <LoggedOutModal />
           </ErrorBoundary>
         </LanguageComponent>
       </DekoratorSetRedirect>