react-icons/md#MdCheck TypeScript Examples

CodeCopy: FunctionComponent<Props> = ({ text, onCopy, className, nested }) => {
  const { t } = useTranslation()
  const [copied, setCopied] = useState(false)

  useEffect(() => {
    const timeout = setTimeout(() => {
      if (copied) setCopied(false);
    }, 1200);

    return () => clearTimeout(timeout);
  }, [copied]);


  return (< div className={`${styles.pre} ${className} ${nested ? styles.nested : ''}`}>
    {text}
    <CopyToClipboard text={text} onCopy={() => {
      setCopied(true)
      onCopy()
    }}>
      <button className={styles.copy} title={t('copy-text')}>
        {!copied && <MdContentCopy></MdContentCopy>}
        {copied && <MdCheck style={{ 'color': "green" }}></MdCheck>}
      </button>
    </CopyToClipboard >
  </div >
  )
}

SuccessSection: React.FunctionComponent = () => {
  return (
    <Flex
      sx={{
        p: 3,
        bg: "lightGreen",
        alignItems: "center",
      }}
    >
      <MdCheck color="#3AB97A" />
      <Text
        sx={{
          ml: 1,
        }}
      >
        Successfully configured
      </Text>
    </Flex>
  );
}

DropdownFilter: FC<DropdownFilterProps> = ({
  onChange,
  value,
  options: { title, choices, isMultipleChoice },
}) => {
  const { selected, selectItem } = useSelected(value as [], !!isMultipleChoice);
  const isDropdownActive = selected.length > 0;

  /* TODO(micorix): add keyboard listener and proper ARIA */
  /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */
  return (
    <div className={styles.dropdownWrapper} onMouseLeave={() => onChange(selected)}>
      <button
        type="button"
        className={isDropdownActive ? styles.dropdownButtonActive : styles.dropdownButton}
      >
        {title}
        <MdExpandMore />
        <span className={styles.dropdownSpace} />
      </button>
      <div className={styles.dropdownListWrapper}>
        <PerfectScrollbar>
          <ul className={styles.dropdownList}>
            {choices.map((choice: DropdownChoice) => (
              <li
                className={
                  selected.includes(choice.value)
                    ? styles.dropdownListItemActive
                    : styles.dropdownListItem
                }
                onClick={() => selectItem(choice.value)}
                key={choice.value}
              >
                {choice.label} <MdCheck />
              </li>
            ))}
          </ul>
        </PerfectScrollbar>
      </div>
    </div>
  );
}

MobileDropdownFilter: FC<DropdownFilterProps> = ({
  onChange,
  value,
  options: { title, choices, isMultipleChoice },
}) => {
  const { selected, selectItem } = useSelected(value as [], !!isMultipleChoice);

  useEffect(() => {
    onChange(selected);
  }, [selected])

  return (
    <div className="border-b border-light">
    <Disclosure>
      {({ open }) => (
        <>
          <Disclosure.Button className="flex w-full justify-between px-2 py-2">
            <span>{title}</span>
            <MdExpandMore className={`text-2xl text-primary transition transform ${open ? 'rotate-180' : ''}`} />
          </Disclosure.Button>
          <Disclosure.Panel className="px-2">
            <ul className="">
              {choices.map((choice: DropdownChoice) => (
                <li
                  className={
                  `rounded-lg bg-opacity-50 my-2 px-2 py-2 flex items-center border-2 border-light transition
                  ${ selected.includes(choice.value) ? 'bg-light' : ''}`
                  }
                  onClick={() => selectItem(choice.value)}
                  key={choice.value}
                >
                  <MdCheck className={
                    `mr-2 transition text-primary ${selected.includes(choice.value) ? 'opacity-100' : 'opacity-0'}`
                  } /> {choice.label}
                </li>
              ))}
            </ul>
          </Disclosure.Panel>
        </>
      )}
    </Disclosure>
    </div>
  )
}

