function App()

in src/frontend/src/App.tsx [32:132]
90 lines of code
2 McCabe index (conditional complexity)

function App() {
  const [showNotification, setShowNotification] = useState(false);
  const [notifContent, setNotifContent] = useState("");
  const [nofifType, setNotifType] = useState<AlertColor>("error");
  const [accessToken, setAccessToken] = useState<string | null>(null);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [clientId, setClientId] = useState("");
  const [jobsRefresh, setJobsRefresh] = useState(false);

  useEffect(() => {
    const fetchClientId = async () => {
      const response = await axios.get(`${BACKEND_HOST}/clientid`);
      setClientId(response.data);
    };
    fetchClientId();
  }, []);

  function showSnackbar(message: string, notificationType: AlertColor) {
    setNotifContent(message);
    setNotifType(notificationType);
    setShowNotification(true);
  }

  const handleCreateTestClick = () => {
    setDrawerOpen(true);
  };

  return (
    <>
      <globalContext.Provider value={{ accessToken: accessToken }}>
        <Snackbar
          open={showNotification}
          autoHideDuration={6000}
          anchorOrigin={{ vertical: "top", horizontal: "right" }}
          onClose={() => setShowNotification(false)}
        >
          <Alert
            onClose={() => {
              setShowNotification(false);
            }}
            severity={nofifType}
            sx={{ width: "100%" }}
          >
            {notifContent}
          </Alert>
        </Snackbar>
        <ResponsiveAppBar
          toolName={"AlphaFold Portal"}
          clientId={clientId}
          // onSignIn={(idToken: string, userInfo: string, accessToken: string) => {
          onSignIn={(accessToken: string) => {
            setAccessToken(accessToken);
          }}
          onError={(err: any) => showSnackbar(JSON.stringify(err), "error")}
        />
        <Box sx={{ margin: "20px" }}>
          <h2>Dashboard</h2>
          <JobResults refresh={jobsRefresh} />

          <Button
            variant="contained"
            sx={{ marginTop: "20px", justifyContent: "space-between" }}
            onClick={handleCreateTestClick}
          >
            <span>New Protein Folding</span>
          </Button>
          <Button
            variant="contained"
            sx={{
              marginTop: "20px",
              marginLeft: "15px",
              justifyContent: "space-between",
            }}
            onClick={() => location.reload()}
          >
            <span>Refresh</span>
          </Button>
          <Drawer
            anchor={"right"}
            open={drawerOpen}
            variant="persistent"
            onClose={() => setDrawerOpen(false)}
          >
            <NewJob
              createMode={true}
              onClose={(refresh: boolean) => {
                setDrawerOpen(false);
                if (refresh) {
                  setJobsRefresh(!jobsRefresh);
                  showSnackbar("Folding is in progress...", "success");
                }
                window.scrollTo(0, 0);
              }}
              onError={setShowNotification}
            />
          </Drawer>
        </Box>
      </globalContext.Provider>
    </>
  );
}