add filter

src/App.css

@@ -1 +0,0 @@
-

src/components/Auth/Auth.js

@@ -10,7 +10,6 @@ const Auth = ({ setAuthed }) => {
           className={style.auth__btn}
           onClick={() => {
             setAuthed(true);
-            // localStorage.setItem('auth', 'true');
           }}
         >
           Log in

src/components/Auth/index.js

@@ -1,3 +0,0 @@
-import Auth from './Auth';
-
-export default Auth;

src/components/Candidate/index.js

@@ -1,3 +0,0 @@
-import Candidate from './Candidate';
-
-export default Candidate;

src/components/Home/Home.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import Outstaffing from '../Outstaffing/Outstaffing';
 import Description from '../Description/Description';
-// import TagSelect from '../Select/TagSelect';
 
 export const candidatesList = [
   { id: 1, name: 'Frontend' },
@@ -12,7 +11,6 @@ const Home = () => {
   return (
     <>
       <Outstaffing />
-      {/* <TagSelect /> */}
       <Description arr={candidatesList} />
     </>
   );

src/components/Home/index.js

@@ -1,3 +0,0 @@
-import Home from './Home';
-
-export default Home;

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 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' },
-];
 
 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 handleBlockClick = (index) => {
-
+    if (selectedItems.find((item) => item.value === data[index])) {
-  const inputEl = useRef(null);
+      return;
-
+      // setSelectedItems(selectedItems.filter((item) => item.value !== data[index]));
-  const test = (index) => {
+    } else {
-    let arrr = options[index];
+      setSelectedItems([...selectedItems, { value: data[index], label: data[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 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} />
+              <OutstaffingBlock
-            </div>
+                image={design}
-          </div>
+                data={data}
-        </div>
+                header={'# Популярный стек'}
-      </section>
+                onClick={(index) => handleBlockClick(index)}
-      {/* <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>
             </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>
         ))}

src/components/Select/TagSelect.js

@@ -1,74 +1,37 @@
-// import React, { useState, useRef } from 'react';
+import React from 'react';
-// import Select from 'react-select';
+import Select from 'react-select';
-// import style from './TagSelect.module.css';
+import style from './TagSelect.module.css';
 
-// const options = [
+const TagSelect = ({ selectedItems, tagSubmit, options, setSelectedItems }) => {
-//   { value: 'Ruby on Rails', label: 'Ruby on Rails' },
+  return (
-//   { value: 'Nginx', label: 'Nginx' },
+    <>
-//   { value: 'Docker', label: 'Docker' },
+      <section className={style.search}>
-//   { value: 'PostgreSQL', label: 'PostgreSQL' },
+        <div className="container">
-//   { value: 'Vue.js', label: 'Vue.js' },
+          <div className="row">
-//   { value: 'Typescript', label: 'Typescript' },
+            <div className="col-12">
-//   { value: 'ReactJ', label: 'ReactJ' },
+              <h2 className={style.search__title}>Найти специалиста по навыкам</h2>
-// ];
+              <div className={style.search__box}>
+                <Select
+                  value={selectedItems}
+                  onChange={(value) => setSelectedItems(value)}
+                  isMulti
+                  name="tags"
+                  className={style.select}
+                  classNamePrefix={style.select}
+                  options={options.map((item) => {
+                    return { value: item, label: item };
+                  })}
+                />
+                <button onClick={tagSubmit} type="submit">
+                  Submit
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
 
-// const TagSelect = (selectArr) => {
+export default TagSelect;
-//   console.log('selectArr', selectArr);
-//   const [items, setItems] = useState([]);
-
-//   const inputEl = useRef(null);
-
-//   const test = () => {
-//     console.log(inputEl);
-//     inputEl.current.select.setValue(selectArr.selectArr);
-//   };
-
-//   const handleChange = (values) => {
-//     console.log('values', values);
-//     const selectItems = values.filter((value) => value);
-
-//     setItems(selectItems);
-//   };
-
-//   const handleSubmit = () => {
-//     const filterItems = JSON.stringify(items.map((item) => item.value));
-
-//     alert(`Back-end: ${filterItems}`);
-
-//     setItems([]);
-//   };
-
-//   return (
-//     <>
-//       <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={test} type="submit">
-//                   Submit
-//                 </button>
-//               </div>
-//             </div>
-//           </div>
-//         </div>
-//       </section>
-//     </>
-//   );
-// };
-
-// export default TagSelect;

src/pages/AuthPage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Auth from '../components/Auth';
+import Auth from '../components/Auth/Auth';
 
 const AuthPage = ({ setAuth }) => {
   return <Auth setAuthed={setAuth} />;

src/pages/CandidatePage.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Candidate from '../components/Candidate';
+import Candidate from '../components/Candidate/Candidate';
 
 const CandidatePage = () => <Candidate />;
 

src/pages/HomePage.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Home from '../components/Home';
+import Home from '../components/Home/Home';
 
 const HomePage = () => <Home />;