add filter
This commit is contained in:
parent
bc5af60fac
commit
0c3d99f039
@ -1 +0,0 @@
|
|||||||
|
|
@ -10,7 +10,6 @@ const Auth = ({ setAuthed }) => {
|
|||||||
className={style.auth__btn}
|
className={style.auth__btn}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setAuthed(true);
|
setAuthed(true);
|
||||||
// localStorage.setItem('auth', 'true');
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Log in
|
Log in
|
||||||
|
@ -1,3 +0,0 @@
|
|||||||
import Auth from './Auth';
|
|
||||||
|
|
||||||
export default Auth;
|
|
@ -1,3 +0,0 @@
|
|||||||
import Candidate from './Candidate';
|
|
||||||
|
|
||||||
export default Candidate;
|
|
@ -1,7 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Outstaffing from '../Outstaffing/Outstaffing';
|
import Outstaffing from '../Outstaffing/Outstaffing';
|
||||||
import Description from '../Description/Description';
|
import Description from '../Description/Description';
|
||||||
// import TagSelect from '../Select/TagSelect';
|
|
||||||
|
|
||||||
export const candidatesList = [
|
export const candidatesList = [
|
||||||
{ id: 1, name: 'Frontend' },
|
{ id: 1, name: 'Frontend' },
|
||||||
@ -12,7 +11,6 @@ const Home = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Outstaffing />
|
<Outstaffing />
|
||||||
{/* <TagSelect /> */}
|
|
||||||
<Description arr={candidatesList} />
|
<Description arr={candidatesList} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -1,3 +0,0 @@
|
|||||||
import Home from './Home';
|
|
||||||
|
|
||||||
export default Home;
|
|
@ -1,61 +1,35 @@
|
|||||||
import React, { useState, useEffect, useRef } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import style from './Outstaffing.module.css';
|
import style from './Outstaffing.module.css';
|
||||||
import front from '../../images/front_end.png';
|
import front from '../../images/front_end.png';
|
||||||
import back from '../../images/back_end.png';
|
import back from '../../images/back_end.png';
|
||||||
import design from '../../images/design.png';
|
import design from '../../images/design.png';
|
||||||
import OutstaffingBlock from './OutstaffingBlock';
|
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 Outstaffing = () => {
|
||||||
const [data, setData] = useState([]);
|
const [data, setData] = useState([]);
|
||||||
const [arr, setArr] = useState([]);
|
const [selectedItems, setSelectedItems] = useState([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const tempData = ['Ruby on Rails', 'Nginx', 'Docker', 'PostgreSQL', 'Vue.js', 'Typescript', 'ReactJS'];
|
const tempData = ['Ruby on Rails', 'Nginx', 'Docker', 'PostgreSQL', 'Vue.js', 'Typescript', 'ReactJS'];
|
||||||
setData(tempData);
|
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 handleSubmit = () => {
|
||||||
const filterItems = JSON.stringify(items.map((item) => item.value));
|
const filterItems = JSON.stringify(selectedItems.map((item) => item.value));
|
||||||
|
|
||||||
alert(`Back-end: ${filterItems}`);
|
alert(`Back-end: ${filterItems}`);
|
||||||
|
|
||||||
setItems([]);
|
setSelectedItems([]);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -74,45 +48,38 @@ const Outstaffing = () => {
|
|||||||
|
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-4">
|
<div className="col-4">
|
||||||
<OutstaffingBlock image={front} data={data} header={'# Популярный стек'} onTest={test} />
|
<OutstaffingBlock
|
||||||
</div>
|
image={front}
|
||||||
<div className="col-4">
|
data={data}
|
||||||
<OutstaffingBlock image={back} data={data} header={'# Популярный стек'} onTest={test} />
|
header={'# Популярный стек'}
|
||||||
</div>
|
onClick={(index) => handleBlockClick(index)}
|
||||||
<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>
|
</div>
|
||||||
|
<div className="col-4">
|
||||||
|
<OutstaffingBlock
|
||||||
|
image={back}
|
||||||
|
data={data}
|
||||||
|
header={'# Популярный стек'}
|
||||||
|
onClick={(index) => handleBlockClick(index)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-4">
|
||||||
|
<OutstaffingBlock
|
||||||
|
image={design}
|
||||||
|
data={data}
|
||||||
|
header={'# Популярный стек'}
|
||||||
|
onClick={(index) => handleBlockClick(index)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<TagSelect
|
||||||
|
options={data}
|
||||||
|
selectedItems={selectedItems}
|
||||||
|
tagSubmit={handleSubmit}
|
||||||
|
setSelectedItems={setSelectedItems}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -52,4 +52,5 @@
|
|||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
@ -1,13 +1,13 @@
|
|||||||
import style from './Outstaffing.module.css';
|
import style from './Outstaffing.module.css';
|
||||||
|
|
||||||
const OutstaffingBlock = ({ text, image, data, onTest }) => {
|
const OutstaffingBlock = ({ text, image, data, onClick }) => {
|
||||||
return (
|
return (
|
||||||
<div className={style.outstaffing__box}>
|
<div className={style.outstaffing__box}>
|
||||||
<img src={image} alt="img" />
|
<img src={image} alt="img" />
|
||||||
<p>{text}</p>
|
<p>{text}</p>
|
||||||
<ul className={style.items}>
|
<ul className={style.items}>
|
||||||
{data.map((item, index) => (
|
{data.map((item, index) => (
|
||||||
<li key={index.toString()} onClick={() => onTest(index)}>
|
<li key={index.toString()} onClick={() => onClick(index)}>
|
||||||
{index} {item}
|
{index} {item}
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
|
@ -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;
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Auth from '../components/Auth';
|
import Auth from '../components/Auth/Auth';
|
||||||
|
|
||||||
const AuthPage = ({ setAuth }) => {
|
const AuthPage = ({ setAuth }) => {
|
||||||
return <Auth setAuthed={setAuth} />;
|
return <Auth setAuthed={setAuth} />;
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Candidate from '../components/Candidate';
|
import Candidate from '../components/Candidate/Candidate';
|
||||||
|
|
||||||
const CandidatePage = () => <Candidate />;
|
const CandidatePage = () => <Candidate />;
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Home from '../components/Home';
|
import Home from '../components/Home/Home';
|
||||||
|
|
||||||
const HomePage = () => <Home />;
|
const HomePage = () => <Home />;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user