@/utils#Cookie JavaScript Examples

ProtectedRoute = ({ roles, ...otherProps }) => {
  const { currentUser } = useSelector(currentUserSelector, shallowEqual);
  const jwt = Cookie.get('jwt');

  if (!jwt) {
    return <Redirect to={paths.AUTH} />;
  }

  if (!roles.includes(currentUser.role)) {
    return <Redirect to={paths.NOT_FOUND} />;
  }
  // eslint-disable-next-line react/jsx-props-no-spreading
  return <Route {...otherProps} />;
}

export function useFetchMentors() {
  const jwt = Cookie.get('jwt');
  const { get, response, loading, error } = useFetch(
    'https://whatbackend.azurewebsites.net/api/v2',
    {
      headers: {
        Authorization: `Bearer ${jwt}`,
      },
    }
  );
  const [allMentors, setAllMentors] = useState([]);
  const [activeMentors, setActiveMentors] = useState([]);
  const [disabledMentors, setDisabledMentors] = useState([]);

  useEffect(() => {
    loadAllMentors();
    loadActiveMentors();
  }, []);

  useEffect(() => {
    if (response.ok && !loading && !error) {
      const activeMentorIds = activeMentors.map(({ id }) => id);
      const disabledMentors = allMentors.filter(
        ({ id }) => !activeMentorIds.includes(id)
      );
      setDisabledMentors(disabledMentors);
    }
  }, [allMentors, activeMentors]);

  async function loadAllMentors() {
    const mentors = await get('/mentors');
    if (response.ok) {
      setAllMentors(mentors);
    }
  }
  async function loadActiveMentors() {
    const mentors = await get('/mentors/active');
    if (response.ok) {
      setActiveMentors(mentors);
    }
  }

  return { loading, error, allMentors, activeMentors, disabledMentors };
}

