fixed code

2021-07-05 12:33:24 +03:00 · 2021-07-05 12:33:24 +03:00 · e8b7fbb2f3
commit e8b7fbb2f3
parent 082ae23f49
8 changed files with 39 additions and 232 deletions
--- a/src/components/Candidate/Candidate.js
+++ b/src/components/Candidate/Candidate.js
@ -1,146 +1,15 @@
 import React from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
-import { selectCandidates, currentCandidate, selectCurrentCandidate } from '../../redux/outstaffingSlice';
+import { currentCandidate, selectCurrentCandidate, selectProfiles } from '../../redux/outstaffingSlice';
 import style from './Candidate.module.css';
 import arrow from '../../images/right-arrow.png';
 import rectangle from '../../images/rectangle_secondPage.png';
 import Sidebar from '../Sidebar/Sidebar';
 import SectionSkills from './SectionSkills';
-
-// const Candidate = () => {
-//   const history = useHistory();
-//   const { id: candidateId } = useParams();
-
-//   const dispatch = useDispatch();
-
-//   const candidatesArr = useSelector(selectCandidates);
-//   dispatch(currentCandidate(candidatesArr.find((el) => Number(el.id) === Number(candidateId))));
-//   const currentCandidateObj = useSelector(selectCurrentCandidate);
-
-//   console.log('currentCandidateObj ', currentCandidateObj);
-
-//   const { name, skillsName, img, skills, text } = currentCandidateObj;
-
-//   let classes;
-
-//   if (skillsName === 'Backend') {
-//     classes = style.back;
-//     console.log(classes);
-//   } else if (skillsName === 'Design') {
-//     classes = style.des;
-//   } else if (skillsName === 'Frontend') {
-//     classes = style.front;
-//   }
-
-//   return (
-//     <section className={style.candidate}>
-//       <div className="container">
-//         <div className="row">
-//           <div className="col-12">
-//             <div className={style.candidate__title}>
-//               <h2>
-//                 <span>Аутстаффинг</span> it-персонала
-//               </h2>
-//             </div>
-//           </div>
-//         </div>
-
-//         <div className="row">
-//           <div className="col-12">
-//             <div className={style.candidate__header}>
-//               <div className={style.arrow} onClick={() => history.push('/')}>
-//                 <div className={style.arrow__img}>
-//                   <img src={arrow} alt="" />
-//                 </div>
-//                 <div className={style.arrow__sp}>
-//                   <span>Вернуться к списку</span>
-//                 </div>
-//               </div>
-
-//               <div className={style.icon}>
-//                 <h3>{skillsName}</h3>
-//                 <img className={classes} src={img} alt="" />
-//               </div>
-//             </div>
-//           </div>
-//         </div>
-//         <div className={style.candidate__main}>
-//           <div className="row">
-//             <div className="col-12 col-xl-4">
-//               <Sidebar />
-//             </div>
-//             <div className="col-12 col-xl-8">
-//               <div className={style.candidate__main__description}>
-//                 <h2>{name}</h2>
-//                 <img src={rectangle} alt="" />
-//                 <p className={style.hashtag}># Описание опыта</p>
-//                 <div className={style.SectionOne}>
-//                   <h3>SVM - сервис выездных менеджеров для банка ПСБ</h3>
-//                   <p>
-//                     Приложение, которое позволяет управлять работой т.н. выездных менеджеров (ВМ). Банк предоставляет их
-//                     услуги своим (потенциальным или реальным) клиентам, позволяя подключать расчетно-кассовое
-//                     обслуживание или регистрировать свой бизнес. Клиенту не нужно приходить в отделение/офис банка - все
-//                     необходимые бумаги ВМ подготовит заранее и принесет на согласование и подпись в удобное ему (клиент)
-//                     время и место.
-//                   </p>
-//                   <h4>Senior PHP/JS Developer</h4>
-//                 </div>
-//                 <p className={style.hashtag}># Средства и инструменты:</p>
-//                 <div className={style.SectionTwo}>
-//                   <p>
-//                     - Разработал и внедрил веб приложения, а также программное обеспечение с использованием Node.js,
-//                     MySQL, JavaScript, HTML, CSS, React.js и Vue.JS. - Поддерживал существующий веб-сайт на базе PHP.
-//                     Перевел существующую платформу с Laravel на современную архитектуру React/Redux и Node.
-//                   </p>
-//                   <p>
-//                     - Проектировал и разрабатывал компоненты пользовательского интерфейса с использованием HTML, CSS и
-//                     JavaScript. - Повысил скорость загрузки веб-сайта и время безотказной работы за счете переписывания
-//                     всех основных компонентов и внедрения новой архетиктуры. - Разработал персональное APIs.
-//                   </p>
-//                 </div>
-//                 <p className={style.hashtag}># Описание опыта</p>
-//                 <div className={style.SectionThree}>
-//                   <h3>Multitur - личный кабинет для сервиса поиска/подбора отелей</h3>
-//                   <p>
-//                     Личный кабинет для сотрудников отелей, который позволяет управлять информацией по отелю на сайте.
-//                   </p>
-//                   <h4>Senior PHP/JS Developer</h4>
-//                 </div>
-//                 <div className={style.SectionFour}>
-//                   <p className={style.hashtag}># Средства и инструменты:</p>
-//                   <p>Backend - REST API на PHP 7.1 с использованием фреймворка Laravel 5.8</p>
-//                   <p>Frontend - Vue.js</p>
-//                   <p>БД - MYSQL</p>
-//                 </div>
-//                 <p className={style.hashtag}># Функционал:</p>
-//                 <>
-//                   <div className={style.SectionFive}>
-//                     <p>Регистрации/авторизации;</p>
-//                     <p>Управления правами менеджеров отеля, назначение поставщиков</p>
-//                     <p>Управления описанием и профилем отелей;</p>
-//                     <p>Управления финансами, ценообразованием, квотами;</p>
-//                     <p>Переписки со своими менеджерами, а также с вышестоящими инстанциями;</p>
-//                     <p>Управления новостями отеля;</p>
-//                     <p>Просмотра расширенной статистики по заявкам и людям;</p>
-//                   </div>
-//                   <button type="submit" className={style.SectionFive__btn}>
-//                     Выбрать к собеседованию
-//                   </button>
-//                 </>
-//                 <SectionSkills skillsArr={skills} />
-//               </div>
-//             </div>
-//           </div>
-//         </div>
-//       </div>
-//     </section>
-//   );
-// };
-
-// export default Candidate;
-
-//////////////////////////////////////////////////
+import front from '../../images/front_end.png';
+import back from '../../images/back_end.png';
+import design from '../../images/design.png';

 const Candidate = () => {
  const history = useHistory();
@ -148,23 +17,32 @@ const Candidate = () => {

  const dispatch = useDispatch();

-  const candidatesArr = useSelector(selectCandidates);
+  const candidatesArr = useSelector(selectProfiles);
+
  dispatch(currentCandidate(candidatesArr.find((el) => Number(el.id) === Number(candidateId))));
+
  const currentCandidateObj = useSelector(selectCurrentCandidate);

  console.log('currentCandidateObj ', currentCandidateObj);

-  const { name, skillsName, img, skills, text } = currentCandidateObj;
+  const { fio: name, position_id, skillValues, vc_text: text } = currentCandidateObj;

  let classes;
+  let header;
+  let img;

-  if (skillsName === 'Backend') {
+  if (Number(position_id) === 1) {
    classes = style.back;
-    console.log(classes);
-  } else if (skillsName === 'Design') {
+    header = 'Backend';
+    img = back;
+  } else if (Number(position_id) === 2) {
    classes = style.des;
-  } else if (skillsName === 'Frontend') {
+    header = 'Frontend';
+    img = front;
+  } else if (Number(position_id) === 3) {
    classes = style.front;
+    header = 'Design';
+    img = design;
  }

  function createMarkup(text) {
@ -197,7 +75,7 @@ const Candidate = () => {
              </div>

              <div className={style.icon}>
-                <h3>{skillsName}</h3>
+                <h3>{header}</h3>
                <img className={classes} src={img} alt="" />
              </div>
            </div>
@ -221,7 +99,7 @@ const Candidate = () => {
                <button type="submit" className={style.SectionFive__btn}>
                  Выбрать к собеседованию
                </button>
-                <SectionSkills skillsArr={skills} />
+                <SectionSkills skillsArr={skillValues} />
              </div>
            </div>
          </div>
--- a/src/components/Form/Form.js
+++ b/src/components/Form/Form.js
@ -6,6 +6,7 @@ const Form = () => {
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [comment, setСomment] = useState('');
+  const [name, setName] = useState('');

  const handleChange = (e) => {
    const name = e.target.name;
@ -31,11 +32,17 @@ const Form = () => {
      comment: comment,
    };

-    fetchForm('https://guild.craft-group.xyz/api/profile/add-to-interview', info).then((el) =>
-      el.json().then((e) => console.log('object ', e))
-    );
+    fetchForm('https://guild.craft-group.xyz/api/profile/add-to-interview', info)
+      .then((el) => {
+        return el.json();
+      })
+      .then((e) => {
+        setName(e);
+      });
  };

+  console.log('NAME ', name);
+
  return (
    <div className="container">
      <div className="row">
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@ -1,23 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import Outstaffing from '../Outstaffing/Outstaffing';
 import Description from '../Description/Description';
 import { fetchProfile, fetchSkills } from '../../server/server';
-import front from '../../images/front_end.png';
-import back from '../../images/back_end.png';
-import design from '../../images/design.png';
-// import { profiles, selectProfiles, tags, candidates, selectCandidates, selectTab } from '../../redux/outstaffingSlice';
-import { profiles, selectProfiles, tags, candidates } from '../../redux/outstaffingSlice';
+import { profiles, tags } from '../../redux/outstaffingSlice';

 const Home = () => {
  const [index, setIndex] = useState(2);

  const dispatch = useDispatch();
-  const profilesArr = useSelector(selectProfiles);
-
-  // const candidatesArr = useSelector(selectCandidates);
-
-  // const selectedTab = useSelector(selectTab);

  useEffect(() => {
    fetchProfile(`https://guild.craft-group.xyz/api/profile?limit=`, index)
@ -37,41 +28,6 @@ const Home = () => {
    });
  }, [dispatch, index]);

-  useEffect(() => {
-    dispatch(
-      candidates(
-        profilesArr.map((profile) => {
-          let skillsName = '';
-          let header;
-          let img;
-
-          if (Number(profile.position_id) === 1) {
-            skillsName = 'Frontend';
-            img = front;
-          } else if (Number(profile.position_id) === 2) {
-            skillsName = 'Backend';
-            img = back;
-          } else if (Number(profile.position_id) === 3) {
-            skillsName = 'Marketer';
-            img = design;
-          }
-
-          return {
-            id: profile.id,
-            profileId: profile.position_id,
-            name: profile.fio,
-            skills: profile.skillValues,
-            level: profile.level,
-            text: profile.vc_text,
-            skillsName,
-            header,
-            img,
-          };
-        })
-      )
-    );
-  }, [profilesArr, dispatch]);
-
  const loadMore = (count) => {
    setIndex((prev) => prev + count);
  };
@ -79,12 +35,6 @@ const Home = () => {
  return (
    <>
      <Outstaffing />
-      {/* <Description
-        candidatesListArr={
-          selectedTab ? candidatesArr.filter((item) => item.skillsName === selectedTab) : candidatesArr
-        }
-        onLoadMore={loadMore}
-      /> */}
      <Description onLoadMore={loadMore} />
    </>
  );
--- a/src/components/Outstaffing/Outstaffing.js
+++ b/src/components/Outstaffing/Outstaffing.js
@ -3,15 +3,13 @@ import { useSelector } from 'react-redux';
 import style from './Outstaffing.module.css';
 import OutstaffingBlock from './OutstaffingBlock';
 import TagSelect from '../Select/TagSelect';
-import { selectTags, selectTab, selectCandidates } from '../../redux/outstaffingSlice';
+import { selectTags } from '../../redux/outstaffingSlice';
 import front from '../../images/front_end.png';
 import back from '../../images/back_end.png';
 import design from '../../images/design.png';

 const Outstaffing = () => {
  const tagsArr = useSelector(selectTags);
-  const selected = useSelector(selectTab);
-  const candidatesArr = useSelector(selectCandidates);

  return (
    <>
@ -30,27 +28,21 @@ const Outstaffing = () => {
          <div className="row">
            <div className="col-12 col-xl-4">
              <OutstaffingBlock
-                data={candidatesArr.find((item) => item.skillsName === 'Frontend')}
                dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_front')}
-                selected={selected === 'Frontend'}
                img={front}
                header="Фронтенд"
              />
            </div>
            <div className="col-12 col-xl-4">
              <OutstaffingBlock
-                data={candidatesArr.find((item) => item.skillsName === 'Backend')}
                dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_back')}
-                selected={selected === 'Backend'}
                img={back}
                header="Бэкенд"
              />
            </div>
            <div className="col-12 col-xl-4">
              <OutstaffingBlock
-                data={candidatesArr.find((item) => item.skillsName === 'Marketer')}
                dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_design')}
-                selected={selected === 'Marketer'}
                img={design}
                header="Дизайн"
              />
--- a/src/components/Outstaffing/Outstaffing.module.css
+++ b/src/components/Outstaffing/Outstaffing.module.css
@ -48,7 +48,6 @@
 .outstaffing__box__img {
  min-width: 260px;
  min-height: 120px;
-  cursor: pointer;
  background-color: #f9f9f9;
  border-radius: 20px;
  position: relative;
@ -68,7 +67,6 @@
 }

 .outstaffing__box__img > img {
-  cursor: pointer;
  position: absolute;
 }

--- a/src/components/Outstaffing/OutstaffingBlock.js
+++ b/src/components/Outstaffing/OutstaffingBlock.js
@ -1,15 +1,13 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { selectedTab, selectItems, selectedItems } from '../../redux/outstaffingSlice';
+import { selectItems, selectedItems } from '../../redux/outstaffingSlice';
 import style from './Outstaffing.module.css';

-const OutstaffingBlock = ({ dataTags = [], data = {}, selected, img, header }) => {
+const OutstaffingBlock = ({ dataTags = [], selected, img, header }) => {
  const dispatch = useDispatch();

  const itemsArr = useSelector(selectItems);

-  const { skillsName } = data;
-
  const handleBlockClick = (item, id) => {
    if (!itemsArr.find((el) => item === el.value)) {
      dispatch(selectedItems([...itemsArr, { id, value: item, label: item }]));
@ -30,10 +28,7 @@ const OutstaffingBlock = ({ dataTags = [], data = {}, selected, img, header }) =

  return (
    <div className={style.outstaffing__box}>
-      <div
-        className={`${style.outstaffing__box__img} ${selected ? style.border : null}`}
-        onClick={() => dispatch(selectedTab(skillsName))}
-      >
+      <div className={`${style.outstaffing__box__img} ${selected ? style.border : null}`}>
        <h3>{header}</h3>
        <img className={classes} src={img} alt="img" />
      </div>
--- a/src/redux/outstaffingSlice.js
+++ b/src/redux/outstaffingSlice.js
@ -3,10 +3,8 @@ import { createSlice } from '@reduxjs/toolkit';
 const initialState = {
  tags: [],
  profiles: [],
-  candidates: [],
  filteredCandidates: [],
  selectedItems: [],
-  selectedTab: '',
  currentCandidate: {},
  auth: true,
 };
@ -21,15 +19,9 @@ export const outstaffingSlice = createSlice({
    profiles: (state, action) => {
      state.profiles = action.payload;
    },
-    candidates: (state, action) => {
-      state.candidates = action.payload;
-    },
    filteredCandidates: (state, action) => {
      state.filteredCandidates = action.payload;
    },
-    selectedTab: (state, action) => {
-      state.selectedTab = action.payload;
-    },
    selectedItems: (state, action) => {
      state.selectedItems = action.payload;
    },
@ -42,14 +34,11 @@ export const outstaffingSlice = createSlice({
  },
 });

-export const { tags, profiles, candidates, selectedTab, selectedItems, auth, currentCandidate, filteredCandidates } =
-  outstaffingSlice.actions;
+export const { tags, profiles, selectedItems, auth, currentCandidate, filteredCandidates } = outstaffingSlice.actions;

 export const selectProfiles = (state) => state.outstaffing.profiles;
 export const selectTags = (state) => state.outstaffing.tags;
-export const selectCandidates = (state) => state.outstaffing.candidates;
 export const selectFilteredCandidates = (state) => state.outstaffing.filteredCandidates;
-export const selectTab = (state) => state.outstaffing.selectedTab;
 export const selectItems = (state) => state.outstaffing.selectedItems;
 export const selectCurrentCandidate = (state) => state.outstaffing.currentCandidate;
 export const selectAuth = (state) => state.outstaffing.auth;
--- a/src/server/server.js
+++ b/src/server/server.js
@ -2,8 +2,6 @@ export const fetchProfile = async (link, index) => {
  const response = await fetch(`${link}${index}`);
  let data = await response.json();

-  console.log('data ', data);
-
  return data;
 };

@ -24,10 +22,10 @@ export const fetchItemsForId = async (link, id) => {
 export const fetchForm = async (link, info) => {
  const response = await fetch(link, {
    method: 'POST',
-    body: JSON.stringify(info),
    headers: {
      'Content-Type': 'application/json',
    },
+    body: JSON.stringify(info),
  });

  return response;