Удалил старые запросы к апи, переписал страницу тестов на новый конструктор запроса. Обновил библиотеки, в том числе реакт до последней версии, переписал устаревший код с библиотек.

2023-02-02 18:10:44 +03:00
parent f1628e5745
commit c60e1b43d2
14 changed files with 6719 additions and 8058 deletions
--- a/src/components/AuthBox/AuthBox.js
+++ b/src/components/AuthBox/AuthBox.js
@ -1,8 +1,6 @@
-import React, {useEffect, useState} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import {Link, useNavigate} from 'react-router-dom'
 import {useDispatch, useSelector} from 'react-redux'
-import {withSwalInstance} from 'sweetalert2-react'
-import swal from 'sweetalert2'

 import {Loader} from '../Loader/Loader'
 import ErrorBoundary from "../../hoc/ErrorBoundary";
@ -10,7 +8,6 @@ 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 {apiRequest} from "../../api/request";
@ -19,12 +16,14 @@ import ellipse from '../../images/ellipse.png'

 import './authBox.scss'

-const {useRef} = require("react");
+import Swal from 'sweetalert2'
+import withReactContent from 'sweetalert2-react-content'

+const SweetAlert = withReactContent(Swal);

-const SweetAlert = withSwalInstance(swal);

 export const AuthBox = ({title, altTitle, roleChangeLink}) => {
+
  const dispatch = useDispatch();
  const ref = useRef();
  const navigate = useNavigate();
@ -34,19 +33,32 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {

  const [error, setError] = useState(null);

-  if (isAuth) {
-    navigate('/')
-  }
+  const handleModalError = (error) => {
+    SweetAlert.fire({
+      title: 'Ошибка',
+      text: error
+    });

-  useEffect(()=> {
+    setError(null)
+
+  };
+
+  useEffect(() => {
    if (!localStorage.getItem('auth_token')) {
      dispatch(auth(false))
    }
  }, []);

+  useEffect(() => {
+    if (isAuth) {
+      navigate('/')
+    }
+  });
+
+
  const submitHandler = () => {

-    let formData = new FormData(ref.current)
+    let formData = new FormData(ref.current);
    if (!isLoading) {
      dispatch(loading(true));
      apiRequest('/user/login',
@ -107,12 +119,17 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {
          {error && (
              <div className='auth-box__form-error'>
                <ErrorBoundary>
-                  <SweetAlert
-                      show={!!error}
-                      title='Ошибка'
-                      text={error}
-                      onConfirm={() => setError(null)}
-                  />
+
+
+                  {
+                    handleModalError(error)
+                  }
+                  {/*<SweetAlert*/}
+                  {/*    show={!!error}*/}
+                  {/*    title='Ошибка'*/}
+                  {/*    text={error}*/}
+                  {/*    onConfirm={() => setError(null)}*/}
+                  {/*/>*/}
                </ErrorBoundary>
              </div>
          )}
--- a/src/components/Form/Form.js
+++ b/src/components/Form/Form.js
@ -1,22 +1,23 @@
-import React, { useState } from 'react'
+import React, {useEffect, useState} from 'react'
 import {useParams, useNavigate} from 'react-router-dom'
-import { Loader } from '../Loader/Loader'
+import {Loader} from '../Loader/Loader'
 import PhoneInput from 'react-phone-input-2'
 import 'react-phone-input-2/lib/style.css'
 import './form.scss'

-import { withSwalInstance } from 'sweetalert2-react'
-import swal from 'sweetalert2'
 import {apiRequest} from "../../api/request";

+import Swal from 'sweetalert2'
+import withReactContent from 'sweetalert2-react-content'

-const SweetAlert = withSwalInstance(swal);
+const SweetAlert = withReactContent(Swal);

 const Form = () => {

  const navigate = useNavigate();

  const urlParams = useParams();
+
  const [status, setStatus] = useState(null);
  const [data, setData] = useState({
    email: '',
@ -25,9 +26,29 @@ const Form = () => {
  });
  const [isFetching, setIsFetching] = useState(false);

+  const handleModal = (status) => {
+    SweetAlert.fire({
+      text: status !== 200 || 201
+          ? 'Какие-то неполадки =('
+          : 'Форма отправлена',
+      preConfirm: () =>
+          status !== 200 || 201 ? () => {
+            setStatus(null)
+          } : () => {
+            setStatus(null);
+            navigate(`/candidate/${urlParams.id}`)
+          }
+    });
+  };
+
+  useEffect(() => {
+    if (status) {
+      handleModal(status)
+    }
+  }, [status]);

  const handleChange = (e) => {
-    const { id, value } = e.target;
+    const {id, value} = e.target;

    setData((prev) => ({
      ...prev,
@ -41,11 +62,11 @@ const Form = () => {
    setIsFetching(true);
    const formData = new FormData();
    formData.append('profile_id', urlParams.id);
-    formData.append('email', data.email);
+    formData.append('Email', data.email);
    formData.append('phone', data.phone);
    formData.append('comment', data.comment);

-    apiRequest('/interview-request/create-interview-request',{
+    apiRequest('/interview-request/create-interview-request', {
      method: 'POST',
      params: {
        profile_id: urlParams.id,
@ -59,49 +80,28 @@ const Form = () => {
  };

  return (
-    <>
-      {status && (
-        <SweetAlert
-          show={!!status}
-          text={
-            status.errors
-              ? status.errors[Object.keys(status.errors)[0]]
-              : 'Форма отправлена'
-          }
-          onConfirm={
-            status.errors
-              ? () => {
-                  setStatus(null)
-                }
-              : () => {
-                  setStatus(null);
-                  navigate(`/candidate/${urlParams.id}`)
-                }
-          }
-        />
-      )}
      <div className='row'>
        <div className='col-sm-12'>
          <form className='form' id='test'>
            <label htmlFor='email'>Емейл:</label>
            <input
-              onChange={handleChange}
-              id='email'
-              name='Email'
-              type='email'
-              placeholder='Емейл'
-              value={data.email}
+                onChange={handleChange}
+                id='email'
+                name='Email'
+                type='email'
+                placeholder='Емейл'
+                value={data.email}
            />

            <label htmlFor='phone'>Номер телефона:</label>
            <PhoneInput
-              id='phone'
-              name='Phone'
-              country={'ru'}
-              value={data.phone}
-              onChange={(e) =>
-                handleChange({ target: { value: e, id: 'phone' } })
-              }
+                id='phone'
+                name='Phone'
+                country={'ru'}
+                value={data.phone}
+                onChange={(e) =>
+                    handleChange({target: {value: e, id: 'phone'}})
+                }
            />
            {/* <input
              onChange={handleChange}
@ -113,22 +113,21 @@ const Form = () => {
            /> */}

            <textarea
-              onChange={handleChange}
-              id='comment'
-              rows='5'
-              cols='40'
-              name='Comment'
-              placeholder='Оставьте комментарий'
-              value={data.comment}
+                onChange={handleChange}
+                id='comment'
+                rows='5'
+                cols='40'
+                name='Comment'
+                placeholder='Оставьте комментарий'
+                value={data.comment}
            ></textarea>

            <button onClick={handleSubmit} className='form__btn' type='submit'>
-              {isFetching ? <Loader /> : 'Отправить'}
+              {isFetching ? <Loader/> : 'Отправить'}
            </button>
          </form>
        </div>
      </div>
-    </>
  )
 };

--- a/src/components/features/quiz/HeaderPageTests.js
+++ b/src/components/features/quiz/HeaderPageTests.js
@ -2,6 +2,7 @@ import {Link} from 'react-router-dom'
 import './quiz.scss'
 import {useSelector} from "react-redux";
 import {selectedTest, selectUserInfo} from "../../../redux/quizSlice";
+import {urlForLocal} from "../../../helper";


 export const HeaderPageTestsQuiz = ({isVisibilityButton}) => {
@ -14,7 +15,7 @@ export const HeaderPageTestsQuiz = ({isVisibilityButton}) => {
        <div className="header-quiz__container">
           <div className="header-quiz__body">
              <div className="header-quiz__avatar">
-                 {userInfo.photo && <img src={userInfo.photo} alt={userInfo.photo}/>}
+                 {userInfo.photo && <img src={urlForLocal(userInfo.photo)} alt={userInfo.photo}/>}
              </div>
              <div className="header-quiz__description">
                 <div className="header-quiz__title-test title">{test.questionnaire_title}</div>
--- a/src/components/features/quiz/HeaderQuiz.js
+++ b/src/components/features/quiz/HeaderQuiz.js
@ -1,8 +1,9 @@
 import React, {useEffect} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 import {selectUserInfo, setQuestionnairesList, setUserInfo} from "../../../redux/quizSlice";
-import './quiz.scss'
 import {apiRequest} from "../../../api/request";
+import {urlForLocal} from "../../../helper";
+import './quiz.scss'

 export const HeaderQuiz = ({header}) => {

@ -13,12 +14,12 @@ export const HeaderQuiz = ({header}) => {

  useEffect(() => {
    dispatch(setUserInfo(userId))
-  }, [dispatch]);
+  }, [userId, dispatch]);

  useEffect(() => {
    apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
        .then(res => dispatch(setQuestionnairesList(res)))
-  }, [dispatch]);
+  }, [userId, dispatch]);

  return (
      <div>
@ -30,7 +31,7 @@ export const HeaderQuiz = ({header}) => {
                      {header && <h2 className={'header-quiz__title-main'}>Добрый день, {userInfo.fio}</h2>}
                      <div className="header-quiz__body header-quiz__body_interjacent">
                        <div className="header-quiz__avatar">
-                          <img src={userInfo.photo} alt={userInfo.photo}/>
+                          <img src={urlForLocal(userInfo.photo)} alt={userInfo.photo}/>
                        </div>
                        <div className="header-quiz__name-user">{userInfo.fio}</div>
                        <div className="header-quiz__title">{userInfo.position_name}</div>
--- a/src/components/features/quiz/MyTestsQuiz.js
+++ b/src/components/features/quiz/MyTestsQuiz.js
@ -1,8 +1,9 @@
 import {Link} from 'react-router-dom'
 import calendarImage from './../../../images/calendar.svg'
-import './quiz.scss'
 import {useDispatch} from "react-redux";
 import {setSelectedTest} from "../../../redux/quizSlice";
+import {urlForLocal} from "../../../helper";
+import './quiz.scss'

 export const MyTestsQuiz = ({listTests}) => {

@ -46,7 +47,7 @@ export const MyTestsQuiz = ({listTests}) => {
                          </h3>
                          <div className="item-test__body test-data">
                             <div className="test-data__calendar ">
-                                <img src={calendarImage} alt=""/>
+                                <img src={urlForLocal(calendarImage)} alt=""/>
                                {item.testing_date}
                             </div>
                             <div className="test-data__hr"></div>