{"size": 2473, "ext": "js", "max_stars_repo_path": "Java-Summer-School-w4/movietracker/frontend/src/Components/Users/Users.js", "max_stars_repo_name": "afozbek/Java-Projects", "max_stars_repo_stars_event_min_datetime": "2019-07-31T06:17:56.000Z", "max_stars_repo_stars_event_max_datetime": "2019-08-15T16:07:28.000Z", "max_issues_repo_path": "Java-Summer-School-w4/movietracker/frontend/src/Components/Users/Users.js", "max_issues_repo_name": "afozbek/Java-Projects", "max_issues_repo_issues_event_min_datetime": "2020-09-06T17:04:24.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T21:29:19.000Z", "max_forks_repo_path": "Java-Summer-School-w4/movietracker/frontend/src/Components/Users/Users.js", "max_forks_repo_name": "afozbek/jss-projects", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": 7, "max_forks_count": null, "avg_line_length": 29.0941176471, "max_line_length": 74, "alphanum_fraction": 0.41083704}
import React, { Component, Fragment } from "react";
import { Link } from "react-router-dom";
import axios from "../../axios-instance";

import User from "./User";
import Loading from "../../Util/Loading";
import Logout from "../Auth/Logout/Logout";

export default class Users extends Component {
    state = {
        users: [],
        loading: true
    };

    componentDidMount() {
        const jwttoken = localStorage.getItem("jwttoken");

        if (!jwttoken) {
            this.props.history.push("/login");
        }

        axios
            .get("/admin/user", {
                headers: { Authorization: "Bearer " + jwttoken }
            })
            .then(res => {
                console.log(res.data);
                this.setState({ users: res.data, loading: false });
            })
            .catch(err => {
                console.log(err);
                this.setState({
                    err,
                    loading: false
                });
            });
    }

    render() {
        const users = this.state.users.map(user => {
            return <User key={user.userId} userData={user} />;
        });

        const usersTable = (
            <table>
                <thead>
                    <tr>
                        <th style={{ textAlign: "center" }}>ID</th>
                        <th style={{ textAlign: "center" }}>Username</th>
                        <th style={{ textAlign: "center" }}>Name</th>
                        <th style={{ textAlign: "center" }}>Last Name</th>
                        <th style={{ textAlign: "center" }}>UPDATE</th>
                        <th style={{ textAlign: "center" }}>DELETE</th>
                    </tr>
                </thead>

                <tbody>{users}</tbody>
            </table>
        );

        const content = this.state.loading ? <Loading /> : usersTable;

        const body =
            this.state.users.length < 1 ? (
                <h1>You don't have any Users</h1>
            ) : (
                <div>
                    <h1>Your Users</h1>
                    <div>{content}</div>
                    <Link to="/" style={{ marginTop: 30 }}>
                        Home Page
                    </Link>
                </div>
            );

        return (
            <Fragment>
                <Logout {...this.props} />
                <Link to="/add-user">ADD A USER</Link>
                {body}
            </Fragment>
        );
    }
}
