Add contexts, remove slices

metastasio · Oct 8, 2023 · 6a0ecdc · 6a0ecdc
1 parent 3249117
commit 6a0ecdc
Show file tree

Hide file tree

Showing 22 changed files with 122 additions and 237 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -15,6 +15,6 @@
   </head>
   <body class="h-100 bg-light">
 
-    <div id="root" class="h-100"></div>
+    <div id="root" class="h-100 d-flex flex-column"></div>
   </body>
 </html>
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -12,41 +12,39 @@ import routes from './services/routes.js';
 import AuthProvider from './components/AuthProvider.jsx';
 
 const App = () => (
-  <div className="h-100">
-    <div className="d-flex flex-column h-100">
-      <AuthProvider>
-        <BrowserRouter>
-          <Header />
-          <Routes>
-            <Route
-              path={routes.mainPage()}
-              element={
-              (
-                <RequireAuth>
-                  <MainPage />
-                </RequireAuth>
-                )
-              }
-            />
-            <Route path={routes.logInPage()} element={<LoginPage />} />
-            <Route path={routes.signUpPage()} element={<SignUp />} />
-            <Route path="*" element={<NotFound />} />
-          </Routes>
-        </BrowserRouter>
-      </AuthProvider>
-      <ToastContainer
-        position="bottom-center"
-        autoClose={2000}
-        hideProgressBar
-        newestOnTop={false}
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss={false}
-        draggable
-        pauseOnHover
-      />
-    </div>
-  </div>
+  <>
+    <AuthProvider>
+      <BrowserRouter>
+        <Header />
+        <Routes>
+          <Route
+            path={routes.mainPage()}
+            element={
+            (
+              <RequireAuth>
+                <MainPage />
+              </RequireAuth>
+              )
+            }
+          />
+          <Route path={routes.logInPage()} element={<LoginPage />} />
+          <Route path={routes.signUpPage()} element={<SignUp />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </BrowserRouter>
+    </AuthProvider>
+    <ToastContainer
+      position="bottom-center"
+      autoClose={2000}
+      hideProgressBar
+      newestOnTop={false}
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss={false}
+      draggable
+      pauseOnHover
+    />
+  </>
 );
 
 export default App;
diff --git a/frontend/src/components/Access/LoginPage.jsx b/frontend/src/components/Access/LoginPage.jsx
@@ -1,22 +1,20 @@
 import * as formik from 'formik';
 import { Link, useNavigate } from 'react-router-dom';
-// import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
-import { useContext } from 'react';
 import {
   Button, Form, FloatingLabel, Card, Container,
 } from 'react-bootstrap';
 
 import { schemaLogIn } from '../../services/yupSchemas.js';
 import routes from '../../services/routes.js';
-import { AuthContext } from '../../context.js';
 import { getUserToken } from '../../services/requestsToServer.js';
+import { useAuthContext } from '../../hooks/index.js';
 
 const LoginPage = () => {
   const { t } = useTranslation();
   const { Formik } = formik;
-  const { logIn } = useContext(AuthContext);
+  const { logIn } = useAuthContext();
   const navigate = useNavigate();
   const schema = schemaLogIn;
 
@@ -28,9 +26,11 @@ const LoginPage = () => {
     } catch ({ code, response }) {
       if (code === 'ERR_NETWORK') {
         toast.error(t('toast.networkError'));
+        actions.setSubmitting(false);
       }
       if (response?.status === 401) {
         actions.setFieldError('password', t('wrongData'));
+        actions.setSubmitting(false);
       }
     }
   };
@@ -56,6 +56,7 @@ const LoginPage = () => {
                 handleSubmit,
                 handleChange,
                 handleBlur,
+                isSubmitting,
                 values,
                 errors,
                 touched,
@@ -64,7 +65,6 @@ const LoginPage = () => {
                   <Form.Group>
                     <FloatingLabel controlId="logInName" label={t('form.signIn.userName')} className="mb-3">
                       <Form.Control
-                        id="logInName"
                         type="text"
                         required
                         name="username"
@@ -82,7 +82,6 @@ const LoginPage = () => {
                   <Form.Group>
                     <FloatingLabel controlId="logInPass" label={t('form.password')} className="mb-3">
                       <Form.Control
-                        id="logInPass"
                         type="password"
                         required
                         name="password"
@@ -100,7 +99,7 @@ const LoginPage = () => {
                     type="submit"
                     variant="outline-primary"
                     className="w-100"
-                    // disabled={status === 'loading'}
+                    disabled={isSubmitting}
                   >
                     {t('form.signIn.signIn')}
                   </Button>

diff --git a/frontend/src/components/Access/RequireAuth.jsx b/frontend/src/components/Access/RequireAuth.jsx
@@ -1,14 +1,10 @@
-// import { useSelector } from 'react-redux';
 import { Navigate } from 'react-router-dom';
-import { useContext } from 'react';
-import { AuthContext } from '../../context';
+import { useAuthContext } from '../../hooks';
 
 const RequireAuth = ({ children }) => {
-  // const { token } = useSelector((state) => state.authorization);
-  const { authData } = useContext(AuthContext);
-  console.log(authData, 'AUTHDATA');
+  const { authData } = useAuthContext();
 
-  if (!authData.token) {
+  if (!authData?.token) {
     return <Navigate to="/login" replace />;
   }
   return children;

diff --git a/frontend/src/components/Access/SignUp.jsx b/frontend/src/components/Access/SignUp.jsx
@@ -1,27 +1,22 @@
 import * as formik from 'formik';
 import { useNavigate } from 'react-router-dom';
-// import { useDispatch, useSelector } from 'react-redux';
-import { useContext, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import {
   Button, Form, FloatingLabel, Card, Container,
 } from 'react-bootstrap';
 
-// import { register } from '../../store/access.slice.js';
 import { schemaSignUp } from '../../services/yupSchemas.js';
 import routes from '../../services/routes.js';
-// import { selectAccess } from '../../services/stateSelectors.js';
-import { AuthContext } from '../../context.js';
 import { createNewUser } from '../../services/requestsToServer.js';
+import { useAuthContext } from '../../hooks/index.js';
 
 const SignUp = () => {
   const { t } = useTranslation();
-  // const { status } = useSelector(selectAccess);
   const { Formik } = formik;
-  const { logIn } = useContext(AuthContext);
+  const { logIn } = useAuthContext();
   const navigate = useNavigate();
-  // const dispatch = useDispatch();
   const focus = useRef();
   const schema = schemaSignUp;
 
@@ -35,8 +30,10 @@ const SignUp = () => {
     } catch ({ code, response }) {
       if (code === 'ERR_NETWORK') {
         toast.error(t('toast.networkError'));
+        actions.setSubmitting(false);
       } else if (response?.status === 409) {
         actions.setFieldError('username', t('alreadyCreatedUser'));
+        actions.setSubmitting(false);
       }
     }
   };
@@ -60,13 +57,18 @@ const SignUp = () => {
               }}
             >
               {({
-                handleSubmit, handleChange, handleBlur, values, errors, touched,
+                handleSubmit,
+                handleChange,
+                handleBlur,
+                isSubmitting,
+                values,
+                errors,
+                touched,
               }) => (
                 <Form noValidate onSubmit={handleSubmit}>
                   <Form.Group>
                     <FloatingLabel controlId="signUpName" label={t('form.signUp.userName')} className="mb-3">
                       <Form.Control
-                        id="signUpName"
                         type="text"
                         required
                         name="username"
@@ -85,7 +87,6 @@ const SignUp = () => {
                   <Form.Group>
                     <FloatingLabel controlId="signUpPass" label={t('form.password')} className="mb-3">
                       <Form.Control
-                        id="signUpPass"
                         type="password"
                         required
                         name="password"
@@ -107,7 +108,6 @@ const SignUp = () => {
                       className="mb-3"
                     >
                       <Form.Control
-                        id="signUpPassConfirm"
                         type="password"
                         required
                         name="passwordConfirmation"
@@ -126,7 +126,7 @@ const SignUp = () => {
                     type="submit"
                     variant="outline-primary"
                     className="w-100"
-                    // disabled={status === 'loading'}
+                    disabled={isSubmitting}
                   >
                     {t('form.signUp.signUp')}
                   </Button>

diff --git a/frontend/src/components/AuthProvider.jsx b/frontend/src/components/AuthProvider.jsx
@@ -1,23 +1,26 @@
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { useDispatch } from 'react-redux';
 
 import { AuthContext } from '../context';
+import { resetContentData } from '../store/content.slice';
 
 const AuthProvider = ({ children }) => {
+  const dispatch = useDispatch();
   const userDataParsed = JSON.parse(localStorage.getItem('user'));
   const [authData, setAuthData] = useState(userDataParsed || {});
 
-  const logIn = (data) => {
-    console.log(data, 'LOGINDATA');
+  const logIn = useCallback((data) => {
     localStorage.setItem('user', JSON.stringify(data));
     setAuthData(data);
-  };
+  }, []);
 
-  const logOut = () => {
+  const logOut = useCallback(() => {
     localStorage.removeItem('user');
     setAuthData(null);
-  };
+    dispatch(resetContentData());
+  }, [dispatch]);
 
-  const authDataMemo = useMemo(() => ({ authData, logIn, logOut }), [authData]);
+  const authDataMemo = useMemo(() => ({ authData, logIn, logOut }), [authData, logIn, logOut]);
 
   return (
     <AuthContext.Provider value={authDataMemo}>

diff --git a/frontend/src/components/Channels/ChannelItem.jsx b/frontend/src/components/Channels/ChannelItem.jsx
@@ -6,7 +6,7 @@ import {
 
 import { changeActiveChannel } from '../../store/content.slice';
 import { openModal } from '../../store/modal.slice';
-import { selectChatContent } from '../../services/stateSelectors';
+import { selectChatContent } from '../../store/stateSelectors';
 
 const ChannelItem = ({ name, removable, id }) => {
   const { t } = useTranslation();

diff --git a/frontend/src/components/Channels/Channels.jsx b/frontend/src/components/Channels/Channels.jsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import ChannelItem from './ChannelItem';
 import { openModal } from '../../store/modal.slice';
-import { selectChatContent } from '../../services/stateSelectors';
+import { selectChatContent } from '../../store/stateSelectors';
 
 const Channels = () => {
   const { t } = useTranslation();

diff --git a/frontend/src/components/Chat/Chat.jsx b/frontend/src/components/Chat/Chat.jsx
@@ -1,5 +1,5 @@
 import { useSelector } from 'react-redux';
-import { useContext, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as leoProfanity from 'leo-profanity';
 import { toast } from 'react-toastify';
@@ -8,14 +8,14 @@ import {
 } from 'react-bootstrap';
 
 import MessageItem from './MessageItem';
-import { selectChatContent } from '../../services/stateSelectors';
-import { AuthContext, SocketContext } from '../../context';
+import { selectChatContent } from '../../store/stateSelectors';
+import { useAuthContext, useSocketContext } from '../../hooks';
 
 const Chat = () => {
   const { t } = useTranslation();
-  const { handleEmit } = useContext(SocketContext);
+  const { handleEmit } = useSocketContext();
+  const { authData } = useAuthContext();
   const { entities, currentChannel, messages } = useSelector(selectChatContent);
-  const { authData } = useContext(AuthContext);
   const focus = useRef();
   const formRef = useRef();
 

diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
@@ -1,15 +1,13 @@
-// import { useSelector } from 'react-redux';
 import { Button, Navbar, Container } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { useContext } from 'react';
 
 import routes from '../services/routes';
-import { AuthContext } from '../context';
+import { useAuthContext } from '../hooks';
 
 const Header = () => {
   const { t } = useTranslation();
-  const { authData, logOut } = useContext(AuthContext);
+  const { authData, logOut } = useAuthContext();
 
   return (
     <Navbar className="shadow-sm navbar navbar-expand-lg navbar-light bg-white">

diff --git a/frontend/src/components/MainPage.jsx b/frontend/src/components/MainPage.jsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { Container, Row } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
@@ -8,22 +8,21 @@ import { toast } from 'react-toastify';
 import Channels from './Channels/Channels';
 import Chat from './Chat/Chat';
 import ModalSwitcher from './Modals/ModalSwitcher.jsx';
-import { AuthContext, SocketContext } from '../context.js';
 import {
   getContent,
   getNewChannel,
   renameChannel,
   removeChannel,
   getNewMessages,
 } from '../store/content.slice.js';
+import { useAuthContext, useSocketContext } from '../hooks';
 
 const MainPage = () => {
   const { t } = useTranslation();
-  // const { token } = useSelector((state) => state.authorization);
-  const { authData } = useContext(AuthContext);
+  const { authData } = useAuthContext();
+  const { socket } = useSocketContext();
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const { socket } = useContext(SocketContext);
 
   useEffect(() => {
     socket.connect();