@chakra-ui/core#Text JavaScript Examples

NotFoundPage = () => (
  <Layout>
    <SEO title="404: Not found" />
    <Box
      as="section"
      fontSize={[16, 24]}
      maxWidth={800}
      paddingX={["1rem", "4.5rem"]}
      paddingY={8}
    >
      <Heading>NOT FOUND</Heading>
      <Text>
        You just hit a route that doesn&#39;t exist... the sadness.
      </Text>
    </Box>
  </Layout>
)

SumStat = ({ points, prefix = "", text }) => {
  const [sum, setSum] = useState(0)
  const currentDate = useDataDate(state => state.currentDate)

  useEffect(() => {
    if (!currentDate) return
    const sum = points.reduce((acc, cur) => {
      return acc + parseFloat(cur.properties[prefix + currentDate] || 0)
    }, 0)
    setSum(sum)
  }, [currentDate, prefix, points])

  return (
    <>
      <Text fontSize={["1.5rem", "2rem", "1.5rem", "2rem"]} lineHeight={1.25} fontWeight={700} color="inherit">
        { `${sum ? formatThousand(sum) : "—"} ` } 
      </Text>
      <Text fontSize="md" color="gray.600">
        {text}
      </Text>
    </>
  )
}

IntroParagraph = ({ points }) => {
  const currentDate = useDataDate(state => state.currentDate)

  const sum = points.length ? points.reduce((acc, cur) => {
    return acc + (cur.properties[currentDate] || 0)
  }, 0) : null

  return (
    <Text color="gray.600" mb="1.25rem">

      {`The first case of the new Coronavirus COVID-19 was recorded on 31 December in Wuhan, China (`}
      <Link alt="WHO — Novel coronavirus (COVID-19)" href="https://www.who.int/emergencies/diseases/novel-coronavirus-2019" color="#00AFAA">
        { "WHO" }
      </Link>
      { `). Since then,${sum ? " " + formatThousand(sum) : ""} confirmed cases have been recorded worldwide. This visualization shows the near real-time status based on data from the ` }
      <Link alt="Center for Systems Science and Engineering (CSSE)" href="https://github.com/CSSEGISandData/2019-nCoV" color="#00AFAA">
        { "Center for Systems Science and Engineering (CSSE)" }
      </Link>
      { ` at Johns Hopkins University and ` }
      <Link alt="DXY" href="https://ncov.dxy.cn/ncovh5/view/pneumonia?scene=2&clicktime=1579582238&enterid=1579582238&from=singlemessage&isappinstalled=0" color="#00AFAA">
        { "DXY." }
      </Link>
      { ` Data currently available on the following zoom levels: City level - US, Canada and Australia; Province level - China; Country level - other countries.` }
      { ` To read more about this map, see ` }
      <Link
        color="#00AFAA"
        alt="How we built an interactive map displaying the COVID-19 outbreak"
        href="https://developer.here.com/blog/how-we-built-an-interactive-map-displaying-the-covid-19-outbreak"
      >
        { "How we built an interactive map displaying the COVID-19 outbreak" }
      </Link>
      { "." }
    </Text>
  )
}

AboutContent = () => {
  return (
    <>
      <Heading fontSize={["1.5rem", "2rem"]} lineHeight={1.125} mb="1.25rem">
        { "About" }
      </Heading>

      <Text>
        { `Using HERE location services (HERE Vector Map Tiles API and HERE Data Hub APIs) and ` }
        <Link alt="Center for Systems Science and Engineering (CSSE)" href="https://github.com/CSSEGISandData/COVID-19" color="#00AFAA">
          { "data provided by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University"}
        </Link>
        { `, and ` }
        <Link alt="DXY" href="https://ncov.dxy.cn/ncovh5/view/pneumonia?scene=2&clicktime=1579582238&enterid=1579582238&from=singlemessage&isappinstalled=0" color="#00AFAA">
          { "DXY" }
        </Link>
        { `, we display the spread of Coronavirus COVID-19 globally. For questions regarding the global data, please get in touch with ` }
        <Link alt="Center for Systems Science and Engineering (CSSE)" href="https://github.com/CSSEGISandData/COVID-19" color="#00AFAA">
          { "JHU CSSE"}
        </Link>
        { `. For questions regarding China-specific data, please contact ` }
        <Link alt="DXY" href="https://ncov.dxy.cn/ncovh5/view/pneumonia?scene=2&clicktime=1579582238&enterid=1579582238&from=singlemessage&isappinstalled=0" color="#00AFAA">
          { "DXY" }
        </Link>
        { `.` }
      </Text>

      <Heading fontSize={["1.25rem", "1.5rem"]} lineHeight={1.125} mt="1.75rem" mb="1.25rem">
        { "About HERE Technologies" }
      </Heading>
      <Text>
        { "HERE, a location data and technology platform, moves people, businesses and cities forward by harnessing the power of location. By leveraging our open platform, we empower our customers to achieve better outcomes – from helping a city manage its infrastructure or a business optimize its assets to guiding drivers to their destination safely. To learn more about HERE, please visit " }
        <Link href="https://www.here.com/" target="_blank" rel="noopener noreferrer" color="#00AFAA">{"www.here.com"}</Link>
        { " and " }
        <Link href="https://360.here.com/" target="_blank" rel="noopener noreferrer" color="#00AFAA">{"360.here.com"}</Link>
      </Text>
    </>
  )
}

SidebarLink = ({ href, children, icon }) => (
  <NavLink href={href}>
    <Flex align="center">
      <Box as={icon} mr={3} w={6} />
      <Text fontSize="sm" fontWeight="medium">
        {children}
      </Text>
    </Flex>
  </NavLink>
)

render() {

    return (  <Layout>
      <SEO title="Home" />
      <Section
        backgroundColor={"purple"}
        paddingY={[1,8]}
      >
        <Flex>
          <Box {...headerContainerProps}>
            <Text {...headerStyling}>We're making some changes, you will be redirected to our sister website</Text>
            <Link href="https://covidtechsupport.com/">
              <Button {...buttonStyling}>Click here if not redirected</Button>
            </Link>
          </Box>
        </Flex>
      </Section>
    </Layout>)
  }

export default function Home() {
  const color = useColorModeValue("red.500", "white")
  return (
    <Stack
      as="main"
      align="center"
    >
      <Flex
        flexDirection="column"
        maxWidth="700px"
      >
        <Flex
          direction="row"
          w="700px"
          pt={4}
          justify="space-between"
        >
          <DarkModeSwitch />
          <Text color={color}>Home</Text>
        </Flex>
        <Heading
          as="h1"
          size="2xl"
          fontWeight="bold"
        >
          Hello, World!
        </Heading>
        <Text my={4}>Hello, again</Text>
      </Flex>
    </Stack>
  )
}

function NavBar() {
  return (
    <Flex
      as="nav"
      align="center"
      justify="space-between"
      wrap="wrap"
      padding="6"
      bg="gray.800"
      color="white"
    >
      <Text
        fontFamily="mono"
        letterSpacing="2px"
        fontWeight="bold"
        fontSize="lg"
      >
        ¡SPACE·R0CKETS!
      </Text>
    </Flex>
  );
}

function PageLink({ url, children, ...rest }) {
  return (
    <Link as={BrowserLink} to={url} {...rest}>
      <Flex
        justifyContent="space-between"
        p="6"
        boxShadow="md"
        borderWidth="1px"
        rounded="lg"
      >
        <Text fontSize="lg">{children}</Text>
        <Box as={ArrowRight} />
      </Flex>
    </Link>
  );
}

function RecentLaunches({ launches }) {
  if (!launches?.length) {
    return null;
  }
  return (
    <Stack my="8" spacing="3">
      <Text fontSize="xl" fontWeight="bold">
        Last launches
      </Text>
      <SimpleGrid minChildWidth="350px" spacing="4">
        {launches.map((launch) => (
          <LaunchItem launch={launch} key={launch.flight_number} />
        ))}
      </SimpleGrid>
    </Stack>
  );
}

export default function Launch() {
  let { launchId } = useParams();
  const { data: launch, error } = useSpaceX(`/launches/${launchId}`);

  if (error) return <Error />;
  if (!launch) {
    return (
      <Flex justifyContent="center" alignItems="center" minHeight="50vh">
        <Spinner size="lg" />
      </Flex>
    );
  }

  return (
    <div>
      <Breadcrumbs
        items={[
          { label: "Home", to: "/" },
          { label: "Launches", to: ".." },
          { label: `#${launch.flight_number}` },
        ]}
      />
      <Header launch={launch} />
      <Box m={[3, 6]}>
        <TimeAndLocation launch={launch} />
        <RocketInfo launch={launch} />
        <Text color="gray.700" fontSize={["md", null, "lg"]} my="8">
          {launch.details}
        </Text>
        <Video launch={launch} />
        <Gallery images={launch.links.flickr_images} />
      </Box>
    </div>
  );
}

Search = () => {
  return(
    <>
      <Box
        display={["block", null, "none"]}
        position="fixed"
        top="0"
        left="0"
        right="0"
        height="0.25rem"
        bg="#00AFAA"
      />
      <Flex
        position="fixed"
        flexWrap="wrap"
        top={["1.5rem", "1.5rem", "2.5rem"]}
        right="0"
        zIndex={10}
        width="100%"
        maxWidth={["100%", null, "28rem"]}
        pr={["1.25rem", null, "2.5rem"]}
        pl={["1.25rem", null, 0]}
        alignItems="center"
      >

        <Box width="100%" display={["block", null, "none"]}>
          <Heading fontSize={["1.5rem", "2rem"]} lineHeight={1.125} mb="1.25rem">
            <Text mr="0.75rem" as="span">
              { "Tracking Coronavirus" } <br/>
              { "COVID-19" }
            </Text>
          </Heading>
        </Box>

        <Box flex="1 1 auto">
          <Combobox />
        </Box>
        <AboutModal />
      </Flex>
    </>
  )
}

export default function LaunchPad() {
  let { launchPadId } = useParams();
  const { data: launchPad, error } = useSpaceX(`/launchpads/${launchPadId}`);

  const { data: launches } = useSpaceX(launchPad ? "/launches/past" : null, {
    limit: 3,
    order: "desc",
    sort: "launch_date_utc",
    site_id: launchPad?.site_id,
  });

  if (error) return <Error />;
  if (!launchPad) {
    return (
      <Flex justifyContent="center" alignItems="center" minHeight="50vh">
        <Spinner size="lg" />
      </Flex>
    );
  }

  return (
    <div>
      <Breadcrumbs
        items={[
          { label: "Home", to: "/" },
          { label: "Launch Pads", to: ".." },
          { label: launchPad.name },
        ]}
      />
      <Header launchPad={launchPad} />
      <Box m={[3, 6]}>
        <LocationAndVehicles launchPad={launchPad} />
        <Text color="gray.700" fontSize={["md", null, "lg"]} my="8">
          {launchPad.details}
        </Text>
        <Map location={launchPad.location} />
        <RecentLaunches launches={launches} />
      </Box>
    </div>
  );
}

function LaunchPadItem({ launchPad }) {
  return (
    <Box
      as={Link}
      to={`/launch-pads/${launchPad.site_id}`}
      boxShadow="md"
      borderWidth="1px"
      rounded="lg"
      overflow="hidden"
      position="relative"
    >
      <Box p="6">
        <Box d="flex" alignItems="baseline">
          {launchPad.status === "active" ? (
            <Badge px="2" variant="solid" variantColor="green">
              Active
            </Badge>
          ) : (
            <Badge px="2" variant="solid" variantColor="red">
              Retired
            </Badge>
          )}
          <Box
            color="gray.500"
            fontWeight="semibold"
            letterSpacing="wide"
            fontSize="xs"
            textTransform="uppercase"
            ml="2"
          >
            {launchPad.attempted_launches} attempted &bull;{" "}
            {launchPad.successful_launches} succeeded
          </Box>
        </Box>

        <Box
          mt="1"
          fontWeight="semibold"
          as="h4"
          lineHeight="tight"
          isTruncated
        >
          {launchPad.name}
        </Box>
        <Text color="gray.500" fontSize="sm">
          {launchPad.vehicles_launched.join(", ")}
        </Text>
      </Box>
    </Box>
  );
}

render() {
    const post = this.props.data.markdownRemark
    const siteTitle = this.props.data.site.siteMetadata.title
    const { previous, next } = this.props.pageContext

    return (
      <>
        <Box
          bg="white"
          boxShadow="0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
        >
          <Box px={{ md: "2rem" }}>
            <Box
              display="flex"
              flexWrap="wrap"
              justifyContent="space-between"
              alignItems="center"
              px="1rem"
            >
              <Box py={5}>
                <Heading as="h2" size="lg">
                  About Opensource.Builders
                </Heading>
                <Text fontSize="md" fontWeight={400} color="#939fae" mt={1}>
                  On a mission to find great open-source software
                </Text>
              </Box>
            </Box>
          </Box>
        </Box>
        <SEO
          title={post.frontmatter.title}
          description={post.frontmatter.description || post.excerpt}
        />
        <Box
          display="flex"
          flexWrap="wrap"
          ml="auto"
          mr="auto"
          maxWidth="60rem"
          py={4}
          px={2}
          // p="2.625rem 1.3125rem"
        >
          <Box
            width="100%"
            boxShadow="0px 1px 4px rgba(0, 0, 0, 0.16)"
            borderRadius="3px"
            bg="white"
          >
            <article>
              <BlogText dangerouslySetInnerHTML={{ __html: post.html }} />
              <footer>
                <Bio />
              </footer>
            </article>
          </Box>
        </Box>
      </>
    )
  }

export function LoadMore({ alts }) {
  const [show, setShow] = useState(false)

  const fiveAlts = alts.slice(0, 5)
  const restAlts = alts.slice(5, alts.length)

  return (
    <>
      {fiveAlts.map((alt) => (
        <AltListItem alt={alt} />
      ))}
      {show && restAlts.map((alt) => <AltListItem alt={alt} />)}
      <Box cursor="pointer" width="100%" display="flex" justifyContent="center">
        <Text
          display="flex"
          alignItems="center"
          bg="white"
          pl={3}
          pr={2}
          py={1}
          letterSpacing="wide"
          boxShadow="sm"
          borderRadius={3}
          fontWeight={600}
          color="gray.500"
          textTransform="uppercase"
          fontSize="xs"
          mt={2}
          onClick={() => setShow(!show)}
        >
          {show ? (
            <>
              Hide
              <Icon ml={1} size={4} name="chevron-up" />
            </>
          ) : (
            <>
              {alts.length - 5} More Alternative{alts.length - 5 !== 1 && "s"}
              <Icon ml={1} size={4} name="chevron-down" />
            </>
          )}
        </Text>
      </Box>
    </>
  )
}

