function GetPrincipal()

in dialogflow-cx/vpc-sc-demo/frontend/src/QueryPrincipal.js [29:128]
95 lines of code
11 McCabe index (conditional complexity)

function GetPrincipal(props) {
  const {data} = useQuery(props.endpoint, () =>
    axios.get(props.endpoint).then(res => res.data)
  );
  const tooltipTitle = useRef(null);
  const href = useRef(null);
  const loginEnabled = useRef(false);
  const principal = useRef(null);
  useEffect(() => {
    if (data) {
      props.dataModel.projectData.principal.set(data.principal);
      principal.current = data ? data.principal : '';
      const queryStr = new URLSearchParams(
        props.dataModel.queryParams
      ).toString();

      if (
        principal.current === '' ||
        principal.current === null ||
        principal.current === undefined
      ) {
        tooltipTitle.current = 'Login';
        href.current = `http://${window.location.host}/session?${queryStr}`;
        loginEnabled.current = true;
      } else {
        tooltipTitle.current = 'Logout';
        href.current = `http://${window.location.host}/logout?${queryStr}`;
        loginEnabled.current = false;
      }
    }
  });

  const shrink = !(principal.current === null || principal.current === '');

  const loginImage = (
    <Button
      disableElevation
      sx={{px: 0, py: 0}}
      variant="string"
      href={href.current}
      onClick={() => {
        props.dataModel.loginRedirect.set(true);
      }}
    >
      <Paper
        component="img"
        variant="string"
        src={GoogleLoginImage}
        sx={{width: 370, pl: 1.5}}
      />
    </Button>
  );

  const textField = (
    <div>
      <TextField
        sx={{mx: 2, width: 350, color: 'red'}}
        label={'Principal'}
        variant="outlined"
        value={principal.current === null ? '' : principal.current}
        placeholder={'Principal'}
        disabled={true}
        InputLabelProps={{shrink: shrink}}
        InputProps={{
          notched: !loginEnabled.current,
          style: {
            backgroundColor: loginEnabled.current ? '#ffcdd2' : 'transparent',
          },
          endAdornment: (
            <Tooltip
              title={tooltipTitle.current}
              disableInteractive
              arrow
              placement="top"
            >
              <InputAdornment position="end">
                <IconButton
                  edge="end"
                  variant="outlined"
                  href={href.current}
                  onClick={() => {
                    props.dataModel.loginRedirect.set(true);
                  }}
                >
                  {loginEnabled.current ? <Logout /> : <Login />}
                </IconButton>
              </InputAdornment>
            </Tooltip>
          ),
        }}
      />
    </div>
  );

  if (loginEnabled.current) {
    return loginImage;
  } else {
    return textField;
  }
}