HRCenter/src/pages/RegisterPage/RegisterPage.js

/* eslint-disable */
import React, { useEffect, useState, useContext } from "react";
import PropTypes from "prop-types";
import { useFormik } from "formik";
import { useDispatch, useSelector } from "react-redux";
import { NavLink } from "react-router-dom";
import * as Yup from "yup";
import { useTranslation } from "react-i18next";
import HrLogo from "../../assets/images/hrcenter.png";
import jwt_decode from "jwt-decode";
import {
  clearLoginErrors,
  fetchUser,
  fetchGoogleUser,
} from "../../store/actions/login/loginActions";
import { selectLoginError } from "../../store/selectors/loginSelectors";
import { FORGOT_PASSWORD_PAGE, HOME_PAGE } from "../../constants/pages";
import {
  Box,
  Button,
  Container,
  Grid,
  IconButton,
  InputAdornment,
  Link,
  TextField,
  Typography,
} from "@mui/material";
import { Visibility, VisibilityOff } from "@mui/icons-material";
import Backdrop from "../../components/MUI/BackdropComponent";
import ErrorMessage from "../../components/MUI/ErrorMessageComponent";
import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
import {
  LOGIN_USER_LOADING,
  LOGIN_GOOGLE_USER_LOADING,
} from "../../store/actions/login/loginActionConstants";
import { authScopeStringGetHelper } from "../../util/helpers/authScopeHelpers";
import { JWT_TOKEN } from "../../constants/localStorage";
import Step from "../../components/Registration/Step";
import { FormContext, FormProvider } from "../../context/FormContext";

const RegisterPage = ({ history }) => {
  //   const dispatch = useDispatch();
  const { t } = useTranslation();
  //   const error = useSelector(selectLoginError);

  const { activeStepIndex } = useContext(FormContext);

  const [showPassword, setShowPassword] = useState(false);
  const [firstDone, setFirst] = useState(false);
  const [isInit, setIsInit] = useState(true);
  const handleClickShowPassword = () => setShowPassword(!showPassword);
  const handleMouseDownPassword = () => setShowPassword(!showPassword);

  const handleCallbackResponse = (response) => {
    const userObject = jwt_decode(response.credential);
    const user = userObject;
    const token = response.credential;
    dispatch(clearLoginErrors());
    dispatch(
      fetchGoogleUser({
        user,
        token,
        handleApiResponseSuccess,
      })
    );
  };

  const isLoading = useSelector(
    selectIsLoadingByActionType(LOGIN_USER_LOADING)
  );

  const isGoogleLoading = useSelector(
    selectIsLoadingByActionType(LOGIN_GOOGLE_USER_LOADING)
  );

  useEffect(() => {
    if (isInit) {
      setIsInit(false);
      return;
    }
  }, [isInit]);

  return (
    <>
      <Container
        component="main"
        maxWidth="xl"
        className="c-login-container"
        fullwidth="true"
      >
        <div className="l-t-rectangle"></div>
        <div className="r-b-rectangle"></div>
        <Box
          sx={{
            marginTop: 2,
            width: 289,
            height: 684,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          }}
        >
          <img src={HrLogo} className="login-logo" />
          <Typography variant="h5" sx={{ m: 1, mt: 3 }}>
            {t("login.welcome")}
          </Typography>
          <Typography variant="p" sx={{ mb: 2 }}>
            Dva koraka do HR Centra.
          </Typography>
          <div className="steps-cont">
            <div
              className={`step ${activeStepIndex && activeStepIndex === 1 ? "done" : "current"}`}
            >
              1
            </div>
            <div className="line-btw"></div>
            <div
              className={`step ${
                activeStepIndex && activeStepIndex === 1 ? "current" : "disallowed"
              }`}
            >
              2
            </div>
          </div>
          {/* {error && <ErrorMessage error={error} />} */}

          {/* THIS SHOULD BE COPIED */}
          <Step />
        </Box>
      </Container>
    </>
  );
};

RegisterPage.propTypes = {
  history: PropTypes.shape({
    replace: PropTypes.func,
    push: PropTypes.func,
    location: PropTypes.shape({
      pathname: PropTypes.string,
    }),
  }),
};
export default RegisterPage;