CodeBlockWithCopy: React.FC<{ children: string }> = ({ children }) => {
  const { theme } = useThemeUI();
  const [isCopied, setIsCopied] = useState(false);

  const copy = (): void => {
    children &&
      navigator.clipboard.writeText(children).then(() => {
        setIsCopied(true);
        setTimeout(() => {
          setIsCopied(false);
        }, 1200);
      });
  };

  return (
    <Box sx={{ position: "relative" }}>
      <CodeBlock codeStyle={{ padding: "16px", width: "100%" }}>
        {children}
      </CodeBlock>
      <Button
        onClick={copy}
        sx={{
          position: "absolute",
          top: "4px",
          right: "4px",
          width: 24,
          height: 24,
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          p: 0,
        }}
      >
        {isCopied ? (
          <MdCheck
            size={16}
            color={theme?.colors?.success as string | undefined}
          />
        ) : (
          <MdContentCopy size={14} />
        )}
      </Button>
    </Box>
  );
}

CodeBlock: React.FC<CodeBlockProps> = ({ code, lang }) => {
  const { theme } = useThemeUI();

  const [isCopied, setIsCopied] = useState(false);

  const copy = (): void => {
    code &&
      navigator.clipboard.writeText(code).then(() => {
        setIsCopied(true);
        setTimeout(() => {
          setIsCopied(false);
        }, 1200);
      });
  };

  return code ? (
    <Flex
      sx={{
        p: 2,
        px: 3,
        alignItems: "center",
        borderTop: "1px solid",
        borderColor: "borders",
        justifyContent: "space-between",
      }}
    >
      <Flex
        sx={{
          alignItems: "center",
          display: ["none", "none", "flex"],
          maxWidth: "80%",
        }}
      >
        <BsCode
          size={26}
          color={theme?.colors?.icons as string | undefined}
          style={{
            border: "1px solid",
            borderColor: theme?.colors?.borders as string | undefined,
            borderRadius: "3px",
            padding: "4px",
            marginRight: "2px",
          }}
        />
        <Code
          sx={{
            margin: "0px 8px",
            border: "none",
            borderRadius: "3px",
            fontSize: "13px",
          }}
          lang={lang}
        >
          {code}
        </Code>
      </Flex>
      <Box>
        <Button onClick={copy} variant="textButton">
          {isCopied ? (
            <MdCheck
              size={16}
              color={theme?.colors?.success as string | undefined}
              style={buttonIconStyle}
            />
          ) : (
            <BiCopy size={16} style={buttonIconStyle} />
          )}
          <Text
            as="span"
            sx={{ display: ["none", "inline", "none", "inline"] }}
          >
            &nbsp;Copy
          </Text>
        </Button>
      </Box>
    </Flex>
  ) : null;
}

