error handlers added

Californium251 · Aug 31, 2023 · d8da256 · d8da256
1 parent d1a37fd
commit d8da256
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 15 deletions.
diff --git a/frontend/src/components/AppHeader.jsx b/frontend/src/components/AppHeader.jsx
@@ -5,6 +5,7 @@ import {
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import useAuth from '../hooks/useAuth';
+import routes from '../routes';
 
 const AppHeader = () => {
   const { t } = useTranslation();
@@ -13,12 +14,12 @@ const AppHeader = () => {
   const { token } = auth;
   const signOut = () => {
     logout();
-    navigate('/login');
+    navigate(routes.loginPage);
   };
   return (
     <Navbar expand="lg" bg="white" className="shadow-sm">
       <Container>
-        <Navbar.Brand href="/">{t('appName')}</Navbar.Brand>
+        <Navbar.Brand href={routes.root}>{t('appName')}</Navbar.Brand>
         {token ? (
           <Button variant="primary" onClick={signOut}>{t('signout')}</Button>
         ) : null}

diff --git a/frontend/src/components/Chat.jsx b/frontend/src/components/Chat.jsx
@@ -5,6 +5,8 @@ import {
   Container, Row, Col,
 } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import { useNavigate } from 'react-router';
 import { channelSliceActoins } from '../slices/channelSlice';
 import { addMessages } from '../slices/messageSlice';
 import 'bootstrap';
@@ -23,8 +25,9 @@ import routes from '../routes/index';
 const Chat = () => {
   const { t } = useTranslation();
   const modals = useSelector((state) => state.modals);
-  const { auth } = useAuth();
+  const { auth, logout } = useAuth();
   const dispatch = useDispatch();
+  const navigate = useNavigate();
   useEffect(() => {
     const getChats = async () => {
       const { token } = auth;
@@ -34,16 +37,19 @@ const Chat = () => {
         },
       };
       try {
-        console.log(routes);
         const res = await axios.get(routes.data, config);
         dispatch(channelSliceActoins.addChannels(res.data.channels));
         dispatch(channelSliceActoins.makeActive(res.data.currentChannelId));
         dispatch(addMessages(res.data.messages));
       } catch (err) {
         if (!err.isAxiosError) {
-          console.log('unknown error');
+          toast(t('UNKNOWN_ERR'));
+        } else if (err.code === 'ERR_BAD_REQUEST') {
+          toast(t('ERR_BAD_REQUEST'));
+          logout();
+          navigate(routes.loginPage);
         } else {
-          console.log('network error');
+          toast(t('ERR_NETWORK'));
         }
       }
     };

diff --git a/frontend/src/components/NewChannelModal.jsx b/frontend/src/components/NewChannelModal.jsx
@@ -6,11 +6,14 @@ import {
 import { useFormik } from 'formik';
 import 'bootstrap';
 import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router';
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
 import { hideModal } from '../slices/modalsSlice';
 import { channelNameValidation } from './validations';
 import useApi from '../hooks/useApi';
+import routes from '../routes/index';
+import useAuth from '../hooks/useAuth';
 
 const NewChannelModal = () => {
   const { t } = useTranslation();
@@ -26,6 +29,8 @@ const NewChannelModal = () => {
   useEffect(() => {
     nameField.current.focus();
   }, []);
+  const navigate = useNavigate();
+  const { logout } = useAuth();
   const formik = useFormik({
     initialValues: {
       name: '',
@@ -38,8 +43,16 @@ const NewChannelModal = () => {
       }).then(() => {
         dispatch(hideModal({ modal: 'newChannel' }));
         toast.success(t('channelCreated'));
-      }).catch((e) => {
-        console.log(e);
+      }).catch((err) => {
+        if (!err.isAxiosError) {
+          toast(t('UNKNOWN_ERR'));
+        } else if (err.code === 'ERR_BAD_REQUEST') {
+          toast(t('ERR_BAD_REQUEST'));
+          logout();
+          navigate(routes.loginPage);
+        } else {
+          toast(t('ERR_NETWORK'));
+        }
       });
     },
   });

diff --git a/frontend/src/components/RemoveChannelModal.jsx b/frontend/src/components/RemoveChannelModal.jsx
@@ -6,10 +6,13 @@ import {
 import { useFormik } from 'formik';
 import 'bootstrap';
 import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router';
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
 import { hideModal } from '../slices/modalsSlice';
 import useApi from '../hooks/useApi';
+import routes from '../routes/index';
+import useAuth from '../hooks/useAuth';
 
 const RemoveChannelModal = () => {
   const { t } = useTranslation();
@@ -19,14 +22,24 @@ const RemoveChannelModal = () => {
   };
   const { removeChannel } = useApi();
   const id = useSelector((state) => state.modals.removeChannel);
+  const navigate = useNavigate();
+  const { logout } = useAuth();
   const formik = useFormik({
     initialValues: { id },
     onSubmit: (values) => {
       removeChannel(values).then(() => {
         dispatch(hideModal({ modal: 'removeChannel' }));
         toast.success(t('channelRemoved'));
-      }).catch((e) => {
-        console.log(e);
+      }).catch((err) => {
+        if (!err.isAxiosError) {
+          toast(t('UNKNOWN_ERR'));
+        } else if (err.code === 'ERR_BAD_REQUEST') {
+          toast(t('ERR_BAD_REQUEST'));
+          logout();
+          navigate(routes.loginPage);
+        } else {
+          toast(t('ERR_NETWORK'));
+        }
       });
     },
   });

diff --git a/frontend/src/components/RenameChannelModal.jsx b/frontend/src/components/RenameChannelModal.jsx
@@ -6,11 +6,14 @@ import {
 import { useFormik } from 'formik';
 import 'bootstrap';
 import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router';
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
 import { hideModal } from '../slices/modalsSlice';
 import { channelNameValidation } from './validations';
 import useApi from '../hooks/useApi';
+import routes from '../routes/index';
+import useAuth from '../hooks/useAuth';
 
 const RenameChannelModal = () => {
   const { t } = useTranslation();
@@ -28,6 +31,8 @@ const RenameChannelModal = () => {
   useEffect(() => {
     nameField.current.focus();
   }, []);
+  const navigate = useNavigate();
+  const { logout } = useAuth();
   const formik = useFormik({
     initialValues: { name: initialName },
     validationSchema: channelNameValidation(channelNames),
@@ -41,8 +46,16 @@ const RenameChannelModal = () => {
         dispatch(hideModal({ modal: 'renameChannel' }));
       }).then(() => {
         toast.success(t('channelRenamed'));
-      }).catch((e) => {
-        console.log(e);
+      }).catch((err) => {
+        if (!err.isAxiosError) {
+          toast(t('UNKNOWN_ERR'));
+        } else if (err.code === 'ERR_BAD_REQUEST') {
+          toast(t('ERR_BAD_REQUEST'));
+          logout();
+          navigate(routes.loginPage);
+        } else {
+          toast(t('ERR_NETWORK'));
+        }
       });
     },
   });

diff --git a/frontend/src/components/SendMessageForm.jsx b/frontend/src/components/SendMessageForm.jsx
@@ -2,10 +2,13 @@ import React, { useEffect, useRef } from 'react';
 import { useFormik } from 'formik';
 import { Form } from 'react-bootstrap';
 import { useSelector } from 'react-redux';
+import { useNavigate } from 'react-router';
+import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
 import { newMessageValidation } from './validations';
 import useAuth from '../hooks/useAuth';
 import useApi from '../hooks/useApi';
+import routes from '../routes/index';
 
 const SendMessageForm = () => {
   const channelId = useSelector((state) => state.channels.activeId);
@@ -14,9 +17,10 @@ const SendMessageForm = () => {
     messageInput.current.focus();
   }, [channelId]);
   const { t } = useTranslation();
-  const { auth } = useAuth();
+  const { auth, logout } = useAuth();
   const { username } = auth;
   const { newMessage } = useApi();
+  const navigate = useNavigate();
   const formik = useFormik({
     initialValues: { body: '' },
     validationSchema: newMessageValidation,
@@ -28,8 +32,16 @@ const SendMessageForm = () => {
       };
       newMessage(newValues).then(() => {
         resetForm();
-      }).catch((e) => {
-        console.log(e);
+      }).catch((err) => {
+        if (!err.isAxiosError) {
+          toast(t('UNKNOWN_ERR'));
+        } else if (err.code === 'ERR_BAD_REQUEST') {
+          toast(t('ERR_BAD_REQUEST'));
+          logout();
+          navigate(routes.loginPage);
+        } else {
+          toast(t('ERR_NETWORK'));
+        }
       });
     },
   });