add filter

2021-06-01 17:28:09 +03:00 · 2021-06-01 17:28:09 +03:00 · 0c3d99f039
commit 0c3d99f039
parent bc5af60fac
13 changed files with 77 additions and 159 deletions
--- a/src/App.css
+++ b/src/App.css
@ -1 +0,0 @@
-
--- a/src/components/Auth/Auth.js
+++ b/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
--- a/src/components/Auth/index.js
+++ b/src/components/Auth/index.js
@ -1,3 +0,0 @@
-import Auth from './Auth';
-
-export default Auth;
--- a/src/components/Candidate/index.js
+++ b/src/components/Candidate/index.js
@ -1,3 +0,0 @@
-import Candidate from './Candidate';
-
-export default Candidate;
--- a/src/components/Home/Home.js
+++ b/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} />
    </>
  );
--- a/src/components/Home/index.js
+++ b/src/components/Home/index.js
@ -1,3 +0,0 @@
-import Home from './Home';
-
-export default Home;
--- a/src/components/Outstaffing/Outstaffing.js
+++ b/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}
+      />
    </>
  );
 };
--- a/src/components/Outstaffing/Outstaffing.module.css
+++ b/src/components/Outstaffing/Outstaffing.module.css
@ -52,4 +52,5 @@
    line-height: 36px;
    text-align: left;
    list-style: none;
+    cursor: pointer;
 }
--- a/src/components/Outstaffing/OutstaffingBlock.js
+++ b/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>
        ))}
--- a/src/components/Select/TagSelect.js
+++ b/src/components/Select/TagSelect.js
@ -1,74 +1,37 @@
-// import React, { useState, useRef } from 'react';
-// import Select from 'react-select';
-// import style from './TagSelect.module.css';
+import React from 'react';
+import Select from 'react-select';
+import style from './TagSelect.module.css';

-// 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 TagSelect = ({ selectedItems, tagSubmit, options, setSelectedItems }) => {
+  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
+                  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) => {
-//   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;
+export default TagSelect;
--- a/src/pages/AuthPage.js
+++ b/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} />;
--- a/src/pages/CandidatePage.js
+++ b/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 />;

--- a/src/pages/HomePage.js
+++ b/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 />;