Connect server error with catches

src/UserContext/AuthContext.tsx

@@ -3,6 +3,7 @@ import Cookie from 'js-cookie';
 import axios from 'axios';
 import { userData } from '../interfaces/userData';
 import userContext from './context';
+import { ServerError } from '../pages/Errors';
 
 const AuthContext = ({ children }: { children: any }) => {
   const [user, setUserData] = useState<userData | null>(null);
@@ -13,7 +14,8 @@ const AuthContext = ({ children }: { children: any }) => {
       .then((res) => {
         setUserData(res.data.userData);
       })
-      .catch(() => {
+      .catch((err) => {
+        if (err.response.state >= 500) ServerError();
         Cookie.remove('token');
       });
   }, []);

src/components/AddProject/index.tsx

@@ -10,6 +10,7 @@ import { ErrorAlert, SuccessAlert } from '..';
 import THEME from '../../theme';
 import { addProjectSchema } from '../../helper/validation/schema';
 import { Props2 } from '../../interfaces';
+import { ServerError } from '../../pages/Errors';
 
 const AddProjectModal = ({ open, handleClose }:Props2) => {
   const [openError, setOpenError] = useState(false);
@@ -25,6 +26,7 @@ const AddProjectModal = ({ open, handleClose }:Props2) => {
         setMessageSuccess(res.data.message);
       })
       .catch((err) => {
+        if (err.response.state >= 500) ServerError();
         setOpenError(true);
         setMessageError(err.response.data.message);
       }); handleClose();

src/components/Login/LoginForm/index.tsx

@@ -17,6 +17,7 @@ import {
 import { validationSchema } from '../../../helper/validation/schema';
 import { ErrorAlert, SuccessAlert } from '../..';
 import userContext from '../../../UserContext/context';
+import { ServerError } from '../../../pages/Errors';
 
 interface LoginFormValues {
   email: string;
@@ -41,6 +42,7 @@ const LoginForm = () => {
         if (!openSuccess) navigator('/');
       })
       .catch((err) => {
+        if (err.response.state >= 500) ServerError();
         setOpenError(true);
         if (err) setMessageError(err.response.data.message);
       });

src/components/ProjectsCard/ProjectCard.tsx

@@ -20,6 +20,7 @@ import {
 import { iProjects, iProjectTasks } from '../../interfaces';
 import { ErrorAlert } from '..';
 import Loader from './Loader';
+import { ServerError } from '../../pages/Errors';
 
 const ProjectsCard = () => {
   const [userProjects, setUserProjects] = useState<iProjects[]>([]);
@@ -36,6 +37,7 @@ const ProjectsCard = () => {
         setUserProjects(updatedProjects);
       })
       .catch((error) => {
+        if (error.response.state >= 500) ServerError();
         setOpenError(true);
         setMessageError(error.response.data.message);
       });
@@ -56,6 +58,7 @@ const ProjectsCard = () => {
         setIsLoading(false);
       })
       .catch((error) => {
+        if (error.response.state >= 500) ServerError();
         setOpenError(true);
         setMessageError(error.response.data.message);
         setIsLoading(false);

src/components/Sidebar/index.tsx

@@ -18,6 +18,7 @@ import { iProjects } from '../../interfaces';
 import { NAV_LIST } from '../../constants';
 import { Logo, NavItem } from '../Common';
 import UserCard from '../UserCard';
+import { ServerError } from '../../pages/Errors';
 
 const Sidebar = () => {
   const navigate = useNavigate();
@@ -34,6 +35,7 @@ const Sidebar = () => {
         setProjects(response.data.data);
       })
       .catch((error) => {
+        if (error.response.state >= 500) ServerError();
         setOpenError(true);
         setMessageError(error.response.data.message);
       });
@@ -47,6 +49,7 @@ const Sidebar = () => {
         navigate('/login', { state: { success: 'Logout Successfully' } });
       })
       .catch((error) => {
+        if (error.response.state >= 500) ServerError();
         setOpenError(true);
         setMessageError(error.response.data.message);
       });

src/components/Signup/SignupForm/index.tsx

@@ -12,6 +12,7 @@ import {
 import { signupSchema } from '../../../helper/validation/schema';
 import { ErrorAlert, SuccessAlert } from '../..';
 import userContext from '../../../UserContext/context';
+import { ServerError } from '../../../pages/Errors';
 
 interface SignupFormValues {
   email: string;
@@ -38,6 +39,7 @@ const SignupForm = () => {
         if (!openSuccess) navigator('/');
       })
       .catch((err) => {
+        if (err.response.state >= 500) ServerError();
         setOpenError(true);
         setMessageError(err.response.data.message);
       });

src/components/StatisticsCard/index.tsx

@@ -4,6 +4,7 @@ import Typography from '@mui/material/Typography';
 import { StatisticsBox, StatisticsContent } from './statistics.styed';
 import { task } from '../../interfaces';
 import { ErrorAlert } from '..';
+import { ServerError } from '../../pages/Errors';
 
 const StatisticsCard = () => {
   const [completedTasks, setCompletedTasks] = useState<task[]>([]);
@@ -19,6 +20,7 @@ const StatisticsCard = () => {
         setCompletedTasks(filteredTasks);
       })
       .catch((error) => {
+        if (error.response.state >= 500) ServerError();
         setOpenError(true);
         setMessageError(error.response.data.message);
       });

src/components/TaskTable/TaskTable.tsx

@@ -18,6 +18,7 @@ import { task } from '../../interfaces';
 import Theme from '../../theme';
 import TaskRowSkeleton from './TaskRowSkeleton';
 import empty from '../../lotties/empty.json';
+import { ServerError } from '../../pages/Errors';
 
 const TaskTable = () => {
   const [tasks, setTasks] = useState<task[]>([]);
@@ -45,6 +46,7 @@ const TaskTable = () => {
         setTasks(res.data.data);
       })
       .catch((err) => {
+        if (err.response.state >= 500) ServerError();
         setLoading(false);
         navigator('/', { state: { error: err.response.data.message } });
       });

src/components/UpdateTask/index.tsx

@@ -14,6 +14,7 @@ import { task, ISection } from '../../interfaces';
 import {
   TaskBox, Label, Date, Section, Textarea,
 } from './updateTask.styled';
+import { ServerError } from '../../pages/Errors';
 
 interface IProps {
    data: task, open: boolean, handleClose: () => void,
@@ -77,6 +78,7 @@ const EditTaskForm = ({ data, open, handleClose }:IProps) => {
         setMessageSuccess(response.data.message);
       })
       .catch((error) => {
+        if (error.response.state >= 500) ServerError();
         setOpenError(true);
         setMessageError(error.response.data.message);
       });
@@ -88,7 +90,8 @@ const EditTaskForm = ({ data, open, handleClose }:IProps) => {
       .then((values) => {
         setLoading(false);
         setSections(values.data.data);
-      }).catch(() => {
+      }).catch((err) => {
+        if (err.response.state >= 500) ServerError();
         setLoading(false);
       });
   }, []);

src/pages/AccountPage/index.tsx

@@ -5,6 +5,7 @@ import { useNavigate } from 'react-router-dom';
 import { AccountInput, ErrorAlert } from '../../components';
 import { WrappBtn } from '../../components/AccountInput/acount.styled';
 import userContext from '../../UserContext/context';
+import { ServerError } from '../Errors';
 
 const AccountPage = () => {
   const navigator = useNavigate();
@@ -17,6 +18,7 @@ const AccountPage = () => {
       .delete('/api/account')
       .then(() => navigator('/login'))
       .catch((error) => {
+        if (error.response.state >= 500) ServerError();
         setOpenError(true);
         setMessageError(error.response.data.message);
       });

src/pages/Calendar/index.tsx

@@ -6,6 +6,7 @@ import timeGridPlugin from '@fullcalendar/timegrid';
 import { Box } from '@mui/material';
 import axios from 'axios';
 import { task } from '../../interfaces';
+import { ServerError } from '../Errors';
 
 const Calendar = () => {
   const [tasks, setTasks] = useState<task[]>([]);
@@ -23,6 +24,7 @@ const Calendar = () => {
         setTasks(res.data.data);
       })
       .catch((err) => {
+        if (err.response.state >= 500) ServerError();
         navigator('/', { state: { error: err.response.data.message } });
       });
   }, [pathname]);

src/pages/Errors/index.tsx

@@ -0,0 +1,4 @@
+import ClientError from './clientError';
+import ServerError from './serverError';
+
+export { ClientError, ServerError };

src/pages/Overview/index.tsx

@@ -11,6 +11,7 @@ import {
 } from '../../interfaces';
 import presenation from '../../lotties/presentation.json';
 import AddMemberModal from '../../components/AddMember';
+import { ServerError } from '../Errors';
 
 const Overview = () => {
   const [open, setOpen] = useState(false);
@@ -32,6 +33,7 @@ const Overview = () => {
         setManager(res.data.manager);
       })
       .catch((err) => {
+        if (err.response.state >= 500) ServerError();
         navigator('/', { state: { error: err.response.data.message } });
       });
 
@@ -45,6 +47,7 @@ const Overview = () => {
         setTasks(res.data.data);
       })
       .catch((err) => {
+        if (err.response.state >= 500) ServerError();
         navigator('/', { state: { error: err.response.data.message } });
       });
 
@@ -54,6 +57,7 @@ const Overview = () => {
         setMembers(res.data.data);
       })
       .catch((err) => {
+        if (err.response.state >= 500) ServerError();
         navigator('/', { state: { error: err.response.data.message } });
       });
   }, [id, open]);

src/pages/TaskBoard/index.tsx

@@ -8,6 +8,7 @@ import { task } from '../../interfaces/task';
 import { ISection } from '../../interfaces';
 import empty from '../../lotties/empty.json';
 import TaskSkeleton from './TaskSkeleton';
+import { ServerError } from '../Errors';
 
 const TaskBoard = () => {
   const navigate = useNavigate();
@@ -38,6 +39,7 @@ const TaskBoard = () => {
         }
       })
       .catch((err) => {
+        if (err.response.state >= 500) ServerError();
         setLoading(false);
         navigate('/', { state: { error: err.response.data.message } });
       });

src/routes/index.tsx

@@ -11,7 +11,7 @@ import {
 import { ProjectsCards, TaskTable } from '../components';
 
 import HomeLayout from '../layout';
-import ClientError from '../pages/Errors/clientError';
+import { ClientError } from '../pages/Errors';
 
 const router = createBrowserRouter([
   {