From 1f7af46032e22c2401672f72b86c8dd902f46e58 Mon Sep 17 00:00:00 2001 From: kurpfish Date: Tue, 17 Aug 2021 12:38:12 +0300 Subject: [PATCH] filter fixes --- src/components/Outstaffing/Outstaffing.js | 24 +++++++++---------- .../Outstaffing/OutstaffingBlock.js | 20 ++++++++++------ src/components/Select/TagSelect.js | 8 ++++--- src/redux/outstaffingSlice.js | 7 +++++- 4 files changed, 36 insertions(+), 23 deletions(-) diff --git a/src/components/Outstaffing/Outstaffing.js b/src/components/Outstaffing/Outstaffing.js index 929e68ac..059b4622 100644 --- a/src/components/Outstaffing/Outstaffing.js +++ b/src/components/Outstaffing/Outstaffing.js @@ -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 ( <>
@@ -45,7 +45,7 @@ const Outstaffing = () => { img={front} header="Фронтенд" positionId='2' - isSelected={selectedPositionId==='2'} + isSelected={positionId==='2'} onSelect={id=>onSelectPosition(id)} /> @@ -55,7 +55,7 @@ const Outstaffing = () => { img={back} header="Бэкенд" positionId='1' - isSelected={selectedPositionId==='1'} + isSelected={positionId==='1'} onSelect={id=>onSelectPosition(id)} /> @@ -65,7 +65,7 @@ const Outstaffing = () => { img={design} header="Дизайн" positionId='5' - isSelected={selectedPositionId==='5'} + isSelected={positionId==='5'} onSelect={id=>onSelectPosition(id)} /> diff --git a/src/components/Outstaffing/OutstaffingBlock.js b/src/components/Outstaffing/OutstaffingBlock.js index a77be9b4..1c5df91d 100644 --- a/src/components/Outstaffing/OutstaffingBlock.js +++ b/src/components/Outstaffing/OutstaffingBlock.js @@ -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 ( -
onSelect(positionId)}> -
handlePositionClick({dispatch, positionId, isSelected})}> +
+
handlePositionClick({dispatch, positionId, isSelected, onSelect})}>

{header}

img
diff --git a/src/components/Select/TagSelect.js b/src/components/Select/TagSelect.js index db075124..33567040 100644 --- a/src/components/Select/TagSelect.js +++ b/src/components/Select/TagSelect.js @@ -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 }; })} /> -
diff --git a/src/redux/outstaffingSlice.js b/src/redux/outstaffingSlice.js index 44f9fdaf..4c147280 100644 --- a/src/redux/outstaffingSlice.js +++ b/src/redux/outstaffingSlice.js @@ -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;