Merge branch 'develop' into user-leaveorg

Author: AnshulKahar2729

package-lock.json

@@ -20,13 +20,14 @@
     "@mui/x-data-grid": "^7.16.0",
     "@mui/x-date-pickers": "^7.11.1",
     "@pdfme/generator": "^4.5.2",
+    "@reduxjs/toolkit": "^2.2.7",
     "@vitejs/plugin-react": "^4.3.1",
     "babel-plugin-transform-import-meta": "^2.2.1",
     "bootstrap": "^5.3.3",
     "customize-cra": "^1.0.0",
-    "dayjs": "^1.11.12",
+    "dayjs": "^1.11.13",
     "dotenv": "^16.4.5",
-    "flag-icons": "^6.6.6",
+    "flag-icons": "^7.2.3",
     "graphql": "^16.9.0",
     "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.16.0",
@@ -44,16 +45,15 @@
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
     "react-google-recaptcha": "^3.1.0",
-    "react-i18next": "^12.3.1",
+    "react-i18next": "^15.0.2",
     "react-icons": "^5.2.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-multi-carousel": "^2.8.5",
-    "react-redux": "^7.2.5",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.0",
     "react-toastify": "^10.0.5",
     "react-tooltip": "^5.27.1",
-    "redux": "^4.1.1",
-    "redux-thunk": "^2.3.0",
+    "redux": "^5.0.1",
     "sanitize-html": "^2.13.0",
     "typedoc": "^0.26.7",
     "typedoc-plugin-markdown": "^4.2.1",
@@ -126,7 +126,7 @@
     "babel-jest": "^29.7.0",
     "cross-env": "^7.0.3",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-jest": "^28.8.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.0",

package.json

@@ -964,7 +964,8 @@
     "organizations": "Organizations",
     "search": "search",
     "filter": "filter",