export function SignUpPage() {
    const [signUpData, setSignUpData] = useState({
        first_name: "",
        last_name: "",
        email: "",
        password: "",
        phone_number: "",
        visible: false,
        passwordValid: false,
        emailValid: false,
        firstNameValid: false,
        lastNameValid: false,
        phoneValid: false,
        loginValid: true,
        emailTaken: false,
    });

    const history = useHistory();

    const HandleChange = (event: any) => {
        let name = event.target.name;
        let value = event.target.value;

        if (name === "first_name")
            IsFirstNameValid(value)
        else if (name === "last_name")
            IsLastNameValid(value)
        else if (name === "email")
            IsEmailValid(value)
    };

    const IsFirstNameValid = (value: any) => {
        let firstValid = false;
        if (value.length > 0)
            firstValid = true

        setSignUpData({
            ...signUpData,
            first_name: value,
            firstNameValid: firstValid,
        })
    }

    const IsLastNameValid = (value: any) => {
        let lastValid = false;
        if (value.length > 0)
            lastValid = true

        setSignUpData({
            ...signUpData,
            last_name: value,
            lastNameValid: lastValid,
        })
    }

    const IsEmailValid = (value: string) => {
        setSignUpData((signUpData: any) => ({
            ...signUpData,
            email: value,
            emailValid: isEmail.validate(value),
            emailTaken: false,
        }));
    }

    const IsPhoneNumberValid = (value: any) => {
        let phoneValid = false;
        if (value.length === 0 || (value.length === 10 && value.match(/^[0-9]+$/) != null))
            phoneValid = true

        setSignUpData({
            ...signUpData,
            phone_number: value,
            phoneValid: phoneValid,
        })
    }

    const CreateUser = async () => {
        let body = {
            "email": signUpData.email,
            "first_name": signUpData.first_name,
            "last_name": signUpData.last_name,
            "phone": signUpData.phone_number,
        }

        const request = await fetch(ApiBaseAddress + "api/users", {
            method: "post",
            body: JSON.stringify(body),
            headers: {
                "Content-Type": "application/json",
            },
            credentials: 'include',
        });

        if (request.ok) {
            history.push("home");
        } else {
            setSignUpData((signUpData) => ({
                ...signUpData,
                emailTaken: true,
                emailValid: false,
            }));
        }
    }
        
    const SubmitEvent = (event: any) => {
        event.preventDefault();
        if (signUpData.firstNameValid && signUpData.lastNameValid) {
            CreateUser();
        } else {
            setSignUpData({
                ...signUpData,
                loginValid: false
            });
        }
    };

    return (
        <div className="flexBox">

            <Container className="signupContainer" fluid="xs" style={{padding: "3%", margin: "10em"}}>
                <Row>
                    <Col xs="1"/>
                    <Col xs="11">
                        <Form onSubmit={event => SubmitEvent(event)}>
                            <Label className="signupText">Sign Up</Label>
                            <FormGroup row>
                                <Container>
                                    <Row>
                                        <Col xs="auto">
                                            <Input
                                                type="text"
                                                className="form-control"
                                                name="first_name"
                                                placeholder="First Name"
                                                value={signUpData.first_name}
                                                onChange={event => HandleChange(event)}
                                                autoComplete="off"
                                            />
                                        </Col>
                                        <Col xs="auto">
                                            <div>
                                                {signUpData.firstNameValid ?
                                                    <MdCheck size="30px" color="green"></MdCheck> :
                                                    <VscError size="30px" color="red"></VscError>}
                                            </div>
                                        </Col>
                                    </Row>
                                </Container>
                            </FormGroup>
                            <FormGroup row>
                                <Container>
                                    <Row>
                                        <Col xs="auto">
                                            <Input
                                                type="text"
                                                className="form-control"
                                                name="last_name"
                                                placeholder="Last Name"
                                                value={signUpData.last_name}
                                                onChange={event => HandleChange(event)}
                                                autoComplete="off"
                                            />
                                        </Col>
                                        <Col xs="auto">
                                            <div>
                                                {signUpData.lastNameValid ?
                                                    <MdCheck size="30px" color="green"></MdCheck> :
                                                    <VscError size="30px" color="red"></VscError>}
                                            </div>
                                        </Col>
                                    </Row>

                                </Container>
                            </FormGroup>
                            <FormGroup row>
                                <Container>
                                    <Row>
                                        <Col xs="auto">
                                            <Input
                                                type="email"
                                                className="form-control"
                                                name="email"
                                                placeholder="Email"
                                                value={signUpData.email}
                                                onChange={event => HandleChange(event)}
                                                autoComplete="off"
                                            />
                                        </Col>
                                        <Col xs="auto">
                                            <div>
                                                {signUpData.emailValid ?
                                                    <MdCheck size="30px" color="green"></MdCheck> :
                                                    <VscError size="30px" color="red"></VscError>}
                                            </div>
                                        </Col>
                                    </Row>
                                </Container>
                            </FormGroup>
                            <FormGroup row>
                                <Container fluid>
                                    <Row>
                                        <Col xs="auto">
                                            <Input
                                                type="number"
                                                className="form-control"
                                                name="phone"
                                                placeholder="Cell Number (optional)"
                                                value={signUpData.phone_number}
                                                onChange={event => HandleChange(event)}
                                                autoComplete="off"
                                            />
                                        </Col>
                                        <Col xs="auto">
                                            <div>
                                                {signUpData.phoneValid ? (
                                                    <MdCheck size="30px" color="green"></MdCheck>
                                                ) : (
                                                    <VscError size="30px" color="red"></VscError>
                                                )}
                                            </div>
                                        </Col>
                                    </Row>
                                </Container>
                            </FormGroup>
                            <div>
                                {signUpData.loginValid ? '' : 'Invalid Fields'}
                            </div>
                            <div>
                                {signUpData.emailTaken && 'Email already taken'}
                            </div>
                            <Button color="danger" type="submit">
                                Create Account
                            </Button>
                            <div>Already have an account? Click <Link to='/login'>here</Link></div>
                        </Form>

                    </Col>
                </Row>
            </Container>
        </div>
    );
}

