-
-
-
{props.title}
-
{props.description}
-
-
-
{props.categorie.name}
-
{date.format(new Date(props.createdAt), 'DD/MM/YYYY', true)}
-
+
+
+
+
{props.title}
+
{props.description}
+
+
{props.categorie.name}
+
{date.format(new Date(props.createdAt), 'DD/MM/YYYY', true)}
+
+
)
diff --git a/website/components/UserCard/UserCard.css b/website/components/UserCard/UserCard.css
new file mode 100644
index 0000000..164e562
--- /dev/null
+++ b/website/components/UserCard/UserCard.css
@@ -0,0 +1,47 @@
+.UserCard {
+ display: flex;
+ align-items: center;
+ position: relative;
+ flex-direction: column;
+ word-wrap: break-word;
+ box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
+ border: 1px solid black;
+ border-radius: 1rem;
+ margin: 0 0 50px 0;
+ cursor: pointer;
+ transition: all 0.3s;
+ padding: 10px;
+}
+.UserCard__container {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: var(--text-color);
+ text-decoration: none !important;
+}
+.UserCard:hover {
+ transform: translateY(-7px);
+}
+/* col-md */
+@media (min-width: 768px) {
+ .UserCard {
+ margin: 0 30px 50px 30px;
+ }
+}
+/* col-xl */
+@media (min-width: 1200px) {
+ .UserCard {
+ margin: 0 20px 50px 20px;
+ }
+}
+.UserCard__logo {
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+ object-fit: cover;
+}
+.UserCard__name {
+ margin: 30px 0 10px 0;
+}
diff --git a/website/components/UserCard/UserCard.jsx b/website/components/UserCard/UserCard.jsx
new file mode 100644
index 0000000..22fae0e
--- /dev/null
+++ b/website/components/UserCard/UserCard.jsx
@@ -0,0 +1,25 @@
+import Link from 'next/link'
+import { forwardRef, memo } from 'react'
+import { API_URL } from '../../utils/config/config'
+import './UserCard.css'
+
+const UserCard = memo(
+ forwardRef((props, ref) => {
+ return (
+
+ )
+ })
+)
+
+export default UserCard
diff --git a/website/pages/users/index.jsx b/website/pages/users/index.jsx
index 74c8c15..b213a58 100644
--- a/website/pages/users/index.jsx
+++ b/website/pages/users/index.jsx
@@ -1,74 +1,95 @@
import { useState, useEffect, useRef, useCallback } from 'react'
-import Link from 'next/link'
import HeadTag from '../../components/HeadTag'
import Loader from '../../components/Loader'
+import UserCard from '../../components/UserCard/UserCard'
import api from '../../utils/api'
import '../../public/css/pages/users.css'
-import { API_URL } from '../../utils/config/config'
const Users = () => {
let pageUsers = 1
const [inputSearch, setInputSearch] = useState('')
- const [usersData, setUsersData] = useState({ totalItems: 0, hasMore: true, rows: [] })
+ const [usersData, setUsersData] = useState({
+ totalItems: 0,
+ hasMore: true,
+ rows: []
+ })
const [isLoadingUsers, setLoadingUsers] = useState(true)
// Récupère les users si la recherche change
useEffect(() => {
pageUsers = 1
- getUsersData().then((data) => setUsersData(data))
+ getUsersData().then(data => setUsersData(data))
}, [inputSearch])
const getUsersData = async () => {
setLoadingUsers(true)
- const { data } = await api.get(`/users?page=${pageUsers}&limit=15&search=${inputSearch}`)
+ const { data } = await api.get(
+ `/users?page=${pageUsers}&limit=15&search=${inputSearch}`
+ )
setLoadingUsers(false)
return data
}
- const handleSearchChange = (event) => {
+ const handleSearchChange = event => {
setInputSearch(event.target.value)
}
// Permet la pagination au scroll
const observer = useRef()
- const lastUserCardRef = useCallback((node) => {
- if (isLoadingUsers) return
- if (observer.current) observer.current.disconnect()
- observer.current = new window.IntersectionObserver((entries) => {
- if (entries[0].isIntersecting && usersData.hasMore) {
- pageUsers += 1
- getUsersData().then((data) => {
- setUsersData((oldData) => {
- return {
- totalItems: data.totalItems,
- hasMore: data.hasMore,
- rows: [...oldData.rows, ...data.rows]
- }
- })
- })
- }
- }, { threshold: 1 })
- if (node) observer.current.observe(node)
- }, [isLoadingUsers, usersData.hasMore])
+ const lastUserCardRef = useCallback(
+ node => {
+ if (isLoadingUsers) return
+ if (observer.current) observer.current.disconnect()
+ observer.current = new window.IntersectionObserver(
+ entries => {
+ if (entries[0].isIntersecting && usersData.hasMore) {
+ pageUsers += 1
+ getUsersData().then(data => {
+ setUsersData(oldData => {
+ return {
+ totalItems: data.totalItems,
+ hasMore: data.hasMore,
+ rows: [...oldData.rows, ...data.rows]
+ }
+ })
+ })
+ }
+ },
+ { threshold: 1 }
+ )
+ if (node) observer.current.observe(node)
+ },
+ [isLoadingUsers, usersData.hasMore]
+ )
return (
<>
-
+
-
Utilisateurs
-
La liste des utilisateurs - Total de {usersData.totalItems} utilisateurs :
+
+ Utilisateurs
+
+
+ La liste des utilisateurs - Total de {usersData.totalItems}{' '}
+ utilisateurs :
+
-
+
@@ -76,25 +97,11 @@ const Users = () => {
// Si c'est le dernier élément
if (usersData.rows.length === index + 1) {
return (
-
-
-
-
-
{user.name}
-
-
-
+
)
}
return (
-
-
-
-
-
{user.name}
-
-
-
+
)
})}
diff --git a/website/public/css/pages/users.css b/website/public/css/pages/users.css
index db07d12..4abf0ce 100644
--- a/website/public/css/pages/users.css
+++ b/website/public/css/pages/users.css
@@ -1,65 +1,19 @@
.Users__form-control {
- display: block;
- height: calc(1.5em + .75rem + 2px);
- padding: .375rem .75rem;
- font-size: 1rem;
- font-weight: 400;
- line-height: 1.5;
- color: #495057;
- background-color: #fff;
- background-clip: padding-box;
- border: 1px solid #ced4da;
- border-radius: .5em;
+ display: block;
+ height: calc(1.5em + 0.75rem + 2px);
+ padding: 0.375rem 0.75rem;
+ font-size: 1rem;
+ font-weight: 400;
+ line-height: 1.5;
+ color: #495057;
+ background-color: #fff;
+ background-clip: padding-box;
+ border: 1px solid #ced4da;
+ border-radius: 0.5em;
}
.Users__search-container {
- margin-bottom: 50px;
+ margin-bottom: 50px;
}
.Users__search-input {
- width: 50%;
+ width: 50%;
}
-
-.UserCard {
- display: flex;
- align-items: center;
- position: relative;
- flex-direction: column;
- word-wrap: break-word;
- box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, .25);
- border: 1px solid black;
- border-radius: 1rem;
- margin: 0 0 50px 0;
- cursor: pointer;
- transition: all .3s;
- padding: 10px;
-}
-.UserCard__container {
- height: 100%;
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-.UserCard:hover {
- transform: translateY(-7px);
-}
-/* col-md */
-@media (min-width: 768px) {
- .UserCard {
- margin: 0 30px 50px 30px;
- }
-}
-/* col-xl */
-@media (min-width: 1200px) {
- .UserCard {
- margin: 0 20px 50px 20px;
- }
-}
-.UserCard__logo {
- width: 150px;
- height: 150px;
- border-radius: 50%;
- object-fit: cover;
-}
-.UserCard__name {
- margin: 30px 0 10px 0;
-}
\ No newline at end of file