-    "searchByName": "searchByName"
+    "searchByName": "searchByName",
+    "searchOrganizations": "Search Organization"
   },
   "userSidebarOrg": {
     "yourOrganizations": "Your Organizations",

public/locales/en/translation.json

@@ -964,7 +964,8 @@
     "organizations": "Organisations",
     "search": "Rechercher",
     "filter": "Filtrer",
-    "searchByName": "Rechercher par nom"
+    "searchByName": "Rechercher par nom",
+    "searchOrganizations": "Rechercher Organisations"
   },
   "userSidebarOrg": {
     "yourOrganizations": "Vos organisations",

public/locales/fr/translation.json

@@ -964,7 +964,8 @@
     "organizations": "संगठनों",
     "search": "खोजें",
     "filter": "फ़िल्टर",
-    "searchByName": "नाम से खोजें"
+    "searchByName": "नाम से खोजें",
+    "searchOrganizations": "संगठनों खोजें"
   },
   "userSidebarOrg": {
     "yourOrganizations": "आपके संगठन",

public/locales/hi/translation.json

@@ -965,7 +965,8 @@
     "filter": "Filtrar",
     "organizations": "Organizaciones",
     "searchByName": "Buscar por nombre",
-    "searchUsers": "Buscar usuarios"
+    "searchUsers": "Buscar usuarios",
+    "searchOrganizations": "Buscar Organizaciones"
   },
   "userSidebarOrg": {
     "yourOrganizations": "Tus Organizaciones",

public/locales/sp/translation.json

@@ -964,7 +964,8 @@
     "organizations": "组织机构",
     "search": "搜索",
     "filter": "筛选",
-    "searchByName": "按名称搜索"
+    "searchByName": "按名称搜索",
+    "searchOrganizations": "搜索组织"
   },
   "userSidebarOrg": {
     "yourOrganizations": "您的组织",

public/locales/zh/translation.json

@@ -1,9 +1,10 @@
 import LeftDrawerOrg from 'components/LeftDrawerOrg/LeftDrawerOrg';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { Navigate, Outlet, useLocation, useParams } from 'react-router-dom';
 import { updateTargets } from 'state/action-creators';
+import { useAppDispatch } from 'state/hooks';
 import type { RootState } from 'state/reducers';
 import type { TargetsType } from 'state/reducers/routesReducer';
 import styles from './EventDashboardScreen.module.css';
@@ -58,7 +59,7 @@ const EventDashboardScreen = (): JSX.Element => {
   } = useSelector((state: RootState) => state.appRoutes);
   const { targets } = appRoutes;
 
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   // Update targets when orgId changes
   useEffect(() => {

src/components/EventDashboardScreen/EventDashboardScreen.tsx

@@ -1,9 +1,10 @@
 import LeftDrawerOrg from 'components/LeftDrawerOrg/LeftDrawerOrg';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { Navigate, Outlet, useLocation, useParams } from 'react-router-dom';
 import { updateTargets } from 'state/action-creators';
+import { useAppDispatch } from 'state/hooks';
 import type { RootState } from 'state/reducers';
 import type { TargetsType } from 'state/reducers/routesReducer';
 import styles from './OrganizationScreen.module.css';
@@ -44,7 +45,7 @@ const OrganizationScreen = (): JSX.Element => {
   } = useSelector((state: RootState) => state.appRoutes);
   const { targets } = appRoutes;
 
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   // Update targets whenever the organization ID changes
   useEffect(() => {

src/components/OrganizationScreen/OrganizationScreen.tsx

@@ -67,7 +67,6 @@ const PaginationList = ({
       <Hidden smDown initialWidth={'lg'}>
         <TablePagination
           rowsPerPageOptions={[
-            -1,
             5,
             10,
             30,

src/components/PaginationList/PaginationList.tsx

@@ -519,4 +519,44 @@ describe('Testing Organizations Screen [User Portal]', () => {
       settingsBtn.click();
     });
   });
+  test('Rows per Page values', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Organizations />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    const dropdown = screen.getByTestId('table-pagination');
+    userEvent.click(dropdown);
+    expect(screen.queryByText('-1')).not.toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
+    expect(screen.getByText('30')).toBeInTheDocument();
+    expect(screen.getByText('All')).toBeInTheDocument();
+  });
+
+  test('Search input has correct placeholder text', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Organizations />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const searchInput = screen.getByPlaceholderText('Search Organization');
+    expect(searchInput).toBeInTheDocument();
+  });
 });

src/screens/UserPortal/Organizations/Organizations.test.tsx

@@ -319,8 +319,8 @@ export default function organizations(): JSX.Element {
           <div className="mt-4">
             <InputGroup className={styles.maxWidth}>
               <Form.Control
-                placeholder={t('searchUsers')}
-                id="searchUserOrgs"
+                placeholder={t('searchOrganizations')}
+                id="searchOrganizations"
                 type="text"
                 className={`${styles.borderNone} ${styles.backgroundWhite}`}
                 onKeyUp={handleSearchByEnter}

src/screens/UserPortal/Organizations/Organizations.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { Navigate, Outlet, useLocation, useParams } from 'react-router-dom';
 import { updateTargets } from 'state/action-creators';
+import { useAppDispatch } from 'state/hooks';
 import type { RootState } from 'state/reducers';
 import type { TargetsType } from 'state/reducers/routesReducer';
 import styles from './UserScreen.module.css';
@@ -57,7 +58,7 @@ const UserScreen = (): JSX.Element => {
    */
 
   // Initialize Redux dispatch
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   /**
    * Effect hook to update targets based on the organization ID.

src/screens/UserPortal/UserScreen/UserScreen.tsx

@@ -0,0 +1,5 @@
+import { useDispatch } from 'react-redux';
+import type { AppDispatch } from './store';
+
+// Use throughout your app instead of plain `useDispatch`
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();

src/state/hooks.ts

@@ -1,5 +1,8 @@
-import { applyMiddleware, createStore } from 'redux';
-import thunk from 'redux-thunk';
+import { configureStore } from '@reduxjs/toolkit';
 import { reducers } from './reducers/index';
 
-export const store = createStore(reducers, {}, applyMiddleware(thunk));
+export const store = configureStore({
+  reducer: reducers,
+});
+
+export type AppDispatch = typeof store.dispatch;