filter fixes

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 => {
+const createSelectPositionHandler = ({ positionId, setPositionId, dispatch }) => id => {
-  if(id===selectedPositionId) {
+  if(id===positionId) {
-    setSelectedPositionId(null)
+    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>

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) =>
+    fetchProfile(`${process.env.REACT_APP_API_URL}/api/profile?limit=`, 4).then((profileArr) => {
-      dispatch(filteredCandidates(profileArr))
+      dispatch(filteredCandidates(profileArr));
+      dispatch(selectedItems([]));
+      onSelect(positionId);
+    }
     );
   } else {
-    fetchItemsForId(`${process.env.REACT_APP_API_URL}/api/profile?position_id=`, positionId).then((el) =>
+    fetchItemsForId(`${process.env.REACT_APP_API_URL}/api/profile?position_id=`, positionId).then((el) => {
-      dispatch(filteredCandidates(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} ${isSelected?style.outstaffing__box__selected:''}`} >
-      <div className={`${style.outstaffing__box__img} ${selected ? style.border : ''}`} onClick={()=>handlePositionClick({dispatch, positionId, isSelected})}>
+      <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>

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 };
                   })}
                 />
-                <button onClick={handleSubmit} type="submit" className={style.search__submit}>
+                <button onClick={()=>handleSubmit({dispatch})} type="submit" className={style.search__submit}>
                 { isLoading ? <Loader /> : 'Поиск' }
                 </button>
               </div>

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;