react-icons/fi#FiEye JavaScript Examples

export function PasswordInput({width, ...props}) {
  const [show, setShow] = useState(false)

  return (
    <div
      style={{
        position: 'relative',
        width,
      }}
    >
      <Input
        type={show ? 'text' : 'password'}
        pr={[8, 3]}
        opacity={[0.8, 1]}
        {...props}
      />
      <Box
        mt={['5px', '-3px']}
        opacity={[0.16, 1]}
        style={{
          ...borderRadius('right', rem(6)),
          cursor: 'pointer',
          fontSize: rem(20),
          position: 'absolute',
          top: rem(0),
          height: '100%',
          right: rem(10),
          zIndex: 5,
        }}
        onClick={() => setShow(!show)}
      >
        {show ? (
          <FiEyeOff style={{transform: 'translate(0, 50%)'}} />
        ) : (
          <FiEye style={{transform: 'translate(0, 50%)'}} />
        )}
      </Box>
    </div>
  )
}

getTechnologyDataGrid = (order, openModal, setCurrentOrder) => {
	const {
		id,
		status,
		created_at,
		technology: { title, users },
	} = order;

	const owner = users?.find((user) => user?.pivot?.role === 'OWNER');
	const orderType = 'technology';

	return {
		id,
		title,
		institution: owner.institution.initials,
		responsible: owner?.full_name,
		status: {
			status,
			content: getDealStatusText(status),
		},
		orderDate: dateToString(created_at),
		type: 'T',
		actions: [
			{
				variant: 'gray',
				ariaLabel: 'Order details',
				icon: FiEye,
				onClick: () => openModal('technologyOrderDetails', { id }),
			},
			{
				variant: 'info',
				ariaLabel: 'Send message to technology owner',
				icon: FiMessageSquare,
				onClick: () => setCurrentOrder({ ...order, owner }),
			},
			{
				variant: 'remove',
				ariaLabel: 'Cancel order',
				icon: FiX,
				onClick: () => openModal('cancelOrder', { id, orderType }),
				disabled:
					status === dealStatusEnum.DEAL_CANCELLED ||
					status === dealStatusEnum.DEAL_STRUCK,
			},
		],
	};
}

getServiceDataGrid = (order, openModal, setCurrentOrder) => {
	const {
		id,
		status,
		created_at,
		service: { name, user },
	} = order;

	const orderType = 'service';

	return {
		id,
		title: name,
		institution: user.institution.initials,
		responsible: user.full_name,
		status: { status, content: getDealStatusText(status) },
		orderDate: dateToString(created_at),
		type: 'S',
		actions: [
			{
				variant: 'gray',
				ariaLabel: 'Order details',
				icon: FiEye,
				onClick: () => openModal('serviceOrderDetails', { id }),
			},
			{
				variant: 'info',
				ariaLabel: 'Send message to service owner',
				icon: FiMessageSquare,
				onClick: () => setCurrentOrder({ ...order, owner: user }),
			},
			{
				variant: 'remove',
				ariaLabel: 'Cancel order',
				icon: FiX,
				onClick: () => openModal('cancelOrder', { id, orderType }),
				disabled:
					status === dealStatusEnum.DEAL_CANCELLED ||
					status === dealStatusEnum.DEAL_STRUCK,
			},
		],
	};
}

getTechnologyDataGrid = (order, openModal, setCurrentOrder) => {
	const {
		id,
		status,
		created_at,
		user,
		technology: { title },
	} = order;

	const orderType = 'technology';

	return {
		id,
		title,
		buyer: user.full_name,
		status: {
			status,
			content: getDealStatusText(status),
		},
		orderDate: dateToString(created_at),
		type: 'T',
		actions: [
			{
				variant: 'gray',
				ariaLabel: 'Order details',
				icon: FiEye,
				onClick: () => openModal('technologyOrderDetails', { id }),
			},
			{
				variant: 'success',
				ariaLabel: 'Settle the deal',
				icon: FiCheck,
				onClick: () => openModal('settleDeal', { id, orderType }),
				disabled:
					status === dealStatusEnum.DEAL_STRUCK ||
					status === dealStatusEnum.DEAL_CANCELLED,
			},
			{
				variant: 'info',
				ariaLabel: 'Send message to the buyer',
				icon: FiMessageSquare,
				onClick: () => setCurrentOrder(order),
			},
			{
				variant: 'remove',
				ariaLabel: 'Cancel order',
				icon: FiX,
				onClick: () => openModal('cancelOrder', { id, orderType }),
				disabled:
					status === dealStatusEnum.DEAL_CANCELLED ||
					status === dealStatusEnum.DEAL_STRUCK,
			},
		],
	};
}

