154 lines
6.1 KiB
JavaScript
154 lines
6.1 KiB
JavaScript
|
|
import axios from "axios";
|
|
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
|
import Pagination from "./Pagination";
|
|
import { Link } from "react-router-dom";
|
|
import swal from 'sweetalert';
|
|
// import { API } from "../../data";
|
|
import { isAutheticated } from "../../auth";
|
|
|
|
function users() {
|
|
const [users, setUsers] = useState([])
|
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [userPerPage] = useState(10);
|
|
const token = isAutheticated();
|
|
|
|
const getAllUsers = useCallback(async () => {
|
|
let res = await axios.get(
|
|
`/api/v1/admin/users`,
|
|
{
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
}
|
|
);
|
|
// console.log(res.data)
|
|
setUsers(res.data.users)
|
|
|
|
|
|
}, [token]);
|
|
|
|
useEffect(() => {
|
|
getAllUsers();
|
|
}, [getAllUsers]);
|
|
|
|
|
|
// console.log(cmsRes)
|
|
|
|
// Get current posts
|
|
//pagination
|
|
const indexOfLastUser = currentPage * userPerPage;
|
|
const indexOfFirstUser = indexOfLastUser - userPerPage;
|
|
const currentUser = users.slice(indexOfFirstUser, indexOfLastUser);
|
|
|
|
// Change page
|
|
const paginate = pageNumber => setCurrentPage(pageNumber);
|
|
|
|
//change time formate
|
|
function formatAMPM(date) {
|
|
var hours = new Date(date).getHours();
|
|
var minutes = new Date(date).getMinutes();
|
|
var ampm = hours >= 12 ? 'PM' : 'AM';
|
|
hours = hours % 12;
|
|
hours = hours ? hours : 12; // the hour '0' should be '12'
|
|
minutes = minutes < 10 ? '0' + minutes : minutes;
|
|
var strTime = hours + ':' + minutes + ' ' + ampm;
|
|
return strTime;
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
<div className=" main-content">
|
|
<div className=" my-3 page-content">
|
|
<div className="container-fluid">
|
|
{/* <!-- start page title --> */}
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="page-title-box d-flex align-items-center justify-content-between">
|
|
<h4 className="mb-3">CMP - All Users</h4>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* <!-- end page title --> */}
|
|
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="card">
|
|
<div className="card-body">
|
|
<div className="row ml-0 mr-0 mb-10">
|
|
|
|
</div>
|
|
<div className="table-responsive table-shoot">
|
|
<table className="table table-centered table-nowrap mb-0">
|
|
<thead className="thead-light">
|
|
<tr>
|
|
|
|
<th>Name</th>
|
|
<th>email</th>
|
|
<th>Profile Image</th>
|
|
<th>Phone No.</th>
|
|
<th>Register At</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{currentUser && currentUser.map((item, index) =>
|
|
<tr>
|
|
|
|
<td>{item?.name}</td>
|
|
<td>{item?.email}</td>
|
|
<td>
|
|
<img src={`${item.avatar?.url}`} width="50" alt="" />
|
|
</td>
|
|
<td>{item?.phone}</td>
|
|
|
|
|
|
<td>
|
|
|
|
{new Date(`${item?.createdAt}`).toDateString()}<span> , {`${formatAMPM(item?.createdAt)}`}</span>
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td>
|
|
<Link to={`/users/view/${item._id}`}>
|
|
|
|
<button
|
|
type="button"
|
|
className="mt-1 btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
|
|
>
|
|
View
|
|
</button>
|
|
</Link>
|
|
|
|
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/* <!-- end table-responsive --> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* <!-- container-fluid --> */}
|
|
</div>
|
|
</div>
|
|
<Pagination userPerPage={userPerPage}
|
|
totalUsers={users.length}
|
|
paginate={paginate} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default users;
|