Merge pull request #72 from dev0x451/refactor/architecture

Refactor/architecture

src/Routing.tsx

@@ -0,0 +1,115 @@
+import { Route, Routes } from "react-router-dom";
+import { ProtectedRoutes } from "@/components/ProtectedRoutes.js";
+import { Main } from "@/pages/main/Main.js";
+import { Tests } from "@/pages/tests/Tests.js";
+import { Test } from "@/components/Test/Test.js";
+import { Advices } from "@/pages/advices/Advices.js";
+import { Events } from "@/pages/events/Events.js";
+import { Bookmarks } from "@/pages/bookmarks/Bookmarks.js";
+import { Calendar } from "@/pages/calendar/Calendar.js";
+import { Account } from "@/pages/account/Account.js";
+import { Myteam } from "@/components/Myteam/Myteam.js";
+import { LoginPage } from "@/pages/login/LoginPage.js";
+import { RegisterPage } from "@/pages/register/RegisterPage.js";
+import { RefreshPasswordPage } from "@/pages/refreshpassword/RefreshPasswordPage.js";
+import React from "react";
+
+interface Props {
+  loggedIn: any;
+  handleSignOut: any;
+  allTestsResults: any;
+  expressTest: any;
+  handleSendTestResult: any;
+  resultOfPsychoTest: any;
+  handleChangeUserInfo: any;
+  success: any;
+  resetMessages: any;
+  employees: any;
+  handleSendInviteCode: any;
+  handleLogin: any;
+  handleRegister: any;
+  handleSendResetCode: any;
+  handleResetPassword: any;
+}
+export const Routing: React.FC<Props> = ({
+  loggedIn,
+  handleSignOut,
+  allTestsResults,
+  expressTest,
+  handleSendTestResult,
+  resultOfPsychoTest,
+  handleChangeUserInfo,
+  success,
+  resetMessages,
+  employees,
+  handleSendInviteCode,
+  handleLogin,
+  handleRegister,
+  handleSendResetCode,
+  handleResetPassword,
+}) => {
+  return (
+    <Routes>
+      <Route
+        element={
+          <ProtectedRoutes loggedIn={loggedIn} handleSignOut={handleSignOut} />
+        }
+      >
+        <Route path="/" element={<Main />} />
+
+        <Route
+          path="tests"
+          element={<Tests allTestsResults={allTestsResults} />}
+        />
+
+        <Route
+          path="tests/:id"
+          element={
+            <Test
+              test={expressTest}
+              onSendTestResult={handleSendTestResult}
+              resultOfPsychoTest={resultOfPsychoTest}
+            />
+          }
+        />
+
+        <Route path="advices" element={<Advices />} />
+
+        <Route path="events" element={<Events />} />
+
+        <Route path="bookmarks" element={<Bookmarks />} />
+
+        <Route path="calendar" element={<Calendar />} />
+        <Route
+          path="account"
+          element={<Account handleChangeUserInfo={handleChangeUserInfo} />}
+        />
+        <Route
+          path="myteam"
+          element={
+            <Myteam
+              success={success}
+              resetMessages={resetMessages}
+              handleSendInviteCode={handleSendInviteCode}
+              employees={employees}
+            />
+          }
+        />
+      </Route>
+      <Route path="login" element={<LoginPage handleLogin={handleLogin} />} />
+      <Route
+        path="register"
+        element={<RegisterPage handleRegister={handleRegister} />}
+      />
+      <Route
+        path="password-reset"
+        element={
+          <RefreshPasswordPage
+            handleSendResetCode={handleSendResetCode}
+            handleResetPassword={handleResetPassword}
+          />
+        }
+      />
+    </Routes>
+  );
+};

src/components/AddEmployeePopup/AddEmployeePopup.tsx

@@ -1,26 +1,19 @@
 import { AddEmployeeForm } from "@/components/AddEmployeeForm/AddEmployeeForm";
 import styles from "./addemployeepopup.module.css";
 import React from "react";
