From 0c3d99f03994898acb7819c402b3cfca3bb9ce58 Mon Sep 17 00:00:00 2001 From: Hope87 Date: Tue, 1 Jun 2021 17:28:09 +0300 Subject: [PATCH] add filter --- src/App.css | 1 - src/components/Auth/Auth.js | 1 - src/components/Auth/index.js | 3 - src/components/Candidate/index.js | 3 - src/components/Home/Home.js | 2 - src/components/Home/index.js | 3 - src/components/Outstaffing/Outstaffing.js | 105 ++++++----------- .../Outstaffing/Outstaffing.module.css | 1 + .../Outstaffing/OutstaffingBlock.js | 4 +- src/components/Select/TagSelect.js | 107 ++++++------------ src/pages/AuthPage.js | 2 +- src/pages/CandidatePage.js | 2 +- src/pages/HomePage.js | 2 +- 13 files changed, 77 insertions(+), 159 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/components/Auth/index.js delete mode 100644 src/components/Candidate/index.js delete mode 100644 src/components/Home/index.js diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 8b137891..00000000 --- a/src/App.css +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/components/Auth/Auth.js b/src/components/Auth/Auth.js index 5a0b0db0..631802ee 100644 --- 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 diff --git a/src/components/Auth/index.js b/src/components/Auth/index.js deleted file mode 100644 index aa4087c1..00000000 --- a/src/components/Auth/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Auth from './Auth'; - -export default Auth; diff --git a/src/components/Candidate/index.js b/src/components/Candidate/index.js deleted file mode 100644 index fc37dd9f..00000000 --- a/src/components/Candidate/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Candidate from './Candidate'; - -export default Candidate; diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index bbbb9032..16ed1f32 100644 --- 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 ( <> - {/* */} ); diff --git a/src/components/Home/index.js b/src/components/Home/index.js deleted file mode 100644 index fbe3fed6..00000000 --- a/src/components/Home/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Home from './Home'; - -export default Home; diff --git a/src/components/Outstaffing/Outstaffing.js b/src/components/Outstaffing/Outstaffing.js index cf5b415a..5ea6ae56 100644 --- 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 = () => {
- + handleBlockClick(index)} + />
- + handleBlockClick(index)} + />
- -
-
- - - {/* */} -
-
-
-
-

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

-
- setSelectedItems(value)} + isMulti + name="tags" + className={style.select} + classNamePrefix={style.select} + options={options.map((item) => { + return { value: item, label: item }; + })} + /> + +
+
+
+
+
+ + ); +}; -// 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 ( -// <> -//
-//
-//
-//
-//

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

-//
-//