dbclick positionId reset

src/components/Outstaffing/Outstaffing.js

@@ -8,10 +8,22 @@ 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)
+  } else {
+    setSelectedPositionId(id);
+  }
+}
+
 const Outstaffing = () => {
   const [selectedPositionId, setSelectedPositionId] = useState(null);
   const tagsArr = useSelector(selectTags);
 
+  const onSelectPosition = createSelectPositionHandler({ selectedPositionId, setSelectedPositionId });
+
   return (
     <>
       <section className={style.outstaffing}>
@@ -34,7 +46,7 @@ const Outstaffing = () => {
                 header="Фронтенд"
                 positionId='2'
                 isSelected={selectedPositionId==='2'}
-                onSelect={id=>setSelectedPositionId(id)}
+                onSelect={id=>onSelectPosition(id)}
               />
             </div>
             <div className="col-12 col-xl-4">
@@ -44,7 +56,7 @@ const Outstaffing = () => {
                 header="Бэкенд"
                 positionId='1'
                 isSelected={selectedPositionId==='1'}
-                onSelect={id=>setSelectedPositionId(id)}
+                onSelect={id=>onSelectPosition(id)}
               />
             </div>
             <div className="col-12 col-xl-4">
@@ -54,7 +66,7 @@ const Outstaffing = () => {
                 header="Дизайн"
                 positionId='5'
                 isSelected={selectedPositionId==='5'}
-                onSelect={id=>setSelectedPositionId(id)}
+                onSelect={id=>onSelectPosition(id)}
               />
             </div>
           </div>

src/components/Outstaffing/OutstaffingBlock.js

@@ -4,11 +4,20 @@ import { selectItems, selectedItems, filteredCandidates } from '../../redux/outs
 import { fetchItemsForId } from '../../server/server';
 import style from './Outstaffing.module.css';
 
-const handlePositionClick = ({dispatch, positionId}) => {
+import { fetchProfile } from '../../server/server';
+
+const handlePositionClick = ({dispatch, positionId, isSelected}) => {
+
+  if(isSelected) {
+    fetchProfile(`${process.env.REACT_APP_API_URL}/api/profile?limit=`, 4).then((profileArr) =>
+      dispatch(filteredCandidates(profileArr))
+    );
+  } 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))
-  );
 };
 
 const OutstaffingBlock = ({ dataTags = [], selected, img, header, positionId, isSelected, onSelect }) => {
@@ -37,7 +46,7 @@ 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})}>
+      <div className={`${style.outstaffing__box__img} ${selected ? style.border : ''}`} onClick={()=>handlePositionClick({dispatch, positionId, isSelected})}>
         <h3>{header}</h3>
         <img className={classes} src={img} alt="img" />
       </div>