From d8da2565265a1b6a9df7ec31d8e9a1c43d44a539 Mon Sep 17 00:00:00 2001 From: Maxim Kurepov Date: Thu, 31 Aug 2023 14:00:13 +0400 Subject: [PATCH] error handlers added --- frontend/src/components/AppHeader.jsx | 5 +++-- frontend/src/components/Chat.jsx | 14 ++++++++++---- frontend/src/components/NewChannelModal.jsx | 17 +++++++++++++++-- frontend/src/components/RemoveChannelModal.jsx | 17 +++++++++++++++-- frontend/src/components/RenameChannelModal.jsx | 17 +++++++++++++++-- frontend/src/components/SendMessageForm.jsx | 18 +++++++++++++++--- 6 files changed, 73 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/AppHeader.jsx b/frontend/src/components/AppHeader.jsx index 5956e08..53cca8c 100644 --- 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 ( - {t('appName')} + {t('appName')} {token ? ( ) : null} diff --git a/frontend/src/components/Chat.jsx b/frontend/src/components/Chat.jsx index 41e2307..c2c2b86 100644 --- 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 index 1e6da88..1328fae 100644 --- 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 index 8cc574b..3ec914c 100644 --- 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 index abd3805..5062985 100644 --- 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 index dd83237..fac34f6 100644 --- 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')); + } }); }, });