UpdatedBadge = ({ update }) => {
  const [timeDifference, setTimeDifference] = useState(null)
  
  useEffect(() => {
    const days = dayjs(dayjs()).diff(dayjs(update), "day")
    const hours = dayjs(dayjs()).diff(dayjs(update), "hour")
    const minutes = dayjs(dayjs()).diff(dayjs(update), "minute")

    const getString = (minutes, hours, days) => {
      return days
        ? days + (days > 1 ? " days" : " day")
        : hours
          ? hours + (hours > 1 ? " hours" : " hour")
          : minutes
            ? minutes + (minutes > 1 ? " minutes" : " minute")
            : null
    }

    // First time
    setTimeDifference(getString(minutes, hours, days))
    
    // Keep checking (every 5 minutes)
    const int = setInterval(() => {
      const days = dayjs(dayjs()).diff(dayjs(update), "day")
      const hours = dayjs(dayjs()).diff(dayjs(update), "hour")
      const minutes = dayjs(dayjs()).diff(dayjs(update), "minute")
      setTimeDifference(getString(minutes, hours, days))
      console.log("This is happening")
    }, 5 * 60 * 1000)

    // Cancel interval on unmount
    return () => {
      clearInterval(int)
    }
  }, [update])

  return (
    <Badge bg="#FBDFCF" color="#ec610e" display="inline-flex" alignItems="center">
      <BlinkingDot />
      <Text as="span" color="orange.700" fontWeight={600} textTransform="lowercase" fontSize="sm">
        { timeDifference ? `Last updated ${timeDifference} ago` : "Last updated just now" }
      </Text>
    </Badge>
  )
}

export function LaunchItem({ launch }) {
  return (
    <Box
      as={Link}
      to={`/launches/${launch.flight_number.toString()}`}
      boxShadow="md"
      borderWidth="1px"
      rounded="lg"
      overflow="hidden"
      position="relative"
    >
      <Image
        src={
          launch.links.flickr_images[0]?.replace("_o.jpg", "_z.jpg") ??
          launch.links.mission_patch_small
        }
        alt={`${launch.mission_name} launch`}
        height={["200px", null, "300px"]}
        width="100%"
        objectFit="cover"
        objectPosition="bottom"
      />

      <Image
        position="absolute"
        top="5"
        right="5"
        src={launch.links.mission_patch_small}
        height="75px"
        objectFit="contain"
        objectPosition="bottom"
      />

      <Box p="6">
        <Box d="flex" alignItems="baseline">
          {launch.launch_success ? (
            <Badge px="2" variant="solid" variantColor="green">
              Successful
            </Badge>
          ) : (
            <Badge px="2" variant="solid" variantColor="red">
              Failed
            </Badge>
          )}
          <Box
            color="gray.500"
            fontWeight="semibold"
            letterSpacing="wide"
            fontSize="xs"
            textTransform="uppercase"
            ml="2"
          >
            {launch.rocket.rocket_name} &bull; {launch.launch_site.site_name}
          </Box>
        </Box>

        <Box
          mt="1"
          fontWeight="semibold"
          as="h4"
          lineHeight="tight"
          isTruncated
        >
          {launch.mission_name}
        </Box>
        <Flex>
          <Text fontSize="sm">{formatDate(launch.launch_date_utc)} </Text>
          <Text color="gray.500" ml="2" fontSize="sm">
            {timeAgo(launch.launch_date_utc)}
          </Text>
        </Flex>
      </Box>
    </Box>
  );
}

EmailRow = ({ message, handleMessageClick }) => {
  // Get name of email sender
  const name = removeQuote(
    getHeader(message.payload.headers, "From").split("<")[0]
  );

  // Get subject of email
  const subject = getHeader(message.payload.headers, "Subject");

  // Get part of email snippet
  const msg = decodeHtml(message.snippet.substr(0, 75));

  // Set backgroundColor to white if the mail is not yet opened
  const backgroundColor =
    message.labelIds.indexOf("UNREAD") > -1 ? "#fff" : "#E2E8F0";

  return (
    <Flex
      key={message.id}
      id={message.id}
      onClick={handleMessageClick}
      wrap='no-wrap'
      justify='space-around'
      py={2}
      bg={backgroundColor}
      borderTop='1px'
      borderBottom='1px'
      borderColor='gray.300'
      cursor='pointer'
    >
      <Avatar name={name} src='https://bit.ly/tioluwani-kolawole' />
      <Box w='80%'>
        <Text fontSize='sm' color='gray.700' isTruncated>
          {name}
        </Text>
        <Text fontSize='md' fontWeight='bold' color='#3182ce' isTruncated>
          {subject}
        </Text>
        <Text fontSize='xs' color='gray.500'>
          {msg}
        </Text>
      </Box>
    </Flex>
  );
}

MenuItem = ({ children }) => (
  <Text mt={[4, 0]} mr={6} display="block">
    {children}
  </Text>
)

TechVolunteers = () => {
  return (
    <Layout>
      <SEO title="Tech Volunteers" />

      <Section
        backgroundColor={"purple"}
        paddingY={[1,8]}
      >
        <Heading {...headerStyling}>Hello and welcome,<br/> fellow Technologists!</Heading>
        <Text {...textStyling}>
          The number of people who are volunteering for this effort is fantastic, and we want to ensure this energy gets directed to the right place and optimised.
        </Text>
        <Text {...textStyling}>
          So tell us what skills you have and your realistic availability, and we'll add you to the Slack group to get you started!
        </Text>
      </Section>

      <Section
        fontSize={[16, 16, 24]}
        paddingY={[1,8]}
      >
        <Text paddingY={5}>
          So you’re a:
        </Text>
        <List>
          <ListItem>• Developer</ListItem>
          <ListItem>• Data Scientist</ListItem>
          <ListItem>• Designer</ListItem>
          <ListItem>• Product / Project Manager</ListItem>
          <ListItem>• Content Creator, Writer</ListItem>
          <ListItem>• Marketing / PR / Marketplace Specialist</ListItem>
        </List>
        <Text>etc!</Text>
        <Text paddingY={[5]}>...and you want to help in the Covid19 crisis?</Text>
        <Text>This is what you can find here:</Text>
        <List>
          <ListItem>• Offer your skills to existing projects by code4covid group</ListItem>
          <ListItem>• Ask for tech resources for your project to code4covid group</ListItem>
          <ListItem>• Check the Coronavirus Tech Handbook by TechForUK group</ListItem>
          <ListItem>• Explore List Of Existing Tech Communities</ListItem>
        </List>

        <Link to="/tech-volunteers-form/">
          <Button {...buttonStyling}>CLICK TO START!</Button>
        </Link>
      </Section>
    </Layout>
  )
}

App = () => {
  const currentTab = useTabStore(state => state.currentTab)

  const { data, error } = useSWR(`https://xyz.api.here.com/hub/spaces/${spaceId}/bbox?west=-180&north=90&east=180&south=-90&access_token=${accessToken}`, fetcher, { focusThrottleInterval: 60000 })
  const points = data ? (data.features || []) : []

  useEffect(() => {
    const cbox = document.getElementsByClassName("main-combobox")[0]
    if (cbox) cbox.focus()
  }, [])

  return (
    <>
      <Box
        display={!currentTab ? "block" : ["none", null, "block"]}
        position="fixed"
        top="0"
        left="0"
        bottom="0"
        zIndex={999999}
        borderTop="0.25rem solid #00AFAA"
        width={["100%", null, "25rem", "30rem"]}
        boxShadow="lg"
        overflow="scroll"
        bg="white"
        pb="5rem"
        style={{
          WebkitOverflowScrolling: "touch",
        }}
      >
        <Box px="1.25rem" pt="1.25rem">
          <Heading fontSize={["1.5rem", "2rem", null, "2.5rem"]} lineHeight={1.125} mb="1.25rem">
            <Text mr="0.75rem" as="span">
              { "Tracking Coronavirus" } <br/>
              { "COVID-19" }
            </Text>
          </Heading>
          { points.length ? <IntroParagraph points={points} /> : null}
          { points.length ? <TimeSlider points={points} /> : null }
        </Box>
        { points.length ? <Listing rows={points} /> : null }
      </Box>

      <Flex
        position="absolute"
        bottom={["3.5rem", null, "1.25rem"]}
        left={["1rem", null, "26.25rem", "32.5rem"]}
        right={["1rem", null, "2rem"]}
        zIndex={2}
        justifyContent="space-between"
        alignItems="flex-end"
      >
        <Flex flexWrap="wrap" justifyContent="space-between" flex="1 1 auto" pr={["0.75rem", null, 0]}>
          <Text as="span" fontSize="xs" color="gray.900" fontWeight={600}>
            {"Data: "}
            <Link href="https://github.com/CSSEGISandData/COVID-19" color="#00AFAA" bg="white" py="0.125rem" px="0.25rem">{"JHU CSSE"}</Link>
            { " and " }
            <Link href="https://ncov.dxy.cn/ncovh5/view/pneumonia?scene=2&clicktime=1579582238&enterid=1579582238&from=singlemessage&isappinstalled=0" color="#00AFAA" bg="white" py="0.125rem" px="0.25rem">
              {"DXY"}
            </Link>
          </Text>
          <Text as="span" fontSize="xs" color="gray.900" fontWeight={600}>
            {"Made with Leaflet, "}
            <Link href="https://developer.here.com/documentation/vector-tiles-api/dev_guide?cid=Freemium-DeveloperPortalTutorial-PJ-0-Javascript-DevPortal-&utm_source=DeveloperPortalTutorial&utm_medium=referral&utm_campaign=Webinar_IOT_2020_Golden-Age-Location-Enabled-AI-Jan-16" color="#00AFAA" bg="white" py="0.125rem" px="0.25rem">{"HERE Vector Map Tiles API"}</Link>
            {" and "}
            <Link href="https://developer.here.com/products/xyz?cid=Freemium-DeveloperPortalTutorial-PJ-0-XYZ-DevPortal-&utm_source=DeveloperPortalTutorial&utm_medium=referral&utm_campaign=CoronaVirusMap" color="#00AFAA" bg="white" py="0.125rem" px="0.25rem">{"HERE Data Hub APIs"}</Link>
            { " | " }
            <Link href="#" color="#00AFAA" bg="white" py="0.125rem" px="0.25rem">
              {"Get the code"}
              <Icon name="github" ml="0.25rem" mt="-0.125rem" />
            </Link>
          </Text>
        </Flex>
        <Link flex="none" href="https://developer.here.com/?cid=Freemium-DeveloperPortalTutorial-PJ-0-Javascript-DevPortal-&utm_source=DeveloperPortalTutorial&utm_medium=referral&utm_campaign=Webinar_IOT_2020_Golden-Age-Location-Enabled-AI-Jan-16">
          <img src={hereLogo} alt="HERE logo" style={{ width: "2.5rem", marginLeft: "0.75rem" }} />
        </Link>
      </Flex>

      <Map points={points} />

      <Search />

      <Box
        position="fixed"
        bottom={["5.5rem", null, "4rem"]}
        right={["1rem", null, "2.5rem"]}
        zIndex={2}
        width={["6rem", "8rem", "10rem"]}
        height={["6rem", "8rem", "10rem"]}
        boxShadow="lg"
        borderRadius="100%"
        bg="white"
        border="0.125rem solid"
        borderColor="gray.50"
        pointerEvents="none"
      >
        <Globe />
      </Box>

      {
        currentTab === 2 ? (
          <Box
            display="block"
            position="fixed"
            top="0"
            left="0"
            bottom="0"
            zIndex={999999}
            borderTop="0.25rem solid #00AFAA"
            width={["100%", null, "25rem", "30rem"]}
            boxShadow="lg"
            overflow="scroll"
            bg="white"
            pb="5rem"
            style={{
              WebkitOverflowScrolling: "touch",
            }}
          >
            <Box px="1.25rem" pt="1.25rem">
              <AboutContent />
            </Box>
          </Box>
        ) : null
      }

      <NavigationTabs />

      <CurrentCircle />

    </>
  )
}

