HRCenter/src/pages/UsersPage/UserDetails.js

import React from "react";
import PropTypes from "prop-types";
import avatar from "../../assets/images/Avatar.png";
import filters from "../../assets/images/filters.png";
import lock from "../../assets/images/lock.png";
import forbiden from "../../assets/images/forbiden.png";
import IconButton from "../../components/IconButton/IconButton";
import { Link, useParams } from "react-router-dom";
import { deleteUserReq } from "../../store/actions/users/usersActions";
import { useDispatch } from "react-redux";
import { USERS_PAGE } from "../../constants/pages";
import { forgetPassword } from "../../store/actions/login/loginActions";

const UserDetails = ({ history }) => {
  const { id } = useParams();
  const dispatch = useDispatch();

  const handleReset  = (email) => {
		dispatch(
			forgetPassword({
				email,
				handleApiResponseSuccessReset,
			})
		);
	};

  const handleApiResponseSuccessReset = () => {
    alert("Ok");
  };

  const handleApiResponseSuccess = () => {
    history.push({
      pathname: USERS_PAGE,
      state: {
        from: history.location.pathname,
      },
    });
  };

  const deleteHandler = () => {
    dispatch(deleteUserReq({ id, handleApiResponseSuccess }));
  };

  return (
    <div>
      <div className="l-t-rectangle"></div>
      <div className="r-b-rectangle"></div>
      <div className="pl-144 pt-36px">
        <div className="divider">
          <div className="flex-center">
            <h1 style={{ letterSpacing: "1px" }}>Korisnik</h1>
            <div
              className="vr"
              style={{
                margin: "0px 10px 0px 15px",
                top: "6px",
                backgroundColor: "#252525",
              }}
            ></div>
            <h3
              style={{
                letterSpacing: "0.75px",
                position: "relative",
                top: "4px",
              }}
              className="text-blue"
            >
              Stefan Stamenkovic
            </h3>
          </div>
          <div className="flex-center">
            <IconButton
              className={
                "c-btn--primary-outlined c-btn userPageBtn ml-20px no-padding"
              }
              onClick={() => handleReset("meris.ahmatovic@dilig.net")}
            >
              Resetuj password
              <img
                style={{
                  position: "relative",
                  top: -0.25,
                  paddingLeft: "10px",
                }}
                src={lock}
              />
            </IconButton>
            <IconButton
              className={
                "c-btn--primary-outlined c-btn userPageBtn ml-20px no-padding"
              }
            >
              Blokiraj
              <img
                style={{
                  position: "relative",
                  top: -0.25,
                  paddingLeft: "10px",
                }}
                src={forbiden}
              />
            </IconButton>
            <IconButton
              className={
                "c-btn--primary-outlined c-btn userPageBtn ml-20px no-padding"
              }
              onClick={deleteHandler}
            >
              Obrisi
              <img
                style={{
                  position: "relative",
                  top: -0.25,
                  paddingLeft: "10px",
                }}
                src={filters}
              />
            </IconButton>
            <IconButton
              className={
                "c-btn--primary-outlined c-btn userPageBtn ml-20px no-padding"
              }
            >
              Uredi profil
              <img
                style={{
                  position: "relative",
                  top: -0.25,
                  paddingLeft: "10px",
                }}
                src={filters}
              />
            </IconButton>
          </div>
        </div>
        <div className="flex-center" style={{ justifyContent: "flex-start" }}>
          <img
            src={avatar}
            height="108px"
            width="108px"
            style={{ margin: "18px 15px 36px 0px" }}
          />
          <p>HR Specialist</p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: "18px" }}>
          <p style={{ fontWeight: "600" }}>Kontakt</p>
          <div className="flex-center" style={{ justifyContent: "flex-start" }}>
            <p style={{ width: "85px" }}>Email:</p>
            <p className="text-blue">stameni@dilig.net</p>
          </div>
          <div className="flex-center" style={{ justifyContent: "flex-start" }}>
            <p style={{ width: "85px" }}>Telefon:</p>
            <p className="text-blue">0628264606</p>
          </div>
        </div>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            gap: "18px",
            paddingTop: "36px",
          }}
        >
          <p style={{ fontWeight: "600" }}>Drustvene mreze</p>
          <div className="flex-center" style={{ justifyContent: "flex-start" }}>
            <p style={{ width: "85px" }}>LinkedIn:</p>
            <p className="text-blue">https://www.linkedin.com/in/stamenis/</p>
          </div>
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "flex-end",
            marginTop: "150px",
          }}
        >
          <Link to={"/users"} className="text-blue">
            Nazad na listu korisnika
          </Link>
        </div>
      </div>
    </div>
  );
};

export default UserDetails;

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