/
newUsers.js
54 lines (48 loc) · 1.41 KB
/
newUsers.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import React, { useEffect, useState } from 'react';
import propTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { fetchLatestUsers } from '../../misc/apiRequests';
import '../../../assets/css/users.css';
const NewUsers = ({ handleModal, handleLoader }) => {
const [latestUsers, setLatestUsers] = useState([]);
const displayUser = () => latestUsers.map((user, index) => {
if (index < 8) {
return (
<Link to={`/users/${user.id}`} key={user.id} className="user">
{user.username}
</Link>
);
}
return null;
});
// Fetch all Users by the latest User that signed up
useEffect(() => {
handleLoader(true);
fetchLatestUsers()
.then(response => {
if (response.success) {
setLatestUsers(response.users);
}
if (!response.success) handleModal(response.errors);
handleLoader(false);
});
}, [handleLoader, handleModal]);
return (
<div id="LatestUser">
<div className="container-md">
<h3>Newest Users</h3>
<div className="flex-row flex-wrap">
{displayUser()}
</div>
<Link to="/users" className="members text-bold">
{`${latestUsers.length} total members`}
</Link>
</div>
</div>
);
};
NewUsers.propTypes = {
handleLoader: propTypes.func.isRequired,
handleModal: propTypes.func.isRequired,
};
export default NewUsers;