From 8b8dda215f8ff8d8dd02d91b73564f690b0e60ed Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Wed, 22 Mar 2023 15:33:12 +0300
Subject: [PATCH] Fixed sidebar, AuthBox, and modalError

---
 src/components/AuthBox/AuthBox.js             | 37 ++++++-------------
 src/components/SideBar/sidebar.scss           |  2 +-
 .../SliderWorkers/sliderWorkers.scss          |  1 -
 .../UI/ModalErrorLogin/ModalErrorLogin.js     | 12 ++++--
 .../AuthForDevelopers/AuthForDevelopers.js    |  2 +-
 5 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/src/components/AuthBox/AuthBox.js b/src/components/AuthBox/AuthBox.js
index b91ad6b4..e614b6c0 100644
--- a/src/components/AuthBox/AuthBox.js
+++ b/src/components/AuthBox/AuthBox.js
@@ -3,24 +3,20 @@ import { Link, useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 
 import { Loader } from "../Loader/Loader";
-import ErrorBoundary from "../../hoc/ErrorBoundary";
 
 import { auth, selectAuth, setUserInfo } from "../../redux/outstaffingSlice";
 import { loading } from "../../redux/loaderSlice";
 import { setRole } from "../../redux/roleSlice";
 import { selectIsLoading } from "../../redux/loaderSlice";
 
+import ModalErrorLogin from "../../components/UI/ModalErrorLogin/ModalErrorLogin";
+
 import { apiRequest } from "../../api/request";
 
 import ellipse from "../../images/ellipse.png";
 
 import "./authBox.scss";
 
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-
-const SweetAlert = withReactContent(Swal);
-
 export const AuthBox = ({ title }) => {
   const dispatch = useDispatch();
   const ref = useRef();
@@ -30,15 +26,7 @@ export const AuthBox = ({ title }) => {
   const isLoading = useSelector(selectIsLoading);
 
   const [error, setError] = useState(null);
-
-  const handleModalError = (error) => {
-    SweetAlert.fire({
-      title: "Ошибка",
-      text: error,
-    });
-
-    setError(null);
-  };
+  const [modalError, setModalError] = useState(false);
 
   useEffect(() => {
     if (!localStorage.getItem("auth_token")) {
@@ -62,6 +50,7 @@ export const AuthBox = ({ title }) => {
       }).then((res) => {
         if (!res.access_token) {
           setError("Некорректные данные для входа");
+          setModalError(true);
           dispatch(loading(false));
         } else {
           localStorage.setItem("auth_token", res.access_token);
@@ -104,15 +93,11 @@ export const AuthBox = ({ title }) => {
 
         {error && (
           <div className="auth-box__form-error">
-            <ErrorBoundary>
-              {handleModalError(error)}
-              {/*<SweetAlert*/}
-              {/*    show={!!error}*/}
-              {/*    title='Ошибка'*/}
-              {/*    text={error}*/}
-              {/*    onConfirm={() => setError(null)}*/}
-              {/*/>*/}
-            </ErrorBoundary>
+            <ModalErrorLogin
+              active={modalError}
+              setActive={setModalError}
+              title={error}
+            />
           </div>
         )}
 
@@ -130,7 +115,9 @@ export const AuthBox = ({ title }) => {
           {/* TODO: при клике отправлять на форму/модалку/страницу регистрации */}
           <button
             className="auth-box__form-btn--role auth-box__auth-link"
-            onClick={(e) => e.preventDefault()}
+            onClick={(e) => {
+              e.preventDefault();
+            }}
           >
             Регистрация
           </button>
diff --git a/src/components/SideBar/sidebar.scss b/src/components/SideBar/sidebar.scss
index 441a7ef4..bb6591f5 100644
--- a/src/components/SideBar/sidebar.scss
+++ b/src/components/SideBar/sidebar.scss
@@ -1,6 +1,6 @@
 .auth-menu {
   z-index: 99;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 141px;
diff --git a/src/components/SliderWorkers/sliderWorkers.scss b/src/components/SliderWorkers/sliderWorkers.scss
index 75dc79a7..55b9af26 100644
--- a/src/components/SliderWorkers/sliderWorkers.scss
+++ b/src/components/SliderWorkers/sliderWorkers.scss
@@ -144,7 +144,6 @@
 
       img {
         margin: 0;
-        width: 50%;
       }
 
       p {
diff --git a/src/components/UI/ModalErrorLogin/ModalErrorLogin.js b/src/components/UI/ModalErrorLogin/ModalErrorLogin.js
index 37aa0780..842e5d91 100644
--- a/src/components/UI/ModalErrorLogin/ModalErrorLogin.js
+++ b/src/components/UI/ModalErrorLogin/ModalErrorLogin.js
@@ -2,7 +2,7 @@ import React from "react";
 
 import "./modalErrorLogin.scss";
 
-export const ModalErrorLogin = ({ active, setActive }) => {
+export const ModalErrorLogin = ({ active, setActive, title }) => {
   return (
     <div
       className={active ? "modal-error active" : "modal-error"}
@@ -13,8 +13,14 @@ export const ModalErrorLogin = ({ active, setActive }) => {
         onClick={(e) => e.stopPropagation()}
       >
         <h2>Ошибка входа</h2>
-        <p>Введены некоректные данные для входа</p>
-        <button className="modal-error__content-button">
+        <p>{title}</p>
+        <button
+          className="modal-error__content-button"
+          onClick={(e) => {
+            e.preventDefault();
+            setActive(false);
+          }}
+        >
           Попробовать еще раз
         </button>
         <span onClick={() => setActive(false)}></span>
diff --git a/src/pages/AuthForDevelopers/AuthForDevelopers.js b/src/pages/AuthForDevelopers/AuthForDevelopers.js
index 09938d83..e3075654 100644
--- a/src/pages/AuthForDevelopers/AuthForDevelopers.js
+++ b/src/pages/AuthForDevelopers/AuthForDevelopers.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
 import { AuthBox } from "../../components/AuthBox/AuthBox";