Auth = () => {
  const {
    isLoading,
    error: requestError,
    loaded,
    currentUser,
  } = useSelector(currentUserSelector, shallowEqual);
  const dispatchLogIn = useActions(login);
  const history = useHistory();
  const jwt = Cookie.get('jwt');

  useEffect(() => {
    if (jwt) {
      history.push(paths.NOT_FOUND);
    }
  }, [history, jwt]);

  const submitHandler = (values) => {
    const {email, password} = values;
    dispatchLogIn({ email: email.trim(), password});
  };

  useEffect(() => {
    if (loaded && !requestError && currentUser) {
      history.push(homepages[currentUser.role]);
    }
  }, [currentUser, history, loaded, requestError]);

  return (
    <div className={styles.wrapper}>
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-xl-6 col-md-8 col-sm-10 col-12">
            <div className={classNames(styles.form, 'card', 'shadow')}>
              <Formik
                initialValues={{
                  email: '',
                  password: '',
                }}
                onSubmit={submitHandler}
                validationSchema={authValidation}
              >
                {({
                  errors,
                  touched,
                }) => (
                  <Form className="p-3" noValidate>
                    <h3 className="text-center">Sign in to WHAT</h3>
                    <hr />
                    <div className="form-group">
                      <label htmlFor="email">Email address</label>
                      <Field
                        type="email"
                        className={classNames('form-control', { 'border-danger': errors.email && touched.email })}
                        name="email"
                        placeholder="Email address"
                        id="email"
                      />
                      <p className="text-danger">{touched.email && errors.email}</p>
                    </div>
                    <div className="form-group">
                      <label htmlFor="password">Password</label>
                      <Field
                        type="password"
                        className={classNames('form-control', { 'border-danger': errors.password && touched.password })}
                        name="password"
                        placeholder="Password"
                        id="password"
                        autoComplete="on"
                      />
                      <p className="text-danger">{touched.password && errors.password}</p>
                    </div>
                    <div className="d-flex justify-content-center">
                      <WithLoading isLoading={isLoading} variant="info" className="d-block mx-auto">
                        <Button type="submit" className={styles['form-button']}>Sign in</Button>
                      </WithLoading>
                    </div>
                    {requestError && <p className="text-center text-danger mt-2">{requestError}</p>}
                    <div className="d-flex justify-content-between mt-3">
                      <div className="text-center">
                        <p><Link to={paths.FORGOT_PASSWORD} className={styles['form-link']}>Forgot Password?</Link></p>
                      </div>
                      <div className="text-right">
                        <p>Don&apos;t have an account? <Link to={paths.REGISTRATION} className={styles['form-link']}>Registration</Link></p>
                      </div>
                    </div>
                  </Form>
                )}
              </Formik>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Registration = () => {
  const history = useHistory();
  const jwt = Cookie.get('jwt');

  const [toShowModal, setShowModal] = useState(false);

  const handleShowModal = () => setShowModal(true);
  const handleCloseModal = () => setShowModal(false);

  const { isLoading, isLoaded, error } = useSelector(registrationSelector, shallowEqual);

  const signUp = useActions(registration);
  const setClearLoaded = useActions(clearLoaded);

  const handleSubmitModal = () => {
    handleCloseModal();
    setClearLoaded();
    history.push(paths.AUTH);
  };

  const onSubmit = (values) => {
    signUp(values);
  };

  useEffect(() => {
    if (isLoaded && !error) {
      handleShowModal();
    }
  }, [isLoaded, error]);

  useEffect(() => {
    if (jwt) {
      history.push(paths.NOT_FOUND);
    }
  }, [history, jwt]);

  return (
    <div className={styles.wrapper}>
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-xl-6 col-md-8 col-sm-10 col-12">
            <div className={styles.form}>
              <Formik
                initialValues={{
                  firstName: '',
                  lastName: '',
                  email: '',
                  password: '',
                  confirmPassword: '',
                }}
                onSubmit={onSubmit}
                validationSchema={registrationValidation}
              >
                {({ errors, touched }) => (
                  <Form className="p-3" noValidate>
                    <h3 className="text-center">Sign up to WHAT</h3>
                    <hr />
                    <div className="form-group">
                      <label htmlFor="firstName">First Name</label>
                      <Field
                        name="firstName"
                        className={classNames('form-control', { 'border-danger': errors.firstName && touched.firstName })}
                        id="firstName"
                        placeholder="First name"
                      />
                      <p className="text-danger mb-0">{touched.firstName && errors.firstName}</p>
                    </div>
                    <div className="form-group">
                      <label htmlFor="lastName">Last Name</label>
                      <Field
                        name="lastName"
                        className={classNames('form-control', { 'border-danger': errors.lastName && touched.lastName })}
                        id="lastName"
                        placeholder="Last name"
                      />
                      <p className="text-danger mb-0">{touched.lastName && errors.lastName}</p>
                    </div>
                    <div className="form-group">
                      <label htmlFor="email">Email address</label>
                      <Field
                        type="email"
                        name="email"
                        className={classNames('form-control', { 'border-danger': errors.email && touched.email })}
                        id="email"
                        placeholder="Email"
                      />
                      <p className="text-danger">{touched.email && errors.email}</p>
                    </div>
                    <div className="form-group">
                      <label htmlFor="password">Password</label>
                      <Field
                        type="password"
                        name="password"
                        className={classNames('form-control', { 'border-danger': errors.password && touched.password })}
                        id="password"
                        placeholder="Password"
                        autoComplete="on"
                      />
                      <p className="text-danger mb-0">{touched.password && errors.password}</p>
                    </div>
                    <div className="form-group">
                      <label htmlFor="confirm-password">Confirm Password</label>
                      <Field
                        type="password"
                        name="confirmPassword"
                        className={classNames('form-control', { 'border-danger': errors.confirmPassword && touched.confirmPassword })}
                        id="confirm-password"
                        placeholder="Confirm password"
                        autoComplete="on"
                      />
                      <p className="text-danger mb-0">{touched.confirmPassword && errors.confirmPassword}</p>
                    </div>
                    <div className="d-flex justify-content-center">
                      <WithLoading isLoading={isLoading}>
                        <Button type="submit" className="btn btn-block btn-info">Sign up</Button>
                      </WithLoading>
                    </div>
                    <p className="text-danger text-center mt-2">{error}</p>
                    <div className="text-center mt-3">
                      <p>Already have an account? <Link to={paths.AUTH} className={styles['form-link']}>Log in</Link></p>
                    </div>
                  </Form>
                )}
              </Formik>
              <ModalWindow
                toShow={toShowModal}
                onSubmit={handleSubmitModal}
                onClose={handleCloseModal}
                submitButtonText="Back"
                title="Congratulations"
                hideCancelButton
              >
                You have successfully registered.
                Please, wait until your account is approved and your role is assigned.
              </ModalWindow>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}