function ToggleStatus()

in dialogflow-cx/vpc-sc-demo/frontend/src/StatusPollToggle.js [26:129]
77 lines of code
14 McCabe index (conditional complexity)

function ToggleStatus(props) {
  const changeRequested = useRef(false);
  const updatePageNumber = useRef(false);
  const disabled = useRef(false);

  const {isFetching, refetch} = useQuery(
    props.endpoint,
    () =>
      axios
        .post(
          props.endpoint,
          {status: !props.state.status.current},
          {
            params: {
              project_id: props.dataModel.projectData.project_id.current,
              bucket: getBucket(props.dataModel),
              region: props.dataModel.projectData.region.current,
              webhook_name: props.dataModel.projectData.webhook_name.current,
              access_policy_title:
                props.dataModel.projectData.accessPolicyTitle.current,
            },
          }
        )
        .then(res => res.data),
    {
      enabled: false,
    }
  );

  useEffect(() => {
    const interval = setInterval(() => {
      props.state.timeSinceSliderClick.set(val => val + 1);
    }, 1000.0 / TIMER_SCALE);
    return () => clearInterval(interval);
  }, [props.state]);

  useEffect(() => {
    if (updatePageNumber.current) {
      const newPageNumber = getPage(
        props.dataModel.allStates,
        props.pageMapper
      ).page;
      props.pageNumber.set(newPageNumber);
      updatePageNumber.current = false;
    }
  });

  useEffect(() => {
    if (changeRequested.current) {
      props.state.status.set(!props.state.status.current);
      updatePageNumber.current = true;
      changeRequested.current = false;
      props.state.timeSinceSliderClick.set(0);
    }

    if (
      isFetching ||
      (props.blocked_by &&
        props.blocked_by.timeSinceSliderClick.current <
          props.blocked_by_timeout)
    ) {
      props.state.isUpdating.set(true);
    } else {
      if (props.state.timeSinceSliderClick.current > props.timeout - 1) {
        props.state.isUpdating.set(false);
      }
    }
  });

  function onChange() {
    changeRequested.current = true;
    refetch();
  }

  useEffect(() => {
    if (
      props.state.isUpdating.current ||
      props.state.blocked.current ||
      props.dataModel.projectData.project_id.current === null ||
      !props.dataModel.loggedIn.current ||
      props.dataModel.terraformLocked.current
    ) {
      disabled.current = true;
    } else {
      disabled.current = false;
    }
  });

  return (
    <>
      {
        <Switch
          onChange={onChange}
          checked={
            typeof props.state.status.current === 'boolean'
              ? props.state.status.current
              : false
          }
          style={{visibility: disabled.current ? 'hidden' : 'visible'}}
        />
      }
    </>
  );
}