getServiceDataGrid = (order, openModal, setCurrentOrder) => {
	const {
		id,
		status,
		created_at,
		user,
		service: { name },
	} = order;

	const orderType = 'service';

	return {
		id,
		title: name,
		buyer: user.full_name,
		status: { status, content: getDealStatusText(status) },
		orderDate: dateToString(created_at),
		type: 'S',
		actions: [
			{
				variant: 'gray',
				ariaLabel: 'Order details',
				icon: FiEye,
				onClick: () => openModal('serviceOrderDetails', { id }),
			},
			{
				variant: 'success',
				ariaLabel: 'Settle the deal',
				icon: FiCheck,
				onClick: () => openModal('settleDeal', { id, orderType }),
				disabled:
					status === dealStatusEnum.DEAL_STRUCK ||
					status === dealStatusEnum.DEAL_CANCELLED,
			},
			{
				variant: 'info',
				ariaLabel: 'Send message to the buyer',
				icon: FiMessageSquare,
				onClick: () => setCurrentOrder(order),
			},
			{
				variant: 'remove',
				ariaLabel: 'Cancel order',
				icon: FiX,
				onClick: () => openModal('cancelOrder', { id, orderType }),
				disabled:
					status === dealStatusEnum.DEAL_CANCELLED ||
					status === dealStatusEnum.DEAL_STRUCK,
			},
		],
	};
}

