Merge branch 'develop' into super_admin_profile

.coderabbit.yaml

@@ -13,5 +13,6 @@ reviews:
     drafts: false
     base_branches:
       - develop
+      - main
 chat:
-  auto_reply: true
+  auto_reply: true

.github/workflows/compare_translations.py

@@ -88,6 +88,31 @@ def compare_translations(default_translation,
             errors.append(error_msg)
     return errors
 
+def flatten_json(nested_json, parent_key=""):
+    """
+    Flattens a nested JSON, concatenating keys to represent the hierarchy.
+
+    Args:
+        nested_json (dict): The JSON object to flatten.
+        parent_key (str): The base key for recursion (used to track key hierarchy).
+
+    Returns:
+        dict: A flattened dictionary with concatenated keys.
+    """
+    flat_dict = {}
+
+    for key, value in nested_json.items():
+        # Create the new key by concatenating parent and current key
+        new_key = f"{parent_key}.{key}" if parent_key else key
+
+        if isinstance(value, dict):
+            # Recursively flatten the nested dictionary
+            flat_dict.update(flatten_json(value, new_key))
+        else:
+            # Assign the value to the flattened key
+            flat_dict[new_key] = value
+
+    return flat_dict
 
 def load_translation(filepath):
     """Load translation from a file.
@@ -104,7 +129,8 @@ def load_translation(filepath):
             if not content.strip():
                 raise ValueError(f"File {filepath} is empty.")
             translation = json.loads(content)
-        return translation
+            flattened_translation = flatten_json(translation)
+        return flattened_translation
     except json.JSONDecodeError as e:
         raise ValueError(f"Error decoding JSON from file {filepath}: {e}")
 
@@ -170,7 +196,7 @@ def main():
         "--directory",
         type=str,
         nargs="?",
-        default=os.path.join(os.getcwd(), "locales"),
+        default=os.path.join(os.getcwd(), "public/locales"),
         help="Directory containing translation files(relative to the root directory).",
     )
     args = parser.parse_args()

.github/workflows/pull-request.yml

@@ -30,7 +30,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '22.x'
 
       - name: Install Dependencies
         run: npm install
@@ -176,7 +176,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '22.x'
 
       - name: Install Dependencies
         run: npm install
@@ -221,7 +221,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '22.x'
 
       - name: resolve dependency
         run: npm install -g @graphql-inspector/cli

.github/workflows/push.yml

@@ -24,7 +24,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x]
+        node-version: [22.x]
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4

.node-version

@@ -1 +1 @@
-v20.10.0
+v22.7.0

config/babel.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env', // Transforms modern JavaScript
+    '@babel/preset-typescript', // Transforms TypeScript
+    '@babel/preset-react', // Transforms JSX
+  ],
+  plugins: ['babel-plugin-transform-import-meta'],
+};

config/vite.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import viteTsconfigPaths from 'vite-tsconfig-paths';
+import svgrPlugin from 'vite-plugin-svgr';
+import EnvironmentPlugin from 'vite-plugin-environment';
+
+export default defineConfig({
+  // depending on your application, base can also be "/"
+  build: {
+    outDir: 'build',
+  },
+  base: '',
+  plugins: [
+    react(),
+    viteTsconfigPaths(),
+    EnvironmentPlugin('all'),
+    svgrPlugin({
+      svgrOptions: {
+        icon: true,
+        // ...svgr options (https://react-svgr.com/docs/options/)
+      },
+    }),
+  ],
+  server: {
+    // this ensures that the browser opens upon server start
+    open: true,
+    // this sets a default port to 3000
+    port: 4321,
+  },
+});

public/index.html → index.html

@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon_palisadoes.ico" />
+    <link rel="icon" href="/favicon_palisadoes.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="apple-touch-icon" href="/favicon.ico" />
+    <link rel="manifest" href="/manifest.json" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -18,10 +18,15 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
       referrerpolicy="no-referrer"
     />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+      referrerpolicy="no-referrer"
+    />
     <title>Talawa Admin</title>
   </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

jest.config.js

@@ -1,19 +1,18 @@
 export default {
   roots: ['<rootDir>/src'],
   collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/index.tsx'],
-  setupFiles: ['react-app-polyfill/jsdom'],
+  // setupFiles: ['react-app-polyfill/jsdom'],
+  setupFiles: ['whatwg-fetch'],
   setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
   testMatch: [
     '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
     '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
   ],
   testEnvironment: 'jsdom',
   transform: {
-    '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$':
-      'react-scripts/config/jest/babelTransform.js',
-    '^.+\\.(css|scss|sass|less)$': 'jest-preview/transforms/css',
-    '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)':
-      'jest-preview/transforms/file',
+    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { configFile: "./config/babel.config.cjs" }], // Use babel-jest for JavaScript and TypeScript files
+    '^.+\\.(css|scss|sass|less)$': 'jest-preview/transforms/css', // CSS transformations
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': 'jest-preview/transforms/file', // File transformations
   },
   transformIgnorePatterns: [
     '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
@@ -41,10 +40,10 @@ export default {
     'jsx',
     'node',
   ],
-  watchPlugins: [
-    'jest-watch-typeahead/filename',
-    'jest-watch-typeahead/testname',
-  ],
+  // watchPlugins: [
+  //   'jest-watch-typeahead/filename',
+  //   'jest-watch-typeahead/testname',
+  // ],
   resetMocks: false,
   coveragePathIgnorePatterns: [
     'src/state/index.ts',

package.json

@@ -10,58 +10,65 @@
     "@apollo/react-testing": "^4.0.0",
     "@dicebear/collection": "^8.0.1",
     "@dicebear/core": "^8.0.2",
-    "@emotion/react": "^11.13.0",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.16.1",
+    "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
     "@mui/private-theming": "^5.15.12",
     "@mui/system": "^5.14.12",
-    "@mui/x-charts": "^7.8.0",
-    "@mui/x-data-grid": "^7.11.0",
+    "@mui/x-charts": "^7.17.0",
+    "@mui/x-data-grid": "^7.16.0",
     "@mui/x-date-pickers": "^7.11.1",
-    "@pdfme/generator": "^1.2.6",
+    "@pdfme/generator": "^4.5.2",
+    "@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",
+    "dotenv": "^16.4.5",
     "flag-icons": "^6.6.6",
     "graphql": "^16.9.0",
     "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.16.0",
     "history": "^5.3.0",
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.5.2",
+    "i18next-http-backend": "^2.6.1",
     "inquirer": "^8.0.0",
     "js-cookie": "^3.0.1",
     "markdown-toc": "^1.2.0",
     "prettier": "^3.3.2",
-    "react": "^17.0.2",
-    "react-app-rewired": "^2.2.1",
+    "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-bootstrap": "^2.10.4",
     "react-datepicker": "^7.3.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-google-recaptcha": "^3.1.0",
     "react-i18next": "^12.3.1",
     "react-icons": "^5.2.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-multi-carousel": "^2.8.5",
     "react-redux": "^7.2.5",
     "react-router-dom": "^6.26.0",
-    "react-scripts": "5.0.1",
-    "react-toastify": "^9.0.3",
+    "react-toastify": "^10.0.5",
     "react-tooltip": "^5.27.1",
     "redux": "^4.1.1",
     "redux-thunk": "^2.3.0",
     "sanitize-html": "^2.13.0",
+    "typedoc": "^0.26.7",
     "typedoc-plugin-markdown": "^4.2.1",
-    "typescript": "^4.3.5",
+    "typescript": "^5.6.2",
+    "vite": "^4.5.3",
+    "vite-plugin-environment": "^1.1.3",
+    "vite-plugin-svgr": "^3.2.0",
+    "vite-tsconfig-paths": "^5.0.1",
     "web-vitals": "^4.2.3"
   },
   "scripts": {
-    "serve": "cross-env ESLINT_NO_DEV_ERRORS=true node ./scripts/config-overrides/custom_start.js",
-    "build": "node ./scripts/config-overrides/custom_build.js",
-    "test": "cross-env NODE_ENV=test node scripts/test.js --env=./scripts/custom-test-env.js --watchAll --coverage",
+    "serve": "cross-env ESLINT_NO_DEV_ERRORS=true vite --config config/vite.config.ts",
+    "build": "tsc && vite build --config config/vite.config.ts",
+    "preview": "vite preview --config config/vite.config.ts",
+    "test": "cross-env NODE_ENV=test jest --env=./scripts/custom-test-env.js --watchAll --coverage",
     "eject": "react-scripts eject",
     "lint:check": "eslint \"**/*.{ts,tsx}\" --max-warnings=0",
     "lint:fix": "eslint --fix \"**/*.{ts,tsx}\"",
@@ -96,29 +103,33 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^11.1.0",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/inquirer": "^9.0.7",
     "@types/jest": "^26.0.24",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.12.12",
+    "@types/node": "^22.5.4",
     "@types/node-fetch": "^2.6.10",
-    "@types/react": "^17.0.14",
+    "@types/react": "^18.3.3",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-bootstrap": "^0.32.32",
-    "@types/react-datepicker": "^4.1.4",
-    "@types/react-dom": "^17.0.9",
+    "@types/react-datepicker": "^7.0.0",
+    "@types/react-dom": "^18.3.0",
     "@types/react-google-recaptcha": "^2.1.5",
     "@types/react-router-dom": "^5.1.8",
     "@types/sanitize-html": "^2.13.0",
-    "@typescript-eslint/eslint-plugin": "^5.9.0",
-    "@typescript-eslint/parser": "^5.9.0",
+    "@typescript-eslint/eslint-plugin": "^8.5.0",
+    "@typescript-eslint/parser": "^8.5.0",
+    "babel-jest": "^29.7.0",
     "cross-env": "^7.0.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^25.3.4",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-jest": "^28.8.0",
+    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-tsdoc": "^0.3.0",
     "husky": "^8.0.3",
@@ -130,7 +141,8 @@
     "lint-staged": "^15.2.8",
     "postcss-modules": "^6.0.0",
     "sass": "^1.77.8",
-    "tsx": "^4.16.2"
+    "tsx": "^4.16.2",
+    "whatwg-fetch": "^3.6.20"
   },
   "resolutions": {
     "@apollo/client": "^3.4.0-beta.19",

public/locales/en/common.json

@@ -82,5 +82,14 @@
   "updatedSuccessfully": "{{item}} updated Successfully",
   "removedSuccessfully": "{{item}} removed Successfully",
   "successfullyUpdated": "Successfully Updated",
-  "sort": "Sort"
+  "sort": "Sort",
+  "all": "All",
+  "active": "Active",
+  "disabled": "Disabled",
+  "pending": "Pending",
+  "completed": "Completed",
+  "late": "Late",
+  "createdLatest": "Created Latest",
+  "createdEarliest": "Created Earliest",
+  "searchBy": "Search by {{item}}"
 }