{"size": 5257, "ext": "js", "max_stars_repo_path": "views/src/components/dashboard/AllUsersPermissions.js", "max_stars_repo_name": "UncleTom29/kiwi-shop", "max_stars_repo_stars_event_min_datetime": "2021-11-24T11:09:25.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-28T22:21:50.000Z", "max_issues_repo_path": "views/src/components/dashboard/AllUsersPermissions.js", "max_issues_repo_name": "joshuaoweipadei/kiwi-shop", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "views/src/components/dashboard/AllUsersPermissions.js", "max_forks_repo_name": "joshuaoweipadei/kiwi-shop", "max_forks_repo_forks_event_min_datetime": "2022-03-02T08:15:43.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-02T08:15:43.000Z"}
{"max_stars_count": 6, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 35.2818791946, "max_line_length": 107, "alphanum_fraction": 0.4011793799}
import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchAllUsers } from "../../redux/actions/permissions-actions/fetchAllUsers";
import { changeShipperPermission } from "../../redux/actions/permissions-actions/shipperPermissionActions";
import { changeAdminPermission } from "../../redux/actions/permissions-actions/adminPermissionActions";
import { restrictUserPermission } from "../../redux/actions/permissions-actions/restrictUserActions";
import { Container, Table, Button, Col, Row } from "react-bootstrap";
import { toast, Slide } from "react-toastify";
import DashboardSidebar from "./DashboardSidebar";
import DashboardSpinner from "./DashboardSpinner";

function AllUsersPermissions() {
  const { allUsers, loading } = useSelector(state => state.permissionsss);

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchAllUsers());
  }, [dispatch]);

  let emptyMessage;
  if (!loading && allUsers.length === 0) {
    emptyMessage = (
      <tr>
        <td>There are no orders yet</td>
      </tr>
    );
  }

  const givePermission = permissionFunction => {
    dispatch(permissionFunction)
      .then(res => {
        toast.success(res, {
          position: toast.POSITION.BOTTOM_LEFT,
          transition: Slide
        });
      })
      .catch(err => {
        toast.error(err, {
          position: toast.POSITION.BOTTOM_LEFT,
          autoClose: false
        });
      });
  };

  return (
    <Container fluid className='users-permissions'>
      <Row>
        <Col md='3'>
          <DashboardSidebar />
        </Col>
        <Col sm='12' md='9'>
          <h1 className='dashboard-headline'>Permissions</h1>
          {loading && <DashboardSpinner />}
          {!loading && (
            <Table striped bordered hover variant='dark'>
              <thead>
                <tr>
                  <th>Username</th>
                  <th>Email</th>
                  <th>Admin</th>
                  <th>Shipper</th>
                  <th>Restrict</th>
                </tr>
              </thead>
              <tbody>
                {emptyMessage}

                {allUsers &&
                  allUsers.map(user => {
                    return (
                      <tr key={user._id}>
                        <td>{user.username}</td>

                        <td>{user.email}</td>

                        <td>
                          <select
                            className='custom-select'
                            onChange={e => {
                              givePermission(
                                changeAdminPermission(user._id, e.target.value)
                              );
                            }}>
                            <option disabled selected value=''>
                              Change
                            </option>
                            <option value='false'>Disable</option>
                            <option value='true'>Enable</option>
                          </select>
                          {user.isAdmin && <i className='fa fa-check' aria-hidden='true'></i>}
                        </td>

                        <td>
                          <select
                            className='custom-select'
                            onChange={e => {
                              givePermission(
                                changeShipperPermission(user._id, e.target.value)
                              );
                            }}>
                            <option disabled selected value=''>
                              Change
                            </option>
                            <option value='false'>Disable</option>
                            <option value='true'>Enable</option>
                          </select>
                          {user.isShipper && (
                            <i className='fa fa-truck' aria-hidden='true'></i>
                          )}
                        </td>

                        {!user.isRestricted && (
                          <td>
                            <Button
                              onClick={() => {
                                givePermission(restrictUserPermission(user._id, "true"));
                              }}
                              variant='secondary'>
                              Restrict
                            </Button>
                          </td>
                        )}
                        {user.isRestricted && (
                          <td>
                            <Button
                              variant='success'
                              onClick={() => {
                                givePermission(restrictUserPermission(user._id, "false"));
                              }}>
                              Undo
                            </Button>
                            <i className='fa fa-ban' aria-hidden='true'></i>
                          </td>
                        )}
                      </tr>
                    );
                  })}
              </tbody>
            </Table>
          )}
        </Col>
      </Row>
    </Container>
  );
}

export default AllUsersPermissions;
