From 658f1b29ef6e333c70e54e6604e237272ea926cf Mon Sep 17 00:00:00 2001 From: Akhilender Date: Tue, 21 Nov 2023 23:26:32 +0530 Subject: [PATCH 1/2] feat: Implemented Sorting Functionality for Users Screen Changes Made: - Implemented sorting functionality for the users screen. - Added options for sorting users by latest first and oldest first. - Wrote corresponding tests to ensure the sorting behavior is accurate. - Tested the sorting feature by logging into the Talawa admin dashboard, navigating to the users option, and checking the sort button. Signed-off-by: Akhilender --- public/locales/en.json | 2 + public/locales/fr.json | 2 + public/locales/hi.json | 2 + public/locales/sp.json | 2 + public/locales/zh.json | 2 + src/screens/Users/Users.test.tsx | 38 +++++++++++++++++- src/screens/Users/Users.tsx | 68 +++++++++++++++++++++++++++----- 7 files changed, 104 insertions(+), 12 deletions(-) diff --git a/public/locales/en.json b/public/locales/en.json index fb5d78bc2f..bca1313e65 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -140,6 +140,8 @@ "loadingUsers": "Loading Users...", "noUserFound": "No User Found", "sort": "Sort", + "Latest": "Latest First", + "Oldest": "Oldest First", "filter": "Filter", "noOrgError": "Organizations not found, please create an organization through dashboard", "roleUpdated": "Role Updated.", diff --git a/public/locales/fr.json b/public/locales/fr.json index 97116881e9..b7deffca62 100644 --- a/public/locales/fr.json +++ b/public/locales/fr.json @@ -132,6 +132,8 @@ "loadingUsers": "Chargement des utilisateurs...", "noUserFound": "Aucun utilisateur trouvé", "sort": "Trier", + "Oldest": "Les plus anciennes d'abord", + "Latest": "Les plus récentes d'abord", "filter": "Filtre", "roleUpdated": "Rôle mis à jour.", "noResultsFoundFor": "Aucun résultat trouvé pour ", diff --git a/public/locales/hi.json b/public/locales/hi.json index 490b5b5d04..bcd4935c1b 100644 --- a/public/locales/hi.json +++ b/public/locales/hi.json @@ -131,6 +131,8 @@ "loadingUsers": "उपयोगकर्ता लोड हो रहा है ...", "noUserFound": "कोई उपयोगकर्ता नहीं मिला।", "sort": "छांटें", + "Oldest": "सबसे पुराना पहले", + "Latest": "सबसे नवीनतम पहले", "filter": "फ़िल्टर", "roleUpdated": "भूमिका अपडेट की गई।", "noResultsFoundFor": "के लिए कोई परिणाम नहीं मिला ", diff --git a/public/locales/sp.json b/public/locales/sp.json index 33cb77ed64..c7484ef383 100644 --- a/public/locales/sp.json +++ b/public/locales/sp.json @@ -131,6 +131,8 @@ "loadingUsers": "Cargando usuarios ...", "noUserFound": "No se encontró ningún usuario.", "sort": "Ordenar", + "Oldest": "Más Antiguas Primero", + "Latest": "Más Recientes Primero", "filter": "Filtrar", "roleUpdated": "Rol actualizado.", "noResultsFoundFor": "No se encontraron resultados para ", diff --git a/public/locales/zh.json b/public/locales/zh.json index 8de1d7c5d9..a7331b3b48 100644 --- a/public/locales/zh.json +++ b/public/locales/zh.json @@ -131,6 +131,8 @@ "loadingUsers": "正在加載用戶...", "noUserFound": "找不到用戶。", "sort": "排序", + "Oldest": "最旧的优先", + "Latest": "最新的优先", "filter": "過濾", "roleUpdated": "角色已更新。", "noResultsFoundFor": "未找到结果 ", diff --git a/src/screens/Users/Users.test.tsx b/src/screens/Users/Users.test.tsx index 03a65c49fd..e76e91ee14 100644 --- a/src/screens/Users/Users.test.tsx +++ b/src/screens/Users/Users.test.tsx @@ -1,13 +1,12 @@ import React from 'react'; import { MockedProvider } from '@apollo/react-testing'; -import { act, render, screen } from '@testing-library/react'; +import { act, fireEvent, render, screen } from '@testing-library/react'; import 'jest-localstorage-mock'; import 'jest-location-mock'; import { I18nextProvider } from 'react-i18next'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; import { ToastContainer } from 'react-toastify'; - import userEvent from '@testing-library/user-event'; import { store } from 'state/store'; import { StaticMockLink } from 'utils/StaticMockLink'; @@ -179,4 +178,39 @@ describe('Testing Users screen', () => { 'Organizations not found, please create an organization through dashboard' ); }); + + test('Testing sort latest and oldest toggle', async () => { + await act(async () => { + render( + + + + + + + + + + + ); + + await wait(); + + const searchInput = screen.getByTestId('sort'); + expect(searchInput).toBeInTheDocument(); + + const inputText = screen.getByTestId('sortUsers'); + + fireEvent.click(inputText); + const toggleText = screen.getByTestId('latest'); + + fireEvent.click(toggleText); + + expect(searchInput).toBeInTheDocument(); + fireEvent.click(inputText); + const toggleTite = screen.getByTestId('oldest'); + fireEvent.click(toggleTite); + expect(searchInput).toBeInTheDocument(); + }); + }); }); diff --git a/src/screens/Users/Users.tsx b/src/screens/Users/Users.tsx index e7b1e0c1af..34a5a12453 100644 --- a/src/screens/Users/Users.tsx +++ b/src/screens/Users/Users.tsx @@ -31,6 +31,7 @@ const Users = (): JSX.Element => { const [hasMore, setHasMore] = useState(true); const [isLoadingMore, setIsLoadingMore] = useState(false); const [searchByName, setSearchByName] = useState(''); + const [sortingOption, setSortingOption] = useState('latest'); const userType = localStorage.getItem('UserType'); const loggedInUserId = localStorage.getItem('id'); @@ -57,6 +58,7 @@ const Users = (): JSX.Element => { }); const { data: dataOrgs } = useQuery(ORGANIZATION_CONNECTION_LIST); + const [displayedUsers, setDisplayedUsers] = useState(usersData?.users || []); // Manage loading more state useEffect(() => { @@ -66,7 +68,11 @@ const Users = (): JSX.Element => { if (usersData.users.length < perPageResult) { setHasMore(false); } - }, [usersData]); + if (usersData && usersData.users) { + const newDisplayedUsers = sortUsers(usersData.users, sortingOption); + setDisplayedUsers(newDisplayedUsers); + } + }, [usersData, sortingOption]); // To clear the search when the component is unmounted useEffect(() => { @@ -155,6 +161,32 @@ const Users = (): JSX.Element => { }); }; const debouncedHandleSearchByName = debounce(handleSearchByName); + // console.log(usersData); + + const handleSorting = (option: string): void => { + setSortingOption(option); + }; + + const sortUsers = ( + allUsers: InterfaceQueryUserListItem[], + sortingOption: string + ): InterfaceQueryUserListItem[] => { + const sortedUsers = [...allUsers]; + + if (sortingOption === 'latest') { + sortedUsers.sort( + (a, b) => + new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() + ); + } else if (sortingOption === 'oldest') { + sortedUsers.sort( + (a, b) => + new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime() + ); + } + + return sortedUsers; + }; const headerTitles: string[] = [ '#', @@ -196,15 +228,31 @@ const Users = (): JSX.Element => {
-
{isLoading == false && usersData && - usersData.users.length === 0 && + displayedUsers.length === 0 && searchByName.length > 0 ? (

{t('noResultsFoundFor')} "{searchByName}"

- ) : isLoading == false && usersData && usersData.users.length === 0 ? ( + ) : isLoading == false && usersData && displayedUsers.length === 0 ? ( // eslint-disable-next-line react/jsx-indent

{t('noUserFound')}

@@ -244,7 +292,7 @@ const Users = (): JSX.Element => { /> ) : ( { {usersData && - usersData?.users.map((user, index) => { + displayedUsers.map((user, index) => { return ( Date: Thu, 23 Nov 2023 21:21:33 +0530 Subject: [PATCH 2/2] fix: altering the words - Made Latest to Newest Signed-off-by: Akhilender --- public/locales/en.json | 2 +- public/locales/fr.json | 2 +- public/locales/hi.json | 2 +- public/locales/sp.json | 2 +- public/locales/zh.json | 2 +- src/screens/Users/Users.test.tsx | 4 ++-- src/screens/Users/Users.tsx | 10 +++++----- 7 files changed, 12 insertions(+), 12 deletions(-) diff --git a/public/locales/en.json b/public/locales/en.json index bca1313e65..87659aab25 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -140,7 +140,7 @@ "loadingUsers": "Loading Users...", "noUserFound": "No User Found", "sort": "Sort", - "Latest": "Latest First", + "Newest": "Newest First", "Oldest": "Oldest First", "filter": "Filter", "noOrgError": "Organizations not found, please create an organization through dashboard", diff --git a/public/locales/fr.json b/public/locales/fr.json index b7deffca62..06d60d568e 100644 --- a/public/locales/fr.json +++ b/public/locales/fr.json @@ -133,7 +133,7 @@ "noUserFound": "Aucun utilisateur trouvé", "sort": "Trier", "Oldest": "Les plus anciennes d'abord", - "Latest": "Les plus récentes d'abord", + "Newest": "Les plus récentes d'abord", "filter": "Filtre", "roleUpdated": "Rôle mis à jour.", "noResultsFoundFor": "Aucun résultat trouvé pour ", diff --git a/public/locales/hi.json b/public/locales/hi.json index bcd4935c1b..1764972fb0 100644 --- a/public/locales/hi.json +++ b/public/locales/hi.json @@ -132,7 +132,7 @@ "noUserFound": "कोई उपयोगकर्ता नहीं मिला।", "sort": "छांटें", "Oldest": "सबसे पुराना पहले", - "Latest": "सबसे नवीनतम पहले", + "Newest": "सबसे नवीनतम पहले", "filter": "फ़िल्टर", "roleUpdated": "भूमिका अपडेट की गई।", "noResultsFoundFor": "के लिए कोई परिणाम नहीं मिला ", diff --git a/public/locales/sp.json b/public/locales/sp.json index c7484ef383..6af8de6c1f 100644 --- a/public/locales/sp.json +++ b/public/locales/sp.json @@ -132,7 +132,7 @@ "noUserFound": "No se encontró ningún usuario.", "sort": "Ordenar", "Oldest": "Más Antiguas Primero", - "Latest": "Más Recientes Primero", + "Newest": "Más Recientes Primero", "filter": "Filtrar", "roleUpdated": "Rol actualizado.", "noResultsFoundFor": "No se encontraron resultados para ", diff --git a/public/locales/zh.json b/public/locales/zh.json index a7331b3b48..2e0548f9a5 100644 --- a/public/locales/zh.json +++ b/public/locales/zh.json @@ -132,7 +132,7 @@ "noUserFound": "找不到用戶。", "sort": "排序", "Oldest": "最旧的优先", - "Latest": "最新的优先", + "Newest": "最新的优先", "filter": "過濾", "roleUpdated": "角色已更新。", "noResultsFoundFor": "未找到结果 ", diff --git a/src/screens/Users/Users.test.tsx b/src/screens/Users/Users.test.tsx index e76e91ee14..4484518529 100644 --- a/src/screens/Users/Users.test.tsx +++ b/src/screens/Users/Users.test.tsx @@ -179,7 +179,7 @@ describe('Testing Users screen', () => { ); }); - test('Testing sort latest and oldest toggle', async () => { + test('Testing sort Newest and oldest toggle', async () => { await act(async () => { render( @@ -202,7 +202,7 @@ describe('Testing Users screen', () => { const inputText = screen.getByTestId('sortUsers'); fireEvent.click(inputText); - const toggleText = screen.getByTestId('latest'); + const toggleText = screen.getByTestId('newest'); fireEvent.click(toggleText); diff --git a/src/screens/Users/Users.tsx b/src/screens/Users/Users.tsx index 34a5a12453..64a9be1735 100644 --- a/src/screens/Users/Users.tsx +++ b/src/screens/Users/Users.tsx @@ -31,7 +31,7 @@ const Users = (): JSX.Element => { const [hasMore, setHasMore] = useState(true); const [isLoadingMore, setIsLoadingMore] = useState(false); const [searchByName, setSearchByName] = useState(''); - const [sortingOption, setSortingOption] = useState('latest'); + const [sortingOption, setSortingOption] = useState('newest'); const userType = localStorage.getItem('UserType'); const loggedInUserId = localStorage.getItem('id'); @@ -173,7 +173,7 @@ const Users = (): JSX.Element => { ): InterfaceQueryUserListItem[] => { const sortedUsers = [...allUsers]; - if (sortingOption === 'latest') { + if (sortingOption === 'newest') { sortedUsers.sort( (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() @@ -242,10 +242,10 @@ const Users = (): JSX.Element => { handleSorting('latest')} - data-testid="latest" + onClick={(): void => handleSorting('newest')} + data-testid="newest" > - {t('Latest')} + {t('Newest')} handleSorting('oldest')}