From dc962c9120d3a785ad5c2ae6b998f39079674127 Mon Sep 17 00:00:00 2001 From: divlo Date: Mon, 3 Aug 2020 13:18:58 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20UserCard:=20React.memo=20+?= =?UTF-8?q?=20=20instead=20of=20
?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/FunctionCard/FunctionCard.jsx | 24 ++-- website/components/UserCard/UserCard.css | 47 ++++++++ website/components/UserCard/UserCard.jsx | 25 +++++ website/pages/users/index.jsx | 103 ++++++++++-------- website/public/css/pages/users.css | 72 +++--------- 5 files changed, 152 insertions(+), 119 deletions(-) create mode 100644 website/components/UserCard/UserCard.css create mode 100644 website/components/UserCard/UserCard.jsx diff --git a/website/components/FunctionCard/FunctionCard.jsx b/website/components/FunctionCard/FunctionCard.jsx index 6921bd6..14e4ad3 100644 --- a/website/components/FunctionCard/FunctionCard.jsx +++ b/website/components/FunctionCard/FunctionCard.jsx @@ -33,20 +33,20 @@ const FunctionCard = memo(forwardRef((props, ref) => { } > {/* FunctionCard a une hauteur pendant chargement */} - - {isLoading && } + + {isLoading && } -
-
- {props.title} -

{props.title}

-

{props.description}

-
-
-

{props.categorie.name}

-

{date.format(new Date(props.createdAt), 'DD/MM/YYYY', true)}

-
+
+
+ {props.title} +

{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 ( +
+ + + {props.name} +

{props.name}

+ + +
+ ) + }) +) + +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} -

{user.name}

-
- -
+ ) } return ( -
- -
- {user.name} -

{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