-import { InfoPopup } from "@/shared/ui/infoPopup/InfoPopup";
 
 interface Props {
   closeAddPopup: () => void;
   addPopupVisible: boolean;
   handleSendInviteCode: (email: string) => Promise<void>;
   success: string;
-  error: string;
-  closeErrorPopup: () => void;
-  popupOpened: boolean;
 }
 
 export const AddEmployeePopup: React.FC<Props> = ({
   closeAddPopup,
   addPopupVisible,
   handleSendInviteCode,
   success,
-  error,
-  closeErrorPopup,
-  popupOpened,
 }) => {
   const handleCloseOutside = (
     event: React.MouseEvent<HTMLDivElement>
@@ -52,14 +45,6 @@ export const AddEmployeePopup: React.FC<Props> = ({
           addPopupVisible={addPopupVisible}
         />
         {success && <div className={styles.successMessage}>{success}</div>}
-        {error && (
-          <InfoPopup
-            closeErrorPopup={closeErrorPopup}
-            popupOpened={popupOpened}
-            popupMessage={error}
-            isPositive={false}
-          />
-        )}
       </div>
     </div>
   );

src/components/App/App.tsx

@@ -1,21 +1,8 @@
 import { useEffect, useState } from "react";
-import { Route, Routes, useNavigate } from "react-router-dom";
-
-import { Main } from "../../pages/main/Main";
-import { Tests } from "../../pages/tests/Tests";
-import { Test } from "../Test/Test";
-import { Advices } from "../../pages/advices/Advices";
-import { Events } from "../../pages/events/Events";
-import { Bookmarks } from "../../pages/bookmarks/Bookmarks";
-import { Calendar } from "../../pages/calendar/Calendar";
-import { Myteam } from "../Myteam/Myteam";
+import { useNavigate } from "react-router-dom";
 import { FormikValues } from "formik";
 
 import styles from "./app.module.css";
-import { ProtectedRoutes } from "@/components/ProtectedRoutes";
-import { RegisterPage } from "@/pages/register/RegisterPage";
-import { RefreshPasswordPage } from "@/pages/refreshpassword/RefreshPasswordPage";
-import { LoginPage } from "@/pages/login/LoginPage";
 import {
   ExpressDiagnoseResponse,
   jwtTypes,
@@ -28,7 +15,6 @@ import {
 import * as ApiAuth from "@/shared/api/ApiAuth";
 import * as Api from "@/shared/api/Api";
 import { useLocation } from "react-router";
-import { Account } from "@/pages/account/Account";
 import { useAppDispatch, useAppSelector } from "@/store/hooks";
 import {
   resetCurrentUser,
@@ -44,6 +30,8 @@ import {
   setCurrentUserLastName,
   setCurrentUserPosition,
 } from "@/store/reducers/currentUser/currentUserReducer";
+import { Routing } from "@/Routing";
+import { AlertPopup } from "@/shared/ui/AlertPopup/AlertPopup";
 
 export const App = () => {
   const [loggedIn, setLoggedIn] = useState(false);
@@ -304,103 +292,29 @@ export const App = () => {
 
   return (
     <main className={styles.page}>
-      <Routes>
-        <Route
-          element={
-            <ProtectedRoutes
-              loggedIn={loggedIn}
-              handleSignOut={handleSignOut}
-            />
-          }
-        >
-          <Route path="/" element={<Main />} />
-
-          <Route
-            path="tests"
-            element={<Tests allTestsResults={allTestsResults} />}
-          />
-
-          <Route
-            path="tests/:id"
-            element={
-              <Test
-                test={expressTest}
-                onSendTestResult={handleSendTestResult}
-                resultOfPsychoTest={resultOfPsychoTest}
-              />
-            }
-          />
-
-          <Route path="advices" element={<Advices />} />
-
-          <Route path="events" element={<Events />} />
-
-          <Route path="bookmarks" element={<Bookmarks />} />
-
-          <Route path="calendar" element={<Calendar />} />
-          <Route
-            path="account"
-            element={
-              <Account
-                handleChangeUserInfo={handleChangeUserInfo}
-                success={success}
-                error={error}
-                closeErrorPopup={closeErrorPopup}
-                popupOpened={popupOpened}
-              />
-            }
-          />
-          <Route
-            path="myteam"
-            element={
-              <Myteam
-                success={success}
-                error={error}
-                closeErrorPopup={closeErrorPopup}
-                popupOpened={popupOpened}
-                resetMessages={resetMessages}
-                handleSendInviteCode={handleSendInviteCode}
-                employees={employees}
-              />
-            }
-          />
-        </Route>
-        <Route
-          path="login"
-          element={
-            <LoginPage
-              handleLogin={handleLogin}
-              closeErrorPopup={closeErrorPopup}
-              popupOpened={popupOpened}
-              error={error}
-            />
-          }
-        />
-        <Route
-          path="register"
-          element={
-            <RegisterPage
-              handleRegister={handleRegister}
-              closeErrorPopup={closeErrorPopup}
-              popupOpened={popupOpened}
-              registerError={error}
-            />
-          }
-        />
-        <Route
-          path="password-reset"
-          element={
-            <RefreshPasswordPage
-              handleSendResetCode={handleSendResetCode}
-              handleResetPassword={handleResetPassword}
-              success={success}
-              error={error}
-              closeErrorPopup={closeErrorPopup}
-              popupOpened={popupOpened}
-            />
-          }
-        />
-      </Routes>
+      <AlertPopup
+        closeErrorPopup={closeErrorPopup}
+        popupOpened={popupOpened}
+        isPositive={success ? true : false}
+        popupMessage={success ? success : error ? error : ""}
+      />
+      <Routing
+        loggedIn={loggedIn}
+        handleSignOut={handleSignOut}
+        allTestsResults={allTestsResults}
+        expressTest={expressTest}
+        handleSendTestResult={handleSendTestResult}
+        resultOfPsychoTest={resultOfPsychoTest}
+        handleChangeUserInfo={handleChangeUserInfo}
+        success={success}
+        resetMessages={resetMessages}
+        employees={employees}
+        handleSendInviteCode={handleSendInviteCode}
+        handleLogin={handleLogin}
+        handleRegister={handleRegister}
+        handleSendResetCode={handleSendResetCode}
+        handleResetPassword={handleResetPassword}
+      />
     </main>
   );
 };

src/components/EmailFormRefresh/EmailFormRefresh.tsx

@@ -5,22 +5,13 @@ import { Formik, Form } from "formik";
 import { refreshEmailSchema } from "@/schemas/validationSchema";
 import { Input } from "@/shared/ui/Input/Input";
 import React from "react";
-import { InfoPopup } from "@/shared/ui/infoPopup/InfoPopup";
 
 interface ComponentProps {
   handleSendResetCode: (email: string) => void;
-  success: string;
-  error: string;
-  closeErrorPopup: () => void;
-  popupOpened: boolean;
 }
 
 export const EmailFormRefresh: React.FC<ComponentProps> = ({
   handleSendResetCode,
-  success,
-  error,
-  closeErrorPopup,
-  popupOpened,
 }) => {
   return (
     <>
@@ -46,22 +37,6 @@ export const EmailFormRefresh: React.FC<ComponentProps> = ({
           <Button title="Воcстановить" type="submit" mode="primary" />
         </Form>
       </Formik>
-      {success && (
-        <InfoPopup
-          closeErrorPopup={closeErrorPopup}
-          popupOpened={popupOpened}
-          popupMessage={success}
-          isPositive={true}
-        />
-      )}
-      {error && (
-        <InfoPopup
-          closeErrorPopup={closeErrorPopup}
-          popupOpened={popupOpened}
-          popupMessage={error}
-          isPositive={false}
-        />
-      )}
     </>
   );
 };

src/components/Myteam/Myteam.tsx

@@ -13,18 +13,12 @@ interface Props {
   resetMessages: () => void;
   handleSendInviteCode: (email: string) => Promise<void>;
   success: string;
-  error: string;
-  closeErrorPopup: () => void;
-  popupOpened: boolean;
   employees: EmployeeInterface[];
 }
 export const Myteam: React.FC<Props> = ({
   resetMessages,
   handleSendInviteCode,
   success,
-  error,
-  closeErrorPopup,
-  popupOpened,
   employees,
 }) => {
   const articles: ArticleInterface[] = [
@@ -120,9 +114,6 @@ export const Myteam: React.FC<Props> = ({
         addPopupVisible={addPopupVisible}
         handleSendInviteCode={handleSendInviteCode}
         success={success}
-        error={error}
-        closeErrorPopup={closeErrorPopup}
-        popupOpened={popupOpened}
       />
     </div>
   );