catch 4xx status codes, add error variable & update content view

src/components/Content/Content.tsx

@@ -1,12 +1,28 @@
 import React from 'react';
 import { useAppSelector } from '../../hooks/reduxHooks';
+import HomeButton from '../Buttons/HomeButton/HomeButton';
+import ErrorComponent from '../Errors/ErrorComponent/ErrorComponent';
 import Loading from '../Loading/Loading';
 import QuestionForm from '../QuestionForm/QuestionForm';
 
 const Content = () => {
-  const { isLoggedIn } = useAppSelector((state) => state.user);
+  const { isLoggedIn, isError } = useAppSelector((state) => state.user);
 
-  return <div className="content-inner">{isLoggedIn ? <QuestionForm /> : <Loading />}</div>;
+  const renderSecondaryContent = () => {
+    if (isError) {
+      return (
+        <ErrorComponent translationId="app.result.error">
+          <HomeButton />
+        </ErrorComponent>
+      );
+    } else {
+      return <Loading />;
+    }
+  };
+
+  return (
+    <div className="content-inner">{isLoggedIn ? <QuestionForm /> : renderSecondaryContent()}</div>
+  );
 };
 
 export default Content;

src/components/Pages/HomePage/HomePage.tsx

@@ -13,7 +13,7 @@ import { sortQuestionsData } from '../../../utils/utils';
 
 const HomePage = () => {
   const dispatch = useAppDispatch();
-  const { setUserId, setCsrfToken, setIsLoggedIn } = bindActionCreators(
+  const { setUserId, setCsrfToken, setIsLoggedIn, setIsError } = bindActionCreators(
     userSlice.actions,
     dispatch,
   );
@@ -69,7 +69,7 @@ const HomePage = () => {
   };
 
   const handleClick = async () => {
-    const userValues = await startPoll(setIsLoggedIn);
+    const userValues = await startPoll(setIsLoggedIn, setIsError);
     const dataStr = userValues?.data?.[0];
     const iv = userValues?.data?.[1];
     const secretParse = window.atob(secret);

src/redux/slices/userSlice.ts

@@ -19,6 +19,7 @@ export const initialState: User = {
     description_en: '',
     description_sv: '',
   },
+  isError: false,
 };
 
 export const userSlice = createSlice({
@@ -58,6 +59,9 @@ export const userSlice = createSlice({
         description_sv: '',
       };
     },
+    setIsError: (state, action: PayloadAction<boolean>) => {
+      state.isError = action.payload;
+    },
   },
 });
 
@@ -69,6 +73,7 @@ export const {
   resetUserId,
   resetCsrfToken,
   resetProfileResult,
+  setIsError,
 } = userSlice.actions;
 
 export default userSlice;

src/types.ts

@@ -13,6 +13,7 @@ interface User {
   csrfToken: string;
   isLoggedIn: boolean;
   profileResult: Result;
+  isError: boolean;
 }
 
 interface LocaleTextObject {

src/utils/mobilityProfileAPI.ts

@@ -66,7 +66,7 @@ const fetchUserResult = async (
   }
 };
 
-const startPoll = async (setLoggedIn: (a: boolean) => void) => {
+const startPoll = async (setLoggedIn: (a: boolean) => void, setError: (a: boolean) => void) => {
   const headers = new Headers({
     Accept: 'application/json',
     'Content-Type': 'application/json',
@@ -80,8 +80,12 @@ const startPoll = async (setLoggedIn: (a: boolean) => void) => {
     const response = await fetch(`${apiUrl}/question/start_poll/`, requestOptions);
     const jsonData = await response.json();
     const userValues = jsonData;
-    setLoggedIn(true);
-    return userValues;
+    if (response.ok) {
+      setLoggedIn(true);
+      return userValues;
+    } else {
+      setError(true);
+    }
   } catch (error) {
     let message;
     if (error instanceof Error) message = error.message;
@@ -258,13 +262,16 @@ const postUserInfo = async (
   };
 
   try {
-    await fetch(`${apiBaseUrl}/account/profile/${userId}/`, requestOptions);
-    setAnswerStatus(true);
+    const response = await fetch(`${apiBaseUrl}/account/profile/${userId}/`, requestOptions);
+    if (response.ok) {
+      setAnswerStatus(true);
+    } else {
+      setError(true);
+    }
   } catch (error) {
     let message;
     if (error instanceof Error) message = error.message;
     else message = String(error);
-    setError(true);
     console.warn(message);
   }
 };
@@ -293,10 +300,13 @@ const postSubscribeInfo = async (
   };
 
   try {
-    await fetch(`${apiBaseUrl}/account/profile/subscribe/`, requestOptions);
-    setAnswer(true);
+    const response = await fetch(`${apiBaseUrl}/account/profile/subscribe/`, requestOptions);
+    if (response.ok) {
+      setAnswer(true);
+    } else {
+      setError(true);
+    }
   } catch (error) {
-    setError(true);
     let message;
     if (error instanceof Error) message = error.message;
     else message = String(error);