Merge pull request #12 from apuc/authentication

Authentication
2021-08-11 16:05:56 +03:00 · 2021-08-11 16:05:56 +03:00 · fffd254e43
commit fffd254e43
parent 2d6a3e49e6 78ca049794
7 changed files with 141 additions and 82 deletions
--- a/src/components/Auth/AuthForDevelopers.js
+++ b/src/components/Auth/AuthForDevelopers.js
@ -67,27 +67,30 @@ const AuthForDevelopers = () => {
                    onChange={(e) => setPassword(e.target.value)}
                  />

-                  <button
-                    className={style.form__btn}
-                    onClick={!isLoading ? (e) => {
-                      e.preventDefault();
-                      dispatch(loading(true))
-                      fetchAuth({
-                        username,
-                        password,
-                        dispatch: ()=> {
-                          dispatch(auth(true))
-                          dispatch(loading(false))
-                        }
-                      })
-                    } : ()=>{}}
-                  >
-                  { isLoading ? <Loader /> : 'Войти' }
-                  </button>
+                  <div className={style.form__buttons}>
+                    <button
+                      className={style.form__btn}
+                      onClick={!isLoading ? (e) => {
+                        e.preventDefault();
+                        dispatch(loading(true))
+                        fetchAuth({
+                          username,
+                          password,
+                          dispatch: ()=> {
+                            dispatch(auth(true))
+                            dispatch(loading(false))
+                          }
+                        })
+                      } : ()=>{}}
+                    >
+                    { isLoading ? <Loader /> : 'Войти' }
+                    </button>
+
+                    <button className={`${style.form__btn__partners} ${style.auth__link}`}>
+                      <Link to='/auth'>Для партнёров</Link>
+                    </button>
+                  </div>

-                  <button className={`${style.form__btn__partners} ${style.auth__link}`}>
-                    <Link to='/auth'>Для партнёров</Link>
-                  </button>
                </form>
              </div>
            </div>
--- a/src/components/Auth/AuthForDevelopers.module.css
+++ b/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;
+  }
+}
--- a/src/components/Auth/AuthForPartners.js
+++ b/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>
--- a/src/components/Auth/AuthForPartners.module.css
+++ b/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;
+  }
+}
--- a/src/components/Description/Description.js
+++ b/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,60 +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) => (
-                  <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>
-                )))
-            : candidatesListArr.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>
+                      {SKILLS[el.position_id]}, {LEVELS[el.level]}
                    </h3>

                    {el.vc_text_short ? (
@ -97,14 +107,15 @@ const Description = ({ onLoadMore }) => {
                  </div>
                  <div className="col-xl-4"></div>
                </div>
-              ))}
+              ))
+            : filteredListArr.length && filteredListArr.length === 0 && <></> }
        </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>
--- a/src/components/LogoutButton/logoutButton.css
+++ b/src/components/LogoutButton/logoutButton.css
@ -1,7 +1,7 @@
 .logout-button {
    position: fixed;
-    top: 2rem;
-    right: 3.5rem;
+    top: 70px;
+    right: 2.5rem;
    z-index: 100;
 }

@ -10,21 +10,30 @@
    justify-content: center;
    align-items: center;
    margin: 0;
-    padding: 1rem 2rem;
-    border-radius: 20px;
+    width: 131px;
+    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;
+    }
+  }
+  
--- a/src/redux/outstaffingSlice.js
+++ b/src/redux/outstaffingSlice.js
@ -3,7 +3,7 @@ import { createSlice } from '@reduxjs/toolkit';
 const initialState = {
  tags: [],
  profiles: [],
-  filteredCandidates: [],
+  filteredCandidates:null,
  selectedItems: [],
  currentCandidate: {},
  auth: false,