add filter

src/components/Outstaffing/Outstaffing.js

@@ -1,61 +1,35 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import style from './Outstaffing.module.css';
 import front from '../../images/front_end.png';
 import back from '../../images/back_end.png';
 import design from '../../images/design.png';
 import OutstaffingBlock from './OutstaffingBlock';
-// import TagSelect from '../Select/TagSelect';
-import Select from 'react-select';
-
-const options = [
-  { value: 'Ruby on Rails', label: 'Ruby on Rails' },
-  { value: 'Nginx', label: 'Nginx' },
-  { value: 'Docker', label: 'Docker' },
-  { value: 'PostgreSQL', label: 'PostgreSQL' },
-  { value: 'Vue.js', label: 'Vue.js' },
-  { value: 'Typescript', label: 'Typescript' },
-  { value: 'ReactJ', label: 'ReactJ' },
-];
+import TagSelect from '../Select/TagSelect';
 
 const Outstaffing = () => {
   const [data, setData] = useState([]);
-  const [arr, setArr] = useState([]);
+  const [selectedItems, setSelectedItems] = useState([]);
 
   useEffect(() => {
     const tempData = ['Ruby on Rails', 'Nginx', 'Docker', 'PostgreSQL', 'Vue.js', 'Typescript', 'ReactJS'];
     setData(tempData);
   }, []);
 
-  const [items, setItems] = useState([]);
-
-  const inputEl = useRef(null);
-
-  const test = (index) => {
-    let arrr = options[index];
-    console.log('DDDDD', arrr);
-
-    setArr([arrr]);
-  };
-
-  const handle = (arr) => {
-    console.log(arr);
-    inputEl.current.select.setValue(arr);
-  };
-
-  const handleChange = (values) => {
-    const selectItems = values.map((value) => value);
-
-    setItems(selectItems);
-
-    console.log('items', items);
+  const handleBlockClick = (index) => {
+    if (selectedItems.find((item) => item.value === data[index])) {
+      return;
+      // setSelectedItems(selectedItems.filter((item) => item.value !== data[index]));
+    } else {
+      setSelectedItems([...selectedItems, { value: data[index], label: data[index] }]);
+    }
   };
 
   const handleSubmit = () => {
-    const filterItems = JSON.stringify(items.map((item) => item.value));
+    const filterItems = JSON.stringify(selectedItems.map((item) => item.value));
 
     alert(`Back-end: ${filterItems}`);
 
-    setItems([]);
+    setSelectedItems([]);
   };
 
   return (
@@ -74,45 +48,38 @@ const Outstaffing = () => {
 
           <div className="row">
             <div className="col-4">
-              <OutstaffingBlock image={front} data={data} header={'# Популярный стек'} onTest={test} />
+              <OutstaffingBlock
+                image={front}
+                data={data}
+                header={'# Популярный стек'}
+                onClick={(index) => handleBlockClick(index)}
+              />
             </div>
             <div className="col-4">
-              <OutstaffingBlock image={back} data={data} header={'# Популярный стек'} onTest={test} />
+              <OutstaffingBlock
+                image={back}
+                data={data}
+                header={'# Популярный стек'}
+                onClick={(index) => handleBlockClick(index)}
+              />
             </div>
             <div className="col-4">
-              <OutstaffingBlock image={design} data={data} header={'# Популярный стек'} onTest={test} />
-            </div>
-          </div>
-        </div>
-      </section>
-      {/* <TagSelect selectArr={tt} /> */}
-      <section className={style.search}>
-        <div className="container">
-          <div className="row">
-            <div className="col-12">
-              <h2 className={style.search__title}>Найти специалиста по навыкам</h2>
-              <div className={style.search__box}>
-                <Select
-                  ref={inputEl}
-                  value={items}
-                  onChange={handleChange}
-                  isMulti
-                  name="tags"
-                  className={style.select}
-                  classNamePrefix={style.select}
-                  options={options}
-                />
-                <button onClick={handleSubmit} type="submit">
-                  Submit
-                </button>
-                <button onClick={handle} type="submit">
-                  Submit
-                </button>
-              </div>
+              <OutstaffingBlock
+                image={design}
+                data={data}
+                header={'# Популярный стек'}
+                onClick={(index) => handleBlockClick(index)}
+              />
             </div>
           </div>
         </div>
       </section>
+      <TagSelect
+        options={data}
+        selectedItems={selectedItems}
+        tagSubmit={handleSubmit}
+        setSelectedItems={setSelectedItems}
+      />
     </>
   );
 };

src/components/Outstaffing/Outstaffing.module.css

@@ -52,4 +52,5 @@
     line-height: 36px;
     text-align: left;
     list-style: none;
+    cursor: pointer;
 }

src/components/Outstaffing/OutstaffingBlock.js

@@ -1,13 +1,13 @@
 import style from './Outstaffing.module.css';
 
-const OutstaffingBlock = ({ text, image, data, onTest }) => {
+const OutstaffingBlock = ({ text, image, data, onClick }) => {
   return (
     <div className={style.outstaffing__box}>
       <img src={image} alt="img" />
       <p>{text}</p>
       <ul className={style.items}>
         {data.map((item, index) => (
-          <li key={index.toString()} onClick={() => onTest(index)}>
+          <li key={index.toString()} onClick={() => onClick(index)}>
             {index} {item}
           </li>
         ))}