@chakra-ui/core#Flex JavaScript Examples

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>
)

Main = () => {
  const { getMessages } = useContext(EmailContext);

  useEffect(() => {
    getMessages();
    // eslint-disable-next-line
  }, []);

  return (
    <Flex
      h='100vh'
      minH='600px'
      justify='space-arround'
      wrap='no-wrap'
      p='1em'
      bg='#e5f4f1'
      color='white'
    >
      <MailboxList />
      <EmailList />
      <Email />
    </Flex>
  );
}

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>
  )
}

Footer = () => (
  <Flex
    as="footer"
    backgroundColor="gray.700"
    paddingX={["1rem", "4.5rem"]}
    paddingY={"2rem"}
    justifyContent="space-between"
    minHeight={250}
  >
  </Flex>
)

export default function Dashboard({ children }) {
  const bgColor = useColorModeValue('white', 'gray.800');

  return (
    <>
      <Header />
      <Sidebar display={['none', null, 'flex']} w={64} />

      <Flex as="main" ml={[0, 0, 64]} bg={bgColor}>
        <Flex direction="column" w="full">
          <Box
            w="full"
            as="section"
            px={[4, 6, 8]}
            py={4}
            mt={16}
            h="calc(100vh - 4rem)"
          >
            {children}
          </Box>
        </Flex>
      </Flex>
    </>
  );
}

Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <Flex minHeight="100vh" flexDirection="column" color="#2F3B45">
      <Header siteTitle={data.site.siteMetadata.title} />
      <Main>{children}</Main>
      <Footer />
    </Flex>
  )
}

export default function Header() {
  const bgColor = useColorModeValue('white', 'gray.900');

  return (
    <Flex
      pos="fixed"
      as="header"
      align="center"
      justify="center"
      top={0}
      insetX={0}
      h={16}
      px={[4, 6, null, 8]}
      bg={bgColor}
      borderBottomWidth="1px"
    >
      <Flex w="full" align="center" justify="center">
        <Flex w="full" maxW="5xl" align="center" justify="center">
          <Flex w="full" align="center" justify="space-between">
            <Flex align="center">
              <NextLink href="/" passHref>
                <Button as="a" variant="ghost" px={0} fontWeight="bold">
                  {MY_APP}
                </Button>
              </NextLink>
            </Flex>
            <Flex>
              <ThemeToggle />
            </Flex>
          </Flex>
        </Flex>
      </Flex>
    </Flex>
  );
}

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>
  );
}

EmailList = () => {
  const { messages, loading } = useContext(EmailContext);

  return (
    <Flex
      direction='column'
      wrap='no-wrap'
      w='26%'
      h='100%'
      bg='#f1f1f1'
      color='black'
    >
      {/* Search bar */}
      <SearchBar />

      {/* Messages */}
      {!messages.length && loading ? <CustomSpinner /> : <Messages />}
    </Flex>
  );
}

CurrentCircle = () => {
  const data = useMapFocus(state => state.mapFocusData)
  const currentDate = useDataDate(state => state.currentDate)
  const currentDataType = useDataTypeStore(state => state.currentDataType)

  const prefix = currentDataType === 0
    ? ""
    : currentDataType === 1
      ? "deaths_"
      : "recoveries_"
    
  const label = currentDataType === 0
    ? "cases"
    : currentDataType === 1
      ? "deaths"
      : "recoveries"

  return data ? (
    <Flex
      display={["flex", null, "none"]}
      position="fixed"
      bottom={["6.5rem", "7.5rem"]}
      right={["8rem", "10rem", "15rem"]}
      left={["1rem", null, "auto"]}
      bg="white"
      shadow="md"
      px="1.25rem"
      py={["0.75rem", null, "1.25rem"]}
      borderRadius="md"
      width={["auto", null, "15rem"]}
      justifyContent="space-between"
      zIndex={3}
    >
      <Box fontWeight={700}>
        { data ? (data.provincestate || data.countryregion) : "No data" }
      </Box>
      <Box>{ data ? formatThousand(data[prefix + currentDate]) + ` ${label}` : "No data" }</Box>
    </Flex>
  ) : null
}

