migrate to react 19, react-router 7

Author: artemkdr

client/package-lock.json

@@ -29,12 +29,12 @@
         "i18next-http-backend": "^2.6.2",
         "jwt-decode": "^4.0.0",
         "moment": "^2.30.1",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "react-error-boundary": "^4.1.2",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "react-error-boundary": "^5.0.0",
         "react-i18next": "^15.1.2",
         "react-icons": "^5.3.0",
-        "react-router-dom": "^6.27.0",
+        "react-router-dom": "^7.1.1",
         "zustand": "^5.0.1"
     },
     "devDependencies": {
@@ -43,8 +43,8 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^16.1.0",
         "@testing-library/user-event": "^13.5.0",
-        "@types/react": "^18.3.12",
-        "@types/react-dom": "^18.3.1",
+        "@types/react": "^19.0.7",
+        "@types/react-dom": "^19.0.3",
         "@vitejs/plugin-react-swc": "^3.5.0",
         "eslint": "^9.14.0",
         "eslint-config-prettier": "^9.1.0",

client/package.json

@@ -8,13 +8,14 @@ interface FetchJsonResponse<T> {
     error?: {
         status: number;
         message: string;
+        original?: string;
     };
 }
 
 /**
  * Fetches JSON data from the specified endpoint.
  * Cacthes any errors that may occur during the fetch request and returns an error in the response object as FetchJsonResponse.
- * It expects the server to return a JSON object like `{"error": "User not found"}` in case of an error, "error" field could be also named "message" or "reason" or "detail".
+ * It expects the server to return a JSON object like `{"error": "User not found"}` in case of an error, "error" field could be also named "message" or "reason" or "title".
  *
  * @template T - The expected type of the response data.
  * @param {string} endpoint - The URL endpoint to fetch data from.
@@ -32,7 +33,7 @@ interface FetchJsonResponse<T> {
  * if (response.success) {
  *   console.log(response.data);
  * } else {
- *   console.error(response.error?.status, response.error?.message);
+ *   console.error(response.error?.status, response.error?.message, response.error?.original);
  * }
  * ```
  */
@@ -65,17 +66,20 @@ const fetchJson = async <T>(
             status: UNKNOWN_ERROR_STATUS,
         };
         let errorMessage = knownError.message;
+        const errorResponseText = await errorResponse.text();
         try {
-            const errorJson = await errorResponse.json();
-            // expects that the server returns a JSON object with a ('message' | 'error' | 'detail' | 'reason') field
+            const errorJson = JSON.parse(errorResponseText) as Record<
+                string,
+                string
+            >;
+            // expects that the server returns a JSON object with a ('message' | 'error' | 'title' | 'reason') field
             errorMessage =
                 errorJson.message ||
                 errorJson.error ||
-                errorJson.detail ||
-                errorJson.reason ||
-                (errorJson as string);
+                errorJson.title ||
+                errorJson.reason;
         } catch {
-            errorMessage = await errorResponse.text();
+            errorMessage = errorResponseText;
         }
         if (errorMessage?.length === 0) errorMessage = UNKNOWN_ERROR_MESSAGE;
         return {
@@ -84,6 +88,7 @@ const fetchJson = async <T>(
             error: {
                 status: errorResponse.status,
                 message: errorMessage,
+                original: errorResponseText,
             },
         };
     }

client/src/_foundation/net/fetch-json.ts

@@ -1,4 +1,3 @@
-import { SimpleSuspense } from '@/_foundation/components/simple-suspense';
 import { User } from '@/features/users/types/user';
 import { Heading, Text, VStack } from '@chakra-ui/react';
 import { ReactElement, useEffect, useState } from 'react';
@@ -19,16 +18,11 @@ export const UsersPage = (): ReactElement => {
             <Heading as="h2" size="md">
                 {t('Users.Title')}
             </Heading>
-            <SimpleSuspense
-                fallback={<Text>{t('Loading')}</Text>}
-                emptyText={t('Users.Empty')}
-            >
-                {users?.map((user) => (
-                    <Text key={user.Username}>
-                        {user.Username} ({user.Status})
-                    </Text>
-                ))}
-            </SimpleSuspense>
+            {users?.map((user) => (
+                <Text key={user.Username}>
+                    {user.Username} ({user.Status})
+                </Text>
+            ))}
         </VStack>
     );
 };