Merge pull request #12 from apuc/authentication

Authentication

src/components/Auth/AuthForDevelopers.js

@@ -67,6 +67,7 @@ const AuthForDevelopers = () => {
                     onChange={(e) => setPassword(e.target.value)}
                   />
 
+                  <div className={style.form__buttons}>
                     <button
                       className={style.form__btn}
                       onClick={!isLoading ? (e) => {
@@ -88,6 +89,8 @@ const AuthForDevelopers = () => {
                     <button className={`${style.form__btn__partners} ${style.auth__link}`}>
                       <Link to='/auth'>Для партнёров</Link>
                     </button>
+                  </div>
+
                 </form>
               </div>
             </div>

src/components/Auth/AuthForDevelopers.module.css

@@ -132,8 +132,14 @@
   outline: none;
 }
 
+.form__buttons {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+
 .form__btn {
-  width: 288px;
+  width: 268px;
   height: 75px;
   box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
   border-radius: 38px;
@@ -154,6 +160,7 @@
   line-height: 71.88px;
   text-align: center;
   border: 2px solid #6aaf5c;
+  margin-right: 1.5rem;
 }
 
 .form__btn:hover .loader * {
@@ -169,7 +176,7 @@
 }
 
 .form__btn__partners {
-  width: 288px;
+  width: 268px;
   height: 75px;
   border-radius: 38px;
   background-color: #ffffff;
@@ -432,7 +439,6 @@
 
 .auth__link {
   display: block;
-  margin-top: 1.3rem;
 }
 
 
@@ -442,3 +448,14 @@
   height: 100%;
   color: #fff;
 }
+
+@media (max-width: 766px) {
+  .form__buttons {
+    flex-direction: column;
+  }
+
+  .form__btn {
+    margin: 0;
+    margin-bottom: 1.5rem;
+  }
+}

src/components/Auth/AuthForPartners.js

@@ -62,6 +62,7 @@ const AuthForPartners = () => {
                     onChange={(e) => setPassword(e.target.value)}
                   />
 
+                  <div className={style.form__buttons}>
                   <button
                     className={style.form__btn}
                     onClick={!isLoading ? (e) => {
@@ -83,6 +84,7 @@ const AuthForPartners = () => {
                   <button className={`${style.form__btn__dev} ${style.auth__link}`}>
                     <Link to='/authdev'>Для разработчиков</Link>
                   </button>
+                  </div>
                 </form>
               </div>
             </div>

src/components/Auth/AuthForPartners.module.css

@@ -132,8 +132,14 @@
   outline: none;
 }
 
+.form__buttons {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+
 .form__btn {
-  width: 288px;
+  width: 268px;
   height: 75px;
   box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
   border-radius: 38px;
@@ -154,6 +160,7 @@
   line-height: 71.88px;
   text-align: center;
   border: 2px solid #6aaf5c;
+  margin-right: 1.5rem;
 }
 
 .form__btn:hover {
@@ -166,7 +173,7 @@
 
 
 .form__btn__dev {
-  width: 288px;
+  width: 268px;
   height: 75px;
   border-radius: 38px;
   background-color: #ffffff;
@@ -430,7 +437,6 @@
 
 .auth__link {
   display: block;
-  margin-top: 1.3rem;
 }
 
 .auth__link a {
@@ -439,3 +445,14 @@
   height: 100%;
   color: #fff;
 }
+
+@media (max-width: 766px) {
+  .form__buttons {
+    flex-direction: column;
+  }
+
+  .form__btn {
+    margin: 0;
+    margin-bottom: 1.5rem;
+  }
+}

src/components/Description/Description.js

@@ -4,12 +4,13 @@ import male from '../../images/medium_male.png';
 import rectangle from '../../images/rectangle_secondPage.png';
 import { Link } from 'react-router-dom';
 import { LEVELS, SKILLS } from '../constants/constants';
-import { selectProfiles, selectFilteredCandidates } from '../../redux/outstaffingSlice';
+import { selectProfiles, selectFilteredCandidates, selectItems } from '../../redux/outstaffingSlice';
 import { useSelector } from 'react-redux';
 import { fetchProfile } from '../../server/server';
 
 const Description = ({ onLoadMore }) => {
   const candidatesListArr = useSelector(selectProfiles);
+  const itemsArr = useSelector(selectItems);
   const filteredListArr = useSelector(selectFilteredCandidates);
   const [allCandidates, getAllCandidates] = useState([]);
 
@@ -17,23 +18,69 @@ const Description = ({ onLoadMore }) => {
     fetchProfile(`${process.env.REACT_APP_API_URL}/api/profile?limit=`, 1000).then((p) => getAllCandidates(p));
   }, []);
 
+  console.log('render',filteredListArr, itemsArr)
+
+  if(!filteredListArr) {
+    return (
+      <section className={style.description}>
+        <div className="container">
+          <div className={style.description__wrapper}>
+          {
+            candidatesListArr.map((el) => (
+              <div className="row" key={el.id}>
+                <div className="col-2">
+                  <img className={style.description__img} src={male} alt="" />
+                </div>
+                <div className="col-12 col-xl-6">
+                  <h3 className={style.description__title}>
+                    {SKILLS[el.position_id]}, {LEVELS[el.level]}
+                  </h3>
+
+                  {el.vc_text_short ? (
+                    <div className={style.description__text}>{el.vc_text_short}</div>
+                  ) : (
+                    <p className={style.description__textSecondary}>Описание отсутствует...</p>
+                  )}
+                </div>
+                <div className="col-12 col-xl-4">
+                  <Link to={`/candidate/${el.id}`}>
+                    <button className={style.description__button}>Подробное резюме</button>
+                  </Link>
+                </div>
+                <div className="col-xl-2"></div>
+                <div className="col-12 col-xl-6">
+                  <ul className={style.description__list}>
+                    {el.skillValues.map((e) => (
+                      <li key={e.id} className={style.description__list__item}>
+                        {e.skill.name}
+                      </li>
+                    ))}
+                  </ul>
+                  <img className={style.description__rectangle} src={rectangle} alt="" />
+                </div>
+                <div className="col-xl-4"></div>
+              </div>
+            ))}
+          </div>
+  
+        </div>
+      </section>
+    );
+  }
+
   return (
     <section className={style.description}>
       <div className="container">
         <div className={style.description__wrapper}>
           {filteredListArr
-            ? (filteredListArr.length > 0 
+            ? filteredListArr.map((el) => (
-              ? <></> 
-              : filteredListArr.map((el) => (
                 <div className="row" key={el.id}>
                   <div className="col-2">
                     <img className={style.description__img} src={male} alt="" />
                   </div>
                   <div className="col-12 col-xl-6">
                     <h3 className={style.description__title}>
-                        <Link to={`/candidate/${el.id}`}>
                       {SKILLS[el.position_id]}, {LEVELS[el.level]}
-                        </Link>
                     </h3>
 
                     {el.vc_text_short ? (
@@ -60,51 +107,15 @@ const Description = ({ onLoadMore }) => {
                   </div>
                   <div className="col-xl-4"></div>
                 </div>
-                )))
+              ))
-            : candidatesListArr.map((el) => (
+            : filteredListArr.length && filteredListArr.length === 0 && <></> }
-                <div className="row" key={el.id}>
-                  <div className="col-2">
-                    <img className={style.description__img} src={male} alt="" />
-                  </div>
-                  <div className="col-12 col-xl-6">
-                    <h3 className={style.description__title}>
-                      <Link to={`/candidate/${el.id}`}>
-                        {SKILLS[el.position_id]}, {LEVELS[el.level]}
-                      </Link>
-                    </h3>
-
-                    {el.vc_text_short ? (
-                      <div className={style.description__text}>{el.vc_text_short}</div>
-                    ) : (
-                      <p className={style.description__textSecondary}>Описание отсутствует...</p>
-                    )}
-                  </div>
-                  <div className="col-12 col-xl-4">
-                    <Link to={`/candidate/${el.id}`}>
-                      <button className={style.description__button}>Подробное резюме</button>
-                    </Link>
-                  </div>
-                  <div className="col-xl-2"></div>
-                  <div className="col-12 col-xl-6">
-                    <ul className={style.description__list}>
-                      {el.skillValues.map((e) => (
-                        <li key={e.id} className={style.description__list__item}>
-                          {e.skill.name}
-                        </li>
-                      ))}
-                    </ul>
-                    <img className={style.description__rectangle} src={rectangle} alt="" />
-                  </div>
-                  <div className="col-xl-4"></div>
-                </div>
-              ))}
         </div>
 
         <div className="row">
           <div className="col-12">
             <div className={style.description__footer}>
               <div className={style.description__footer__btn}>
-                {candidatesListArr.length !== allCandidates.length && filteredListArr.length === 0 ? (
+                {(candidatesListArr.length !== allCandidates.length && filteredListArr.length > 0) || filteredListArr===null ? (
                   <button onClick={() => onLoadMore(2)}>Загрузить еще</button>
                 ) : null}
               </div>

src/components/LogoutButton/logoutButton.css

@@ -1,7 +1,7 @@
 .logout-button {
     position: fixed;
-    top: 2rem;
+    top: 70px;
-    right: 3.5rem;
+    right: 2.5rem;
     z-index: 100;
 }
 
@@ -10,21 +10,30 @@
     justify-content: center;
     align-items: center;
     margin: 0;
-    padding: 1rem 2rem;
+    width: 131px;
-    border-radius: 20px;
+    height: 40px;
+    border-radius: 10px;
+    font-family: 'Muller';
+    font-size: 1.6em;
+    letter-spacing: 0.8px;
     background-color: #6aaf5c;
     color: #ffffff;
-    border: 2px solid #6aaf5c;
+    border: 3px solid #6aaf5c;
     font-family: 'Muller';
-    font-size: 2em;
-    letter-spacing: normal;
     text-align: center;
 }
 
 .logout-button:hover button {
     background-color: #ffffff;
     color: #6aaf5c;
-    border: 2px solid #6aaf5c;
+    border: 3px solid #6aaf5c;
     box-shadow: 3px 2px 5px rgba(82, 151, 34, 0.21);
     transition: .3s;
 }
+
+@media (max-width: 1198px) {
+    .logout-button {
+        top: 16px;
+    }
+  }
+  

src/redux/outstaffingSlice.js

@@ -3,7 +3,7 @@ import { createSlice } from '@reduxjs/toolkit';
 const initialState = {
   tags: [],
   profiles: [],
-  filteredCandidates: [],
+  filteredCandidates:null,
   selectedItems: [],
   currentCandidate: {},
   auth: false,