#138 fix on filtration of projects by id and active status

planner-front/src/components/MyTasksCompoments/MyTaskToolBar.js

@@ -18,9 +18,9 @@ export default function MyTaskToolBar({projects,onClickActiveTasks,activeTasksOn
       projectsFilter=   
       <MultipleSelect
       projects={projects}
-      onClose={onCloseFilterByProjects}
-      projectName={projectIdListForTaskSelect}
-      setProjectName={setProjectIdListForTaskSelect}
+      onCloseFilterByProjects={onCloseFilterByProjects}
+      projectIdListForTaskSelect={projectIdListForTaskSelect}
+      setProjectIdListForTaskSelect={setProjectIdListForTaskSelect}
       />
     }
 
@@ -40,7 +40,7 @@ export default function MyTaskToolBar({projects,onClickActiveTasks,activeTasksOn
            style={{
              backgroundColor: activeTasksOn === true ? "red" : "inherit",
            }}
-           onClick={onClickActiveTasks}
+           onClick={()=>onClickActiveTasks()}
           >
             Активные задачи
           </Button>

planner-front/src/components/UI/MultipleSelect/MultipleSelect.js

@@ -28,15 +28,15 @@ function getStyles(name, personName, theme) {
   };
 }
 
-export default function MultipleSelect({projects,projectName,onClose,setProjectName}) {
+export default function MultipleSelect({projects,onCloseFilterByProjects}) {
 
   const theme = useTheme();
-
+  const [listProjectIds, setListProjectIds ] = React.useState([])
   const handleChange = (event) => {
     const {
       target: { value },
     } = event;
-    setProjectName(
+    setListProjectIds(
       // On autofill we get a stringified value.
       typeof value === 'string' ? value.split(',') : value,
     );
@@ -55,18 +55,18 @@ export default function MultipleSelect({projects,projectName,onClose,setProjectN
           name='Choose Project'
           id="demo-multiple-name"
           multiple
-          value={projectName}
+          value={listProjectIds}
           onChange={handleChange}
           input={<OutlinedInput label="Name" />}
           MenuProps={MenuProps}
           sx={{color:'white' }}
-          onClose={(e)=>{onClose(projectName)}}
+          onClose={(e)=>{onCloseFilterByProjects(listProjectIds)}}
         >
           {projects?.map((project,index) => (
             <MenuItem
               key={index}
               value={project.id}
-              style={getStyles(project.title, projectName, theme)}
+              style={getStyles(project.title, listProjectIds, theme)}
             >
               {project.title}
             </MenuItem>

planner-front/src/containers/MyTasks/MyTasks.js

@@ -50,11 +50,24 @@ export default function EnhancedTable() {
    addTaskForm, setAddTaskForm,
   //  onClickActiveTasks,
   // activeTasksOn,
-    dispatch]);
+    dispatch
+  ]);
   // console.log('tasks ', tasks,  'projects ', projects,"recievedTasks ", recievedTasks )
 
 
 
+  useEffect(() => {
+    let filteredTasks = tasks;
+    if (activeTasksOn) {
+      filteredTasks = filteredTasks.filter(task=>task.accomplish==='opened' || task.accomplish==='progress')
+    }
+    if (projectIdListForTaskSelect.length>0) {
+      filteredTasks = filteredTasks.filter(task=>projectIdListForTaskSelect.includes(task.project?.id)) 
+    }
+    setRecievedTasks(filteredTasks)
+  }, [activeTasksOn, projectIdListForTaskSelect]);
+
+
   const handleRequestSort = ( property) => {
     const isAsc = orderBy === property && order === "asc";
 
@@ -186,21 +199,16 @@ export default function EnhancedTable() {
 
 
 
-  const onCloseFilterByProjects=(projectIdListForTaskSelect)=>{
-     let tasksFilteredByProject = tasks
-     if (projectIdListForTaskSelect.length>0) {
-       tasksFilteredByProject = tasks.filter(task=>projectIdListForTaskSelect.includes(task.project?.id)) 
-     }
-     console.log('tasksFilteredByProject ', tasksFilteredByProject)
-     setRecievedTasks(tasksFilteredByProject)
-    //  setFilterProjectTumbler(true)
+  const onCloseFilterByProjects=(listProjectIds)=>{
+    setProjectIdListForTaskSelect(listProjectIds)
    }
 
 
   const onClickActiveTasks= ()=>{
     console.log('active tasts before switched to ',  activeTasksOn)
 
-    setActiveTasksOn((prevState)=>{return !prevState})
+    // setActiveTasksOn((prevState)=>{return !prevState})
+    setActiveTasksOn(!activeTasksOn)
     console.log('active tasts after switch ',  activeTasksOn)
 
     if (activeTasksOn) {