export default function IndexPage()

in projects/inclusive_ai_a_chatgpt_plugin_and_dao_to_engage_marginalized_groups_in_ai/Inclusive.AI app/website/src/pages/index.tsx [32:189]

• 113 lines of code
• 18 McCabe index (conditional complexity)

export default function IndexPage() {
  useTracking({ page: 'Home' })

  const web3Auth = useWeb3Auth()
  const userData = useAppSelector(selectUserData)

  const [isIntroOpen, setIsIntroOpen] = useState(true)
  const [isSurveyOpen, setIsSurveyOpen] = useState(false)

  const valueQuestionId = 0

  const valueQuestion = useMemo(() => {
    if (
      !web3Auth ||
      web3Auth.isLoading ||
      web3Auth.isFetching ||
      !web3Auth.userPod
    )
      return
    // search value questions in userpod matching the id of `valueQuestionId`
    return web3Auth.userPod.valueQuestion[valueQuestionId]
  }, [web3Auth])

  if (
    !web3Auth.isReady ||
    (web3Auth.isReady && !web3Auth.isAuthenticated) ||
    !web3Auth ||
    !web3Auth.user ||
    !web3Auth.userPod ||
    !userData ||
    !userData.user ||
    !valueQuestion
  ) {
    return <LoadingScreen />
  }
  return (
    <>
      <Stack direction="row" spacing={4} alignItems="stretch" flex={1}>
        <Box
          position="relative"
          bgcolor="#f7f9fc"
          borderRadius={4}
          p={isIntroOpen ? 4 : 0}
          width={isIntroOpen ? '100%' : 'auto'}
          maxWidth={{ xs: '100%', md: 360 }}
          sx={{ transition: 'width 0.1s ease-in-out' }}
        >
          {isIntroOpen ? (
            <>
              <Stack
                direction="row"
                alignItems="center"
                justifyContent="space-between"
              >
                <Typography variant="h5" fontWeight="bold">
                  Welcome
                </Typography>
                <MenuTriggerButton onClick={() => setIsIntroOpen(false)}>
                  <KeyboardDoubleArrowLeftIcon />
                </MenuTriggerButton>
              </Stack>
              <Typography variant="body1" mt={1} fontSize="0.92rem">
                You are participating in a research study. We aim to build a
                tool that enables users to contribute input for shaping future
                AI rules. Please converse with ChatGPT in the middle panel and
                ask any questions you have about this AI topic, share any
                preferences and expectations that you have.
              </Typography>
              <Typography variant="body1" mt={2} fontSize="0.92rem">
                Once you finish your conversation with ChatGPT on this topic,
                please click the button on the left panel to fill out a survey.
                Thank you!
              </Typography>

              <Box mt={3}>
                <GotoLinkButton href="/discuss" sx={{ width: '100%' }}>
                  <Typography
                    variant="body1"
                    fontWeight="bold"
                    aria-label="Discuss with Others"
                  >
                    👥&nbsp;&nbsp;Discuss with Others
                  </Typography>
                </GotoLinkButton>
              </Box>

              <Box mt={2}>
                <ValueQuestionBox href="/vote">
                  <Typography
                    variant="body2"
                    color="#999"
                    aria-label="Vote on Topic"
                  >
                    ⚡&nbsp;&nbsp;Vote on Topic
                  </Typography>
                  <Typography variant="h6" fontWeight="bold">
                    {valueQuestion.topic}
                  </Typography>
                  {/* <Typography variant="subtitle2" pt={1} color="#555">
                    {valueQuestion.question}
                  </Typography> */}
                </ValueQuestionBox>
              </Box>
              {/* {userData.user.aiSurveyCompleted ? (
                <>
                  <Box mt={3}>
                    <GotoLinkButton href="/discuss" sx={{ width: '100%' }}>
                      <Typography variant="body1" fontWeight="bold">
                        👥&nbsp;&nbsp;Discuss with Others
                      </Typography>
                    </GotoLinkButton>
                  </Box>

                  <Box mt={2}>
                    <ValueQuestionBox href="/vote">
                      <Typography variant="body2" color="#999">
                        ⚡&nbsp;&nbsp;Vote on Topic
                      </Typography>
                      <Typography variant="h6" fontWeight="bold">
                        {valueQuestion.topic}
                      </Typography>
                    </ValueQuestionBox>
                  </Box>
                </>
              ) : (
                <>
                  <Box mt={5}>
                    <GotoLinkButtonForModal
                      sx={{ width: '100%' }}
                      onClick={() => setIsSurveyOpen(true)}
                    >
                      <Typography variant="body1" fontWeight="bold">
                        💬&nbsp;&nbsp;Survey
                      </Typography>
                    </GotoLinkButtonForModal>
                  </Box>
                  <Typography variant="body2" color="#999" pt={2}>
                    We recommend you to chat with AI thoroughly for at least
                    <strong> 15 minutes </strong> before completing the survey.
                  </Typography>
                </>
              )} */}
            </>
          ) : (
            <MenuTriggerButton
              position="relative"
              onClick={() => setIsIntroOpen(true)}
              sx={{ height: '100%', paddingBottom: '20px' }}
            >
              <KeyboardDoubleArrowRightIcon
                style={{
                  position: 'relative',
                  top: '50%',
                  transform: 'translateY(-50%)',
                }}
              />
            </MenuTriggerButton>
          )}