Fix use user hook logic

Co-authored-by: Daniel Eriksson <[email protected]>
navikt · Oct 2, 2024 · aa99082 · aa99082
1 parent d717144
commit aa99082
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 27 deletions.
diff --git a/frontend/src/components/case/innlogget/begrunnelse/begrunnelse-page.tsx b/frontend/src/components/case/innlogget/begrunnelse/begrunnelse-page.tsx
@@ -8,7 +8,7 @@ import { BegrunnelseText } from '@app/components/case/innlogget/begrunnelse/begr
 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';
-import { useUser } from '@app/hooks/use-user';
+import { useUserRequired } from '@app/hooks/use-user';
 import { useLanguage } from '@app/language/use-language';
 import { useTranslation } from '@app/language/use-translation';
 import { AppEventEnum } from '@app/logging/action';
@@ -35,7 +35,7 @@ interface Props {
 const RenderCasebegrunnelsePage = ({ data }: Props) => {
   const navigate = useNavigate();
   const language = useLanguage();
-  const { user, isLoadingUser } = useUser();
+  const { user, isLoadingUser } = useUserRequired();
 
   const { skjema, user_loader } = useTranslation();
 

diff --git a/frontend/src/components/case/innlogget/summary/oppsummering-page.tsx b/frontend/src/components/case/innlogget/summary/oppsummering-page.tsx
@@ -1,6 +1,6 @@
 import { useCaseErrors } from '@app/hooks/errors/use-case-errors';
 import { useGoToBegrunnelseOnError } from '@app/hooks/errors/use-navigate-on-error';
-import { useIsAuthenticated, useUser } from '@app/hooks/use-user';
+import { useUserRequired } from '@app/hooks/use-user';
 import { Clipboard } from '@app/icons/clipboard';
 import { useTranslation } from '@app/language/use-translation';
 import { type Case, CaseStatus, CaseType } from '@app/redux-api/case/types';
@@ -30,14 +30,11 @@ interface Props {
 
 const DigitalCaseOppsummeringPage = ({ data }: Props) => {
   const { common, skjema, user_loader, icons } = useTranslation();
-  const { isAuthenticated } = useIsAuthenticated();
+  const { user, isLoadingUser } = useUserRequired();
   const validate = useCaseErrors(data.type);
   const [isValid] = validate(data);
-
   const [error, setError] = useState<string | null>(null);
 
-  const { user, isLoadingUser } = useUser();
-
   useGoToBegrunnelseOnError(isValid);
 
   const incompleteStatus = data.status === CaseStatus.DRAFT || data.status === CaseStatus.DOWNLOADED;
@@ -107,12 +104,6 @@ const DigitalCaseOppsummeringPage = ({ data }: Props) => {
 
       {getError(error)}
 
-      {isAuthenticated === false ? (
-        <CenteredContainer>
-          <ErrorMessage>{common.logged_out}</ErrorMessage>
-        </CenteredContainer>
-      ) : null}
-
       <CenteredContainer>
         {incompleteStatus ? (
           <Button as={Link} variant="secondary" to="../begrunnelse">

diff --git a/frontend/src/hooks/use-user.ts b/frontend/src/hooks/use-user.ts
@@ -1,6 +1,8 @@
 import { useGetSessionQuery, useGetUserQuery } from '@app/redux-api/user/api';
 import type { IUser } from '@app/redux-api/user/types';
+import { login } from '@app/user/login';
 import { type SkipToken, skipToken } from '@reduxjs/toolkit/query';
+import { useEffect } from 'react';
 
 interface LoadingAuth {
   isAuthenticated: undefined;
@@ -15,39 +17,72 @@ interface LoadedAuth {
 type AuthResult = LoadingAuth | LoadedAuth;
 
 export const useIsAuthenticated = (skip?: SkipToken): AuthResult => {
-  const { isAuthenticated, isLoading } = useGetSessionQuery(skip, {
+  const { data, isSuccess } = useGetSessionQuery(skip, {
     refetchOnFocus: true,
     refetchOnReconnect: true,
-    selectFromResult: ({ data, isLoading }) => ({ isLoading, isAuthenticated: data?.session.active }),
   });
 
-  if (isLoading || isAuthenticated === undefined) {
-    return { isAuthenticated: undefined, isLoadingAuth: true };
+  if (isSuccess) {
+    return { isAuthenticated: data?.session.active ?? false, isLoadingAuth: false };
   }
 
-  return { isAuthenticated, isLoadingAuth: false };
+  return { isAuthenticated: undefined, isLoadingAuth: true };
 };
 
 interface LoadedUser {
   user: IUser;
   isLoadingUser: false;
+  isAuthenticated: true;
 }
 
 interface LoadingUser {
   user: undefined;
   isLoadingUser: true;
+  isAuthenticated: true;
 }
 
-type UserResult = LoadedUser | LoadingUser;
+interface LoadedAnonymous {
+  user: undefined;
+  isLoadingUser: false;
+  isAuthenticated: false;
+}
+
+const LOADED_ANONYMOUS: LoadedAnonymous = { user: undefined, isLoadingUser: false, isAuthenticated: false };
+const LOADING_USER: LoadingUser = { user: undefined, isLoadingUser: true, isAuthenticated: true };
+
+type UserResult = LoadedUser | LoadingUser | LoadedAnonymous;
 
 export const useUser = (): UserResult => {
-  const { isAuthenticated } = useIsAuthenticated();
+  const { isAuthenticated, isLoadingAuth } = useIsAuthenticated();
+  const { data: user, isLoading: isLoadingUser } = useGetUserQuery(isAuthenticated === true ? undefined : skipToken);
 
-  const { data: user } = useGetUserQuery(isAuthenticated === true ? undefined : skipToken);
+  if (isAuthenticated === false) {
+    return LOADED_ANONYMOUS;
+  }
 
   if (user === undefined) {
-    return { user: undefined, isLoadingUser: true };
+    return isLoadingAuth || isLoadingUser ? LOADING_USER : LOADED_ANONYMOUS;
+  }
+
+  return { user, isLoadingUser: false, isAuthenticated: true };
+};
+
+/** Only for use in authorized contexts.
+ * If the user is unauthorized, it will redirect to the login page.
+ * It will return a loading state until the user is loaded or redirected.
+ */
+export const useUserRequired = (): LoadingUser | LoadedUser => {
+  const { user, isLoadingUser, isAuthenticated } = useUser();
+
+  useEffect(() => {
+    if (isAuthenticated === false) {
+      login();
+    }
+  }, [isAuthenticated]);
+
+  if (isLoadingUser || !isAuthenticated) {
+    return LOADING_USER;
   }
 
-  return { user, isLoadingUser: false };
+  return { user, isLoadingUser: false, isAuthenticated: true };
 };
diff --git a/frontend/src/routes/create-case/use-case.ts b/frontend/src/routes/create-case/use-case.ts
@@ -1,6 +1,6 @@
 import { getQueryValue } from '@app/functions/get-query-value';
 import { useSessionCase } from '@app/hooks/use-session-klage';
-import { useIsAuthenticated, useUser } from '@app/hooks/use-user';
+import { useUser } from '@app/hooks/use-user';
 import type { Innsendingsytelse } from '@app/innsendingsytelser/innsendingsytelser';
 import { useLanguage } from '@app/language/use-language';
 import { useTranslation } from '@app/language/use-translation';
@@ -21,8 +21,7 @@ export const useCase = (type: CaseType, innsendingsytelse: Innsendingsytelse): I
   const language = useLanguage();
   const { case_loader, error_messages } = useTranslation();
   const [query] = useSearchParams();
-  const { isLoadingAuth, isAuthenticated } = useIsAuthenticated();
-  const { user, isLoadingUser } = useUser();
+  const { user, isLoadingUser, isAuthenticated } = useUser();
 
   const internalSaksnummer = getQueryValue(query.get('saksnummer'));
 
@@ -35,7 +34,7 @@ export const useCase = (type: CaseType, innsendingsytelse: Innsendingsytelse): I
   const [sessionCase, sessionCaseIsLoading] = useSessionCase(type, innsendingsytelse, internalSaksnummer);
   const dispatch = useAppDispatch();
 
-  const isLoading = isLoadingAuth || createIsLoading || resumeIsLoading || isLoadingUser;
+  const isLoading = isLoadingUser || createIsLoading || resumeIsLoading;
   const isDone = createHasFailed || createIsSuccess || resumeHasFailed || resumeIsSuccess;
 
   useEffect(() => {