SignupAdditional = ({
  register,
  errors,
  location,
  setNewLocation,
  stateHelper,
  validateFieldOfStudy,
  uploadImage,
  profile_image,
  uploadResume,
  profile_resume,
}) => {
  // graduated state/helpers
  const [graduated, setGraduated] = useState(false)
  const isGraduated = () => {
    setGraduated(true)
  }
  const notGraduated = () => {
    setGraduated(false)
  }
  // employed state/helpers
  const [employed, setEmployed] = useState(false)
  const isEmployed = () => {
    setEmployed(true)
  }
  const notEmployed = () => {
    setEmployed(false)
  }

  //radio button state
  const [priorExp, setPriorExp] = useState(false)
  const [tlsl, setTlsl] = useState(false)
  const [remote, setRemote] = useState(false)

  //location helper
  useEffect(() => {
    setNewLocation({ ...location, myState: location.myState })
    // removes numbers, commas, and whitespaces from city
    if (location.myCity) {
      if (/^[0-9]+$/.test(location.myCity) || /\s/.test(location.myCity)) {
        const tempCity = location.myCity
        setNewLocation({
          ...location,
          myCity: tempCity.replace(/^[\s,\d]+/, ''),
        })
      }
    }
  }, [location, setNewLocation])

  ///info for slack ID
  const info = (
    <Box>
      <Image
        objectFit="fit"
        width="300px"
        height="300px"
        src={require('../../icons/slack.gif')}
        alt="slack info"
      />
    </Box>
  )

  return (
    <>
      <Flex
        wrap="wrap"
        w="653px"
        mx="auto"
        mb="61px"
        justify="flex-start"
        fontSize="16px"
      >
        <Text color="#131C4D" fontFamily="Muli">
          The information below will be visible on your profile page by others
        </Text>
      </Flex>

      {/* CLOUDINARY IMAGE UPLOAD */}
      <Flex
        wrap="wrap"
        w="653px"
        mx="auto"
        mb="55px"
        justify="space-evenly"
        alignItems="center"
      >
        {!profile_image ? (
          <Image size="100px" src={require('../../icons/user.svg')} />
        ) : (
          <Image
            size="100px"
            style={{ borderRadius: '50px' }}
            src={profile_image}
          />
        )}
        <Flex alignItems="center">
          <input
            type="file"
            filename="image"
            placeholder="Upload profile picture"
            onChange={uploadImage}
            style={{
              opacity: '1',
              width: '105px',
              color: 'transparent',
              backgroundColor: 'transparent',
            }}
          />
          <label for="files" class="btn">
            Upload profile image
          </label>
        </Flex>
      </Flex>

      {/* LOCATION OF USER */}
      <Flex wrap="wrap" w="653" justify="center">
        <FormControl>
          <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
            Location (City, State)
          </FormLabel>
          <CustomAutocomplete
            stateHelper={stateHelper}
            w="653px"
            h="58px"
            mb="30px"
            rounded="2px"
            variant="outline"
            bgColor="#FDFDFF"
            focusBorderColor="#344CD0"
            borderColor="#EAF0FE"
            color="#17171B"
            _hover={{ borderColor: '#BBBDC6' }}
            _placeholder={{ color: '#BBBDC6' }}
            id="location"
            name="location"
            label="location"
            placeholder="e.g. Los Angeles, CA"
            ref={register}
          />
        </FormControl>
      </Flex>

      {/* GRADUATED CHECK */}
      <Flex
        wrap="wrap"
        w="653px"
        mx="auto"
        mb={graduated ? '20px' : '80px'}
        justify="space-between"
      >
        <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
          Have you graduated from Lambda yet?
        </FormLabel>
        <Flex justify="space-between" w="131px">
          <Radio
            name="graduated"
            id="graduated-1"
            value={true}
            isChecked={graduated === true}
            onClick={isGraduated}
            borderRadius="md"
            borderColor="#D9D9D9"
            _checked={{ bg: '#344CD0' }}
          >
            Yes
          </Radio>
          <Radio
            name="graduated"
            id="graduated-2"
            value={false}
            isChecked={graduated === false}
            onClick={notGraduated}
            borderRadius="md"
            borderColor="#D9D9D9"
            _checked={{ bg: '#344CD0' }}
          >
            No
          </Radio>
        </Flex>
      </Flex>

      {/* GRADUATED MONTH AND YEAR */}
      {graduated ? (
        <Flex
          wrap="wrap"
          w="653px"
          mx="auto"
          mb="80px"
          justify="space-between"
          align="center"
        >
          <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
            When did you graduate?
          </FormLabel>
          <Flex align="center" alignContent="center">
            <FormControl>
              <Select
                mr="17px"
                h="68px"
                py="16px"
                w="155px"
                rounded="2px"
                variant="outline"
                backgroundColor="#FDFDFF"
                focusBorderColor="#344CD0"
                borderColor="#EAF0FE"
                color="#BBBDC6"
                _focus={{ color: '#17171B' }}
                _hover={{ borderColor: '#BBBDC6' }}
                name="gradMonth"
                label="gradMonth"
                ref={register}
              >
                <option fontFamily="Muli" value="">
                  Month
                </option>
                <option fontFamily="Muli" value="01">
                  Jan
                </option>
                <option fontFamily="Muli" value="02">
                  Feb
                </option>
                <option fontFamily="Muli" value="03">
                  Mar
                </option>
                <option fontFamily="Muli" value="04">
                  Apr
                </option>
                <option fontFamily="Muli" value="05">
                  May
                </option>
                <option fontFamily="Muli" value="06">
                  Jun
                </option>
                <option fontFamily="Muli" value="07">
                  Jul
                </option>
                <option fontFamily="Muli" value="08">
                  Aug
                </option>
                <option fontFamily="Muli" value="09">
                  Sep
                </option>
                <option fontFamily="Muli" value="10">
                  Oct
                </option>
                <option fontFamily="Muli" value="11">
                  Nov
                </option>
                <option fontFamily="Muli" value="12">
                  Dec
                </option>
              </Select>
            </FormControl>
            <FormControl>
              <Select
                h="68px"
                py="16px"
                w="155px"
                rounded="2px"
                variant="outline"
                backgroundColor="#FDFDFF"
                focusBorderColor="#344CD0"
                borderColor="#EAF0FE"
                color="#BBBDC6"
                _focus={{ color: '#17171B' }}
                _hover={{ borderColor: '#BBBDC6' }}
                name="gradYear"
                label="gradYear"
                ref={register}
              >
                <option fontFamily="Muli" value="">
                  Year
                </option>
                {years.map((year, index) => (
                  <option key={`year${index}`} value={year}>
                    {year}
                  </option>
                ))}
              </Select>
            </FormControl>
          </Flex>
        </Flex>
      ) : null}

      <Flex
        wrap="wrap"
        w="653px"
        mx="auto"
        mb="35px"
        justify="flex-start"
        borderTop="1px solid #DADADD"
      >
        <Text
          fontFamily="Poppins"
          fontWeight="600"
          fontSize="24px"
          lineHeight="36px"
          color="#BBBDC6"
        >
          Background
        </Text>
      </Flex>

      {/* HIGHEST LEVEL OF EDUCATION */}
      <Flex wrap="wrap" w="411px%" justify="center">
        <FormControl>
          <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
            Highest level of education
          </FormLabel>
          <Select
            mb="30px"
            mr="17px"
            h="68px"
            py="16px"
            w="318px"
            rounded="2px"
            variant="outline"
            backgroundColor="#FDFDFF"
            focusBorderColor="#344CD0"
            borderColor="#EAF0FE"
            color="#BBBDC6"
            _focus={{ color: '#17171B' }}
            _hover={{ borderColor: '#BBBDC6' }}
            name="highest_ed"
            label="highest_ed"
            ref={register}
          >
            <option fontFamily="Muli" value="">
              Select your education level
            </option>
            <option fontFamily="Muli" value="High school diploma">
              High school diploma
            </option>
            <option fontFamily="Muli" value="Associate's degree">
              Associate's degree
            </option>
            <option fontFamily="Muli" value="Bachelor's degree">
              Bachelor's degree
            </option>
            <option fontFamily="Muli" value="Master's degree">
              Master's degree
            </option>
            <option fontFamily="Muli" value="PhD">
              PhD
            </option>
          </Select>
        </FormControl>

        {/* FIELD OF STUDY */}
        <FormControl isInvalid={errors.fieldOfStudy}>
          <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
            Field of study
          </FormLabel>
          <SignupLoginInput
            w="318px"
            mb="30px"
            type="text"
            name="field_of_study"
            label="field_of_study"
            placeholder="Enter your field of study"
            autoCapitalize="none"
            ref={register({ validate: validateFieldOfStudy })}
          />
          <FormErrorMessage>
            {errors.fieldOfStudy && errors.fieldOfStudy.message}
          </FormErrorMessage>
        </FormControl>
      </Flex>

      {/* PRIOR EXPERIENCE */}
      <Flex wrap="wrap" w="653px" mx="auto" mb="30px" justify="space-between">
        <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
          Prior to Lambda did you have any experience in your track?
        </FormLabel>
        <Flex justify="space-between" w="131px">
          <Radio
            name="prior_experience"
            id="priorExp-1"
            ref={register}
            value={true}
            isChecked={priorExp === true}
            onChange={() => setPriorExp(true)}
            borderRadius="md"
            borderColor="#D9D9D9"
            _checked={{ bg: '#344CD0' }}
          >
            Yes
          </Radio>
          <Radio
            name="prior_experience"
            id="priorExp-2"
            ref={register}
            value={false}
            isChecked={priorExp === false}
            onChange={() => setPriorExp(false)}
            borderRadius="md"
            borderColor="#D9D9D9"
            _checked={{ bg: '#344CD0' }}
          >
            No
          </Radio>
        </Flex>
      </Flex>

      {/* DID YOU TL/SL */}
      <Flex wrap="wrap" w="653px" mx="auto" mb="100px" justify="space-between">
        <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
          Have you been a TL/SL while at Lambda?
        </FormLabel>
        <Flex justify="space-between" w="131px">
          <Radio
            name="tlsl_experience"
            id="TLSL-1"
            value={true}
            ref={register}
            isChecked={tlsl === false}
            onChange={() => setTlsl(true)}
            borderRadius="md"
            borderColor="#D9D9D9"
            _checked={{ bg: '#344CD0' }}
          >
            Yes
          </Radio>
          <Radio
            name="tlsl_experience"
            id="TLSL-2"
            value={false}
            ref={register}
            isChecked={tlsl === false}
            onChange={() => setTlsl(false)}
            borderRadius="md"
            borderColor="#D9D9D9"
            _checked={{ bg: '#344CD0' }}
          >
            No
          </Radio>
        </Flex>
      </Flex>

      <Flex
        wrap="wrap"
        w="653px"
        mx="auto"
        mb="35px"
        justify="flex-start"
        borderTop="1px solid #DADADD"
      >
        <Text
          fontFamily="Poppins"
          fontWeight="600"
          fontSize="24px"
          lineHeight="36px"
          color="#BBBDC6"
        >
          Employment
        </Text>
      </Flex>

      {/* EMPLOYED CHECK */}
      <Flex
        wrap="wrap"
        w="653px"
        mx="auto"
        mb={employed ? '30px' : '80px'}
        justify="space-between"
      >
        <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
          Are you currently employed in your field of study?
        </FormLabel>
        <Flex justify="space-between" w="131px">
          <Radio
            name="employed"
            id="employed-1"
            value={true}
            isChecked={employed === true}
            onClick={isEmployed}
            borderRadius="md"
            borderColor="#D9D9D9"
            _checked={{ bg: '#344CD0' }}
          >
            Yes
          </Radio>
          <Radio
            name="employed"
            id="employed-2"
            value={false}
            isChecked={employed === false}
            onClick={notEmployed}
            borderRadius="md"
            borderColor="#D9D9D9"
            _checked={{ bg: '#344CD0' }}
          >
            No
          </Radio>
        </Flex>
      </Flex>

      {/* EMPLOYED COMPANY NAME AND JOB TITLE */}
      {employed ? (
        <Flex wrap="wrap" w="653" justify="center">
          <FormControl>
            <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
              Company name
            </FormLabel>
            <SignupLoginInput
              w="318px"
              mb="30px"
              mr="17px"
              type="text"
              name="employed_company"
              label="employed_company"
              placeholder="Enter the company name"
              autoCapitalize="none"
              ref={register}
            />
          </FormControl>
          <FormControl>
            <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
              Job title
            </FormLabel>
            <SignupLoginInput
              w="318px"
              mb="30px"
              type="text"
              name="employed_title"
              label="employed_title"
              placeholder="Enter your job title"
              autoCapitalize="none"
              ref={register}
            />
          </FormControl>
        </Flex>
      ) : null}

      {/* REMOTE WORK CHECK */}
      {employed ? (
        <Flex wrap="wrap" w="653px" mx="auto" mb="30px" justify="space-between">
          <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
            Are you working remotely?
          </FormLabel>
          <Flex justify="space-between" w="131px">
            <Radio
              name="employed_remote"
              id="employed_remote-1"
              value={true}
              ref={register}
              isChecked={remote === true}
              onChange={() => setRemote(true)}
              borderRadius="md"
              borderColor="#D9D9D9"
              _checked={{ bg: '#344CD0' }}
            >
              Yes
            </Radio>
            <Radio
              name="employed_remote"
              id="employed_remote-2"
              value={false}
              ref={register}
              isChecked={remote === false}
              onChange={() => setRemote(false)}
              borderRadius="md"
              borderColor="#D9D9D9"
              _checked={{ bg: '#344CD0' }}
            >
              No
            </Radio>
          </Flex>
        </Flex>
      ) : null}

      {/* EMPLOYMENT START DATE */}
      {employed ? (
        <Flex
          wrap="wrap"
          w="653px"
          mx="auto"
          mb="80px"
          justify="space-between"
          align="center"
        >
          <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
            When did you start?
          </FormLabel>
          <Flex align="center" alignContent="center">
            <FormControl>
              <Select
                mr="17px"
                h="68px"
                py="16px"
                w="159px"
                rounded="2px"
                variant="outline"
                backgroundColor="#FDFDFF"
                focusBorderColor="#344CD0"
                borderColor="#EAF0FE"
                color="#BBBDC6"
                _focus={{ color: '#17171B' }}
                _hover={{ borderColor: '#BBBDC6' }}
                name="workMonth"
                label="workMonth"
                ref={register}
              >
                <option fontFamily="Muli" value="">
                  Month
                </option>
                <option fontFamily="Muli" value="01">
                  Jan
                </option>
                <option fontFamily="Muli" value="02">
                  Feb
                </option>
                <option fontFamily="Muli" value="03">
                  Mar
                </option>
                <option fontFamily="Muli" value="04">
                  Apr
                </option>
                <option fontFamily="Muli" value="05">
                  May
                </option>
                <option fontFamily="Muli" value="06">
                  Jun
                </option>
                <option fontFamily="Muli" value="07">
                  Jul
                </option>
                <option fontFamily="Muli" value="08">
                  Aug
                </option>
                <option fontFamily="Muli" value="09">
                  Sep
                </option>
                <option fontFamily="Muli" value="10">
                  Oct
                </option>
                <option fontFamily="Muli" value="11">
                  Nov
                </option>
                <option fontFamily="Muli" value="12">
                  Dec
                </option>
              </Select>
            </FormControl>
            <FormControl>
              <Select
                h="68px"
                py="16px"
                w="159px"
                rounded="2px"
                variant="outline"
                backgroundColor="#FDFDFF"
                focusBorderColor="#344CD0"
                borderColor="#EAF0FE"
                color="#BBBDC6"
                _focus={{ color: '#17171B' }}
                _hover={{ borderColor: '#BBBDC6' }}
                name="workYear"
                label="workYear"
                ref={register}
              >
                <option fontFamily="Muli" value="">
                  Year
                </option>
                {years.map((year, index) => (
                  <option key={`year${index}`} value={year}>
                    {year}
                  </option>
                ))}
              </Select>
            </FormControl>
          </Flex>
        </Flex>
      ) : null}

      <Flex
        wrap="wrap"
        w="653px"
        mx="auto"
        mb="35px"
        justify="flex-start"
        borderTop="1px solid #DADADD"
      >
        <Text
          fontFamily="Poppins"
          fontWeight="600"
          fontSize="24px"
          lineHeight="36px"
          color="#BBBDC6"
        >
          Online Presence
        </Text>
      </Flex>

      {/* RESUME UPLOAD */}
      <Flex
        wrap="wrap"
        w="653px"
        mx="auto"
        justify="space-between"
        align="center"
      >
        <Text align="center" color="#131C4D" fontSize="18px" fontFamily="Muli">
          Resume
        </Text>
        <Flex width="270px" justify="flex-end">
          <input
            type="file"
            filename="image"
            placeholder="Upload profile picture"
            onChange={uploadResume}
            style={{
              opacity: '1',
              width: '105px',
              color: 'transparent',
              backgroundColor: 'transparent',
            }}
          />
          <label for="files" class="btn">
            {!profile_resume ? (
              'Upload resume'
            ) : (
              <i
                style={{
                  fontSize: '1.4rem',
                  color: 'green',
                  paddingLeft: '20px',
                }}
                class="far fa-check-circle"
              ></i>
            )}
          </label>
        </Flex>
      </Flex>
      <Flex w="653px" mx="auto" justify="flex-start">
        <FormHelperText w="653px" mb="30px" color="#9194A8">
          Must be a .pdf file
        </FormHelperText>
      </Flex>

      {/* CONTACT EMAIL */}
      <Flex
        wrap="wrap"
        w="653px"
        mb="15px"
        mx="auto"
        justify="space-between"
        align="center"
      >
        <Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
          Email address
        </Text>
        <SignupLoginInput
          w="318px"
          type="email"
          name="contact_email"
          label="contact_email"
          placeholder="Enter your email address"
          autoCapitalize="none"
          ref={register}
        />
      </Flex>

      {/* PORTFOLIO URL */}
      <Flex
        wrap="wrap"
        w="653px"
        mb="15px"
        mx="auto"
        justify="space-between"
        align="center"
      >
        <Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
          Portfolio URL
        </Text>
        <SignupLoginInput
          w="318px"
          type="text"
          name="portfolio_URL"
          label="portfolio_URL"
          placeholder="Enter your portfolio URL"
          autoCapitalize="none"
          ref={register}
        />
      </Flex>

      {/* LINKEDIN URL */}
      <Flex
        wrap="wrap"
        w="653px"
        mb="15px"
        mx="auto"
        justify="space-between"
        align="center"
      >
        <Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
          LinkedIn URL
        </Text>
        <SignupLoginInput
          w="318px"
          type="text"
          name="linked_in"
          label="linked_in"
          placeholder="Enter your LinkedIn URL"
          autoCapitalize="none"
          ref={register}
        />
      </Flex>

      {/* SLACK USERNAME */}
      <Flex
        wrap="wrap"
        w="653px"
        mb="15px"
        mx="auto"
        justify="space-between"
        align="center"
      >
        <Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
          Slack ID
          <Tooltip hasArrow label={info} placement="top">
            <i style={{ paddingLeft: '10px' }} class="fas fa-question"></i>
          </Tooltip>
        </Text>
        <SignupLoginInput
          w="318px"
          type="text"
          name="slack"
          label="slack"
          placeholder="Enter your Slack ID"
          autoCapitalize="none"
          ref={register}
        />
      </Flex>

      {/* GITHUB USERNAME */}
      <Flex
        wrap="wrap"
        w="653px"
        mb="15px"
        mx="auto"
        justify="space-between"
        align="center"
      >
        <Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
          Github URL
        </Text>
        <SignupLoginInput
          w="318px"
          type="text"
          name="github"
          label="github"
          placeholder="Enter your Github URL"
          autoCapitalize="none"
          ref={register}
        />
      </Flex>

      {/* DRIBBBLE URL */}
      <Flex
        wrap="wrap"
        w="653px"
        mb="15px"
        mx="auto"
        justify="space-between"
        align="center"
      >
        <Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
          Dribbble URL
        </Text>
        <SignupLoginInput
          w="318px"
          type="text"
          name="dribble"
          label="dribble"
          placeholder="Enter your Dribbble URL"
          autoCapitalize="none"
          ref={register}
        />
      </Flex>
    </>
  )
}

