canape/frontend/js/components/admins/userEdit.js

import React, { useState } from "react";
import PropTypes from "prop-types";
import { useSelector, useDispatch } from "react-redux";

import { updateUser, deleteUser } from "../../actions/admins";

import Toggle from "react-bootstrap-toggle";

import { PolochonSelect } from "../polochons/select";
import { FormModal } from "../forms/modal";
import { FormInput } from "../forms/input";

export const UserEdit = ({ id }) => {
  const dispatch = useDispatch();
  const user = useSelector((state) => state.admin.users.get(id));
  const polochon = user.polochon;

  const [modal, setModal] = useState(false);
  const [admin, setAdmin] = useState(user.admin);
  const [activated, setActivated] = useState(user.activated);
  const [token, setToken] = useState(user.token);
  const [polochonId, setPolochonId] = useState(
    polochon ? polochon.id : undefined
  );
  const [polochonActivated, setPolochonActivated] = useState(
    user.polochon_activated
  );
  const [password, setPassword] = useState("");
  const [confirmDelete, setConfirmDelete] = useState(false);

  const handleSubmit = (e) => {
    if (e) {
      e.preventDefault();
    }
    dispatch(
      updateUser({
        userId: id,
        polochonToken: token,
        admin,
        activated,
        polochonId,
        polochonActivated,
        password,
      })
    );
    setModal(false);
  };

  const handleDeleteUser = (e) => {
    if (e) {
      e.preventDefault();
    }
    if (confirmDelete) {
      dispatch(deleteUser(name));
      setModal(false);
    } else {
      setConfirmDelete(true);
    }
  };

  return (
    <span>
      <i className="fa fa-pencil clickable" onClick={() => setModal(true)} />

      <FormModal
        show={modal}
        setShow={setModal}
        title="Edit user"
        icon="edit"
        handleSubmit={handleSubmit}
      >
        <div className="form-group">
          <label>Account status</label>
          <Toggle
            className="pull-right"
            on="Activated"
            off="Deactivated"
            active={activated}
            offstyle="danger"
            handlestyle="secondary"
            onClick={() => setActivated(!activated)}
          />
        </div>

        <div className="form-group">
          <label>Admin status</label>
          <Toggle
            className="pull-right"
            on="Admin"
            off="User"
            active={admin}
            offstyle="info"
            handlestyle="secondary"
            onClick={() => setAdmin(!admin)}
          />
        </div>

        <FormInput
          label="Password"
          value={password}
          updateValue={setPassword}
        />

        <PolochonSelect value={polochonId} changeValue={setPolochonId} />
        <FormInput
          label="Polochon Token"
          value={token}
          updateValue={setToken}
        />
        <div className="form-group">
          <label>Polochon activated</label>
          <Toggle
            className="pull-right"
            on="Activated"
            off="Deactivated"
            active={polochonActivated}
            offstyle="danger"
            handlestyle="secondary"
            onClick={() => setPolochonActivated(!polochonActivated)}
          />
        </div>

        <div className="form-group">
          <button className="btn btn-danger w-100" onClick={handleDeleteUser}>
            {!confirmDelete ? "Delete user forever" : "Are you sure ?"}
          </button>
        </div>
      </FormModal>
    </span>
  );
};
UserEdit.propTypes = {
  id: PropTypes.string.isRequired,
};