Implementation of sorting of requests in Request screen

public/locales/en.json

@@ -145,6 +145,8 @@
     "noRequestFound": "No Request Found",
     "sort": "Sort",
     "filter": "Filter",
+    "Oldest": "Oldest First",
+    "Latest": "Latest First",
     "noOrgError": "Organizations not found, please create an organization through dashboard",
     "userApproved": "User Approved",
     "userRejected": "User Rejected",

public/locales/fr.json

@@ -140,6 +140,8 @@
     "noRequestFound": "Aucune demande trouvée",
     "sort": "Trier",
     "filter": "Filtre",
+    "Oldest": "Les plus anciennes d'abord",
+    "Latest": "Les plus récentes d'abord",
     "userApproved": "Approuvé par l'utilisateur",
     "userRejected": "Utilisateur rejeté",
     "noResultsFoundFor": "Aucun résultat trouvé pour ",

public/locales/hi.json

@@ -140,6 +140,8 @@
     "noRequestFound": "कोई अनुरोध नहीं मिला।",
     "sort": "छांटें",
     "filter": "फ़िल्टर",
+    "Oldest": "सबसे पुराना पहले",
+    "Latest": "सबसे नवीनतम पहले",
     "userApproved": "उपयोगकर्ता स्वीकृत",
     "userRejected": "उपयोगकर्ता अस्वीकृत",
     "noResultsFoundFor": "के लिए कोई परिणाम नहीं मिला ",

public/locales/sp.json

@@ -140,6 +140,8 @@
     "noRequestFound": "No se encontró ninguna solicitud.",
     "sort": "Ordenar",
     "filter": "Filtrar",
+    "Oldest": "Más Antiguas Primero",
+    "Latest": "Más Recientes Primero",
     "userApproved": "Aprobado por el usuario",
     "userRejected": "Usuario rechazado",
     "noResultsFoundFor": "No se encontraron resultados para ",

public/locales/zh.json

@@ -140,6 +140,8 @@
     "noRequestFound": "找不到請求。",
     "sort": "排序",
     "filter": "過濾",
+    "Oldest": "最旧的优先",
+    "Latest": "最新的优先",
     "userApproved": "用戶批准",
     "userRejected": "用戶被拒絕",
     "noResultsFoundFor": "未找到结果 ",

src/screens/Requests/Requests.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MockedProvider } from '@apollo/react-testing';
-import { act, render, screen } from '@testing-library/react';
+import { act, render, screen, fireEvent } from '@testing-library/react';
 import 'jest-localstorage-mock';
 import 'jest-location-mock';
 import { I18nextProvider } from 'react-i18next';
@@ -166,4 +166,38 @@ describe('Testing Request screen', () => {
       'Organizations not found, please create an organization through dashboard'
     );
   });
+
+  test('Testing search latest and oldest toggle', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <Requests />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>
+      );
+
+      await wait();
+
+      const searchInput = screen.getByTestId('sort');
+      expect(searchInput).toBeInTheDocument();
+
+      const inputText = screen.getByTestId('sortuser');
+
+      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();
+    });
+  });
 });

src/screens/Requests/Requests.tsx

@@ -41,6 +41,10 @@
   const [hasMore, sethasMore] = useState(true);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [searchByName, setSearchByName] = useState('');
+  const [sortingOption, setSortingOption] = useState('latest');
+  const [displayedUsers, setDisplayedUsers] = useState<
+    InterfaceQueryRequestListItem[]
+  >([]);
 
   const [acceptAdminFunc] = useMutation(ACCEPT_ADMIN_MUTATION);
   const [rejectAdminFunc] = useMutation(REJECT_ADMIN_MUTATION);
@@ -93,10 +97,14 @@
   // To manage loading states
   useEffect(() => {
     if (!usersData) {
+      setDisplayedUsers([]);
       return;
     }
     if (usersData.users.length < perPageResult) {
       sethasMore(false);
+    } else {
+      /* istanbul ignore next */
+      setDisplayedUsers(usersData?.users);
     }
   }, [usersData]);
 
@@ -127,6 +135,13 @@
     }
   }, [loading]);
 
+  useEffect(() => {
+    if (usersData && usersData?.users.length > 0) {
+      const newDisplayedUsers = sortRequests(usersData?.users, sortingOption);
+      setDisplayedUsers(newDisplayedUsers);
+    }
+  }, [usersData, sortingOption]);
+
   /* istanbul ignore next */
   const resetAndRefetch = (): void => {
     refetchUsers({
@@ -235,6 +250,31 @@
     t('reject'),
   ];
 
+  const handleSorting = (option: string): void => {
+    setSortingOption(option);
+  };
+
+  const sortRequests = (
+    users: InterfaceQueryRequestListItem[],
+    sortingOption: string
+  ): InterfaceQueryRequestListItem[] => {
+    const sortedRequest = [...users];
+
+    if (sortingOption === 'latest') {
+      sortedRequest.sort(
+        (a, b) =>
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+      );
+    } else if (sortingOption === 'oldest') {
+      sortedRequest.sort(
+        (a, b) =>
+          new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+      );
+    }
+
+    return sortedRequest;
+  };
+
   return (
     <>
       <SuperAdminScreen title={t('requests')} screenName="Requests">
@@ -270,15 +310,31 @@
           </div>
           <div className={styles.btnsBlock}>
             <div className="d-flex">
-              <Dropdown aria-expanded="false" title="Sort organizations">
-                <Dropdown.Toggle variant="outline-success">
+              <Dropdown
+                aria-expanded="false"
+                title="Sort organizations"
+                data-testid="sort"
+              >
+                <Dropdown.Toggle
+                  variant="outline-success"
+                  data-testid="sortuser"
+                >
                   <SortIcon className={'me-1'} />
                   {t('sort')}
                 </Dropdown.Toggle>
                 <Dropdown.Menu>
-                  <Dropdown.Item href="#/action-1">Action 1</Dropdown.Item>
-                  <Dropdown.Item href="#/action-2">Action 2</Dropdown.Item>
-                  <Dropdown.Item href="#/action-3">Action 3</Dropdown.Item>
+                  <Dropdown.Item
+                    onClick={(): void => handleSorting('latest')}
+                    data-testid="latest"
+                  >
+                    {t('Latest')}
+                  </Dropdown.Item>
+                  <Dropdown.Item
+                    onClick={(): void => handleSorting('oldest')}
+                    data-testid="oldest"
+                  >
+                    {t('Oldest')}
+                  </Dropdown.Item>
                 </Dropdown.Menu>
               </Dropdown>
               <Dropdown aria-expanded="false" title="Filter organizations">
@@ -336,10 +392,11 @@
                 </tr>
               </thead>
               <tbody>
-                {usersData?.users &&
-                  usersData.users.map((user, index) => {
+                {displayedUsers &&
+                  displayedUsers.length > 0 &&
+                  displayedUsers.map((user, index) => {
                     return (
-                      <tr key={user._id}>
+                      <tr key={user._id} data-testid="displayedUsers">
                         <th scope="row">{index + 1}</th>
                         <td>{`${user.firstName} ${user.lastName}`}</td>
                         <td>{user.email}</td>