diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index c53cc6c2..9720c0e4 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -53,7 +53,7 @@ const Home = ({ getCandidate }) => { } else if (Number(profile.position_id) === 3) { skillsName = 'Marketer'; img = design; - header = 'Дизайн'; + header = 'Маркетинг'; } return { @@ -78,7 +78,7 @@ const Home = ({ getCandidate }) => { return ( <> - + item.skillsName === selectedTab) : shorthandArray diff --git a/src/components/Outstaffing/Outstaffing.js b/src/components/Outstaffing/Outstaffing.js index 253a834d..7cf0a05d 100644 --- a/src/components/Outstaffing/Outstaffing.js +++ b/src/components/Outstaffing/Outstaffing.js @@ -1,29 +1,14 @@ -import React, { useState } from 'react'; +import React 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 = ({ selected, candidatesArray }) => { - const [selectedItems, setSelectedItems] = useState([]); +import { selectTags, selectTab, selectCandidates } from '../../redux/outstaffingSlice'; +const Outstaffing = () => { const tagsArr = useSelector(selectTags); - - const handleBlockClick = (item) => { - console.log('item ', item); - if (!selectedItems.find((el) => item === el.value)) { - setSelectedItems([...selectedItems, { value: item, label: item }]); - } - }; - - const handleSubmit = () => { - const filterItems = JSON.stringify(selectedItems.map((item) => item.value)); - - alert(`Back-end: ${filterItems}`); - - setSelectedItems([]); - }; + const selected = useSelector(selectTab); + const candidatesArr = useSelector(selectCandidates); return ( <> @@ -42,37 +27,29 @@ const Outstaffing = ({ selected, candidatesArray }) => {
item.skillsName === 'Frontend')} + data={candidatesArr.find((item) => item.skillsName === 'Frontend')} dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_front')} - onClick={(item) => handleBlockClick(item)} selected={selected === 'Frontend'} />
item.skillsName === 'Backend')} + data={candidatesArr.find((item) => item.skillsName === 'Backend')} dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_back')} - onClick={(item) => handleBlockClick(item)} selected={selected === 'Backend'} />
item.skillsName === 'Marketer')} + data={candidatesArr.find((item) => item.skillsName === 'Marketer')} dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_design')} - onClick={(item) => handleBlockClick(item)} - selected={selected === 'Design'} + selected={selected === 'Marketer'} />
- + ); }; diff --git a/src/components/Outstaffing/OutstaffingBlock.js b/src/components/Outstaffing/OutstaffingBlock.js index 7e90222e..5e3cfe77 100644 --- a/src/components/Outstaffing/OutstaffingBlock.js +++ b/src/components/Outstaffing/OutstaffingBlock.js @@ -1,13 +1,21 @@ import React from 'react'; -import { useDispatch } from 'react-redux'; -import { selectedTab } from '../../redux/outstaffingSlice'; +import { useDispatch, useSelector } from 'react-redux'; +import { selectedTab, selectItems, selectedItems } from '../../redux/outstaffingSlice'; import style from './Outstaffing.module.css'; -const OutstaffingBlock = ({ dataTags = [], data = {}, onClick, selected }) => { +const OutstaffingBlock = ({ dataTags = [], data = {}, selected }) => { const dispatch = useDispatch(); + const itemsArr = useSelector(selectItems); + const { header, img, skillsName } = data; + const handleBlockClick = (item) => { + if (!itemsArr.find((el) => item === el.value)) { + dispatch(selectedItems([...itemsArr, { value: item, label: item }])); + } + }; + let classes; dataTags.forEach((el) => { @@ -34,7 +42,7 @@ const OutstaffingBlock = ({ dataTags = [], data = {}, onClick, selected }) => { {dataTags && (
    {dataTags.map((item) => ( -
  • onClick(item.value)}> +
  • handleBlockClick(item.value)}> {item.value}
  • ))} diff --git a/src/components/Select/TagSelect.js b/src/components/Select/TagSelect.js index 49c035e9..409a6d1f 100644 --- a/src/components/Select/TagSelect.js +++ b/src/components/Select/TagSelect.js @@ -1,8 +1,24 @@ import React from 'react'; +import { useSelector, useDispatch } from 'react-redux'; import Select from 'react-select'; import style from './TagSelect.module.css'; +import { selectedItems, selectItems, selectTags } from '../../redux/outstaffingSlice'; + +const TagSelect = () => { + const dispatch = useDispatch(); + + const itemsArr = useSelector(selectItems); + + const tagsArr = useSelector(selectTags); + + const handleSubmit = () => { + const filterItems = JSON.stringify(itemsArr.map((item) => item.value)); + + alert(`Back-end: ${filterItems}`); + + dispatch(selectedItems([])); + }; -const TagSelect = ({ selectedItems, tagSubmit, options, setSelectedItems }) => { return ( <>
    @@ -12,17 +28,17 @@ const TagSelect = ({ selectedItems, tagSubmit, options, setSelectedItems }) => {

    Найти специалиста по навыкам