export default function Home()

in gemini/autocal/frontend/app/page.tsx [42:130]
66 lines of code
12 McCabe index (conditional complexity)

export default function Home() {
  const { status, id, error, setStatus, screenshot } = Status();

  // Logged-in user
  const [user, _, userError] = useAuthState(firebaseAuth);

  // Listen for changes in the uploaded document's status
  useEffect(() => {
    async function updateStatus() {
      if (id && user?.email) {
        console.log(`Listening on ${user.email}-${id}`);
        const unsubscribe = onSnapshot(
          doc(clientFirestore, "state", `${user.email}-${id}`).withConverter(
            processedScreenshotConverter
          ),
          (doc) => {
            if (doc.data()) {
              setStatus(doc.data()!);
            }
          }
        );
        return () => unsubscribe();
      }
    }
    updateStatus();
  }, [id, setStatus, user?.email]);

  if (userError) {
    return (
      <Alert severity="error" sx={{ m: 2 }}>
        <AlertTitle>Authentication</AlertTitle>
        <>{userError}</>
      </Alert>
    );
  }

  return (
    <>
      <Box
        sx={{
          maxWidth: "md",
          width: "100%",
          display: "flex",
          flexDirection: "column",
          bgcolor: "background.paper",
          color: "foreground.paper",
          p: 4,
        }}>
        {/* <Typography variant="h2">Save Time</Typography> */}
        <Typography variant="body1">
          Upload your screenshot below and watch the magic of{" "}
          <Link
            href="https://cloud.google.com/vertex-ai/generative-ai/docs/gemini-v2"
            target="_blank"
            rel="noopener noreferrer">
            Gemini 2.0
          </Link>{" "}
          add it to your calendar! Powered by{" "}
          <Link
            href="https://firebase.google.com/docs/app-hosting"
            target="_blank"
            rel="noopener noreferrer">
            Firebase App Hosting
          </Link>
          .
        </Typography>
        {error && (
          <Alert severity="error" sx={{ m: 2 }}>
            <AlertTitle>Error</AlertTitle>
            <>{error}</>
          </Alert>
        )}
        {status && screenshot && !status.processed && <UploadProcessor />}
        {status && status.processed && !status.error && <EditCalendar />}
        {status && status.error && (
          <Alert severity="error" sx={{ m: 2 }}>
            <AlertTitle>Image Processing Error</AlertTitle>
            <>
              {status.message ||
                `An unknown error occurred processing this image`}
            </>
          </Alert>
        )}

        <UploadForm />
      </Box>
    </>
  );
}