how to run separated version of selected_process and outdated_process?

Viewed 18

this is my code which I have to combined two history components in one. I am trying to combined both using if else loop and it runs as well. but in both icon it will show the all outdated processes.

 useEffect(() => {
    getVersions('');
  }, []);

  useEffect(() => {
    if (selected_process && selected_process.id) {
      if (selected_process.root_version) {
        getVersions(selected_process.root_version.id.toString());
      } else {
        getVersions(selected_process.id.toString());
      }
    }
  }, [props.selected_process]);

  const getVersions = (id: string) => {
    if (selected_process) {
      const url = `${props.location.search}?version=${id}`;
      props.searchOutdatedProcessesAction(url, (res: any) => {
        res.data.objects.length > 0 && setFetchedProcesses(res.data.objects);
      });
    }
    if (outdated_process) {
      const url = `?outdated=true&limit=0&order_by=-date_created`;
      props.searchOutdatedProcessesAction(url, (res: any) => {
        res.data.objects.length > 0 && setFetchedProcesses(res.data.objects);
      });
    }
  };

  const getOutDatedVersions = () => {
    return fetchedProcesses.filter((i: Process) => i.id != selected_process?.id);
  };

  const renderList = () => {
    if (fetchedProcesses) {
      return (
        <div className={styles.tableWrapper}>
          <Stack className={styles.table}>
            <DetailsList
              items={getOutDatedVersions(selected_process=true, outdated_process=true)}
              columns={columnsList}
              setKey="none"
              layoutMode={DetailsListLayoutMode.justified}
              isHeaderVisible={true}
              selectionMode={SelectionMode.none}
            />
          </Stack>
        </div>
      );
    }
    return <></>;
  };

*************************************************************************************************************************************************************************************************************************************************************************************************************+

1 Answers

I have merged separated useEffect function for both processes using if else loop. Just added in getVersion function with outdated processes and added return in getoutdatedversions function.

useEffect(() => {
    if (selected_process && selected_process.id) {
      if (selected_process.root_version) {
        getVersions(selected_process.root_version.id.toString());
      } else {
        getVersions(selected_process.id.toString());
      }
    } else {
      getVersions('');
    }
  }, [props.selected_process]);

  const getVersions = (id: string) => {
    if (selected_process) {
      const url = `${props.location.search}?version=${id}`;
      props.searchOutdatedProcessesAction(url, (res: any) => {
        res.data.objects.length > 0 && setFetchedProcesses(res.data.objects);
      });
    } else {
      const url = `?outdated=true&limit=0&order_by=-date_created`;
      props.searchOutdatedProcessesAction(url, (res: any) => {
        res.data.objects.length > 0 && setFetchedProcesses(res.data.objects);
      });
    }
  };

  const getOutDatedVersions = () => {
    if (selected_process) {
      return fetchedProcesses.filter((i: Process) => i.id != selected_process?.id);
    } else {
      return fetchedProcesses.filter(() => outdated_process);
    }
  };
Related