From 1a19ae5160331e7e604d3ffcf04ee4d6c64648a9 Mon Sep 17 00:00:00 2001
From: kurpfish <ph4z3r_f@mail.ru>
Date: Mon, 23 Aug 2021 17:36:28 +0300
Subject: [PATCH] form page footer fix and candidates empty list message

---
 src/components/Description/Description.js        | 16 +++++++++++-----
 .../Description/Description.module.css           | 10 ++++++++++
 src/pages/formPage.scss                          |  2 +-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/Description/Description.js b/src/components/Description/Description.js
index 29e82175..ea79e08e 100644
--- a/src/components/Description/Description.js
+++ b/src/components/Description/Description.js
@@ -11,6 +11,7 @@ import { Loader } from '../Loader/Loader';
 import { getRole } from '../../redux/roleSlice';
 
 const Description = ({ onLoadMore, isLoadingMore }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
   const history = useHistory();
   const role = useSelector(getRole)
   const candidatesListArr = useSelector(selectProfiles);
@@ -19,7 +20,10 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
   const [allCandidates, getAllCandidates] = useState([]);
 
   useEffect(() => {
-    fetchProfile({ link: `${process.env.REACT_APP_API_URL}/api/profile?limit=`, index: 1000, history, role }).then((p) => getAllCandidates(p));
+    fetchProfile({ link: `${process.env.REACT_APP_API_URL}/api/profile?limit=`, index: 1000, history, role }).then((p) => {
+      getAllCandidates(p);
+      setIsLoaded(true);
+    });
   }, []);
 
   if(!filteredListArr) {
@@ -28,7 +32,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
         <div className="container">
           <div className={style.description__wrapper}>
           {
-            candidatesListArr.map((el) => (
+            candidatesListArr.length > 0 ? candidatesListArr.map((el) => (
               <div className="row" key={el.id}>
                 <div className="col-2">
                   <img className={style.description__img} src={el.photo} alt="" />
@@ -62,7 +66,9 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
                 </div>
                 <div className="col-xl-4"></div>
               </div>
-            ))}
+            )) : <div className={style.description__empty}>{
+              isLoaded ? 'В данный момент в категории нет свободных специалистов' : 'Загрузка...'
+            }</div>}
           </div>
   
           <div className="row">
@@ -87,7 +93,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
     <section className={style.description}>
       <div className="container">
         <div className={style.description__wrapper}>
-          {filteredListArr
+          {filteredListArr && filteredListArr.length > 0
             ? filteredListArr.map((el) => (
                 <div className="row" key={el.id}>
                   <div className="col-2">
@@ -123,7 +129,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
                   <div className="col-xl-4"></div>
                 </div>
               ))
-            : filteredListArr.length && filteredListArr.length === 0 && <></> }
+            : <div className={style.description__empty}>В данный момент в категории нет свободных специалистов</div> }
         </div>
 
         <div className="row">
diff --git a/src/components/Description/Description.module.css b/src/components/Description/Description.module.css
index ba2bd244..fc5ac83f 100644
--- a/src/components/Description/Description.module.css
+++ b/src/components/Description/Description.module.css
@@ -3,6 +3,16 @@
   margin-bottom: 120px;
 }
 
+.description__empty {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 2.4em;
+  font-weight: 500;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  text-align: center;
+}
+
 .description__wrapper {
   border: 1px solid #efefef;
   background-color: #fdfdfd;
diff --git a/src/pages/formPage.scss b/src/pages/formPage.scss
index 9dc51cd1..4d7171c5 100644
--- a/src/pages/formPage.scss
+++ b/src/pages/formPage.scss
@@ -127,7 +127,7 @@
 }
 
 .form-page footer {
-    margin-top: 2.5rem !important;
+    margin-top: 6rem !important;
 }
 
 @media (max-width: 991px) {