apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add filter

Browse Source
This commit is contained in:
Hope87 2021-06-01 17:28:09 +03:00
parent bc5af60fac
commit 0c3d99f039
13 changed files with 77 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.css
View File

@ -1 +0,0 @@

1
src/components/Auth/Auth.js
View File

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

3
src/components/Auth/index.js
View File

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

3
src/components/Candidate/index.js
View File

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

2
src/components/Home/Home.js
View File

@ -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} />
</>
);

3
src/components/Home/index.js
View File

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

109
src/components/Outstaffing/Outstaffing.js
View File

@ -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} />
</div>
<div className="col-4">
<OutstaffingBlock image={back} data={data} header={'# Популярный стек'} onTest={test} />
</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}
<OutstaffingBlock
image={front}
data={data}
header={'# Популярный стек'}
onClick={(index) => handleBlockClick(index)}
/>
<button onClick={handleSubmit} type="submit">
Submit
</button>
<button onClick={handle} type="submit">
Submit
</button>
</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>
</section>
<TagSelect
options={data}
selectedItems={selectedItems}
tagSubmit={handleSubmit}
setSelectedItems={setSelectedItems}
/>
</>
);
};

1
src/components/Outstaffing/Outstaffing.module.css
View File

@ -52,4 +52,5 @@
line-height: 36px;
text-align: left;
list-style: none;
cursor: pointer;
}

4
src/components/Outstaffing/OutstaffingBlock.js
View File

@ -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>
))}

107
src/components/Select/TagSelect.js
View File

@ -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;

2
src/pages/AuthPage.js
View File

@ -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} />;

2
src/pages/CandidatePage.js
View File

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

2
src/pages/HomePage.js
View File

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