add form page

2021-07-03 17:37:30 +03:00
parent 629447c95c
commit 082ae23f49
16 changed files with 530 additions and 141 deletions
--- a/src/components/Description/Description.js
+++ b/src/components/Description/Description.js
@ -1,17 +1,84 @@
-import React, { useState } from 'react';
+import React from 'react';
 import style from './Description.module.css';
 import dog from '../../images/dog.jpg';
 import rectangle from '../../images/rectangle_secondPage.png';
 import { Link } from 'react-router-dom';
 import { LEVELS } from '../constants/constants';
+import { selectProfiles, selectFilteredCandidates } from '../../redux/outstaffingSlice';
+import { useSelector } from 'react-redux';

-const Description = ({ candidatesListArr, onLoadMore }) => {
-  const [text, setText] = useState([]);
+// const Description = ({ candidatesListArr, onLoadMore }) => {
+//   function createMarkup(text) {
+//     return { __html: text.split('</p>').slice(0, 3).join('') };
+//   }
+
+//   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={dog} alt="" />
+//               </div>
+//               <div className="col-12 col-xl-6">
+//                 <h3 className={style.description__title}>
+//                   {el.skillsName} разработчик, {LEVELS[el.level]}
+//                 </h3>
+
+//                 {el.text ? (
+//                   <div className={style.description__text} dangerouslySetInnerHTML={createMarkup(el.text)}></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">
+//                 {el.skills.map((e) => (
+//                   <span key={e.id} className={style.description__sp}>
+//                     {e.skill.name}
+//                   </span>
+//                 ))}
+//                 <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}>
+//                 <button onClick={() => onLoadMore(2)}>Загрузить еще</button>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+//     </section>
+//   );
+// };
+
+// export default Description;
+
+const Description = ({ onLoadMore }) => {
+  const candidatesListArr = useSelector(selectProfiles);
+  const filteredListArr = useSelector(selectFilteredCandidates);
+
+  function createMarkup(text) {
+    return { __html: text.split('</p>').slice(0, 3).join('') };
+  }

  return (
    <section className={style.description}>
      <div className="container">
-        <div className={style.description__wrapper}>
+        {/* <div className={style.description__wrapper}>
          {candidatesListArr.map((el) => (
            <div className="row" key={el.id}>
              <div className="col-2">
@ -19,17 +86,11 @@ const Description = ({ candidatesListArr, onLoadMore }) => {
              </div>
              <div className="col-12 col-xl-6">
                <h3 className={style.description__title}>
-                  {el.skillsName} разработчик, {LEVELS[el.level]}
+                  {el.fio} разработчик, {LEVELS[el.level]}
                </h3>

-                {text.length > 0 ? (
-                  <>
-                    <p className={style.description__text}>
-                      - 10 лет пишу приложения под IOS, отлично владею Objective-C и Swift.
-                    </p>
-                    <p className={style.description__text}>- 5 лет руковожу командами мобильной разработки.</p>
-                    <p className={style.description__text}>- 3 года преподаю в IOS-школе Сбера</p>
-                  </>
+                {el.vc_text ? (
+                  <div className={style.description__text} dangerouslySetInnerHTML={createMarkup(el.vc_text)}></div>
                ) : (
                  <p className={style.description__textSecondary}>Описание отсутствует...</p>
                )}
@ -41,7 +102,7 @@ const Description = ({ candidatesListArr, onLoadMore }) => {
              </div>
              <div className="col-xl-2"></div>
              <div className="col-12 col-xl-6">
-                {el.skills.map((e) => (
+                {el.skillValues.map((e) => (
                  <span key={e.id} className={style.description__sp}>
                    {e.skill.name}
                  </span>
@ -51,6 +112,76 @@ const Description = ({ candidatesListArr, onLoadMore }) => {
              <div className="col-xl-4"></div>
            </div>
          ))}
+        </div> */}
+
+        <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={dog} alt="" />
+                  </div>
+                  <div className="col-12 col-xl-6">
+                    <h3 className={style.description__title}>
+                      {el.fio} разработчик, {LEVELS[el.level]}
+                    </h3>
+
+                    {el.vc_text ? (
+                      <div className={style.description__text} dangerouslySetInnerHTML={createMarkup(el.vc_text)}></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">
+                    {el.skillValues.map((e) => (
+                      <span key={e.id} className={style.description__sp}>
+                        {e.skill.name}
+                      </span>
+                    ))}
+                    <img className={style.description__rectangle} src={rectangle} alt="" />
+                  </div>
+                  <div className="col-xl-4"></div>
+                </div>
+              ))
+            : candidatesListArr.map((el) => (
+                <div className="row" key={el.id}>
+                  <div className="col-2">
+                    <img className={style.description__img} src={dog} alt="" />
+                  </div>
+                  <div className="col-12 col-xl-6">
+                    <h3 className={style.description__title}>
+                      {el.fio} разработчик, {LEVELS[el.level]}
+                    </h3>
+
+                    {el.vc_text ? (
+                      <div className={style.description__text} dangerouslySetInnerHTML={createMarkup(el.vc_text)}></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">
+                    {el.skillValues.map((e) => (
+                      <span key={e.id} className={style.description__sp}>
+                        {e.skill.name}
+                      </span>
+                    ))}
+                    <img className={style.description__rectangle} src={rectangle} alt="" />
+                  </div>
+                  <div className="col-xl-4"></div>
+                </div>
+              ))}
        </div>

        <div className="row">
@ -59,15 +190,6 @@ const Description = ({ candidatesListArr, onLoadMore }) => {
              <div className={style.description__footer__btn}>
                <button onClick={() => onLoadMore(2)}>Загрузить еще</button>
              </div>
-              {/* <div className={style.description__footer__box}>
-                <div className={style.arrow__left}>
-                  <img src={arrowLeft} alt="" />
-                </div>
-                <span className={style.description__footer__sp}>1 / 15</span>
-                <div className={style.arrow__right}>
-                  <img src={arrowRight} alt="" />
-                </div>
-              </div> */}
            </div>
          </div>
        </div>
--- a/src/components/Description/Description.module.css
+++ b/src/components/Description/Description.module.css
@ -73,9 +73,9 @@
  }
 }

-.description__text {
+.description__text > p {
  font-family: 'GT Eesti Pro Display';
-  font-size: 1.7em;
+  font-size: 1.6em;
  font-weight: 100;
  font-style: normal;
  letter-spacing: normal;
@ -84,6 +84,10 @@
  line-height: 28px;
 }

+.description__text > p:first-child {
+  font-size: 1.8em;
+}
+
 .description__textSecondary {
  font-family: 'GT Eesti Pro Display';
  font-size: 1.7em;
@ -148,7 +152,6 @@
 }

 .description__sp {
-  /* display: block; */
  font-family: 'GT Eesti Pro Display';
  font-size: 1.7em;
  font-weight: 400;
@ -225,34 +228,3 @@
  text-align: center;
  margin: 0 10px;
 }
-.arrow__left {
-  position: relative;
-  width: 30px;
-  height: 30px;
-  border-radius: 20px;
-  background-color: #f6f6f6;
-  cursor: pointer;
-}
-
-.arrow__left > img {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.arrow__right {
-  position: relative;
-  width: 30px;
-  height: 30px;
-  border-radius: 20px;
-  background-color: #74be4d;
-  cursor: pointer;
-}
-
-.arrow__right > img {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}