From 29b87a9c3e9a611c811eda82478222cd00b6e784 Mon Sep 17 00:00:00 2001 From: Akhilender Bongirwar <112749383+akhilender-bongirwar@users.noreply.github.com> Date: Fri, 24 Nov 2023 18:11:55 +0530 Subject: [PATCH] feat: Implemented Sorting Functionality for Users Screen (#1081) * 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 * fix: altering the words - Made Latest to Newest Signed-off-by: Akhilender --------- 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 50945e8dde..bfefeec253 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -141,6 +141,8 @@ "loadingUsers": "Loading Users...", "noUserFound": "No User Found", "sort": "Sort", + "Newest": "Newest 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 75522a0fed..818ffd6fcd 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", + "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 d952ff7f30..fb9ae1ab23 100644 --- a/public/locales/hi.json +++ b/public/locales/hi.json @@ -131,6 +131,8 @@ "loadingUsers": "उपयोगकर्ता लोड हो रहा है ...", "noUserFound": "कोई उपयोगकर्ता नहीं मिला।", "sort": "छांटें", + "Oldest": "सबसे पुराना पहले", + "Newest": "सबसे नवीनतम पहले", "filter": "फ़िल्टर", "roleUpdated": "भूमिका अपडेट की गई।", "noResultsFoundFor": "के लिए कोई परिणाम नहीं मिला ", diff --git a/public/locales/sp.json b/public/locales/sp.json index 9b107afd44..09d6472753 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", + "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 92e8c14c83..138a345206 100644 --- a/public/locales/zh.json +++ b/public/locales/zh.json @@ -131,6 +131,8 @@ "loadingUsers": "正在加載用戶...", "noUserFound": "找不到用戶。", "sort": "排序", + "Oldest": "最旧的优先", + "Newest": "最新的优先", "filter": "過濾", "roleUpdated": "角色已更新。", "noResultsFoundFor": "未找到结果 ", diff --git a/src/screens/Users/Users.test.tsx b/src/screens/Users/Users.test.tsx index 03a65c49fd..4484518529 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 Newest 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('newest'); + + 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..64a9be1735 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('newest'); 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 === 'newest') { + 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 (