ProgressHeader = ({ progress }) => {
  //progress bar
  const history = useHistory()

  return (
    <Flex
      justify="center"
      px="10%"
      w="100%"
      h="198px"
      background="#F2F6FE"
      top="0"
      position="fixed"
      overflow="hidden"
      zIndex="999"
      direction="column"
    >
      <Flex w="100%" justify="space-between" pb="3%">
        <h2 fontSize="24px" color="#131C4D" fontFamily="poppins">
          Write a review
        </h2>
        <Button
          border="none"
          backgroundColor="#F2F6FE"
          color="#344CD0"
          fontSize="1.3em"
          rounded="50px"
          _hover={{ color: '#3B4DA6', cursor: 'pointer' }}
          onClick={() => {
            history.push('/dashboard')
          }}
        >
          Cancel
        </Button>
      </Flex>

      <Flex w="100%" justify="space-between" mb="1%">
        {progress && progress.prec === 100 ? (
          <>
            <Flex as="h4" fontFamily="muli" color="#131C4D" w="50%">
              {progress && progress.prec}% Completed!
            </Flex>
          </>
        ) : (
          <>
            <Flex as="h4" fontFamily="muli" color="#131C4D" w="50%">
              {progress && 100 - progress.prec}% completed
            </Flex>
          </>
        )}

        <Flex width="100px" justify="space-evenly" align="flex-end">
          <Image src={require('../../../icons/clock.png')} /> {progress.time}{' '}
          min
        </Flex>
      </Flex>
      <ProgressBar value={progress && progress.prog} />
    </Flex>
  )
}

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>
  );
}

Header = () => {
  const { isOpen, onOpen, onClose } = useDisclosure()

  return (
    <Flex
      as="header"
      backgroundColor="white"
      paddingX={["1rem", "4.5rem"]}
      paddingY={[1,6]}
      justifyContent="space-between"
      alignItems="center"
    >
      <GatsbyLink to="/">
        <Code4Covid width={200}/>
      </GatsbyLink>
      <IconButton
        display={["block", "block", "block", "block", "none"]} // Match this with the inverse of the buttons stack to use Chakra breakpoints
        variant="ghost"
        size="lg"
        aria-label="Navigation Button"
        icon="menu"
        onClick={onOpen}
      />
      <Drawer isOpen={isOpen} placement="right" onClose={onClose}>
        <DrawerOverlay />
        <DarkMode>
          <DrawerContent backgroundColor="gray.700" color="white">
            <DrawerCloseButton />
            <DrawerBody>
              <Stack as="nav" direction="column" marginTop={16} spacing={8}>
                {PAGES.map(page => (
                  <NavLink
                    key={page.children + page.to}
                    fontSize={28}
                    color="white"
                    css={css`
                      [aria-current]& {
                        font-weight: 700;
                      }
                    `}
                    {...page}
                  />
                ))}
                <Link textAlign="center" href="https://twitter.com/code4covid" isExternal>
                  <TwitterIcon width="40px" style={{ display: "inline-block" }} />
                </Link>
              </Stack>
            </DrawerBody>
          </DrawerContent>
        </DarkMode>
      </Drawer>
    </Flex>
  )
}

