From 183659459ab78675ad0c83895c548491454c34fd Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Wed, 14 Feb 2024 14:54:45 +0300
Subject: [PATCH] loaders, outSelectClose, notifications

---
 src/components/Common/Loader/Loader.jsx  |  2 +-
 src/components/Common/Loader/loader.scss |  1 -
 src/pages/Quiz/QuizPage.js               | 10 ++++++++--
 src/pages/Quiz/QuizReportPage.js         | 25 ++++++++++++++++--------
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/components/Common/Loader/Loader.jsx b/src/components/Common/Loader/Loader.jsx
index d61acb83..7a956f32 100644
--- a/src/components/Common/Loader/Loader.jsx
+++ b/src/components/Common/Loader/Loader.jsx
@@ -8,7 +8,7 @@ export const Loader = ({ width = 50, height = 50, style }) => {
     <div className="loader">
       <SVGLoader
         type="Circles"
-        color={style ? style : `#fff`}
+        color={style ? style : `green`}
         height={height}
         width={width}
       />
diff --git a/src/components/Common/Loader/loader.scss b/src/components/Common/Loader/loader.scss
index 980447e7..610c1161 100644
--- a/src/components/Common/Loader/loader.scss
+++ b/src/components/Common/Loader/loader.scss
@@ -5,7 +5,6 @@
   justify-content: center;
   align-items: center;
   position: relative;
-
   //&:hover {
   //  path {
   //    fill: #6aaf5c;
diff --git a/src/pages/Quiz/QuizPage.js b/src/pages/Quiz/QuizPage.js
index 3778f4f8..a6cad3e5 100644
--- a/src/pages/Quiz/QuizPage.js
+++ b/src/pages/Quiz/QuizPage.js
@@ -25,9 +25,11 @@ import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
 import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
 
 import "./quiz-page.scss";
+import { Loader } from "@components/Common/Loader/Loader";
 
 export const QuizPage = () => {
   const [questionnaires, setQuestionnaires] = useState([]);
+  const [loader, setLoader] = useState(false)
   const dispatch = useDispatch();
   const [personalInfoItems] = useState([
     {
@@ -102,8 +104,12 @@ export const QuizPage = () => {
   const [selectedCategory, setSetSelectedCategory] = useState(false);
 
   useEffect(() => {
+    setLoader(true)
     apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
-      .then((res) => setQuestionnaires(res))
+      .then((res) => {
+        setQuestionnaires(res)
+        setLoader(false)
+      })
       .catch((e) => console.log(e));
   }, []);
 
@@ -122,7 +128,7 @@ export const QuizPage = () => {
         <div className="quiz-page__title main-title">
           {!selectedCategory ? "Тестирование" : "Замена специализации"}
         </div>
-        {!selectedCategory && (
+        {loader ? <Loader /> : (
           <>
             {/*<div className="quiz-page__specialization">*/}
             {/*  <SelectedCategory setSelectedCategory={setSetSelectedCategory} />*/}
diff --git a/src/pages/Quiz/QuizReportPage.js b/src/pages/Quiz/QuizReportPage.js
index 7a30b1e8..a1c2948f 100644
--- a/src/pages/Quiz/QuizReportPage.js
+++ b/src/pages/Quiz/QuizReportPage.js
@@ -13,6 +13,7 @@ import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 // import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
 import { AlertResult } from "@components/features/quiz/AlertResult";
 import { QuizReport } from "@components/features/quiz/QuizReport";
+import { Loader } from "@components/Common/Loader/Loader";
 
 export const QuizReportPage = () => {
   const test = useSelector(selectedTest);
@@ -23,15 +24,19 @@ export const QuizReportPage = () => {
     navigate("/Quiz");
   }
 
+  const [testInfo, setTestInfo] = useState({});
+  const [loader, setLoader] = useState(false)
+
   useEffect(() => {
+    setLoader(true)
     apiRequest(
       `/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${params.uuid}`
     ).then((res) => {
       setTestInfo(res);
+      setLoader(false)
     });
   }, []);
 
-  const [testInfo, setTestInfo] = useState({});
 
   return (
     <div className="quiz-report-page">
@@ -46,13 +51,17 @@ export const QuizReportPage = () => {
             { name: "Отчет по тестированию", link: "/profile/quiz" }
           ]}
         />
-        <div className="quiz-report-page__title main-title">
-          Отчет по тестированию позиции {testInfo.questionnaire_title}
-        </div>
-        <div className="quiz-report-page__report-quiz">
-          <QuizReport info={testInfo} />
-        </div>
-        <AlertResult info={testInfo} />
+        {loader ? <Loader/> :
+          <>
+            <div className="quiz-report-page__title main-title">
+              Отчет по тестированию позиции {testInfo.questionnaire_title}
+            </div>
+            <div className="quiz-report-page__report-quiz">
+              <QuizReport info={testInfo} />
+            </div>
+            <AlertResult info={testInfo} />
+          </>
+        }
       </div>
       <Footer />
     </div>