StepSection: React.FunctionComponent<StepSectionProps> = ({
  title,
  stepNumber,
  isOpen,
  onOpenStep,
  children,
  status = null,
}) => {
  const stepSectionContainer = useRef<HTMLDivElement>(null);
  const contentHeight: number =
    !!stepSectionContainer && !!stepSectionContainer.current
      ? stepSectionContainer.current.scrollHeight
      : 0;

  const additionalStepTitleStyle: ThemeUIStyleObject =
    status === "ok"
      ? {
          textDecoration: "line-through",
          color: "grey04",
        }
      : {};

  return (
    <Flex
      sx={{
        flexDirection: "column",
        borderBottomWidth: "1px",
        borderBottomStyle: "solid",
        borderBottomColor: (t) => t.colors?.borders,
        overflow: "hidden",
        pb: isOpen ? 24 : 0,
      }}
    >
      <Flex
        sx={{
          flex: 1,
          alignItems: "center",
          justifyContent: "space-between",
          paddingY: 24,
          cursor: "pointer",
        }}
        onClick={onOpenStep}
      >
        <Flex sx={{ alignItems: "center" }}>
          {!!stepNumber && (
            <StepNumber stepNumber={stepNumber} sx={{ mr: 2 }} />
          )}
          <Text
            sx={{ fontWeight: 500, fontSize: 2, ...additionalStepTitleStyle }}
          >
            {title}
          </Text>
        </Flex>
        <Flex
          sx={{
            justifyContent: "center",
          }}
        >
          {status === "ok" && (
            <Flex
              sx={{
                height: 20,
                width: 20,
                justifyContent: "center",
                alignItems: "center",
                borderRadius: "50%",
                borderStyle: "solid",
                backgroundColor: "lightGreen",
                borderColor: "lightGreen",
                borderWidth: 1,
                mr: 2,
              }}
            >
              <MdCheck color="#3AB97A" />
            </Flex>
          )}
          {status === "ko" && <WarningBadge sx={{ mr: 2 }} />}
          <Flex
            sx={{
              transform: isOpen
                ? "rotate(90deg) translate(5px)"
                : "rotate(-90deg) translate(5px)",
              transition: "all 0.2s ease-out",
            }}
          >
            <MdArrowBackIos color={"#4E4E55"} />
          </Flex>
        </Flex>
      </Flex>
      <Flex
        ref={stepSectionContainer}
        sx={{
          overflow: "hidden",
          opacity: isOpen ? 1 : 0,
          paddingX: 24,
          willChange: "max-height",
          transition: "all 0.2s ease-out",
          maxHeight: isOpen ? contentHeight : 0,
        }}
      >
        {children}
      </Flex>
    </Flex>
  );
}