ProfilePageReview = ({ userReviews }) => {
  const isLoading = useSelector((state) => state.user.isLoading)
  const under = { textDecoration: 'underline' }

  return (
    <Flex justify="center" mt=".5%" mb="2%">
      {!isLoading ? (
        <Box
          width="1048px"
          style={{ border: '1px solid #e6e5e5', padding: '3%' }}
        >
          {userReviews && userReviews.length > 0 ? (
            userReviews.map((review) => {
              const postedOn = dateConvert(review.created_at)
              return (
                <AccordionItem
                  key={review.review_id}
                  width="816px"
                  style={{ margin: '0 auto' }}
                >
                  <AccordionHeader
                    style={{ borderRadius: '10px ' }}
                    _expanded={{ bg: '#007F00', color: 'white' }}
                  >
                    <Box flex="1" textAlign="left">
                      <span
                        style={{
                          borderRadius: '35%',
                          backgroundColor: '#a5a5a5',
                          padding: '.5%',
                        }}
                      >
                        Interview
                      </span>{' '}
                      posted at {postedOn}
                    </Box>
                    <AccordionIcon />
                  </AccordionHeader>
                  <AccordionPanel>
                    <h6>
                      <i style={under}>{review.work_status}</i> at{' '}
                      <i style={under}>{review.company_name}</i> in{' '}
                      <i style={under}>{review.city}</i>
                    </h6>
                  </AccordionPanel>
                  <AccordionPanel>
                    <h5>Review:</h5> <span>{review.comment}</span>
                  </AccordionPanel>
                </AccordionItem>
              )
            })
          ) : (
            <span>no reviews</span>
          )}
        </Box>
      ) : null}
    </Flex>
  )
}

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>
  );
}

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>
  )
}

TimeSlider = ({ points }) => {
  const updateDate = useDataDate(state => state.updateDate)

  const uniqDays = useMemo(() => {
    const headers = points[0].properties.headers.split(";;")
    const allDates = headers
      .filter(d => {
        return d.includes("/" && ":" && "pm") || d.includes("/" && ":" && "am")
      })
      .sort((a, b) => {
        const date1 = new Date(a).getTime() 
        const date2 = new Date(b).getTime()
        return date1 - date2
      })

    const uniqDates = groupBy(allDates, o => {
      return dayjs(o).format("DD-MM-YYYY")
    })

    const uniqDays = Object.keys(uniqDates).map(d => {
      return uniqDates[d][uniqDates[d].length - 1]
    })

    return uniqDays
  }, [points])

  const [currentDate, setCurrentDate] = useState(uniqDays.length - 1)

  const [debouncedCurrentDate] = useDebounce(currentDate, 150)

  useEffect(() => {
    updateDate(uniqDays[debouncedCurrentDate])
  }, [debouncedCurrentDate, uniqDays, updateDate])

  return (
    <Box mt="2rem">

      <Heading fontSize="md" as="h3" mb="0.5rem">
        { "Timeline" }
      </Heading>

      <Flex mb="-0.75rem" zIndex={10} position="relative">
        <Badge display="inline-flex" alignItems="center" bg="#FBDFCF" color="#ec610e" fontSize="sm">
          <BlinkingDot />
            {
              currentDate === uniqDays.length - 1
                ? dayjs(points[0].properties["@ns:com:here:xyz"].updatedAt).format("DD MMM YYYY h:mm a")
                : dayjs(uniqDays[currentDate]).format("DD MMM YYYY") 
            }
        </Badge>
      </Flex>

      <TimeSeries points={points} dates={uniqDays} currentDate={currentDate} />

      <Box mr="2px">
        <Slider
          defaultValue={uniqDays.length - 1}
          min={0}
          max={uniqDays.length - 1}
          value={currentDate}
          onChange={val => setCurrentDate(val)}
        >
          <SliderTrack />
          <SliderFilledTrack bg="#ec610e" />
          <SliderThumb size="1.5rem" ml="-0.25rem">
            <Icon name="arrows" color="#ec610e" />
          </SliderThumb>
        </Slider>
      </Box>

      <Flex justifyContent="space-between">
        <Text fontSize="sm" color="gray.600" mt="-0.5rem">
          { dayjs(uniqDays[0]).format("DD MMM YYYY") }
        </Text>
        <Text fontSize="sm" color="gray.600" mt="-0.5rem">
          { dayjs(uniqDays[uniqDays.length - 1]).format("DD MMM YYYY") }
        </Text>
      </Flex>
    </Box>
  )
}