function SignIn(props) {
  useEffect(() => {
    props.setLogout(false);

    return () => {
      props.setLogout(true);
    };
  }, [props]);

  const history = useHistory();

  const [passwordHide, setPasswordHide] = useState(false);

  const [isLoading, setIsLoading] = useState(false);

  function tooglePassword() {
    setPasswordHide(password => !password);
  }

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const [signing_error, setSigning_error] = useState("");

  async function submitHandle(e) {
    e.preventDefault();
    if (validator.empty(email)) {
      return setSigning_error("Email Field is Empty!");
    }
    if (validator.empty(password)) {
      return setSigning_error("Password Field is Empty!");
    }

    if (!validator.email(email)) {
      return setSigning_error("Invalid Email!");
    }

    setIsLoading(true);

    try {
      const { data } = await api.signIn({ email, password });
      console.log(data);
      setSigning_error(data.message);
      // console.log(data);
      localStorage.setItem("token", data.token);
      localStorage.setItem("user", JSON.stringify(data.user));
      setIsLoading(false);
      history.push("/");
    } catch (error) {
      if (error.response) {
        setSigning_error(error.response.data.message);
      } else if (error.request) {
        setSigning_error("Server is not Responding!");
        // console.log(error.request);
      } else {
        setSigning_error(error.message);
        // console.log(error.message);
      }
      setIsLoading(false);
    }
  }

  if (localStorage.getItem("token")) {
    return <Redirect to="/" />;
  }

  return (
    <>
      <div className={styles.parent}>
        <div className={styles.leftChildSection}>
          <div>
            {/* <p id={styles.desc}>
              Athavani/Memories is a place to save all
              <br /> your memories in a single place
              <br /> and rejoice them through the years.
            </p> */}
            <div>
              <img
                src={image}
                alt="Memories Image"
                style={{ width: "100%", height: "auto" }}
              ></img>
            </div>
          </div>
        </div>
        <div className={styles.rightChildSection}>
          <div className={styles.SignIn} style={{ marginTop: "5%" }}>
            <div className={styles.SignImage}>
              <img
                className={styles.Sign_image}
                src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_129714169_970647970450099_67857.jpg"
                alt="Memories Image"
              ></img>
              <div className={styles.bg_color}></div>
            </div>
            <div className={styles.title}>SIGN IN</div>

            <div className={styles.body}>
              <form className={styles.form} onSubmit={submitHandle}>
                <input
                  type="text"
                  className={styles.email}
                  name="email"
                  placeholder="Email Address"
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                />
                <div className={styles.password_container}>
                  <input
                    type={`${passwordHide ? "text" : "password"}`}
                    className={styles.password}
                    name="password"
                    placeholder="Enter Password"
                    value={password}
                    onChange={e => setPassword(e.target.value)}
                  />
                  <div className={styles.eye} onClick={tooglePassword}>
                    {passwordHide ? <FiEyeOff /> : <FiEye />}
                  </div>
                </div>
                <div className={styles.forgot}>
                  <Link to="/forgot">Forgot your password?</Link>
                </div>
                <div style={{ display: "flex", justifyContent: "center" }}>
                  <button
                    className={styles.login}
                    onClick={submitHandle}
                    disabled={isLoading}
                    type="submit"
                    style={{
                      cursor: `${isLoading ? "not-allowed" : "pointer"}`,
                    }}
                  >
                    Log In
                    {isLoading && <LinearProgress color="secondary" />}
                  </button>
                </div>
                <div
                  id="signerror"
                  style={{ textAlign: "center", color: "coral", fontSize: 19 }}
                >
                  {signing_error}
                </div>
              </form>
              <GoogleSignin />
              <div className={styles.already}>
                {!isLoading && (
                  <>
                    <div className={styles.text}>New to Athavani?</div>
                    <div className={styles.link} disabled>
                      <Link to="/signup">Sign Up</Link>
                    </div>
                  </>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function SignUp(props) {
  useEffect(() => {
    props.setLogout(false);

    return () => {
      props.setLogout(true);
    };
  }, [props]);

  const history = useHistory();

  const [showPassword, setShowPassword] = useState(false);
  const [showPassword2, setShowPassword2] = useState(false);

  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [password2, setPassword2] = useState("");

  const [otp, setOtp] = useState("");
  const [isOtpSent, setIsOtpSent] = useState(false);
  const [isOtpVerified, setIsOtpVerified] = useState(false);

  const [isLoading, setIsLoading] = useState(false);
  const [error_signup, setError_signup] = useState("");

  async function sendOtpHandle(e) {
    e.preventDefault();
    if (validator.empty(email)) {
      return setError_signup("Email Field is Empty!");
    }
    if (!validator.email(email)) {
      return setError_signup("Invalid Email!");
    }

    setIsLoading(true);

    try {
      const { data } = await api.sendOtp({ email });
      console.log(data);
      setError_signup(data.message);
      setIsOtpSent(true);
      setIsLoading(false);
    } catch (error) {
      if (error.response) {
        setError_signup(error.response.data.message);
      } else if (error.request) {
        setError_signup("Server is not Responding!");
        // console.log(error.request);
      } else {
        setError_signup(error.message);
        // console.log(error.message);
      }
      setIsLoading(false);
    }
  }

  async function verifyOtpHandle(e) {
    e.preventDefault();
    if (validator.empty(otp)) {
      return setError_signup("OTP Field is Empty!");
    }

    setIsLoading(true);

    try {
      const { data } = await api.verifyOtp({ email, otp });
      // console.log(data);
      setError_signup(data.message);
      setIsOtpVerified(true);
      setIsLoading(false);
    } catch (error) {
      if (error.response) {
        setError_signup(error.response.data.message);
      } else if (error.request) {
        setError_signup("Server is not Responding!");
        // console.log(error.request);
      } else {
        setError_signup(error.message);
        // console.log(error.message);
      }
      setIsLoading(false);
    }
  }

  async function submitHandle(e) {
    e.preventDefault();
    if (validator.empty(name)) {
      return setError_signup("Name Field is Empty!");
    }
    if (validator.empty(password)) {
      return setError_signup("Password Field is Empty!");
    }
    if (validator.empty(password2)) {
      return setError_signup("Confirm Password Field is Empty!");
    }

    if (!validator.password(password)) {
      return setError_signup("Password length must be more than 6.");
    }
    if (!validator.match(password, password2)) {
      return setError_signup("Password and Confirm Password are not matching!");
    }

    setIsLoading(true);

    try {
      const { data } = await api.signUp({ name, email, password });
      // console.log(data);
      setError_signup(data.message);
      setIsLoading(false);
      history.push("/signin");
    } catch (error) {
      if (error.response) {
        setError_signup(error.response.data.message);
      } else if (error.request) {
        setError_signup("Server is not Responding!");
        // console.log(error.request);
      } else {
        setError_signup(error.message);
        // console.log(error.message);
      }
      setIsLoading(false);
    }
  }

  function resetHandle() {
    setIsOtpSent(false);
    setIsOtpVerified(false);
    setOtp("");
  }

  if (localStorage.getItem("token")) {
    return <Redirect to="/" />;
  }

  return (
    <div className={styles.parent}>
      <div className={styles.leftChildSection}>
        <div>
          {/* <p id={styles.desc}>
              Athavani/Memories is a place to save all
              <br /> your memories in a single place
              <br /> and rejoice them through the years.
            </p> */}
          <div>
            <img
              src={image}
              alt="Memories Image"
              style={{ width: "100%", height: "auto" }}
            ></img>
          </div>
        </div>
      </div>
      <div className={styles.rightChildSection}>
        <div className={styles.SignUp} style={{ marginTop: "5%" }}>
          <div className={styles.SignImage}>
            <img
              className={styles.Sign_image}
              src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_129714169_970647970450099_67857.jpg"
              alt="Memories Image"
            ></img>
            <div className={styles.bg_color}></div>
          </div>
          <div className={styles.title}>SIGN UP</div>
          <div className={styles.body}>
            <form
              className={styles.form}
              onSubmit={isOtpSent ? resetHandle : sendOtpHandle}
            >
              <input
                type="text"
                name="email"
                placeholder="Email Address"
                value={email}
                onChange={e => setEmail(e.target.value)}
                disabled={isOtpSent}
              />
              {isOtpSent ? (
                <div style={{ display: "flex", justifyContent: "center" }}>
                  <button className={styles.send_otp} onClick={resetHandle}>
                    Change Email
                  </button>
                </div>
              ) : (
                <div
                  style={{
                    display: "flex",
                    justifyContent: "center",
                    width: "80%",
                    margin: "auto",
                  }}
                >
                  <button
                    type="submit"
                    className={styles.send_otp}
                    onClick={sendOtpHandle}
                    disabled={isLoading}
                    style={{
                      cursor: `${isLoading ? "not-allowed" : "pointer"}`,
                    }}
                  >
                    Send OTP
                    {isLoading && (
                      <LinearProgress display="none" color="secondary" />
                    )}
                  </button>
                </div>
              )}
              <div
                style={{
                  textAlign: "center",
                  fontSize: 19,
                  color: "coral",
                  marginTop: 15,
                }}
              >
                {error_signup}
              </div>
            </form>
            {isOtpSent && !isOtpVerified && (
              <form onSubmit={verifyOtpHandle}>
                <input
                  type="text"
                  name="otp"
                  placeholder="Enter OTP"
                  value={otp}
                  onChange={e => setOtp(e.target.value)}
                />
                <div style={{ display: "flex", justifyContent: "center" }}>
                  <button
                    type="submit"
                    className={styles.send_otp}
                    onClick={verifyOtpHandle}
                    disabled={isLoading}
                    style={{
                      cursor: `${isLoading ? "not-allowed" : "pointer"}`,
                    }}
                  >
                    Verifiy OTP
                    {isLoading && <LinearProgress color="secondary" />}
                  </button>
                </div>
              </form>
            )}
            {isOtpVerified && (
              <form onSubmit={submitHandle}>
                <input
                  type="text"
                  name="name"
                  placeholder="Your Name"
                  value={name}
                  onChange={e => setName(e.target.value)}
                />

                <div className={styles.password_container}>
                  <input
                    type={showPassword ? "text" : "password"}
                    name="password"
                    placeholder="Enter Password"
                    value={password}
                    onChange={e => setPassword(e.target.value)}
                  />
                  <div
                    className={styles.eye}
                    onClick={() => setShowPassword(prevState => !prevState)}
                  >
                    {showPassword ? <FiEyeOff /> : <FiEye />}
                  </div>
                </div>

                <div className={styles.password_container}>
                  <input
                    type={showPassword2 ? "text" : "password"}
                    name="password2"
                    placeholder="Confirm Password"
                    value={password2}
                    onChange={e => setPassword2(e.target.value)}
                  />
                  <div
                    className={styles.eye}
                    onClick={() => setShowPassword2(prevState => !prevState)}
                  >
                    {showPassword2 ? <FiEyeOff /> : <FiEye />}
                  </div>
                </div>
                <div style={{ display: "flex", justifyContent: "center" }}>
                  <button
                    type="submit"
                    className={styles.signup}
                    onClick={submitHandle}
                    disabled={isLoading}
                    style={{
                      cursor: `${isLoading ? "not-allowed" : "pointer"}`,
                    }}
                  >
                    Sign Up
                    {isLoading && <LinearProgress color="secondary" />}
                  </button>
                </div>
              </form>
            )}
            <div className={styles.already}>
              <div className={styles.text}>Already have an account?</div>
              <div className={styles.link}>
                <Link to="/signin">Sign In</Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

MyBookmarks = ({
	bookmarks,
	currentPage,
	totalPages,
	totalItems,
	itemsPerPage,
	currentSort,
	sortOptions,
}) => {
	const { t } = useTranslation(['helper', 'account']);
	const router = useRouter();

	/**
	 * Pushes new page number to next/router
	 *
	 * @param {string} page Page number.
	 */
	const handlePagination = (page) => {
		const { pathname, query } = router;
		query.page = page;

		router.push({
			pathname,
			query,
		});
	};

	/**
	 * Pushes new sort options to next/router
	 *
	 * @param {string} sortBy Grid column to sort items.
	 * @param {('ASC'|'DESC')} order Sort order.
	 * @returns {Promise<boolean>} Next router push
	 */
	const handleSortBy = (sortBy, order = currentSort.order || orderEnum.ASC) => {
		const { pathname, query } = router;

		delete query.page;

		const shouldOrderAsc = order === orderEnum.DESC && currentSort.by !== sortBy;
		query.order = shouldOrderAsc ? orderEnum.ASC : order;
		query.sortBy = sortBy;

		return router.push({
			pathname,
			query,
		});
	};

	return (
		<Container>
			<Protected>
				<UserProfile />
				<MainContentContainer>
					<Title align="left" noPadding noMargin>
						{t('account:titles.myBookmarks')}
					</Title>
					<MainContent>
						{bookmarks.length ? (
							<DataGrid
								data={bookmarks.map(({ id, title, status, slug }) => ({
									id,
									Título: title,
									Status: (
										<TechnologyStatus status={status}>
											{getTechnologyStatus(status)}
										</TechnologyStatus>
									),
									slug,
									Ações: (
										<TechnologyActions>
											<IconButton
												variant="gray"
												aria-label="Technology Details"
												// onClick={() => openModal()}
											>
												<FiEye />
											</IconButton>
											<IconButton
												variant="remove"
												aria-label="Unlike technology"
												disabled={status === technologyStatusEnum.REJECTED}
												// onClick={() => openModal()}
											>
												<FiX />
											</IconButton>
										</TechnologyActions>
									),
								}))}
								hideItemsByKey={['slug']}
								currentPage={currentPage}
								totalPages={totalPages}
								totalItems={totalItems}
								itemsPerPage={itemsPerPage}
								currentOrder={currentSort.order}
								sortOptions={sortOptions}
								handlePagination={handlePagination}
								handleSortBy={handleSortBy}
								rowLink="/t/:slug"
								enablePagination
							/>
						) : (
							<EmptyScreen message={t('account:messages.noBookmarksToShow')} />
						)}
					</MainContent>
				</MainContentContainer>
			</Protected>
		</Container>
	);
}

Questions = ({
	questions,
	currentPage,
	totalPages,
	totalItems,
	itemsPerPage,
	currentSort,
	sortOptions,
}) => {
	const { t } = useTranslation(['helper', 'account']);
	const { openModal } = useModal();
	const router = useRouter();

	/**
	 * Pushes new page number to next/router
	 *
	 * @param {string} page Page number.
	 */
	const handlePagination = (page) => {
		const { pathname, query } = router;
		query.page = page;

		router.push({
			pathname,
			query,
		});
	};

	/**
	 * Pushes new sort options to next/router
	 *
	 * @param {string} orderBy Grid column to sort items.
	 * @param {('ASC'|'DESC')} order Sort order.
	 * @returns {Promise<boolean>} Next router push
	 */
	const handleSortBy = (orderBy, order = currentSort.order || orderEnum.ASC) => {
		const { pathname, query } = router;

		delete query.page;

		const shouldOrderAsc = order === orderEnum.DESC && currentSort.by !== orderBy;
		query.order = shouldOrderAsc ? orderEnum.ASC : order;
		query.orderBy = orderBy;

		return router.push({
			pathname,
			query,
		});
	};

	return (
		<Container>
			<Protected>
				<UserProfile />
				<MainContentContainer>
					{questions?.length ? (
						<>
							<Title align="left" noPadding noMargin>
								{t('account:titles.questions')}
							</Title>
							<MainContent>
								<DataGrid
									data={questions?.map((question) => {
										const {
											id,
											technology: { title },
											user: { full_name },
											status,
											created_at,
										} = question;

										return {
											id,
											Tecnologia: title,
											Usuário: full_name,
											Status: (
												<QuestionStatus status={status}>
													{getQuestionStatusText(status)}
												</QuestionStatus>
											),
											'Data da pergunta': dateToString(created_at),
											Ações: (
												<QuestionActions>
													<IconButton
														variant="gray"
														aria-label="Question details"
														onClick={() =>
															openModal('questionDetails', {
																question,
															})
														}
													>
														<FiEye />
													</IconButton>
												</QuestionActions>
											),
										};
									})}
									hideItemsByKey={['id']}
									handlePagination={handlePagination}
									handleSortBy={handleSortBy}
									currentPage={currentPage}
									currentOrder={currentSort.order}
									totalPages={totalPages}
									totalItems={totalItems}
									itemsPerPage={itemsPerPage}
									sortOptions={sortOptions}
								/>
							</MainContent>
						</>
					) : (
						<EmptyScreen message={t('account:messages.noQuestionsToShow')} />
					)}
				</MainContentContainer>
			</Protected>
		</Container>
	);
}