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)}
+ />
-
-
-
-
-
- {/* */}
-
-
-
-
-
Найти специалиста по навыкам
-
-
-
-
-
+
handleBlockClick(index)}
+ />
+
>
);
};
diff --git a/src/components/Outstaffing/Outstaffing.module.css b/src/components/Outstaffing/Outstaffing.module.css
index 118c82e4..a636df95 100644
--- 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;
}
\ No newline at end of file
diff --git a/src/components/Outstaffing/OutstaffingBlock.js b/src/components/Outstaffing/OutstaffingBlock.js
index 31537f36..38ef1f04 100644
--- 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 (
{text}
{data.map((item, index) => (
- - onTest(index)}>
+
- onClick(index)}>
{index} {item}
))}
diff --git a/src/components/Select/TagSelect.js b/src/components/Select/TagSelect.js
index 0ec96345..2376ba1c 100644
--- 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 (
+ <>
+
+
+
+
+
Найти специалиста по навыкам
+
+
+
+
+
+
+ >
+ );
+};
-// 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 (
-// <>
-//
-//
-//
-//
-//
Найти специалиста по навыкам
-//
-//
-//
-//
-//
-//
-//
-//
-//
-// >
-// );
-// };
-
-// export default TagSelect;
+export default TagSelect;
diff --git a/src/pages/AuthPage.js b/src/pages/AuthPage.js
index f8269e5d..248ea6db 100644
--- 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 ;
diff --git a/src/pages/CandidatePage.js b/src/pages/CandidatePage.js
index 543c20ea..7348bf82 100644
--- 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 = () => ;
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index 7fe7ca59..66bfc266 100644
--- 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 = () => ;