ProfilePage = (props) => {
  const id = props.match.params.id
  const userId = window.localStorage.getItem('userId')
  //
  const dispatch = useDispatch()
  const isLoading = useSelector((state) => state.user.isLoading)
  const isUpdated = useSelector((state) => state.user.isUpdated)
  const userData = useSelector((state) => state.user.userData)
  //

  const _midSectionStyles = {
    width: '40%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '0% 6% 0 3%',
    height: '40px',
  }
  const _emp = {
    padding: '0 0 0 22%',
    opacity: 0.5,
  }

  // box that shows on profile update
  let changes_div = {
    position: 'absolute',
    width: '1048px',
    marginTop: '25px',
    borderRadius: '20px 20px 0 0',
    height: '50px',
    backgroundColor: '#77E0B5',
    textAlign: 'center',
    color: '#fff',
    fontSize: '16px',
    fontFamily: 'Muli',
    fontWeight: 'bold',
  }
  //array to get the correct track name
  const track = ['arrayStartsWithZero :D', 'android', 'ds', 'web', 'ios', 'ux'][
    userData.track_id
  ]

  // formating graduated date
  let graduated = userData.graduated
  graduated = new Date(graduated).toUTCString()
  graduated = graduated.split(' ').slice(2, 4).join(' ')

  // formating employed date
  let hired = userData.employed_start
  hired = new Date(hired).toUTCString()
  hired = hired.split(' ').slice(2, 4).join(' ')

  //slack link helper
  const slackID = userData.slack
  const slackLink = `https://lambda-students.slack.com/app_redirect?channel=${slackID}`

  useEffect(() => {
    dispatch(getUser(id))
  }, [dispatch, id])

  //send location: null receive undefiend send again empty recieve the same with white space, backend fix but itll do for now

  const lazySolution =
    userData.location != 'undefined undefined ' &&
    userData.location != 'undefined undefined'
      ? userData.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>
            <Image
              size="58px"
              style={{ opacity: '0.6', borderRadius: '50%' }}
              src={userData.profile_image}
              fallbackSrc={require('../../../icons/user.svg')}
            />
          </Flex>
        ) : null}
      </Flex>

      {!isLoading ? (
        <>
          <Flex Flex w="100%" pt="3%" justify="center">
            <SimpleGrid width="1048px" columns={1}>
              <Box style={{ textAlign: 'end', paddingRight: '1%' }}>
                {Number(id) === Number(userId) && (
                  <Link
                    style={{
                      textDecoration: 'none',
                      color: 'black',
                    }}
                    to={`/profile/${id}/edit`}
                  >
                    <i
                      style={{ opacity: 0.3, paddingRight: '10px' }}
                      className="far fa-edit"
                      data-cy="editProfile"
                    ></i>
                    Edit profile
                  </Link>
                )}
              </Box>
              <div
                id="changesDiv"
                style={isUpdated ? changes_div : { display: 'none' }}
              >
                Changes successfully saved
              </div>
              <Box
                style={{
                  borderRadius: '20px 20px 0 0',
                  display: 'inline-flex',
                }}
                bg="#F7F9FF"
                height="220px"
              >
                <Flex w="20%" style={{ padding: '55px 0 0 90px' }}>
                  <Avatar
                    size="2xl"
                    name={userData.first_name}
                    src={userData.profile_image}
                  />
                </Flex>
                <Flex w="80%" pl="6%">
                  <SimpleGrid width="100%" row={2} pr="70px">
                    <Flex
                      height="113px"
                      style={{
                        display: 'flex',
                      }}
                    >
                      <Box
                        height="27px"
                        style={{
                          alignSelf: 'flex-end',
                          marginLeft: '42px',
                        }}
                      >
                        <h3
                          id="profileNames"
                          style={{
                            fontSize: '27px',
                            fontFamily: 'Poppins',
                            color: ' #131C4D',
                            width: '210px',
                          }}
                        >
                          {userData.first_name} {userData.last_name}
                        </h3>
                      </Box>
                      <Box
                        width="47%"
                        height="53px"
                        style={{
                          display: 'flex',
                          alignSelf: 'flex-end',
                          alignItems: 'baseline',
                          justifyContent: 'space-between',
                        }}
                      >
                        <span
                          style={{
                            borderRadius: '20px',
                            width: '75px',
                            height: '36px',
                            backgroundColor: '#259BF8',
                            color: '#17171b',
                            fontSize: '16px',
                            textTransform: 'uppercase',
                            textAlign: 'center',
                            marginLeft: '15%',
                            paddingTop: '6px',
                          }}
                        >
                          {track}
                        </span>

                        <h6
                          style={{
                            fontFamily: 'Muli',
                            fontWeight: 300,
                            paddingRight: '10px',
                          }}
                        >
                          {userData.graduated ? 'Alumni' : 'Student'}
                        </h6>
                      </Box>

                      <Box
                        width="120px"
                        style={{
                          alignSelf: 'flex-end',
                          textAlign: 'end',
                        }}
                        height="60px"
                      >
                        <h6
                          style={{
                            fontFamily: 'Muli',
                            fontWeight: 300,
                            paddingTop: '6px',
                          }}
                        >
                          <i
                            style={{ opacity: 0.2, paddingRight: '5px' }}
                            className="fas fa-map-marker-alt"
                          ></i>

                          {lazySolution}
                        </h6>
                      </Box>
                    </Flex>
                    <Box>
                      <SimpleGrid width="100%" columns={2}>
                        <Flex
                          width="55%"
                          justify="space-between"
                          pl="42px"
                          style={{ fontWeight: 'bold' }}
                        >
                          <a
                            style={{
                              textDecoration: 'none',
                              color: '#344CD0',
                            }}
                            target="blank"
                            href={userData.portfolio}
                          >
                            Portfolio
                          </a>

                          <a
                            style={{
                              textDecoration: 'none',
                              color: '#344CD0',
                            }}
                            target="blank"
                            href={userData.resume}
                          >
                            Resume
                          </a>
                        </Flex>
                        <Flex
                          width="62%"
                          justify="space-around"
                          justifySelf="flex-end"
                          alignItems="center"
                        >
                          {userData.linked_in ? (
                            <a target="blank" href={userData.linked_in}>
                              <Image
                                size="20px"
                                style={{ borderRadius: '60%' }}
                                src={require('../../../icons/linkedIn.png')}
                              />
                            </a>
                          ) : (
                            <Image
                              size="20px"
                              opacity=".3"
                              style={{ borderRadius: '60%' }}
                              src={require('../../../icons/linkedIn.png')}
                            />
                          )}
                          {userData.slack ? (
                            <a target="blank" href={slackLink}>
                              <Image
                                size="20px"
                                src={require('../../../icons/slack.svg')}
                              />
                            </a>
                          ) : (
                            <Image
                              opacity="0.3"
                              size="20px"
                              src={require('../../../icons/slack.svg')}
                            />
                          )}
                          {userData.github ? (
                            <a
                              style={{ height: '20px' }}
                              target="blank"
                              href={userData.github}
                            >
                              <i
                                style={{ fontSize: 'larger' }}
                                className="fab fa-github"
                              />
                            </a>
                          ) : (
                            <i
                              style={{ fontSize: 'larger', opacity: '0.3' }}
                              className="fab fa-github"
                            ></i>
                          )}

                          {userData.dribble ? (
                            <a target="blank" href={userData.dribble}>
                              <Image
                                size="20px"
                                style={{ borderRadius: '60%' }}
                                src={require('../../../icons/dribble.png')}
                              />
                            </a>
                          ) : (
                            <Image
                              size="20px"
                              opacity="0.3"
                              style={{ borderRadius: '60%' }}
                              src={require('../../../icons/dribble.png')}
                            />
                          )}
                        </Flex>
                      </SimpleGrid>
                    </Box>
                  </SimpleGrid>
                </Flex>
              </Box>
              <Box
                bg="#F7F9FF"
                pl="70px"
                height="107px"
                style={{ fontSize: '16px' }}
              >
                <h4
                  style={{
                    padding: ' 2% 0% 1% 3%',
                    fontSize: '14px',
                    color: ' #131C4D',
                  }}
                >
                  Lambda Information
                </h4>
                <Flex>
                  <Box style={_midSectionStyles}>
                    <span style={{ opacity: '.5' }}>Cohort:</span>
                    {userData.cohort}
                  </Box>
                  <Box
                    style={{
                      width: '35.5%',
                      display: ' flex',
                      alignItems: 'center',
                      justifyContent: 'space-between',
                      padding: '0% 0% 1% 11%',
                      height: '40px',
                    }}
                  >
                    <span style={{ opacity: '.5' }}>Graduated:</span>
                    {userData.graduated ? graduated : 'N/A'}
                  </Box>
                </Flex>
              </Box>
            </SimpleGrid>
          </Flex>

          <Flex
            Flex
            w="100%"
            justify="center"
            mb="3%"
            style={{ fontSize: '16px' }}
          >
            <SimpleGrid width="1048px" columns={2}>
              <Box
                bg="#F7F9FF"
                height="260px"
                pl="70px"
                style={{ borderRadius: '0 0 0 20px' }}
              >
                <h4
                  style={{
                    padding: ' 6% 2% 5% 6%',
                    fontSize: '14px',
                    color: ' #131C4D',
                  }}
                >
                  Background
                </h4>
                <SimpleGrid
                  columns={2}
                  spacing={5}
                  style={{ paddingLeft: '6%' }}
                >
                  <Box height="20px" style={{ opacity: 0.5 }}>
                    Degree:
                  </Box>
                  <Box height="20px">{userData.highest_ed || 'N/A'}</Box>
                  <Box height="20px" style={{ opacity: 0.5 }}>
                    Field of Study:
                  </Box>
                  <Box height="20px">{userData.field_of_study || 'N/A'}</Box>
                  <Box height="20px" style={{ opacity: 0.5 }}>
                    Prior web experience:
                  </Box>
                  <Box height="20px">
                    {userData.prior_experience ? 'Yes' : 'None'}
                  </Box>
                  <Box height="20px" style={{ opacity: 0.5 }}>
                    Lambda TL/SL position:
                  </Box>
                  <Box height="20px">
                    {userData.tlsl_experience ? 'Yes' : 'None'}
                  </Box>
                </SimpleGrid>
              </Box>
              <Box
                bg="#F7F9FF"
                height="260px"
                style={{ borderRadius: '0 0 20px 0' }}
              >
                <h4
                  style={{
                    padding: ' 6% 0% 4% 8%',
                    fontSize: '14px',
                    color: ' #131C4D',
                  }}
                >
                  Current employment
                </h4>
                <SimpleGrid
                  columns={2}
                  spacing={5}
                  style={{ padding: '0 20% 0 0%' }}
                >
                  <Box height="20px" style={_emp}>
                    Company:
                  </Box>
                  <Box height="20px">{userData.employed_company || 'N/A'}</Box>
                  <Box height="20px" style={_emp}>
                    Job tittle:
                  </Box>
                  <Box height="20px">{userData.employed_title || 'N/A'}</Box>
                  <Box height="20px" style={_emp}>
                    Start date:
                  </Box>
                  <Box height="20px">
                    {userData.employed_start ? hired : 'N/A'}
                  </Box>
                  <Box height="20px" style={_emp}>
                    Remote
                  </Box>
                  <Box height="20px">
                    {userData.employed_remote ? 'Yes' : 'No'}
                  </Box>
                </SimpleGrid>
              </Box>
            </SimpleGrid>
          </Flex>

          <Flex justify="center">
            <Box width="1048px">
              Reviews written by {userData.first_name} {userData.last_name}
            </Box>
          </Flex>
          <ProfilePageReview userReviews={userData.reviews} />
        </>
      ) : (
        <Flex justify="center" pt="15%">
          <GridLoader size={50} color={'#259bf8'} />
        </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>
  );
}