fixed js code

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 (
     <>
-      <Outstaffing selected={selectedTab} candidatesArray={candidatesArr} />
+      <Outstaffing />
       <Description
         candidatesListArr={
           selectedTab ? candidatesArr.filter((item) => item.skillsName === selectedTab) : shorthandArray

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';
+import { selectTags, selectTab, selectCandidates } from '../../redux/outstaffingSlice';
-
-const Outstaffing = ({ selected, candidatesArray }) => {
-  const [selectedItems, setSelectedItems] = useState([]);
 
+const Outstaffing = () => {
   const tagsArr = useSelector(selectTags);
-
+  const selected = useSelector(selectTab);
-  const handleBlockClick = (item) => {
+  const candidatesArr = useSelector(selectCandidates);
-    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([]);
-  };
 
   return (
     <>
@@ -42,37 +27,29 @@ const Outstaffing = ({ selected, candidatesArray }) => {
           <div className="row">
             <div className="col-12 col-xl-4">
               <OutstaffingBlock
-                data={candidatesArray.find((item) => 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'}
               />
             </div>
             <div className="col-12 col-xl-4">
               <OutstaffingBlock
-                data={candidatesArray.find((item) => 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'}
               />
             </div>
             <div className="col-12 col-xl-4">
               <OutstaffingBlock
-                data={candidatesArray.find((item) => 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 === 'Marketer'}
-                selected={selected === 'Design'}
               />
             </div>
           </div>
         </div>
       </section>
-      <TagSelect
+      <TagSelect />
-        options={tagsArr}
-        selectedItems={selectedItems}
-        tagSubmit={handleSubmit}
-        setSelectedItems={setSelectedItems}
-      />
     </>
   );
 };

src/components/Outstaffing/OutstaffingBlock.js

@@ -1,13 +1,21 @@
 import React from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
-import { selectedTab } from '../../redux/outstaffingSlice';
+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 && (
           <ul className={style.items}>
             {dataTags.map((item) => (
-              <li key={item.id} onClick={() => onClick(item.value)}>
+              <li key={item.id} onClick={() => handleBlockClick(item.value)}>
                 {item.value}
               </li>
             ))}

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 (
     <>
       <section className={style.search}>
@@ -12,17 +28,17 @@ const TagSelect = ({ selectedItems, tagSubmit, options, setSelectedItems }) => {
               <h2 className={style.search__title}>Найти специалиста по навыкам</h2>
               <div className={style.search__box}>
                 <Select
-                  value={selectedItems}
+                  value={itemsArr}
-                  onChange={(value) => setSelectedItems(value)}
+                  onChange={(value) => dispatch(selectedItems(value))}
                   isMulti
                   name="tags"
                   className={style.select}
                   classNamePrefix={style.select}
-                  options={options.flat().map((item) => {
+                  options={tagsArr.flat().map((item) => {
                     return { value: item.value, label: item.value };
                   })}
                 />
-                <button onClick={tagSubmit} type="submit">
+                <button onClick={handleSubmit} type="submit">
                   Поиск
                 </button>
               </div>

src/redux/outstaffingSlice.js

@@ -24,8 +24,8 @@ export const outstaffingSlice = createSlice({
     selectedTab: (state, action) => {
       state.selectedTab = action.payload;
     },
-    selectedItem: (state, action) => {
+    selectedItems: (state, action) => {
-      state.selectedItem = action.payload;
+      state.selectedItems = action.payload;
     },
   },
 });