chore(web): 📦 bump react

web/package.json

@@ -4,14 +4,14 @@
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.2",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
-    "antd": "^4.18.4",
+    "antd": "^4.24.16",
     "babel-plugin-import": "^1.13.8",
     "customize-cra": "^1.0.0",
     "eslint-config-prettier": "^9.1.0",
@@ -20,10 +20,10 @@
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
     "prettier": "^3.3.2",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-app-rewired": "^2.1.11",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.0",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^5.3.4",
     "react-scripts": "^5.0.0",
     "slugify": "^1.6.6",
     "typescript": "^4.9.5",
@@ -56,4 +56,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

web/src/components/listInfoDrawer/ListInfoDrawer.tsx

@@ -74,7 +74,7 @@ export const ListInfoDrawer = (props: RouteComponentProps & Props) => {
   const viewUrls = viewUrlModels == null ? [] : viewUrlModels.map((u) => u.url);
   return list ? (
     <Drawer
-      visible={true}
+      open={true}
       width={350}
       placement={"right"}
       mask={false}

web/src/components/listsTable/ListsTable.tsx

@@ -283,7 +283,7 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
             value: t.id.toString(),
           }))}
           onFilter={(value, record) =>
-            record.tagIds ? record.tagIds.includes(+value) : false
+            record.tagIds ? record.tagIds.includes(Number(value)) : false
           }
           render={(tagIds: number[]) =>
             tagIds ? (
@@ -318,7 +318,9 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
             value: t.id.toString(),
           }))}
           onFilter={(value, record) =>
-            record.maintainerIds ? record.maintainerIds.includes(+value) : false
+            record.maintainerIds
+              ? record.maintainerIds.includes(Number(value))
+              : false
           }
           render={(maintainerIds: number[]) =>
             maintainerIds ? (

web/src/hooks/useSearchColumnFilter.tsx

@@ -39,7 +39,7 @@ export const useSearchColumnFilter = <T extends {}>(dataIndex: string) => {
             placeholder={`Search ${
               dataIndex.charAt(0).toUpperCase() + dataIndex.slice(1)
             }`}
-            value={selectedKeys && selectedKeys[0]}
+            value={(selectedKeys && (selectedKeys[0] as string)) || ""}
             onChange={(e) =>
               setSelectedKeys &&
               setSelectedKeys(e.target.value ? [e.target.value] : [])

web/src/index.tsx

@@ -1,14 +1,16 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { App } from "./App";
 import "./index.css";
 import reportWebVitals from "./reportWebVitals";
 
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container!);
+
+root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root"),
 );
 
 // If you want to start measuring performance in your app, pass a function