Signup = ({ signup, isLoading, history }) => {
  const { handleSubmit, errors, register, formState } = useForm()
  const [show, setShow] = useState(false)
  const [moreInfo, setMoreInfo] = useState(false)
  const handleClick = () => setShow(!show)
  //location state
  const [location, setLocation] = useState({})
  const [newLocation, setNewLocation] = useState({})
  const stateHelper = (value) => {
    setLocation(value)
  }
  const [profile_image, setProfile_Image] = useState('')
  const [profile_resume, setProfile_resume] = useState('')
  //validation
  function validateFirstName(value) {
    let error
    let nameRegex = /^[0-9*#+]+$/
    if (!value) {
      error = 'First Name is required'
    } else if (value.length < 2) {
      error = 'First Name must be at least 2 characters'
    } else if (nameRegex.test(value)) {
      error = 'First Name can only contain letters'
    }
    return error || true
  }

  function validateLastName(value) {
    let error
    let nameRegex = /^[0-9*#+]+$/
    if (!value) {
      error = 'Last Name is required'
    } else if (value.length < 2) {
      error = 'Last Name must be at least 2 characters'
    } else if (nameRegex.test(value)) {
      error = 'Last Name can only contain letters'
    }
    return error || true
  }

  function validateEmail(value) {
    let error
    if (!value) {
      error = 'Email is required'
    } else if (!value.includes('@')) {
      error = 'Must be a valid email'
    }
    return error || true
  }

  function validateTrack(value) {
    let error
    if (!value) {
      error = 'Lambda track is required'
    }
    return error || true
  }

  function validateCohort(value) {
    let error
    if (!value) {
      error = 'Cohort is required'
    }
    return error || true
  }

  function validatePassword(value) {
    let error
    if (!value) {
      error = 'Password is required'
    } else if (value.length < 8) {
      error = 'Password must be at least 8 characters'
    }
    return error || true
  }

  function validateFieldOfStudy(value) {
    let error
    let nameRegex = /^[0-9*#+]+$/
    if (nameRegex.test(value)) {
      error = 'Field of study can only contain letters'
    }
    return error || true
  }
  // end validation

  //add image to cloudinary
  const uploadImage = async (e) => {
    const files = e.target.files
    const data = new FormData()
    data.append('file', files[0])
    data.append('upload_preset', 'upload')
    const res = await fetch(
      '	https://api.cloudinary.com/v1_1/takija/image/upload',
      {
        method: 'POST',
        body: data,
      }
    )
    const file = await res.json()
    setProfile_Image(...profile_image, file.secure_url)
  }

  //upload resume to cloudinary
  const uploadResume = async (e) => {
    const files = e.target.files
    const data = new FormData()
    data.append('file', files[0])
    data.append('upload_preset', 'upload')
    const res = await fetch(
      '	https://api.cloudinary.com/v1_1/takija/image/upload',
      {
        method: 'POST',
        body: data,
      }
    )
    const file = await res.json()
    console.log('here', file)
    setProfile_resume(...profile_resume, file.secure_url)
  }

  const submitForm = (creds) => {
    // correcting grad date format
    let graduated = null
    if (creds.gradMonth && creds.gradYear) {
      graduated = `${creds.gradYear}-${creds.gradMonth}-01`
    }

    // correcting employed date format
    let employed_start = null
    if (creds.workMonth && creds.workYear) {
      employed_start = `${creds.workYear}-${creds.workMonth}-01`
    }

    if (creds.confirmPassword === creds.password) {
      // formatting the signup state to match the back end columns
      signup({
        email: creds.email,
        password: creds.password,
        track_id: Number(creds.track_id),
        first_name: creds.firstName,
        last_name: creds.lastName,
        cohort: creds.cohort,
        contact_email: creds.contact_email || null,
        location: newLocation
          ? `${newLocation.myCity} ${newLocation.myState}`
          : null,
        graduated: graduated,
        highest_ed: creds.highest_ed || null,
        field_of_study: creds.field_of_study || null,
        prior_experience: creds.prior_experience
          ? JSON.parse(creds.prior_experience)
          : false,
        tlsl_experience: creds.tlsl_experience
          ? JSON.parse(creds.tlsl_experience)
          : false,
        employed_company: creds.employed_company || null,
        employed_title: creds.employed_title || null,
        employed_remote: creds.employed_remote
          ? JSON.parse(creds.employed_remote)
          : false,
        employed_start: employed_start,
        resume: profile_resume || null,
        linked_in: creds.linked_in || null,
        slack: creds.slack || null,
        github: creds.github || null,
        dribble: creds.dribble || null,
        profile_image: profile_image || null,
        portfolio: creds.portfolio_URL || null,
      }).then(() => history.push('/dashboard'))
    } else {
      alert('Your Passwords must match!')
    }
    ReactGA.event({
      category: 'User',
      action: `Button Sign Up`,
    })
  }

  const switchMoreInfo = () => {
    setMoreInfo(!moreInfo)
  }

  const gaLogin = () => {
    ReactGA.event({
      category: 'User',
      action: `Link Already have an account`,
    })
  }

  if (isLoading) {
    return (
      <Flex justify="center" align="center" w="100vh" h="100vh">
        <Flex>
          <CustomSpinner />
        </Flex>
      </Flex>
    )
  }

  return (
    <Flex className="RegisterSplash" w="100%" minH="100vh" justify="center">
      <Flex maxW="1440px" w="100%">
        <Flex
          w="833px"
          mx="auto"
          justify="center"
          align="center"
          flexDir="column"
        >
          <form onSubmit={handleSubmit(submitForm)}>
            <Flex
              w="833px"
              // h='825px'
              p="6"
              flexDir="column"
              background="#FDFDFF"
              justify="center"
            >
              <Flex
                as="h2"
                w="653"
                fontSize="36px"
                fontWeight="600"
                fontFamily="Poppins"
                justify="center"
                my="68px"
              >
                Let's get started!
              </Flex>

              {/* FIRST NAME, LAST NAME */}
              <Flex wrap="wrap" w="653" justify="center">
                <FormControl isRequired isInvalid={errors.username}>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    First Name
                  </FormLabel>
                  <SignupLoginInput
                    w="318px"
                    mb="30px"
                    mr="17px"
                    type="text"
                    name="firstName"
                    label="firstName"
                    placeholder="John"
                    autoCapitalize="none"
                    ref={register({ validate: validateFirstName })}
                  />
                  <FormErrorMessage>
                    {errors.firstName && errors.firstName.message}
                  </FormErrorMessage>
                </FormControl>
                <FormControl isRequired isInvalid={errors.username}>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Last Name
                  </FormLabel>
                  <SignupLoginInput
                    w="318px"
                    mb="30px"
                    type="text"
                    name="lastName"
                    label="lastName"
                    placeholder="Doe"
                    autoCapitalize="none"
                    ref={register({ validate: validateLastName })}
                  />
                  <FormErrorMessage>
                    {errors.lastName && errors.lastName.message}
                  </FormErrorMessage>
                </FormControl>
              </Flex>

              {/* EMAIL */}
              <Flex wrap="wrap" w="653" justify="center">
                <FormControl isRequired isInvalid={errors.email}>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Email
                  </FormLabel>
                  <SignupLoginInput
                    w="653px"
                    mb="30px"
                    type="email"
                    name="email"
                    label="email"
                    placeholder="[email protected]"
                    autoCapitalize="none"
                    ref={register({ validate: validateEmail })}
                  />
                  <FormErrorMessage>
                    {errors.email && errors.email.message}
                  </FormErrorMessage>
                </FormControl>
              </Flex>

              {/* TRACK */}
              <Flex wrap="wrap" w="411px%" justify="center">
                <FormControl isRequired isInvalid={errors.track_name}>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Track
                  </FormLabel>
                  <Select
                    mb="30px"
                    mr="17px"
                    h="68px"
                    py="16px"
                    w="318px"
                    rounded="2px"
                    variant="outline"
                    backgroundColor="#FDFDFF"
                    focusBorderColor="#344CD0"
                    borderColor="#EAF0FE"
                    color="#BBBDC6"
                    _focus={{ color: '#17171B' }}
                    _hover={{ borderColor: '#BBBDC6' }}
                    name="track_id"
                    label="track_id"
                    ref={register({ validate: validateTrack })}
                  >
                    <option fontFamily="Muli" value="">
                      Select Your Lambda Track
                    </option>
                    <option fontFamily="Muli" value={1}>
                      Android
                    </option>
                    <option fontFamily="Muli" value={2}>
                      DS
                    </option>
                    <option fontFamily="Muli" value={3}>
                      WEB
                    </option>
                    <option fontFamily="Muli" value={4}>
                      IOS
                    </option>
                    <option fontFamily="Muli" value={5}>
                      UX
                    </option>
                  </Select>
                  <FormErrorMessage>
                    {errors.track_id && errors.track_id.message}
                  </FormErrorMessage>
                </FormControl>
                <FormControl isRequired isInvalid={errors.username}>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Cohort
                  </FormLabel>
                  <SignupLoginInput
                    w="318px"
                    mb="30px"
                    type="text"
                    name="cohort"
                    label="cohort"
                    placeholder="Ex: FT 1 or PT 1"
                    autoCapitalize="none"
                    ref={register({ validate: validateCohort })}
                  />
                  <FormErrorMessage>
                    {errors.cohort && errors.cohort.message}
                  </FormErrorMessage>
                </FormControl>
              </Flex>

              {/* PASSWORD, CONFIRM PASSWORD */}
              <Flex wrap="wrap" w="411px%" justify="center">
                <FormControl isRequired isInvalid={errors.password}>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Password
                  </FormLabel>
                  <InputGroup>
                    <SignupLoginInput
                      w="318px"
                      // mb='30px'
                      mr="17px"
                      type={show ? 'text' : 'password'}
                      name="password"
                      label="Password"
                      placeholder="********"
                      autoCapitalize="none"
                      ref={register({ validate: validatePassword })}
                    />
                    <InputRightElement width="4.5rem" pr="22px" py="32px">
                      <Button
                        h="1.75rem"
                        color="rgba(72, 72, 72, 0.1)"
                        border="none"
                        size="sm"
                        backgroundColor="#FDFDFF"
                        onClick={handleClick}
                      >
                        {show ? 'Hide' : 'Show'}
                      </Button>
                    </InputRightElement>
                  </InputGroup>
                  <FormHelperText mb="45px" color="#9194A8">
                    Must be at least 8 characters
                  </FormHelperText>
                  <FormErrorMessage>
                    {errors.password && errors.password.message}
                  </FormErrorMessage>
                </FormControl>
                <FormControl isRequired>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Confirm Password
                  </FormLabel>
                  <InputGroup>
                    <SignupLoginInput
                      w="318px"
                      mb="30px"
                      type={show ? 'text' : 'password'}
                      name="confirmPassword"
                      label="Confirm Password"
                      placeholder="********"
                      autoCapitalize="none"
                      ref={register}
                    />
                    <InputRightElement width="4.5rem" py="32px">
                      <Button
                        data-cy="registerSubmit"
                        h="1.75rem"
                        color="rgba(72, 72, 72, 0.1)"
                        border="none"
                        size="sm"
                        backgroundColor="#FDFDFF"
                        onClick={handleClick}
                      >
                        {show ? 'Hide' : 'Show'}
                      </Button>
                    </InputRightElement>
                  </InputGroup>
                </FormControl>
              </Flex>

              {/* CLICK FOR LONGFORM SIGNUP */}
              <Flex
                wrap="wrap"
                w="653px"
                mx="auto"
                mb={moreInfo ? '0' : '55px'}
                cursor="pointer"
                justify="flex-start"
                data-cy="longFormDropdown"
                onClick={switchMoreInfo}
              >
                <Flex justify="flex-start">
                  {moreInfo ? (
                    <Icon
                      fontWeight="bold"
                      name="chevron-down"
                      textAlign="left"
                      size="30px"
                      mr="5px"
                      ml="-8px"
                      pt="3px"
                    />
                  ) : (
                    <Icon
                      fontWeight="bold"
                      name="chevron-right"
                      textAlign="left"
                      size="30px"
                      mr="5px"
                      ml="-8px"
                      pt="3px"
                    />
                  )}
                  <Text fontWeight="bold" fontSize="20px" fontFamily="Muli">
                    {' '}
                    Add Additional Information
                  </Text>
                </Flex>
              </Flex>

              {/* ADDITIONAL INFO COMPONENT */}
              {moreInfo ? (
                <SignupAdditional
                  profile_resume={profile_resume}
                  profile_image={profile_image}
                  uploadImage={uploadImage}
                  uploadResume={uploadResume}
                  register={register}
                  errors={errors}
                  location={location}
                  newLocation={newLocation}
                  setNewLocation={setNewLocation}
                  stateHelper={stateHelper}
                  validateFieldOfStudy={validateFieldOfStudy}
                />
              ) : null}

              <Flex w="100%" justify="center">
                <Button
                  mb="30px"
                  border="none"
                  rounded="50px"
                  h="58px"
                  w="653px"
                  my="2%"
                  size="lg"
                  color="white"
                  backgroundColor="#344CD0"
                  _hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
                  isLoading={formState.isSubmitting}
                  type="submit"
                  data-cy="registerSubmit"
                >
                  Sign up
                </Button>
              </Flex>
              <Flex m="15px" justify="center" fontWeight="light">
                <Text fontSize="16px" color="#17171B" fontFamily="Muli">
                  Already have an account?{' '}
                  <Link
                    to="/"
                    onClick={gaLogin}
                    style={{
                      textDecoration: 'none',
                      fontWeight: 'bold',
                      color: '#344CD0',
                      fontSize: '16px',
                    }}
                  >
                    Sign in here!
                  </Link>
                </Text>
              </Flex>
            </Flex>
          </form>
        </Flex>
      </Flex>
    </Flex>
  )
}

ReviewCard = ({ review, history, deleteReview, isAdmin }) => {
  const singleReview = review

  //deletes the review in question
  const submitDelete = (user_id, review_id) => {
    if (review.user_id && review.review_id) {
      deleteReview(review.user_id, review.review_id).then(() => {
        // window.location.reload();
        history.push('/dashboard')
      })
    } else {
      deleteReview(user_id, review_id).then(() => {
        // window.location.reload();
        history.push('/dashboard')
      })
    }

    ReactGA.event({
      category: 'Review Delete',
      action: `Submit delete`,
    })
  }
  // useEffect(() => {}, [submitDelete])
  // basic usage for the SingleReview modal
  const { isOpen, onOpen, onClose } = useDisclosure()
  const loginId = localStorage.getItem('userId')

  // specifically for the cancel review delete button functionality
  const [isOpen2, setIsOpen2] = useState()
  const onClose2 = () => setIsOpen2(false)
  const cancelRef = useRef()

  //routes to single review
  const navToEditRoute = () =>
    review.review_type === 'Company'
      ? history.push({
          pathname: `/dashboard/review/${review.review_id}`,
          state: singleReview,
        })
      : history.push(`/dashboard/interview/${review.review_id}`)

  //routes to user's profile page
  const navToProfile = (e) => {
    e.preventDefault()
    history.push(`/profile/${review.user_id}`)
  }

  // adjust logo for api call
  // const adjustedName = review.company_name.replace(' ', '+')

  // adjust date of posting
  let tempDate = new Date(review.created_at).toUTCString()
  const tempDay = tempDate.split(' ').slice(1, 2)
  const tempMonth = tempDate.split(' ').slice(2, 3)
  const tempYear = tempDate.split(' ').slice(3, 4)
  const adjustedDate = `${tempMonth} ${tempDay}, ${tempYear}`

  //track name font color picker
  const trackFontColor = (trackName) => {
    switch (trackName) {
      case 'DS':
        return '#35694F'
        break
      case 'WEB':
        return '#474EA7'
        break
      case 'iOS' || 'IOS':
        return '#8E3D19'
        break
      case 'Android':
        return '#4B3569'
        break
      case 'UX':
        return '#9F3A5A'
        break
      default:
        return
    }
  }
  //track name background color picker
  const trackColorPicker = (trackName) => {
    switch (trackName) {
      case 'DS':
        return '#D3F2CD'
        break
      case 'WEB':
        return '#DBEBFD'
        break
      case 'iOS' || 'IOS':
        return '#F4E6BE'
        break
      case 'Android':
        return '#E9D9FF'
        break
      case 'UX':
        return '#F9E3DE'
        break
      default:
        return
    }
  }

  //remove white space from company name for logo usage
  let stripped = review.company_name.replace(/ /g, '')
  let com = '.com'
  const logo = stripped.concat(com)

  const created = moment(review.created_at).fromNow()

  return (
    <>
      {/* ------------------------------------------------------------------------------------------------ */}
      {/* ---------------------------------------Modal Cards (for edit)----------------------------------- */}
      {/* ------------------------------------------------------------------------------------------------ */}

      <Modal
        preserveScrollBarGap
        isOpen={isOpen}
        onClose={onClose}
        size="950px"
      >
        <ModalOverlay />
        <ModalContent w="100%" wrap="nowrap">
          <ModalCloseButton
            data-cy="reviewCloseButton"
            background="none"
            border="none"
          />

          {/* LEFT SIDE MODAL */}
          <Flex
            direction="column"
            justify="space-between"
            align="flex-start"
            position="relative"
            w="261px"
            height="100%"
            top="0"
            left="0"
            pb="50px"
            pt="35px"
            pl="40px"
            bg="#F2F6FE"
            borderRadius="0px 40px 40px 0px"
          >
            {/* USER AVATAR AND NAME */}
            <Flex
              justify="space-evenly"
              align="center"
              mb="30px"
              onClick={navToProfile}
              style={{ cursor: 'pointer' }}
            >
              {review.user_profile_image === 'h' ? (
                <Image
                  size="40px"
                  mr="7px"
                  style={{ opacity: '0.6' }}
                  src={require('../../icons/user.svg')}
                />
              ) : (
                <Image
                  size="40px"
                  mr="7px"
                  style={{ opacity: '0.6', borderRadius: '50%' }}
                  src={review.user_profile_image}
                />
              )}
              <Text color="#131C4D" fontSize="14px" fontFamily="Muli">
                By {review.user_first_name} {review.user_last_name}
              </Text>
            </Flex>
            {/* COMPANY LOGO AND REVIEW STARS */}
            <Flex
              direction="column"
              justify="center"
              align="flex-start"
              mb="20px"
            >
              <Image
                w="148px"
                h="70px"
                src={`https://logo.clearbit.com/${
                  review.logo !== 'unknown' ? review.logo : logo
                }`}
                fallbackSrc={`http://samscct.com/wp-content/uploads/2014/09/no-logo.png`}
              />

              <Flex mt="13px">
                {Array(5)
                  .fill('')
                  .map((_, i) => (
                    <Icon
                      name="star"
                      key={i}
                      color={i < review.overall_rating ? '#F9DC76' : '#DADADD'}
                      ml="4px"
                    />
                  ))}
              </Flex>
            </Flex>
            {/* COMPANY LOCATION AND NAME */}
            <Flex
              direction="column"
              justify="center"
              align="flex-start"
              mb="40px"
            >
              <Flex mb="5px">
                <Box as={GoLocation} size="21px" color="#BBBDC6" mr="7px" />
                <Text color="#BBBDC6" fontSize="14px" fontFamily="Muli">
                  {review.city}, {review.state_name}
                </Text>
              </Flex>
              <Flex>
                <Box as={FaRegBuilding} size="21px" color="#BBBDC6" mr="7px" />
                <Text color="#BBBDC6" fontSize="14px" fontFamily="Muli">
                  {review.company_name}
                </Text>
              </Flex>
            </Flex>
            {/* JOB/INTERVIEW INFORMATION */}
            <Flex direction="column" justify="space-between" align="flex-start">
              <Flex
                direction="column"
                justify="flex-start"
                align="flex-start"
                mb="20px"
              >
                <Text
                  color="#131C4C"
                  fontSize="18px"
                  fontFamily="Muli"
                  fontWeight="bold"
                >
                  {review.job_title}
                </Text>
                <Text
                  color="#9194A8"
                  fontSize="14px"
                  fontFamily="Muli"
                  fontWeight="bold"
                >
                  Job title
                </Text>
              </Flex>
              <Flex
                direction="column"
                justify="flex-start"
                align="flex-start"
                mb="20px"
              >
                <Text
                  color="#131C4C"
                  fontSize="18px"
                  fontFamily="Muli"
                  fontWeight="bold"
                >{`${review.salary}.00`}</Text>
                <Text
                  color="#9194A8"
                  fontSize="14px"
                  fontFamily="Muli"
                  fontWeight="bold"
                >
                  Salary
                </Text>
              </Flex>
              <Flex
                direction="column"
                justify="flex-start"
                align="flex-start"
                mb="20px"
              >
                {review.review_type === 'Company' ? (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    {review.work_status}
                  </Text>
                ) : review.difficulty_rating === 1 ? (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    Very easy
                  </Text>
                ) : review.difficulty_rating === 2 ? (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    Easy
                  </Text>
                ) : review.difficulty_rating === 3 ? (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    Somewhat easy
                  </Text>
                ) : review.difficulty_rating === 4 ? (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    Somewhat hard
                  </Text>
                ) : review.difficulty_rating === 5 ? (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    Hard
                  </Text>
                ) : (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    N/A
                  </Text>
                )}

                <Text
                  color="#9194A8"
                  fontSize="14px"
                  fontFamily="Muli"
                  fontWeight="bold"
                >
                  {review.review_type === 'Company'
                    ? 'Status'
                    : 'Interview difficulty'}
                </Text>
              </Flex>
              <Flex
                direction="column"
                justify="flex-start"
                align="flex-start"
                mb="20px"
              >
                {review.review_type === 'Company' ? (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    {review.start_date} -{' '}
                    {review.end_date ? review.end_date : 'Present'}
                  </Text>
                ) : (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    {review.offer_status}
                  </Text>
                )}
                <Text
                  color="#9194A8"
                  fontSize="14px"
                  fontFamily="Muli"
                  fontWeight="bold"
                >
                  {review.review_type === 'Company' ? 'Dates' : 'Job offer?'}
                </Text>
              </Flex>
            </Flex>
            <Flex>
              {Number(loginId) === Number(review.user_id) ? (
                <Image
                  src={require('../../icons/edit.png')}
                  onClick={navToEditRoute}
                  cursor="pointer"
                  size="1.5em"
                  mr="12px"
                  data-cy="editModalReview"
                />
              ) : null}
              {Number(loginId) === Number(review.user_id) ? (
                <Image
                  data-cy="deleteModalReview"
                  src={require('../../icons/trash.png')}
                  onClick={() => setIsOpen2(true)}
                  cursor="pointer"
                  size="1.5em"
                />
              ) : null}
              <AlertDialog
                isOpen={isOpen2}
                leastDestructiveRef={cancelRef}
                onClose={onClose2}
              >
                <AlertDialogOverlay />
                <AlertDialogContent>
                  <AlertDialogHeader fontSize="lg" fontWeight="bold">
                    Delete review
                  </AlertDialogHeader>

                  <AlertDialogBody>
                    Are you sure? You can't undo this action afterwards.
                  </AlertDialogBody>

                  <AlertDialogFooter>
                    <Flex
                      align="center"
                      justify="center"
                      height="56px"
                      width="30%"
                      color="#344CD0"
                      fontSize="16px"
                      fontWeight="bold"
                      ref={cancelRef}
                      onClick={onClose2}
                    >
                      Cancel
                    </Flex>
                    <Button
                      data-cy="confirmDeleteModalReview"
                      h="56px"
                      rounded="10px"
                      border="none"
                      color="white"
                      variantColor="red"
                      ml={3}
                      onClick={submitDelete}
                    >
                      Delete
                    </Button>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>
            </Flex>
          </Flex>
          {/* RIGHT SIDE MODAL */}
          <Flex
            direction="column"
            justify="flex-start"
            align="flex-start"
            position="absolute"
            w="575px"
            h="100%"
            ml="291px"
            mb="50px"
            mt="35px"
          >
            {/* TYPE OF REVIEW, TRACK, DATE POSTED */}
            <Flex justify="space-between" w="100%" mb="70px">
              <Flex justify="space-between">
                <Box as={MdRateReview} size="24px" color="#BBBDC6" mr="4px" />
                <Text
                  mr="40px"
                  color="#131C4D"
                  fontFamily="Muli"
                  fontSize="14px"
                >
                  {review.review_type === 'Company'
                    ? 'Company Review'
                    : 'Interview Review'}
                </Text>
                <Badge
                  backgroundColor={
                    review.track_name === 'WEB'
                      ? '#DBEBFD'
                      : review.track_name === 'iOS'
                      ? '#F4E6BE'
                      : review.track_name === 'UX'
                      ? '#F9E3DE'
                      : review.track_name === 'DS'
                      ? '#D3F2CD'
                      : review.track_name === 'Android'
                      ? '#E9D9FF'
                      : '#DBEBFD'
                  }
                  color={
                    review.track_name === 'WEB'
                      ? '#474EA7'
                      : review.track_name === 'iOS'
                      ? '#8E3D19'
                      : review.track_name === 'UX'
                      ? '#9F3A5A '
                      : review.track_name === 'DS'
                      ? '#35694F'
                      : review.track_name === 'Android'
                      ? '#4B3569'
                      : '#474EA7'
                  }
                  fontSize="16px "
                  fontWeight="light"
                  fontFamily="Muli"
                  rounded="full"
                  px="15px"
                  pt="2px"
                  overflow="hidden"
                >
                  {review.track_name}
                </Badge>
              </Flex>
              <Text color="#9194A8" fontSize="14px" fontFamily="Muli">
                {adjustedDate}
              </Text>
            </Flex>
            {/* INTERVIEW TYPES */}
            {review.review_type === 'Interview' ? (
              <Flex color="#9194A8" fontSize="14px" fontFamily="Muli">
                Interviews
              </Flex>
            ) : null}
            {review.review_type === 'Interview' ? (
              <Flex
                justify="flex-start"
                wrap="wrap"
                whiteSpace="nowrap"
                width="100%"
                mb="50px"
              >
                {review.phone_interview ? (
                  <Flex
                    as="p"
                    color="#131C4D"
                    fontSize="16px"
                    fontFamily="Muli"
                    bg="#EAF0FE"
                    px="1%"
                    mt="1.5%"
                    mr="3%"
                    rounded="3px"
                  >
                    Phone screening
                  </Flex>
                ) : null}
                {review.resume_review ? (
                  <Flex
                    as="p"
                    color="#131C4D"
                    fontSize="16px"
                    fontFamily="Muli"
                    bg="#EAF0FE"
                    px="1%"
                    mt="1.5%"
                    mr="3%"
                    rounded="3px"
                  >
                    Resume review
                  </Flex>
                ) : null}
                {review.take_home_assignments ? (
                  <Flex
                    as="p"
                    color="#131C4D"
                    fontSize="16px"
                    fontFamily="Muli"
                    bg="#EAF0FE"
                    px="1%"
                    mt="1.5%"
                    mr="3%"
                    rounded="3px"
                  >
                    Take home assignments
                  </Flex>
                ) : null}
                {review.online_coding_assignments ? (
                  <Flex
                    as="p"
                    color="#131C4D"
                    fontSize="16px"
                    fontFamily="Muli"
                    bg="#EAF0FE"
                    px="1%"
                    mt="1.5%"
                    mr="3%"
                    rounded="3px"
                  >
                    Online coding assignments
                  </Flex>
                ) : null}
                {review.portfolio_review ? (
                  <Flex
                    as="p"
                    color="#131C4D"
                    fontSize="16px"
                    fontFamily="Muli"
                    bg="#EAF0FE"
                    px="1%"
                    mt="1.5%"
                    mr="3%"
                    rounded="3px"
                  >
                    Portfolio review
                  </Flex>
                ) : null}
                {review.screen_share ? (
                  <Flex
                    as="p"
                    color="#131C4D"
                    fontSize="16px"
                    fontFamily="Muli"
                    bg="#EAF0FE"
                    px="1%"
                    mt="1.5%"
                    mr="3%"
                    rounded="3px"
                  >
                    Screen share
                  </Flex>
                ) : null}
                {review.open_source_contribution ? (
                  <Flex
                    as="p"
                    color="#131C4D"
                    fontSize="16px"
                    fontFamily="Muli"
                    bg="#EAF0FE"
                    px="1%"
                    mt="1.5%"
                    mr="3%"
                    rounded="3px"
                  >
                    Open source contribution
                  </Flex>
                ) : null}
                {review.side_projects ? (
                  <Flex
                    as="p"
                    color="#131C4D"
                    fontSize="16px"
                    fontFamily="Muli"
                    bg="#EAF0FE"
                    px="1%"
                    mt="1.5%"
                    mr="3%"
                    rounded="3px"
                  >
                    Side projects
                  </Flex>
                ) : null}
              </Flex>
            ) : null}
            {/* DESCRIPTION */}
            <Flex direction="column">
              <Text color="#9194A8" fontSize="14px" fontFamily="Muli" mb="7px">
                Description
              </Text>
              <Text
                color="#131C4D"
                fontSize="16px"
                fontFamily="Muli"
                lineHeight="23px"
              >
                {review.comment}
              </Text>
            </Flex>
          </Flex>
          {/* ADMIN BUTTONS */}
          <ModalFooter
            w="689px"
            ml="261px"
            mb="20px"
            position="absolute"
            bottom="0"
          >
            <BlockButton user_id={review.user_id} isAdmin={isAdmin} />
            <ContentButton
              isAdmin={isAdmin}
              submitDelete={submitDelete}
              user_id={review.user_id}
              review_id={review.review_id}
            />
          </ModalFooter>
        </ModalContent>
      </Modal>

      {/* ------------------------------------------------------------------------------------------------ */}
      {/* ---------------------------------------DashBoard Cards------------------------------------------ */}
      {/* ------------------------------------------------------------------------------------------------ */}

      {/* Review container */}
      <PseudoBox
        mb="3%"
        mx="2.5%"
        px="1%"
        py="1%"
        border="1px solid #E9F0FF"
        width="408px"
        height="309px"
        borderRadius="12px"
        display="flex"
        flexDir="column"
        _hover={{ bg: '#E9F0FF' }}
        onClick={onOpen}
        data-cy="modalCard"
      >
        {/* Review content container */}
        <Flex flexDir="column">
          {/* headline container  */}
          <Flex maxW="530px">
            <Flex
              height="115px"
              justify="space-between"
              maxW="391px"
              p="2% 5%"
              wrap="wrap"
            >
              <Flex maxW="300px">
                {review.review_type === 'Company' ? (
                  <Image
                    width="106px"
                    height="40px"
                    src={`https://logo.clearbit.com/${
                      review.logo !== 'unknown' ? review.logo : logo
                    }`}
                    fallbackSrc={`http://samscct.com/wp-content/uploads/2014/09/no-logo.png`}
                  />
                ) : (
                  <Text style={{ fontSize: '22px', fontWeight: 'bold' }}>
                    {' '}
                    {review.job_title}
                  </Text>
                )}
              </Flex>
              <i
                style={{ alignSelf: 'center', fontSize: '22px', opacity: '.2' }}
                className="far fa-heart"
              ></i>
              <Flex justify="space-between" width="391px" pt="2%">
                <Flex align="center">
                  {Array(5)
                    .fill('')
                    .map((_, i) => (
                      <Icon
                        name="star"
                        key={i}
                        color={i < review.overall_rating ? '#F9DC76' : '#fff'}
                        ml="8%"
                      />
                    ))}
                </Flex>
                <Flex>
                  <Text
                    style={{
                      color: '#BBBDC6',
                      fontSize: '14px',
                      fontWeight: 'bold',
                    }}
                  >
                    {created}
                  </Text>
                  {/* )} */}
                </Flex>
              </Flex>
              <Flex width="391px" height="45px" pt="15px">
                <Box as={MdRateReview} size="24px" color="#BBBDC6" mr="4px" />
                <span style={{ paddingLeft: '5px' }}>
                  {review.review_type} review
                </span>
              </Flex>
            </Flex>
          </Flex>
        </Flex>
        {/* summary container */}
        <Flex width="100%" height="100px">
          <Flex m="10px 20px" w="348px" h="55px" overflow="hidden">
            <p style={{ fontSize: '14px', color: 'gray' }}>{review.comment}</p>
          </Flex>
        </Flex>
        <Flex
          margin="0px 12px 0px 20px"
          align="center"
          pt="5px"
          height="40px"
          justify="space-between"
        >
          <Flex alignItems="center">
            <Avatar size="md" src={review.user_profile_image} />
            <Text pl="5px" fontSize="14px">
              {review.user_first_name} {review.user_last_name}
            </Text>
          </Flex>
          <Badge
            backgroundColor={trackColorPicker(review.track_name)}
            color={trackFontColor(review.track_name)}
            fontSize="1em"
            fontWeight="light"
            rounded="full"
            textAlign="center"
            pt="5px"
            overflow="hidden"
            ml="10px"
            width="58px"
            height="36px"
          >
            <span>{review.track_name}</span>
          </Badge>
        </Flex>
      </PseudoBox>
    </>
  )
}

EditUserProfile = ({ match, history, userData, updateUser }) => {
  const id = match.params.id
  const userId = window.localStorage.getItem('userId')
  // creating form state, setting default values
  const { handleSubmit, errors, register, formState } = useForm({
    defaultValues: {
      firstName: userData.first_name,
      lastName: userData.last_name,
      gradMonth: userData.graduated ? userData.graduated.slice(5, 7) : null,
      gradYear: userData.graduated ? userData.graduated.slice(0, 4) : null,
      highest_ed: userData.highest_ed,
      field_of_study: userData.field_of_study,
      employed_company: userData.employed_company,
      employed_title: userData.employed_title,
      workMonth: userData.employed_start
        ? userData.employed_start.slice(5, 7)
        : null,
      workYear: userData.employed_start
        ? userData.employed_start.slice(0, 4)
        : null,
      resume: userData.resume ? userData.resume : null,
      portfolio_URL: userData.portfolio ? userData.portfolio : null,
      linked_in: userData.linked_in ? userData.linked_in : null,
      slack: userData.slack ? userData.slack : null,
      github: userData.github ? userData.github : null,
      dribble: userData.dribble ? userData.dribble : null,
      profile_image: userData.profile_image ? userData.profile_image : null,
    },
  })

  //location state/helpers
  const [location, setLocation] = useState({})
  const [newLocation, setNewLocation] = useState({})
  const stateHelper = (value) => {
    setLocation(value)
  }
  // cloudinary stuff
  const [newProfile_image, setNewProfile_Image] = useState('')
  const [newProfile_resume, setNewProfile_resume] = useState('')

  // graduated state/helpers
  const [graduated, setGraduated] = useState(userData.graduated ? true : false)
  const isGraduated = () => {
    setGraduated(true)
  }
  const notGraduated = () => {
    setGraduated(false)
  }
  // employed state/helpers
  const [employed, setEmployed] = useState(
    userData.employed_start ? true : false
  )
  const isEmployed = () => {
    setEmployed(true)
  }
  const notEmployed = () => {
    setEmployed(false)
  }

  //radio button state
  const [priorExp, setPriorExp] = useState(
    userData.prior_experience ? userData.prior_experience : false
  )
  const [tlsl, setTlsl] = useState(
    userData.tlsl_experience ? userData.tlsl_experience : false
  )
  const [remote, setRemote] = useState(
    userData.employed_remote ? userData.employed_remote : false
  )

  //location helper
  useEffect(() => {
    setNewLocation({ ...location, myState: location.myState })
    // removes numbers, commas, and whitespaces from city
    if (location.myCity) {
      if (/^[0-9]+$/.test(location.myCity) || /\s/.test(location.myCity)) {
        const tempCity = location.myCity
        setNewLocation({
          ...location,
          myCity: tempCity.replace(/^[\s,\d]+/, ''),
        })
      }
    }
  }, [location])

  ///info for slack ID
  const info = (
    <Box>
      <Image
        objectFit="fit"
        width="300px"
        height="300px"
        src={require('../../../icons/slack.gif')}
        alt="slack info"
      />
    </Box>
  )

  //validation
  function validateFirstName(value) {
    let error
    let nameRegex = /^[0-9*#+]+$/
    if (!value) {
      error = 'First Name is required'
    } else if (value.length < 2) {
      error = 'First Name must be at least 2 characters'
    } else if (nameRegex.test(value)) {
      error = 'First Name can only contain letters'
    }
    return error || true
  }

  function validateLastName(value) {
    let error
    let nameRegex = /^[0-9*#+]+$/
    if (!value) {
      error = 'Last Name is required'
    } else if (value.length < 2) {
      error = 'Last Name must be at least 2 characters'
    } else if (nameRegex.test(value)) {
      error = 'Last Name can only contain letters'
    }
    return error || true
  }

  function validateFieldOfStudy(value) {
    let error
    let nameRegex = /^[0-9*#+]+$/
    if (nameRegex.test(value)) {
      error = 'Field of study can only contain letters'
    }
    return error || true
  }
  //end validation

  //add image to cloudinary
  const updateImage = async (e) => {
    const files = e.target.files
    const data = new FormData()
    data.append('file', files[0])
    data.append('upload_preset', 'upload')
    const res = await fetch(
      '	https://api.cloudinary.com/v1_1/takija/image/upload',
      {
        method: 'POST',
        body: data,
      }
    )
    const file = await res.json()
    setNewProfile_Image(...newProfile_image, file.secure_url)
  }

  //upload resume to cloudinary
  const updateResume = async (e) => {
    const files = e.target.files
    const data = new FormData()
    data.append('file', files[0])
    data.append('upload_preset', 'upload')
    const res = await fetch(
      '	https://api.cloudinary.com/v1_1/takija/image/upload',
      {
        method: 'POST',
        body: data,
      }
    )
    const file = await res.json()
    setNewProfile_resume(...newProfile_resume, file.secure_url)
  }

  // FORM SUBMISSION
  const submitForm = (creds) => {
    // correcting grad date format
    let graduated = null
    if (creds.gradMonth && creds.gradYear) {
      graduated = `${creds.gradYear}-${creds.gradMonth}-01`
    }

    // correcting employed date format
    let employed_start = null
    if (creds.workMonth && creds.workYear) {
      employed_start = `${creds.workYear}-${creds.workMonth}-01`
    }
    // formatting the signup state to match the back end columns
    updateUser(id, {
      first_name: creds.firstName,
      last_name: creds.lastName,
      location: newLocation
        ? `${newLocation.myCity || userData.location} ${newLocation.myState}`
        : creds.location,
      graduated: graduated,
      highest_ed: creds.highest_ed || null,
      field_of_study: creds.field_of_study || null,
      prior_experience: creds.prior_experience
        ? JSON.parse(creds.prior_experience)
        : false,
      tlsl_experience: creds.tlsl_experience
        ? JSON.parse(creds.tlsl_experience)
        : false,
      employed_company: creds.employed_company || null,
      employed_title: creds.employed_title || null,
      employed_remote: creds.employed_remote
        ? JSON.parse(creds.employed_remote)
        : false,
      employed_start: employed_start,
      resume: newProfile_resume || userData.resume,
      linked_in: creds.linked_in || null,
      slack: creds.slack || null,
      github: creds.github || null,
      dribble: creds.dribble || null,
      profile_image: newProfile_image || userData.profile_image,
      portfolio: creds.portfolio_URL || null,
    }).then(() => history.push(`/profile/${id}`))

    ReactGA.event({
      category: 'User',
      action: `Button Update Profile`,
    })
  }

  const returnToProfile = (e) => {
    e.preventDefault()
    history.push(`/profile/${id}`)
  }

  //see profilePage component for details
  const lazySolution =
    userData.location != 'undefined undefined ' &&
    userData.location != 'undefined undefined'
      ? userData.location
      : 'Enter your location'

  return (
    <>
      {/* //Top Section */}

      <Flex
        maxW="1440px"
        w="100%"
        px="40px"
        py="28px"
        m="0 auto"
        justify="space-between"
        align="center"
        borderBottom="1px solid #EAF0FE"
      >
        <Flex>
          <Link
            style={{
              textDecoration: 'none',
              color: '#344CD0',
              fontFamily: 'Poppins',
              fontWeight: '600',
              fontSize: '32px',
            }}
            to="/dashboard"
          >
            <h1> Allay </h1>
          </Link>
        </Flex>

        {Number(userId) === Number(userData.id) ? (
          <Flex>
            {userData.profile_image === 'h' ? (
              <Image
                size="58px"
                style={{ opacity: '0.6' }}
                src={require('../../../icons/user.svg')}
              />
            ) : (
              <Image
                size="58px"
                style={{ opacity: '0.6', borderRadius: '50%' }}
                src={userData.profile_image}
              />
            )}
          </Flex>
        ) : null}
      </Flex>
      <Flex
        w="833px"
        mx="auto"
        justify="center"
        align="center"
        flexDir="column"
      >
        <form onSubmit={handleSubmit(submitForm)}>
          <Flex
            w="833px"
            p="6"
            flexDir="column"
            background="#FDFDFF"
            justify="center"
          >
            <Flex w="653px" justify="space-between" my="68px" mx="auto">
              <Text
                as="h2"
                fontSize="24px"
                fontWeight="600"
                fontFamily="Poppins"
              >
                Edit Profile
              </Text>
              <Flex w="150px" justify="space-between">
                <Text
                  as="h3"
                  fontFamily="Muli"
                  fontSize="22px"
                  fontWeight="normal"
                  color="#9194A8"
                  style={{ cursor: 'pointer' }}
                  onClick={returnToProfile}
                >
                  Cancel
                </Text>
                <Text
                  as="h3"
                  fontFamily="Muli"
                  fontSize="22px"
                  fontWeight="bold"
                  color="#344CD0"
                  style={{ cursor: 'pointer' }}
                  onClick={handleSubmit(submitForm)}
                >
                  Save
                </Text>
              </Flex>
            </Flex>

            {/* CLOUDINARY IMAGE UPLOAD */}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              mb="55px"
              justify="space-evenly"
              alignItems="center"
            >
              {!newProfile_image ? (
                <Avatar
                  size="2xl"
                  name={userData.first_name}
                  style={{ borderRadius: '50%' }}
                  src={userData.profile_image}
                />
              ) : (
                <Avatar
                  size="2xl"
                  style={{ borderRadius: '50%' }}
                  src={newProfile_image}
                />
              )}

              <Flex alignItems="center">
                <input
                  type="file"
                  filename="image"
                  placeholder="Upload profile picture"
                  onChange={updateImage}
                  style={{
                    opacity: '1',
                    width: '105px',
                    color: 'transparent',
                    backgroundColor: 'transparent',
                  }}
                />
                {!newProfile_image ? (
                  <label htmlFor="files" className="btn">
                    Update profile image
                  </label>
                ) : (
                  <i
                    style={{
                      fontSize: '1.4rem',
                      color: 'green',
                      paddingLeft: '20px',
                    }}
                    className="far fa-check-circle"
                  ></i>
                )}
              </Flex>
            </Flex>

            {/* FIRST NAME, LAST NAME */}
            <Flex wrap="wrap" w="653" justify="center">
              <FormControl isRequired isInvalid={errors.username}>
                <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                  First Name
                </FormLabel>
                <SignupLoginInput
                  w="318px"
                  mb="30px"
                  mr="17px"
                  type="text"
                  name="firstName"
                  label="firstName"
                  placeholder="John"
                  autoCapitalize="none"
                  ref={register({ validate: validateFirstName })}
                />
                <FormErrorMessage>
                  {errors.firstName && errors.firstName.message}
                </FormErrorMessage>
              </FormControl>
              <FormControl isRequired isInvalid={errors.username}>
                <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                  Last Name
                </FormLabel>
                <SignupLoginInput
                  w="318px"
                  mb="30px"
                  type="text"
                  name="lastName"
                  label="lastName"
                  placeholder="Doe"
                  autoCapitalize="none"
                  ref={register({ validate: validateLastName })}
                />
                <FormErrorMessage>
                  {errors.lastName && errors.lastName.message}
                </FormErrorMessage>
              </FormControl>
            </Flex>

            {/* LOCATION OF USER */}
            <Flex wrap="wrap" w="653" justify="center">
              <FormControl>
                <FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
                  Location (City, State)
                </FormLabel>
                <CustomAutocomplete
                  stateHelper={stateHelper}
                  w="653px"
                  h="58px"
                  mb="30px"
                  rounded="2px"
                  variant="outline"
                  bgColor="#FDFDFF"
                  focusBorderColor="#344CD0"
                  borderColor="#EAF0FE"
                  color="#17171B"
                  _hover={{ borderColor: '#BBBDC6' }}
                  _placeholder={{ color: '#BBBDC6' }}
                  id="location"
                  name="location"
                  label="location"
                  placeholder={lazySolution}
                  ref={register}
                />
              </FormControl>
            </Flex>

            {/* GRADUATED CHECK */}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              mb={graduated ? '20px' : '80px'}
              justify="space-between"
            >
              <FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
                Have you graduated from Lambda yet?
              </FormLabel>
              <Flex justify="space-between" w="131px">
                <Radio
                  name="graduated"
                  id="graduated-1"
                  value={true}
                  isChecked={graduated === true}
                  onClick={isGraduated}
                  borderRadius="md"
                  borderColor="#D9D9D9"
                  _checked={{ bg: '#344CD0' }}
                >
                  Yes
                </Radio>
                <Radio
                  name="graduated"
                  id="graduated-2"
                  value={false}
                  isChecked={graduated === false}
                  onClick={notGraduated}
                  borderRadius="md"
                  borderColor="#D9D9D9"
                  _checked={{ bg: '#344CD0' }}
                >
                  No
                </Radio>
              </Flex>
            </Flex>
            {/* GRADUATED MONTH AND YEAR */}
            {graduated ? (
              <Flex
                wrap="wrap"
                w="653px"
                mx="auto"
                mb="80px"
                justify="space-between"
                align="center"
              >
                <FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
                  When did you graduate?
                </FormLabel>
                <Flex align="center" alignContent="center">
                  <FormControl>
                    <Select
                      mr="17px"
                      h="68px"
                      py="16px"
                      w="155px"
                      rounded="2px"
                      variant="outline"
                      backgroundColor="#FDFDFF"
                      focusBorderColor="#344CD0"
                      borderColor="#EAF0FE"
                      color="#BBBDC6"
                      _focus={{ color: '#17171B' }}
                      _hover={{ borderColor: '#BBBDC6' }}
                      name="gradMonth"
                      label="gradMonth"
                      ref={register}
                    >
                      <option fontFamily="Muli" value="">
                        Month
                      </option>
                      <option fontFamily="Muli" value="01">
                        Jan
                      </option>
                      <option fontFamily="Muli" value="02">
                        Feb
                      </option>
                      <option fontFamily="Muli" value="03">
                        Mar
                      </option>
                      <option fontFamily="Muli" value="04">
                        Apr
                      </option>
                      <option fontFamily="Muli" value="05">
                        May
                      </option>
                      <option fontFamily="Muli" value="06">
                        Jun
                      </option>
                      <option fontFamily="Muli" value="07">
                        Jul
                      </option>
                      <option fontFamily="Muli" value="08">
                        Aug
                      </option>
                      <option fontFamily="Muli" value="09">
                        Sep
                      </option>
                      <option fontFamily="Muli" value="10">
                        Oct
                      </option>
                      <option fontFamily="Muli" value="11">
                        Nov
                      </option>
                      <option fontFamily="Muli" value="12">
                        Dec
                      </option>
                    </Select>
                  </FormControl>
                  <FormControl>
                    <Select
                      h="68px"
                      py="16px"
                      w="155px"
                      rounded="2px"
                      variant="outline"
                      backgroundColor="#FDFDFF"
                      focusBorderColor="#344CD0"
                      borderColor="#EAF0FE"
                      color="#BBBDC6"
                      _focus={{ color: '#17171B' }}
                      _hover={{ borderColor: '#BBBDC6' }}
                      name="gradYear"
                      label="gradYear"
                      ref={register}
                    >
                      <option fontFamily="Muli" value="">
                        Year
                      </option>
                      {years.map((year, index) => (
                        <option key={`year${index}`} value={year}>
                          {year}
                        </option>
                      ))}
                    </Select>
                  </FormControl>
                </Flex>
              </Flex>
            ) : null}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              mb="35px"
              justify="flex-start"
              borderTop="1px solid #DADADD"
            >
              <Text
                fontFamily="Poppins"
                fontWeight="600"
                fontSize="24px"
                lineHeight="36px"
                color="#BBBDC6"
              >
                Background
              </Text>
            </Flex>

            {/* HIGHEST LEVEL OF EDUCATION */}
            <Flex wrap="wrap" w="411px%" justify="center">
              <FormControl>
                <FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
                  Highest level of education
                </FormLabel>
                <Select
                  mb="30px"
                  mr="17px"
                  h="68px"
                  py="16px"
                  w="318px"
                  rounded="2px"
                  variant="outline"
                  backgroundColor="#FDFDFF"
                  focusBorderColor="#344CD0"
                  borderColor="#EAF0FE"
                  color="#BBBDC6"
                  _focus={{ color: '#17171B' }}
                  _hover={{ borderColor: '#BBBDC6' }}
                  name="highest_ed"
                  label="highest_ed"
                  ref={register}
                >
                  <option fontFamily="Muli" value="">
                    Select your education level
                  </option>
                  <option fontFamily="Muli" value="High school diploma">
                    High school diploma
                  </option>
                  <option fontFamily="Muli" value="Associate's degree">
                    Associate's degree
                  </option>
                  <option fontFamily="Muli" value="Bachelor's degree">
                    Bachelor's degree
                  </option>
                  <option fontFamily="Muli" value="Master's degree">
                    Master's degree
                  </option>
                  <option fontFamily="Muli" value="PhD">
                    PhD
                  </option>
                </Select>
              </FormControl>

              {/* FIELD OF STUDY */}
              <FormControl isInvalid={errors.fieldOfStudy}>
                <FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
                  Field of study
                </FormLabel>
                <SignupLoginInput
                  w="318px"
                  mb="30px"
                  type="text"
                  name="field_of_study"
                  label="field_of_study"
                  placeholder="Enter your field of study"
                  autoCapitalize="none"
                  ref={register({ validate: validateFieldOfStudy })}
                />
                <FormErrorMessage>
                  {errors.fieldOfStudy && errors.fieldOfStudy.message}
                </FormErrorMessage>
              </FormControl>
            </Flex>

            {/* PRIOR EXPERIENCE */}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              mb="30px"
              justify="space-between"
            >
              <FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
                Prior to Lambda did you have any experience in your track?
              </FormLabel>
              <Flex justify="space-between" w="131px">
                <Radio
                  name="prior_experience"
                  id="priorExp-1"
                  ref={register}
                  value={true}
                  isChecked={priorExp === true}
                  onChange={() => setPriorExp(true)}
                  borderRadius="md"
                  borderColor="#D9D9D9"
                  _checked={{ bg: '#344CD0' }}
                >
                  Yes
                </Radio>
                <Radio
                  name="prior_experience"
                  id="priorExp-2"
                  ref={register}
                  value={false}
                  isChecked={priorExp === false}
                  onChange={() => setPriorExp(false)}
                  borderRadius="md"
                  borderColor="#D9D9D9"
                  _checked={{ bg: '#344CD0' }}
                >
                  No
                </Radio>
              </Flex>
            </Flex>

            {/* DID YOU TL/SL */}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              mb="100px"
              justify="space-between"
            >
              <FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
                Have you been a TL/SL while at Lambda?
              </FormLabel>
              <Flex justify="space-between" w="131px">
                <Radio
                  name="tlsl_experience"
                  id="TLSL-1"
                  value={true}
                  ref={register}
                  isChecked={tlsl === true}
                  onChange={() => setTlsl(true)}
                  borderRadius="md"
                  borderColor="#D9D9D9"
                  _checked={{ bg: '#344CD0' }}
                >
                  Yes
                </Radio>
                <Radio
                  name="tlsl_experience"
                  id="TLSL-2"
                  value={false}
                  ref={register}
                  isChecked={tlsl === false}
                  onChange={() => setTlsl(false)}
                  borderRadius="md"
                  borderColor="#D9D9D9"
                  _checked={{ bg: '#344CD0' }}
                >
                  No
                </Radio>
              </Flex>
            </Flex>

            {/* RESUME UPLOAD */}
            {/* /// */}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              justify="space-between"
              align="center"
            >
              <Text
                fontSize="18px"
                color="#131C4D"
                align="center"
                fontFamily="Muli"
              >
                Resume
              </Text>
              <Flex width="270px" justify="flex-end">
                <input
                  type="file"
                  filename="image"
                  placeholder="Upload profile picture"
                  onChange={updateResume}
                  style={{
                    opacity: '1',
                    width: '105px',
                    color: 'transparent',
                    backgroundColor: 'transparent',
                  }}
                />
                <label htmlFor="files" className="btn">
                  {!newProfile_resume ? (
                    'Upload resume'
                  ) : (
                    <i
                      style={{
                        fontSize: '1.4rem',
                        color: 'green',
                        paddingLeft: '20px',
                      }}
                      className="far fa-check-circle"
                    ></i>
                  )}
                </label>
              </Flex>
            </Flex>
            <Flex w="653px" mx="auto" justify="flex-start">
              <FormHelperText w="653px" mb="30px" color="#9194A8">
                Must be a .pdf file
              </FormHelperText>
            </Flex>

            {/* //// */}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              mb="35px"
              justify="flex-start"
              borderTop="1px solid #DADADD"
            >
              <Text
                fontFamily="Poppins"
                fontWeight="600"
                fontSize="24px"
                lineHeight="36px"
                color="#BBBDC6"
              >
                Employment
              </Text>
            </Flex>

            {/* EMPLOYED CHECK */}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              mb={employed ? '30px' : '80px'}
              justify="space-between"
            >
              <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                Are you currently employed in your field of study?
              </FormLabel>
              <Flex justify="space-between" w="131px">
                <Radio
                  name="employed"
                  id="employed-1"
                  value={true}
                  isChecked={employed === true}
                  onClick={isEmployed}
                  borderRadius="md"
                  borderColor="#D9D9D9"
                  _checked={{ bg: '#344CD0' }}
                >
                  Yes
                </Radio>
                <Radio
                  name="employed"
                  id="employed-2"
                  value={false}
                  isChecked={employed === false}
                  onClick={notEmployed}
                  borderRadius="md"
                  borderColor="#D9D9D9"
                  _checked={{ bg: '#344CD0' }}
                >
                  No
                </Radio>
              </Flex>
            </Flex>

            {/* EMPLOYED COMPANY NAME AND JOB TITLE */}
            {employed ? (
              <Flex wrap="wrap" w="653" justify="center">
                <FormControl>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Company name
                  </FormLabel>
                  <SignupLoginInput
                    w="318px"
                    mb="30px"
                    mr="17px"
                    type="text"
                    name="employed_company"
                    label="employed_company"
                    placeholder="Enter the company name"
                    autoCapitalize="none"
                    ref={register}
                  />
                </FormControl>
                <FormControl>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Job title
                  </FormLabel>
                  <SignupLoginInput
                    w="318px"
                    mb="30px"
                    type="text"
                    name="employed_title"
                    label="employed_title"
                    placeholder="Enter your job title"
                    autoCapitalize="none"
                    ref={register}
                  />
                </FormControl>
              </Flex>
            ) : null}

            {/* REMOTE WORK CHECK */}
            {employed ? (
              <Flex
                wrap="wrap"
                w="653px"
                mx="auto"
                mb="30px"
                justify="space-between"
              >
                <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                  Are you working remotely?
                </FormLabel>
                <Flex justify="space-between" w="131px">
                  <Radio
                    name="employed_remote"
                    id="employed_remote-1"
                    value={true}
                    ref={register}
                    isChecked={remote === true}
                    onChange={() => setRemote(true)}
                    borderRadius="md"
                    borderColor="#D9D9D9"
                    _checked={{ bg: '#344CD0' }}
                  >
                    Yes
                  </Radio>
                  <Radio
                    name="employed_remote"
                    id="employed_remote-2"
                    value={false}
                    ref={register}
                    isChecked={remote === false}
                    onChange={() => setRemote(false)}
                    borderRadius="md"
                    borderColor="#D9D9D9"
                    _checked={{ bg: '#344CD0' }}
                  >
                    No
                  </Radio>
                </Flex>
              </Flex>
            ) : null}

            {/* EMPLOYMENT START DATE */}
            {employed ? (
              <Flex
                wrap="wrap"
                w="653px"
                mx="auto"
                mb="80px"
                justify="space-between"
                align="center"
              >
                <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                  When did you start?
                </FormLabel>
                <Flex align="center" alignContent="center">
                  <FormControl>
                    <Select
                      mr="17px"
                      h="68px"
                      py="16px"
                      w="159px"
                      rounded="2px"
                      variant="outline"
                      backgroundColor="#FDFDFF"
                      focusBorderColor="#344CD0"
                      borderColor="#EAF0FE"
                      color="#BBBDC6"
                      _focus={{ color: '#17171B' }}
                      _hover={{ borderColor: '#BBBDC6' }}
                      name="workMonth"
                      label="workMonth"
                      ref={register}
                    >
                      <option fontFamily="Muli" value="">
                        Month
                      </option>
                      <option fontFamily="Muli" value="01">
                        Jan
                      </option>
                      <option fontFamily="Muli" value="02">
                        Feb
                      </option>
                      <option fontFamily="Muli" value="03">
                        Mar
                      </option>
                      <option fontFamily="Muli" value="04">
                        Apr
                      </option>
                      <option fontFamily="Muli" value="05">
                        May
                      </option>
                      <option fontFamily="Muli" value="06">
                        Jun
                      </option>
                      <option fontFamily="Muli" value="07">
                        Jul
                      </option>
                      <option fontFamily="Muli" value="08">
                        Aug
                      </option>
                      <option fontFamily="Muli" value="09">
                        Sep
                      </option>
                      <option fontFamily="Muli" value="10">
                        Oct
                      </option>
                      <option fontFamily="Muli" value="11">
                        Nov
                      </option>
                      <option fontFamily="Muli" value="12">
                        Dec
                      </option>
                    </Select>
                  </FormControl>
                  <FormControl>
                    <Select
                      h="68px"
                      py="16px"
                      w="159px"
                      rounded="2px"
                      variant="outline"
                      backgroundColor="#FDFDFF"
                      focusBorderColor="#344CD0"
                      borderColor="#EAF0FE"
                      color="#BBBDC6"
                      _focus={{ color: '#17171B' }}
                      _hover={{ borderColor: '#BBBDC6' }}
                      name="workYear"
                      label="workYear"
                      ref={register}
                    >
                      <option fontFamily="Muli" value="">
                        Year
                      </option>
                      {years.map((year, index) => (
                        <option key={`year${index}`} value={year}>
                          {year}
                        </option>
                      ))}
                    </Select>
                  </FormControl>
                </Flex>
              </Flex>
            ) : null}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              mb="35px"
              justify="flex-start"
              borderTop="1px solid #DADADD"
            >
              <Text
                fontFamily="Poppins"
                fontWeight="600"
                fontSize="24px"
                lineHeight="36px"
                color="#BBBDC6"
              >
                Online Presence
              </Text>
            </Flex>

            {/* PORTFOLIO URL */}
            <Flex
              wrap="wrap"
              w="653px"
              mb="15px"
              mx="auto"
              justify="space-between"
              align="center"
            >
              <Text
                color="#131C4D"
                fontSize="18px"
                align="center"
                fontFamily="Muli"
              >
                Portfolio URL
              </Text>
              <SignupLoginInput
                w="318px"
                type="text"
                name="portfolio_URL"
                label="portfolio_URL"
                placeholder="Enter your portfolio URL"
                autoCapitalize="none"
                ref={register}
              />
            </Flex>

            {/* LINKEDIN URL */}
            <Flex
              wrap="wrap"
              w="653px"
              mb="15px"
              mx="auto"
              justify="space-between"
              align="center"
            >
              <Text
                color="#131C4D"
                fontSize="18px"
                align="center"
                fontFamily="Muli"
              >
                LinkedIn URL
              </Text>
              <SignupLoginInput
                w="318px"
                type="text"
                name="linked_in"
                label="linked_in"
                placeholder="Enter your LinkedIn URL"
                autoCapitalize="none"
                ref={register}
              />
            </Flex>

            {/* SLACK USERNAME */}
            <Flex
              wrap="wrap"
              w="653px"
              mb="15px"
              mx="auto"
              justify="space-between"
              align="center"
            >
              <Text
                color="#131C4D"
                fontSize="18px"
                align="center"
                fontFamily="Muli"
              >
                Slack ID
                <Tooltip hasArrow label={info} placement="top">
                  <i
                    style={{ paddingLeft: '10px' }}
                    className="fas fa-question"
                  ></i>
                </Tooltip>
              </Text>
              <SignupLoginInput
                w="318px"
                type="text"
                name="slack"
                label="slack"
                placeholder="Enter your Slack ID"
                autoCapitalize="none"
                ref={register}
              />
            </Flex>

            {/* GITHUB USERNAME */}
            <Flex
              wrap="wrap"
              w="653px"
              mb="15px"
              mx="auto"
              justify="space-between"
              align="center"
            >
              <Text
                color="#131C4D"
                fontSize="18px"
                align="center"
                fontFamily="Muli"
              >
                Github URL
              </Text>
              <SignupLoginInput
                w="318px"
                type="text"
                name="github"
                label="github"
                placeholder="Enter your Github URL"
                autoCapitalize="none"
                ref={register}
              />
            </Flex>

            {/* DRIBBBLE URL */}
            <Flex
              wrap="wrap"
              w="653px"
              mb="15px"
              mx="auto"
              justify="space-between"
              align="center"
            >
              <Text
                color="#131C4D"
                fontSize="18px"
                align="center"
                fontFamily="Muli"
              >
                Dribbble URL
              </Text>
              <SignupLoginInput
                w="318px"
                type="text"
                name="dribble"
                label="dribble"
                placeholder="Enter your Dribbble URL"
                autoCapitalize="none"
                ref={register}
              />
            </Flex>
            <Flex
              w="100%"
              style={{ alignItems: 'center' }}
              justify="center"
              direction="column"
            >
              <Button
                border="none"
                rounded="50px"
                h="58px"
                w="653px"
                my="2%"
                size="lg"
                color="white"
                backgroundColor="#344CD0"
                _hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
                isLoading={formState.isSubmitting}
                type="submit"
                data-cy="registerSubmit"
              >
                Save
              </Button>
              <Button
                mb="30px"
                border="none"
                rounded="50px"
                h="58px"
                w="653px"
                my="2%"
                size="lg"
                color="#9194A8"
                backgroundColor="#FDFDFF"
                _hover={{ cursor: 'pointer' }}
                onClick={returnToProfile}
                data-cy="cancelUpdate"
              >
                Cancel
              </Button>
            </Flex>
          </Flex>
        </form>
      </Flex>
    </>
  )
}

Email = () => {
  const { message } = useContext(EmailContext);
  const headers = message ? message.payload.headers : [];
  const toast = useToast();

  React.useEffect(() => {
    if (message) {
      addToFrame(message);
    }
    // eslint-disable-next-line
  }, [message]);

  const formatReplayData = (headers) => {
    const replayTo =
      getHeader(headers, "Reply-to") !== undefined
        ? getHeader(headers, "Reply-to")
        : getHeader(headers, "From");
    const replaySubject = getHeader(headers, "Subject");
    const replayMsgId = getHeader(headers, "Message-ID");

    return {
      to: `${replayTo}`,
      subject: `Re: ${replaySubject}`,
      msgId: `${replayMsgId}`,
    };
  };

  const handleTrashBtn = (userId, messageId) => {
    return window.gapi.client.gmail.users.messages
      .trash({
        userId: userId,
        id: messageId,
      })
      .then((resp) => {
        if (resp.status === 200) {
          toast({
            title: "Message Deleted",
            status: "error",
            duration: 3000,
            isClosable: true,
          });
        }
      })
      .catch((error) => {
        console.log("error: ", error);
        toast({
          title: "An error occurred.",
          description: "Unable to Delete Message.",
          status: "warning",
          duration: 3000,
          isClosable: true,
        });
      });
  };

  const handleArchiveBtn = (ids, labelIds) => {
    return window.gapi.client.gmail.users.messages
      .batchModify({
        userId: "me",
        resource: {
          ids: ids,
          removeLabelIds: labelIds,
        },
      })
      .then((resp) => {
        if (resp.status === 204) {
          toast({
            title: "Message Archived",
            description: "The Message is now in archive category.",
            status: "success",
            duration: 3000,
            isClosable: true,
          });
        }
      })
      .catch((error) => {
        console.log("error: ", error);
        toast({
          title: "An error occurred.",
          description: "Unable to Archive Message.",
          status: "error",
          duration: 3000,
          isClosable: true,
        });
      });
  };

  const addToFrame = (message) => {
    let ifrm = document.getElementById("iframe").contentWindow.document;
    ifrm.body.innerHTML = getMessageBody(message.payload);
  };

  const getMessageBody = (message) => {
    const encodedBody =
      typeof message.parts === "undefined"
        ? message.body.data
        : getHTMLPart(message.parts);

    return Base64.decode(encodedBody);
  };

  const getHTMLPart = (arr) => {
    for (var x = 0; x <= arr.length; x++) {
      if (typeof arr[x].parts === "undefined") {
        if (arr[x].mimeType === "text/html") {
          return arr[x].body.data;
        }
      } else {
        return getHTMLPart(arr[x].parts);
      }
    }
    return "";
  };

  return (
    <Flex
      direction='column'
      wrap='no-wrap'
      w='58%'
      h='100%'
      p='0.6rem 1rem'
      bg='white'
      color='black'
      border='1px'
      borderColor='gray.200'
      borderTopRightRadius='md'
      borderBottomRightRadius='md'
    >
      {!message ? (
        <EmptyMail />
      ) : (
        <Fragment>
          {/* Header Buttons */}
          <Flex justify='space-around' wrap='no-wrap' mb={2}>
            <ReplyModel replayData={formatReplayData(headers)} />
            <ForwardModel
              forwardData={message}
              getMessageBody={getMessageBody}
            />
            <Button
              rightIcon={MdArchive}
              variantColor='blue'
              variant='outline'
              onClick={() => handleArchiveBtn([message.id], ["INBOX"])}
            >
              Archive
            </Button>
            <Button
              rightIcon='delete'
              variantColor='blue'
              variant='outline'
              onClick={() => handleTrashBtn("me", message.id)}
            >
              Delete
            </Button>
          </Flex>

          {/* Mail Container */}
          <Flex
            className='mailContainer'
            flexGrow='2'
            direction='column'
            wrap='no-wrap'
            p={2}
          >
            <Box className='mailHeader' mb={2}>
              <Text fontSize='lg' fontWeight='bold' color='gray.700' mb={1}>
                {getHeader(headers, "Subject")}
              </Text>
              <Flex wrap='no-wrap' justify='flex-start'>
                <Avatar
                  name={removeQuote(getHeader(headers, "From").split("<")[0])}
                  src='https://bit.ly/tioluwani-kolawole'
                  mr={4}
                />
                <Box w='80%'>
                  <Text fontSize='md' color='gray.700'>
                    {getHeader(headers, "From")}
                  </Text>
                  <Text fontSize='sm' color='gray.500'>
                    {formatDate(getHeader(headers, "Date"))}
                  </Text>
                </Box>
              </Flex>
              <Text fontSize='sm' color='gray.700' mt={1}>
                {`To: ${getHeader(headers, "To")}`}
              </Text>
            </Box>
            <Box className='mailBody' flexGrow='2'>
              <AspectRatioBox ratio={16 / 9} h='100%'>
                <Box as='iframe' id='iframe' title='messageBody'>
                  <p>Your browser does not support iframes.</p>
                </Box>
              </AspectRatioBox>
            </Box>
          </Flex>
        </Fragment>
      )}
    </Flex>
  );
}

Login = ({ login, isLoading, history }) => {
  const { handleSubmit, errors, register, formState } = useForm()
  const [show, setShow] = React.useState(false)
  const handleClick = () => setShow(!show)

  function validateEmail(value) {
    let error
    if (!value) {
      error = 'email is required'
    } else if (value.length < 5) {
      error = 'email needed'
    }
    return error || true
  }

  function validatePassword(value) {
    let error
    if (!value) {
      error = 'Password is required'
    } else if (value.length < 8) {
      error = 'Password must be at least 8 characters'
    }
    return error || true
  }

  const submitForm = (creds) => {
    // action function here
    login(creds).then(() => history.push('/dashboard'))
    ReactGA.event({
      category: 'User',
      action: `Button Login`,
    })
  }

  const gaSignup = () => {
    ReactGA.event({
      category: 'User',
      action: `Link Don't have an account`,
    })
  }

  if (isLoading) {
    return (
      <Flex justify="center" align="center" w="100%" h="100vh">
        <Flex>
          <CustomSpinner />
        </Flex>
      </Flex>
    )
  }

  return (
    <Flex className="LoginSplash" w="100%" minH="100vh" justify="center">
      <Flex maxW="1440px" w="100%">
        <Stack
          wrap="wrap"
          w="60%"
          ml="6.5%"
          mb="15%"
          justify="center"
          align="center"
        >
          <Text
            as="h1"
            w="100%"
            fontFamily="Poppins"
            fontSize="80px"
            fontWeight="bold"
          >
            Allay
          </Text>
          <Text w="100%" fontFamily="Poppins" fontSize="52px" fontWeight="bold">
            We're stronger together.
          </Text>
        </Stack>
        <Flex
          w="40%"
          mb="10%"
          mr="8%"
          justify="center"
          align="center"
          flexDir="column"
        >
          <form onSubmit={handleSubmit(submitForm)}>
            <Flex
              w="473px"
              h="480px"
              flexDir="column"
              background="#FDFDFF"
              justify="center"
            >
              <Flex
                as="h2"
                fontSize="36px"
                fontFamily="Poppins"
                justify="center"
                mx="1"
                my="2%"
              >
                Welcome back!
              </Flex>

              <Flex wrap="wrap" w="411px%" justify="center">
                <FormControl isInvalid={errors.email}>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Email
                  </FormLabel>
                  <SignupLoginInput
                    mb="30px"
                    type="text"
                    name="email"
                    label="email"
                    placeholder="lambda1"
                    autoCapitalize="none"
                    ref={register({ validate: validateEmail })}
                  />
                  <FormErrorMessage>
                    {errors.email && errors.email.message}
                  </FormErrorMessage>
                </FormControl>
                <FormControl isInvalid={errors.password}>
                  <Flex flexDir="column">
                    <FormLabel
                      color="#131C4D"
                      fontSize="18px"
                      fontFamily="Muli"
                    >
                      Password
                    </FormLabel>
                    <InputGroup>
                      <SignupLoginInput
                        mb="30px"
                        type={show ? 'text' : 'password'}
                        name="password"
                        label="Password"
                        placeholder="********"
                        autoCapitalize="none"
                        ref={register({ validate: validatePassword })}
                      />
                      <InputRightElement width="4.5rem" py="32px">
                        <Button
                          h="1.75rem"
                          color="rgba(72, 72, 72, 0.1)"
                          border="none"
                          size="sm"
                          backgroundColor="#FDFDFF"
                          onClick={handleClick}
                        >
                          {show ? 'Hide' : 'Show'}
                        </Button>
                      </InputRightElement>
                    </InputGroup>
                    <FormErrorMessage>
                      {errors.password && errors.password.message}
                    </FormErrorMessage>
                  </Flex>
                </FormControl>
                <Flex width="100%" justify="center">
                  <Button
                    width="85%"
                    mb="30px"
                    border="none"
                    rounded="50px"
                    h="58px"
                    my="2%"
                    size="lg"
                    color="white"
                    backgroundColor="#344CD0"
                    _hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
                    isLoading={formState.isSubmitting}
                    type="submit"
                    data-cy="loginSubmit"
                  >
                    Login
                  </Button>
                </Flex>
              </Flex>
              <Flex m="15px" justify="center" fontWeight="light">
                <Text fontSize="16px" color="#17171B" fontFamily="Muli">
                  Don't have an account?{' '}
                  <Link
                    to="/signup"
                    onClick={gaSignup}
                    data-cy="signupLink"
                    style={{
                      textDecoration: 'none',
                      fontWeight: 'bold',
                      color: '#344CD0',
                      fontSize: '16px',
                    }}
                  >
                    Sign up here!
                  </Link>
                </Text>
              </Flex>
            </Flex>
          </form>
        </Flex>
      </Flex>
    </Flex>
  )
}

Index = ({ data, location }) => {
  const [{ alternatives }] = useJsonForm(data.altsJson, {
    label: "Add an app comparison",
    fields: [
      {
        label: "Comparisons",
        name: "rawJson.alternatives",
        component: "group-list",
        description: "Comparisons List",
        itemProps: (item) => ({
          label: item.commercial[0].main,
        }),
        defaultItem: () => ({
          main: "New Comparison",
          alts: [],
          id: Math.random().toString(36).substr(2, 9),
        }),
        fields: [
          // {
          //   label: "Main Application",
          //   name: "main",
          //   component: "text",
          // },
          // {
          //   label: "Website",
          //   name: "website",
          //   component: "text",
          // },
          // {
          //   label: "Logo URL",
          //   name: "svg",
          //   component: "text",
          // },
          {
            label: "Commercial Apps",
            name: "commercial",
            component: "group-list",
            description: "Commercial Apps",
            itemProps: (item) => ({
              label: item.main,
            }),
            fields: [
              {
                label: "Main Application",
                name: "main",
                component: "text",
              },
              {
                label: "Website",
                name: "website",
                component: "text",
              },
              {
                label: "Logo URL",
                name: "svg",
                component: "text",
              },
            ],
          },
          {
            label: "Opensource Alternatives",
            name: "alts",
            component: "group-list",
            description: "Alternatives List",
            itemProps: (item) => ({
              label: item.name,
            }),
            fields: [
              {
                label: "Name",
                name: "name",
                component: "text",
              },
              {
                label: "Stars",
                name: "stars",
                component: "text",
              },
              {
                label: "License",
                name: "license",
                component: "text",
              },
              {
                label: "Logo URL",
                name: "svg",
                component: "text",
              },
              {
                label: "Site",
                name: "site",
                component: "text",
              },
              {
                label: "Language",
                name: "language",
                component: "text",
              },
              {
                label: "Repo",
                name: "repo",
                component: "text",
              },
              {
                label: "Deploy",
                name: "deploy",
                component: "text",
              },
            ],
          },
          {
            name: "category",
            component: "select",
            label: "Category",
            description: "Select a category",
            options: [
              "E-commerce",
              "Developer Tools",
              "Social Media",
              "Communication",
              "Analytics",
              "Password Managers",
              "Form Builder",
              "Cloud",
              "Deployment",
              "Product Management",
              "Automation",
              "CRM",
              "Visual Database",
            ],
          },
        ],
      },
    ],
  })

  return (
    <>
      <SEO title="Opensource.builders" />
      <Box
        bg="white"
        boxShadow="0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
      >
        <Box px={{ md: "2rem" }}>
          <Box
            display="flex"
            flexWrap="wrap"
            justifyContent="space-between"
            alignItems="center"
            px="1rem"
          >
            <Box py={5}>
              <Heading as="h2" size="lg">
                Open-source alternatives
              </Heading>
              <Text fontSize="md" fontWeight={400} color="#939fae" mt={1}>
                Find open-source alternatives for your favorite apps
              </Text>
            </Box>
          </Box>
        </Box>
      </Box>
      <Box
        display="flex"
        flexWrap="wrap"
        ml="auto"
        mr="auto"
        maxWidth="60rem"
        px={2}
        py={4}
      >
        {data.altsJson.alternatives.map((comp) => (
          <CompGroup
            comp={comp}
            commercial={comp.commercial}
            alts={comp.alts}
          />
        ))}
      </Box>
    </>
  )
}