function MiniDrawer()

in dialogflow-cx/vpc-sc-demo/frontend/src/Drawer.js [158:337]
166 lines of code
7 McCabe index (conditional complexity)

function MiniDrawer(props) {
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  useEffect(() => {
    const is_logged_in = getCookie(LOGIN_COOKIE_NAME) === 'true';
    props.dataModel.loggedIn.set(is_logged_in);
  });

  function resetStateOnPageChange(dataModel) {
    for (const [, state] of Object.entries(dataModel.allStates)) {
      state.status.set(false);
      state.isUpdating.set(false);
      state.blocked.set(false);
    }
  }
  props.dataModel.activePage = {current: null, set: null};
  [props.dataModel.activePage.current, props.dataModel.activePage.set] =
    useQueryState('page');

  props.dataModel.projectData.project_id = {current: null, set: null};
  [
    props.dataModel.projectData.project_id.current,
    props.dataModel.projectData.project_id.set,
  ] = useQueryState('project_id');
  props.dataModel.projectData.accessPolicyTitle = {current: null, set: null};
  [
    props.dataModel.projectData.accessPolicyTitle.current,
    props.dataModel.projectData.accessPolicyTitle.set,
  ] = useQueryState('access_policy_title');

  const queryParams = {};
  if (typeof props.dataModel.activePage.current === 'string') {
    queryParams['page'] = props.dataModel.activePage.current;
  }
  if (typeof props.dataModel.projectData.project_id.current === 'string') {
    queryParams['project_id'] = props.dataModel.projectData.project_id.current;
  }
  if (
    typeof props.dataModel.projectData.accessPolicyTitle.current === 'string'
  ) {
    queryParams['access_policy_title'] =
      props.dataModel.projectData.accessPolicyTitle.current;
  }
  props.dataModel.queryParams = queryParams;
  const queryStr = new URLSearchParams(props.dataModel.queryParams).toString();
  const logoutButton = (
    <DrawerButton
      open={open}
      text={'Logout'}
      icon={Logout}
      href={`http://${window.location.host}/logout?${queryStr}`}
      dataModel={props.dataModel}
      targetPage={null}
      activePage={props.dataModel.activePage.current}
    />
  );
  const HomeButton = (
    <DrawerButton
      open={open}
      text={'Home'}
      icon={Home}
      dataModel={props.dataModel}
      targetPage="home"
      onClick={() => {
        props.dataModel.activePage.set('home');
        resetStateOnPageChange(props.dataModel);
      }}
      activePage={props.dataModel.activePage.current}
    />
  );
  const TutorialButton = (
    <DrawerButton
      open={open}
      text={'Tutorial'}
      icon={School}
      dataModel={props.dataModel}
      targetPage="tutorial"
      onClick={() => {
        props.dataModel.activePage.set('tutorial');
        resetStateOnPageChange(props.dataModel);
      }}
      activePage={props.dataModel.activePage.current}
    />
  );
  const LiveDemoButton = (
    <DrawerButton
      open={open}
      text={'Launch Pad'}
      icon={RocketLaunchIcon}
      dataModel={props.dataModel}
      targetPage="liveDemo"
      onClick={() => {
        props.dataModel.activePage.set('liveDemo');
        resetStateOnPageChange(props.dataModel);
      }}
      activePage={props.dataModel.activePage.current}
    />
  );
  const PrivacyButton = (
    <DrawerButton
      open={open}
      text={'Privacy Policy'}
      icon={PolicyIcon}
      dataModel={props.dataModel}
      targetPage="privacyPolicy"
      onClick={() => {
        props.dataModel.activePage.set('privacyPolicy');
        resetStateOnPageChange(props.dataModel);
      }}
      activePage={props.dataModel.activePage.current}
    />
  );

  return (
    <div>
      <QueryRegisterSetActivePage dataModel={props.dataModel} />
      <SessionExpiredModal dataModel={props.dataModel} />
      <Box sx={{display: 'flex'}}>
        <CssBaseline />
        <AppBar position="fixed" open={open}>
          <Toolbar>
            <IconButton
              color="inherit"
              aria-label="open drawer"
              onClick={handleDrawerOpen}
              edge="start"
              sx={{
                marginRight: 5,
                ...(open && {display: 'none'}),
              }}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" noWrap component="div">
              {TITLE}
            </Typography>
          </Toolbar>
        </AppBar>
        <Drawer variant="permanent" open={open}>
          <DrawerHeader>
            <IconButton onClick={handleDrawerClose}>
              {theme.direction === 'rtl' ? (
                <ChevronRightIcon />
              ) : (
                <ChevronLeftIcon />
              )}
            </IconButton>
          </DrawerHeader>
          <Divider />
          <List>
            {HomeButton}
            {props.dataModel.loggedIn.current ? logoutButton : <></>}
          </List>
          <Divider />
          <List>
            {TutorialButton}
            {LiveDemoButton}
            {PrivacyButton}
          </List>
        </Drawer>
        <Box component="main" sx={{flexGrow: 1, p: 3}}>
          <DrawerHeader />
          <PageContent
            dataModel={props.dataModel}
            activePage={props.dataModel.activePage.current}
          />
        </Box>
      </Box>
    </div>
  );
}