fixed js code
This commit is contained in:
parent
e90414b6b9
commit
edd01168a5
@ -53,7 +53,7 @@ const Home = ({ getCandidate }) => {
|
||||
} else if (Number(profile.position_id) === 3) {
|
||||
skillsName = 'Marketer';
|
||||
img = design;
|
||||
header = 'Дизайн';
|
||||
header = 'Маркетинг';
|
||||
}
|
||||
|
||||
return {
|
||||
@ -78,7 +78,7 @@ const Home = ({ getCandidate }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Outstaffing selected={selectedTab} candidatesArray={candidatesArr} />
|
||||
<Outstaffing />
|
||||
<Description
|
||||
candidatesListArr={
|
||||
selectedTab ? candidatesArr.filter((item) => item.skillsName === selectedTab) : shorthandArray
|
||||
|
@ -1,29 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import style from './Outstaffing.module.css';
|
||||
import OutstaffingBlock from './OutstaffingBlock';
|
||||
import TagSelect from '../Select/TagSelect';
|
||||
import { selectTags } from '../../redux/outstaffingSlice';
|
||||
|
||||
const Outstaffing = ({ selected, candidatesArray }) => {
|
||||
const [selectedItems, setSelectedItems] = useState([]);
|
||||
import { selectTags, selectTab, selectCandidates } from '../../redux/outstaffingSlice';
|
||||
|
||||
const Outstaffing = () => {
|
||||
const tagsArr = useSelector(selectTags);
|
||||
|
||||
const handleBlockClick = (item) => {
|
||||
console.log('item ', item);
|
||||
if (!selectedItems.find((el) => item === el.value)) {
|
||||
setSelectedItems([...selectedItems, { value: item, label: item }]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
const filterItems = JSON.stringify(selectedItems.map((item) => item.value));
|
||||
|
||||
alert(`Back-end: ${filterItems}`);
|
||||
|
||||
setSelectedItems([]);
|
||||
};
|
||||
const selected = useSelector(selectTab);
|
||||
const candidatesArr = useSelector(selectCandidates);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -42,37 +27,29 @@ const Outstaffing = ({ selected, candidatesArray }) => {
|
||||
<div className="row">
|
||||
<div className="col-12 col-xl-4">
|
||||
<OutstaffingBlock
|
||||
data={candidatesArray.find((item) => item.skillsName === 'Frontend')}
|
||||
data={candidatesArr.find((item) => item.skillsName === 'Frontend')}
|
||||
dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_front')}
|
||||
onClick={(item) => handleBlockClick(item)}
|
||||
selected={selected === 'Frontend'}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 col-xl-4">
|
||||
<OutstaffingBlock
|
||||
data={candidatesArray.find((item) => item.skillsName === 'Backend')}
|
||||
data={candidatesArr.find((item) => item.skillsName === 'Backend')}
|
||||
dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_back')}
|
||||
onClick={(item) => handleBlockClick(item)}
|
||||
selected={selected === 'Backend'}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 col-xl-4">
|
||||
<OutstaffingBlock
|
||||
data={candidatesArray.find((item) => item.skillsName === 'Marketer')}
|
||||
data={candidatesArr.find((item) => item.skillsName === 'Marketer')}
|
||||
dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_design')}
|
||||
onClick={(item) => handleBlockClick(item)}
|
||||
selected={selected === 'Design'}
|
||||
selected={selected === 'Marketer'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<TagSelect
|
||||
options={tagsArr}
|
||||
selectedItems={selectedItems}
|
||||
tagSubmit={handleSubmit}
|
||||
setSelectedItems={setSelectedItems}
|
||||
/>
|
||||
<TagSelect />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -1,13 +1,21 @@
|
||||
import React from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { selectedTab } from '../../redux/outstaffingSlice';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { selectedTab, selectItems, selectedItems } from '../../redux/outstaffingSlice';
|
||||
import style from './Outstaffing.module.css';
|
||||
|
||||
const OutstaffingBlock = ({ dataTags = [], data = {}, onClick, selected }) => {
|
||||
const OutstaffingBlock = ({ dataTags = [], data = {}, selected }) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const itemsArr = useSelector(selectItems);
|
||||
|
||||
const { header, img, skillsName } = data;
|
||||
|
||||
const handleBlockClick = (item) => {
|
||||
if (!itemsArr.find((el) => item === el.value)) {
|
||||
dispatch(selectedItems([...itemsArr, { value: item, label: item }]));
|
||||
}
|
||||
};
|
||||
|
||||
let classes;
|
||||
|
||||
dataTags.forEach((el) => {
|
||||
@ -34,7 +42,7 @@ const OutstaffingBlock = ({ dataTags = [], data = {}, onClick, selected }) => {
|
||||
{dataTags && (
|
||||
<ul className={style.items}>
|
||||
{dataTags.map((item) => (
|
||||
<li key={item.id} onClick={() => onClick(item.value)}>
|
||||
<li key={item.id} onClick={() => handleBlockClick(item.value)}>
|
||||
{item.value}
|
||||
</li>
|
||||
))}
|
||||
|
@ -1,8 +1,24 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import Select from 'react-select';
|
||||
import style from './TagSelect.module.css';
|
||||
import { selectedItems, selectItems, selectTags } from '../../redux/outstaffingSlice';
|
||||
|
||||
const TagSelect = () => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const itemsArr = useSelector(selectItems);
|
||||
|
||||
const tagsArr = useSelector(selectTags);
|
||||
|
||||
const handleSubmit = () => {
|
||||
const filterItems = JSON.stringify(itemsArr.map((item) => item.value));
|
||||
|
||||
alert(`Back-end: ${filterItems}`);
|
||||
|
||||
dispatch(selectedItems([]));
|
||||
};
|
||||
|
||||
const TagSelect = ({ selectedItems, tagSubmit, options, setSelectedItems }) => {
|
||||
return (
|
||||
<>
|
||||
<section className={style.search}>
|
||||
@ -12,17 +28,17 @@ const TagSelect = ({ selectedItems, tagSubmit, options, setSelectedItems }) => {
|
||||
<h2 className={style.search__title}>Найти специалиста по навыкам</h2>
|
||||
<div className={style.search__box}>
|
||||
<Select
|
||||
value={selectedItems}
|
||||
onChange={(value) => setSelectedItems(value)}
|
||||
value={itemsArr}
|
||||
onChange={(value) => dispatch(selectedItems(value))}
|
||||
isMulti
|
||||
name="tags"
|
||||
className={style.select}
|
||||
classNamePrefix={style.select}
|
||||
options={options.flat().map((item) => {
|
||||
options={tagsArr.flat().map((item) => {
|
||||
return { value: item.value, label: item.value };
|
||||
})}
|
||||
/>
|
||||
<button onClick={tagSubmit} type="submit">
|
||||
<button onClick={handleSubmit} type="submit">
|
||||
Поиск
|
||||
</button>
|
||||
</div>
|
||||
|
@ -24,8 +24,8 @@ export const outstaffingSlice = createSlice({
|
||||
selectedTab: (state, action) => {
|
||||
state.selectedTab = action.payload;
|
||||
},
|
||||
selectedItem: (state, action) => {
|
||||
state.selectedItem = action.payload;
|
||||
selectedItems: (state, action) => {
|
||||
state.selectedItems = action.payload;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user