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

filter fixes

Browse Source
This commit is contained in:
kurpfish 2021-08-17 12:38:12 +03:00
parent 3fe7db3414
commit 1f7af46032
4 changed files with 36 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,29 +1,29 @@
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { useSelector, useDispatch } from 'react-redux';
import style from './Outstaffing.module.css';
import OutstaffingBlock from './OutstaffingBlock';
import TagSelect from '../Select/TagSelect';
import { selectTags } from '../../redux/outstaffingSlice';
import { selectTags, getPositionId, setPositionId } from '../../redux/outstaffingSlice';
import front from '../../images/front_end.png';
import back from '../../images/back_end.png';
import design from '../../images/design.png';
const createSelectPositionHandler = ({ selectedPositionId, setSelectedPositionId }) => id => {
if(id===selectedPositionId) {
setSelectedPositionId(null)
const createSelectPositionHandler = ({ positionId, setPositionId, dispatch }) => id => {
if(id===positionId) {
dispatch(setPositionId(null));
} else {
setSelectedPositionId(id);
dispatch(setPositionId(id));
}
}
const Outstaffing = () => {
const [selectedPositionId, setSelectedPositionId] = useState(null);
const dispatch = useDispatch();
const positionId = useSelector(getPositionId)
const tagsArr = useSelector(selectTags);
const onSelectPosition = createSelectPositionHandler({ selectedPositionId, setSelectedPositionId });
const onSelectPosition = createSelectPositionHandler({ positionId, setPositionId, dispatch });
return (
<>
<section className={style.outstaffing}>
@ -45,7 +45,7 @@ const Outstaffing = () => {
img={front}
header="Фронтенд"
positionId='2'
isSelected={selectedPositionId==='2'}
isSelected={positionId==='2'}
onSelect={id=>onSelectPosition(id)}
/>
</div>
@ -55,7 +55,7 @@ const Outstaffing = () => {
img={back}
header="Бэкенд"
positionId='1'
isSelected={selectedPositionId==='1'}
isSelected={positionId==='1'}
onSelect={id=>onSelectPosition(id)}
/>
</div>
@ -65,7 +65,7 @@ const Outstaffing = () => {
img={design}
header="Дизайн"
positionId='5'
isSelected={selectedPositionId==='5'}
isSelected={positionId==='5'}
onSelect={id=>onSelectPosition(id)}
/>
</div>

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

@ -6,15 +6,21 @@ import style from './Outstaffing.module.css';
import { fetchProfile } from '../../server/server';
const handlePositionClick = ({dispatch, positionId, isSelected}) => {
const handlePositionClick = ({dispatch, positionId, isSelected, onSelect}) => {
if(isSelected) {
fetchProfile(`${process.env.REACT_APP_API_URL}/api/profile?limit=`, 4).then((profileArr) =>
dispatch(filteredCandidates(profileArr))
fetchProfile(`${process.env.REACT_APP_API_URL}/api/profile?limit=`, 4).then((profileArr) => {
dispatch(filteredCandidates(profileArr));
dispatch(selectedItems([]));
onSelect(positionId);
}
);
} else {
fetchItemsForId(`${process.env.REACT_APP_API_URL}/api/profile?position_id=`, positionId).then((el) =>
dispatch(filteredCandidates(el))
fetchItemsForId(`${process.env.REACT_APP_API_URL}/api/profile?position_id=`, positionId).then((el) => {
dispatch(filteredCandidates(el));
dispatch(selectedItems([]));
onSelect(positionId);
}
);
}
@ -45,8 +51,8 @@ const OutstaffingBlock = ({ dataTags = [], selected, img, header, positionId, is
});
return (
<div className={`${style.outstaffing__box} ${isSelected?style.outstaffing__box__selected:''}`} onClick={()=>onSelect(positionId)}>
<div className={`${style.outstaffing__box__img} ${selected ? style.border : ''}`} onClick={()=>handlePositionClick({dispatch, positionId, isSelected})}>
<div className={`${style.outstaffing__box} ${isSelected?style.outstaffing__box__selected:''}`} >
<div className={`${style.outstaffing__box__img} ${selected ? style.border : ''}`} onClick={()=>handlePositionClick({dispatch, positionId, isSelected, onSelect})}>
<h3>{header}</h3>
<img className={classes} src={img} alt="img" />
</div>

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

@ -3,7 +3,7 @@ import { useSelector, useDispatch } from 'react-redux';
import Select from 'react-select';
import { Loader } from '../Loader/Loader';
import style from './TagSelect.module.css';
import { selectedItems, selectItems, selectTags, filteredCandidates } from '../../redux/outstaffingSlice';
import { selectedItems, selectItems, selectTags, filteredCandidates, setPositionId } from '../../redux/outstaffingSlice';
import { fetchItemsForId } from '../../server/server';
import { selectIsLoading } from '../../redux/loaderSlice';
@ -15,7 +15,9 @@ const TagSelect = () => {
const tagsArr = useSelector(selectTags);
const handleSubmit = () => {
const handleSubmit = ({ dispatch }) => {
dispatch(setPositionId(null));
const filterItemsId = itemsArr.map((item) => item.id).join();
fetchItemsForId(`${process.env.REACT_APP_API_URL}/api/profile?skills=`, filterItemsId).then((el) =>
@ -44,7 +46,7 @@ const TagSelect = () => {
return { id: item.id, value: item.value, label: item.value };
})}
/>
<button onClick={handleSubmit} type="submit" className={style.search__submit}>
<button onClick={()=>handleSubmit({dispatch})} type="submit" className={style.search__submit}>
{ isLoading ? <Loader /> : 'Поиск' }
</button>
</div>

7
src/redux/outstaffingSlice.js
View File

@ -7,6 +7,7 @@ const initialState = {
selectedItems: [],
currentCandidate: {},
auth: false,
positionId: null,
};
export const outstaffingSlice = createSlice({
@ -31,10 +32,13 @@ export const outstaffingSlice = createSlice({
auth: (state, action) => {
state.auth = action.payload;
},
setPositionId: (state, action) => {
state.positionId = action.payload;
},
},
});
export const { tags, profiles, selectedItems, auth, currentCandidate, filteredCandidates } = outstaffingSlice.actions;
export const { tags, profiles, selectedItems, auth, currentCandidate, filteredCandidates, setPositionId } = outstaffingSlice.actions;
export const selectProfiles = (state) => state.outstaffing.profiles;
export const selectTags = (state) => state.outstaffing.tags;
@ -42,5 +46,6 @@ export const selectFilteredCandidates = (state) => state.outstaffing.filteredCan
export const selectItems = (state) => state.outstaffing.selectedItems;
export const selectCurrentCandidate = (state) => state.outstaffing.currentCandidate;
export const selectAuth = (state) => state.outstaffing.auth;
export const getPositionId = (state) => state.outstaffing.positionId;
export default outstaffingSlice.reducer;