add redux

2021-06-30 17:21:55 +03:00
parent 397f867f2b
commit e90414b6b9
15 changed files with 231 additions and 106 deletions
--- a/src/components/Calendar/Calendar.js
+++ b/src/components/Calendar/Calendar.js
@ -6,13 +6,17 @@ import rectangle from '../../images/rectangle_secondPage.png';
 import CalendarComponent from './CalendarComponent';
 import { currentMonth } from './calendarHelper';

-const Calendar = () => {
+const Calendar = ({ candidateForCalendar }) => {
  const [month, setMonth] = useState('');

  useEffect(() => {
    setMonth(currentMonth);
  }, [month]);

+  const { name, skillsName } = candidateForCalendar;
+
+  const abbreviatedName = name.substring(0, name.lastIndexOf(' '));
+
  return (
    <section className={style.calendar}>
      <div className="container">
@ -23,12 +27,10 @@ const Calendar = () => {
          <div className="col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row">
            <div className={style.calendarHeader__info}>
              <img className={style.calendarHeader__info__img} src={calendarMale} alt="img" />
-              <h3 className={style.calendarHeader__info__name}>
-                Александр <br /> Комов
-              </h3>
+              <h3 className={style.calendarHeader__info__name}>{abbreviatedName}</h3>
            </div>
            <div className={style.calendarHeader__title}>
-              <h3 className={style.calendarHeader__title__text}>Frontend разработчик, Middle</h3>
+              <h3 className={style.calendarHeader__title__text}>{skillsName} разработчик</h3>
              <img className={style.calendarHeader__title__img} src={rectangle} alt="img" />
            </div>
            <div>
--- a/src/components/Candidate/Candidate.js
+++ b/src/components/Candidate/Candidate.js
@ -11,7 +11,7 @@ import SectionFour from './sections/SectionFour';
 import SectionFive from './sections/SectionFive';
 import SectionSkills from './sections/SectionSkills';

-const Candidate = ({ candidatesArr }) => {
+const Candidate = ({ candidatesArr, getCandidateForCalendar }) => {
  const history = useHistory();

  const { id: candidateId } = useParams();
@ -66,7 +66,7 @@ const Candidate = ({ candidatesArr }) => {
        <div className={style.candidate__main}>
          <div className="row">
            <div className="col-12 col-xl-4">
-              <Sidebar />
+              <Sidebar getCandidateForCalendar={getCandidateForCalendar} currentCandidateObj={currentCandidate} />
            </div>

            <div className="col-12 col-xl-8">
--- a/src/components/Description/Description.js
+++ b/src/components/Description/Description.js
@ -17,9 +17,7 @@ const Description = ({ candidatesListArr, getCandidate, onLoadMore }) => {
                <img className={style.description__img} src={dog} alt="" />
              </div>
              <div className="col-12 col-xl-6">
-                <h3 className={style.description__title}>
-                  {el.name} - {el.skillsName}
-                </h3>
+                <h3 className={style.description__title}>{el.header} разработчик</h3>
                <p className={style.description__text}>
                  - 10 лет пишу приложения под IOS, отлично владею Objective-C и Swift.
                </p>
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@ -1,80 +1,26 @@
 import React, { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import Outstaffing from '../Outstaffing/Outstaffing';
 import Description from '../Description/Description';
 import front from '../../images/front_end.png';
 import back from '../../images/back_end.png';
 import design from '../../images/design.png';
 import { fetchProfile, fetchSkills } from '../../server/server';
-
-const tabsList = [
-  {
-    name: 'Frontend',
-    img: front,
-    text: '# Популярный стек',
-    header: 'Фронтенд',
-  },
-  {
-    name: 'Backend',
-    img: back,
-    text: '# Популярный стек',
-    header: 'Бэкенд',
-  },
-  {
-    name: 'Design',
-    img: design,
-    text: '# Популярный стек',
-    header: 'Дизайн',
-  },
-];
+import { profiles, selectProfiles, tags, candidates, selectCandidates, selectTab } from '../../redux/outstaffingSlice';

 const Home = ({ getCandidate }) => {
-  const [tabs, setTabs] = useState([]);
-  const [tags, setTags] = useState([]);
-  const [profiles, setProfiles] = useState([]);
-  const [selectedTab, setSelectedTab] = useState('');
-  const [countArr, setCountArr] = useState(2);
-  const [candidatesArray, setCandidatesArray] = useState([]);
+  const [count, setCount] = useState(2);
+
+  const dispatch = useDispatch();
+  const profilesArr = useSelector(selectProfiles);
+  const candidatesArr = useSelector(selectCandidates);
+  const selectedTab = useSelector(selectTab);

  useEffect(() => {
-    setTabs(tabsList);
-
    fetchProfile('https://guild.craft-group.xyz/api/profile')
-      .then((profileArr) => setProfiles(profileArr))
+      .then((profileArr) => dispatch(profiles(profileArr)))
      .catch((e) => console.log(e));
-  }, []);

-  useEffect(() => {
-    if (profiles.length) {
-      setCandidatesArray(
-        profiles.map((profile) => {
-          let skillsName = '';
-          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,
-            skillsName: skillsName,
-            img: img,
-          };
-        })
-      );
-    }
-  }, [profiles]);
-
-  useEffect(() => {
    fetchSkills('https://guild.craft-group.xyz/api/skills/skills-on-main-page').then((skills) => {
      const keys = Object.keys(skills);
      const values = Object.values(skills);
@ -84,26 +30,58 @@ const Home = ({ getCandidate }) => {
          return { id: val.id, value: val.tags, name: keys[index] };
        })
      );
-      setTags(tempTags);
+      dispatch(tags(tempTags));
    });
-  }, []);
+  }, [dispatch]);

-  const shorthandArray = candidatesArray.slice(0, countArr);
+  useEffect(() => {
+    dispatch(
+      candidates(
+        profilesArr.map((profile) => {
+          let skillsName = '';
+          let img;
+          let header;
+
+          if (Number(profile.position_id) === 1) {
+            skillsName = 'Frontend';
+            img = front;
+            header = 'Фронтенд';
+          } else if (Number(profile.position_id) === 2) {
+            skillsName = 'Backend';
+            img = back;
+            header = 'Бэкенд';
+          } else if (Number(profile.position_id) === 3) {
+            skillsName = 'Marketer';
+            img = design;
+            header = 'Дизайн';
+          }
+
+          return {
+            id: profile.id,
+            profileId: profile.position_id,
+            name: profile.fio,
+            skills: profile.skillValues,
+            skillsName,
+            img,
+            header,
+          };
+        })
+      )
+    );
+  }, [profilesArr, dispatch]);
+
+  const shorthandArray = candidatesArr.slice(0, count);

  const loadMore = (count) => {
-    setCountArr((prev) => prev + count);
-  };
-
-  const handleBlockClick = (name) => {
-    setSelectedTab(name);
+    setCount((prev) => prev + count);
  };

  return (
    <>
-      <Outstaffing onhandleTabBar={(name) => handleBlockClick(name)} selected={selectedTab} tabs={tabs} tags={tags} />
+      <Outstaffing selected={selectedTab} candidatesArray={candidatesArr} />
      <Description
        candidatesListArr={
-          selectedTab ? candidatesArray.filter((item) => item.skillsName === selectedTab) : shorthandArray
+          selectedTab ? candidatesArr.filter((item) => item.skillsName === selectedTab) : shorthandArray
        }
        getCandidate={getCandidate}
        onLoadMore={loadMore}
--- a/src/components/Outstaffing/Outstaffing.js
+++ b/src/components/Outstaffing/Outstaffing.js
@ -1,12 +1,17 @@
 import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 import style from './Outstaffing.module.css';
 import OutstaffingBlock from './OutstaffingBlock';
 import TagSelect from '../Select/TagSelect';
+import { selectTags } from '../../redux/outstaffingSlice';

-const Outstaffing = ({ onhandleTabBar, selected, tabs, tags }) => {
+const Outstaffing = ({ selected, candidatesArray }) => {
  const [selectedItems, setSelectedItems] = useState([]);

+  const tagsArr = useSelector(selectTags);
+
  const handleBlockClick = (item) => {
+    console.log('item ', item);
    if (!selectedItems.find((el) => item === el.value)) {
      setSelectedItems([...selectedItems, { value: item, label: item }]);
    }
@ -37,28 +42,25 @@ const Outstaffing = ({ onhandleTabBar, selected, tabs, tags }) => {
          <div className="row">
            <div className="col-12 col-xl-4">
              <OutstaffingBlock
-                data={tabs.find((item) => item.name === 'Frontend')}
-                dataTags={tags.flat().filter((tag) => tag.name === 'skills_front')}
+                data={candidatesArray.find((item) => item.skillsName === 'Frontend')}
+                dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_front')}
                onClick={(item) => handleBlockClick(item)}
-                onTabBarClick={(name) => onhandleTabBar(name)}
                selected={selected === 'Frontend'}
              />
            </div>
            <div className="col-12 col-xl-4">
              <OutstaffingBlock
-                data={tabs.find((item) => item.name === 'Backend')}
-                dataTags={tags.flat().filter((tag) => tag.name === 'skills_back')}
+                data={candidatesArray.find((item) => item.skillsName === 'Backend')}
+                dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_back')}
                onClick={(item) => handleBlockClick(item)}
-                onTabBarClick={(name) => onhandleTabBar(name)}
                selected={selected === 'Backend'}
              />
            </div>
            <div className="col-12 col-xl-4">
              <OutstaffingBlock
-                data={tabs.find((item) => item.name === 'Design')}
-                dataTags={tags.flat().filter((tag) => tag.name === 'skills_design')}
+                data={candidatesArray.find((item) => item.skillsName === 'Marketer')}
+                dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_design')}
                onClick={(item) => handleBlockClick(item)}
-                onTabBarClick={(name) => onhandleTabBar(name)}
                selected={selected === 'Design'}
              />
            </div>
@ -66,7 +68,7 @@ const Outstaffing = ({ onhandleTabBar, selected, tabs, tags }) => {
        </div>
      </section>
      <TagSelect
-        options={tags}
+        options={tagsArr}
        selectedItems={selectedItems}
        tagSubmit={handleSubmit}
        setSelectedItems={setSelectedItems}
--- a/src/components/Outstaffing/OutstaffingBlock.js
+++ b/src/components/Outstaffing/OutstaffingBlock.js
@ -1,8 +1,12 @@
 import React from 'react';
+import { useDispatch } from 'react-redux';
+import { selectedTab } from '../../redux/outstaffingSlice';
 import style from './Outstaffing.module.css';

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

  let classes;

@ -20,13 +24,13 @@ const OutstaffingBlock = ({ dataTags = [], data = {}, onClick, onTabBarClick, se
    <div className={style.outstaffing__box}>
      <div
        className={`${style.outstaffing__box__img} ${selected ? style.border : null}`}
-        onClick={() => onTabBarClick(name)}
+        onClick={() => dispatch(selectedTab(skillsName))}
      >
        <h3>{header}</h3>
        <img className={classes} src={img} alt="img" />
      </div>
      <div className={`${selected ? style.mobile__block : style.mobile__none}`}>
-        <p className={style.outstaffing__box__text}>{text}</p>
+        <p className={style.outstaffing__box__text}># Популярный стек</p>
        {dataTags && (
          <ul className={style.items}>
            {dataTags.map((item) => (
--- a/src/components/Sidebar/Sidebar.js
+++ b/src/components/Sidebar/Sidebar.js
@ -5,14 +5,14 @@ import arrowLeft from '../../images/arrow_left.png';
 import arrowRight from '../../images/arrow_right.png';
 import style from './Sidebar.module.css';

-const Sidebar = () => {
+const Sidebar = ({ getCandidateForCalendar, currentCandidateObj }) => {
  return (
    <div className={style.candidateSidebar}>
      <div className={style.candidateSidebar__info}>
        <img src={dogBig} alt="" />
        <p className={style.candidateSidebar__info__e}>Опыт работы</p>
        <p className={style.candidateSidebar__info__y}>4+ лет</p>
-        <Link to={`/calendar`}>
+        <Link to={`/calendar`} onClick={() => getCandidateForCalendar(currentCandidateObj)}>
          <button className={style.candidateSidebar__info__btn}>Выбрать к собеседованию</button>
        </Link>
        <p className={style.candidateSidebar__info__l}>Посмотреть ещё</p>