Update Dependencies and Improve Performance (#21)

bps-kota-bontang · Sep 17, 2024 · 15135a1 · 15135a1
2 parents 9bc88e1 + 9e13675
commit 15135a1
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 51 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -12,32 +12,32 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.4.0",
-    "@sentry/react": "^8.26.0",
-    "antd": "^5.20.2",
+    "@sentry/react": "^8.30.0",
+    "antd": "^5.20.6",
     "js-cookie": "^3.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.1"
+    "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.9.1",
-    "@sentry/vite-plugin": "^2.22.2",
-    "@types/bun": "^1.1.6",
+    "@eslint/js": "^9.10.0",
+    "@sentry/vite-plugin": "^2.22.4",
+    "@types/bun": "^1.1.9",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^22.5.0",
-    "@types/react": "^18.3.4",
+    "@types/node": "^22.5.5",
+    "@types/react": "^18.3.6",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.9.1",
+    "eslint": "^9.10.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc-fb9a90fa48-20240614",
-    "eslint-plugin-react-refresh": "^0.4.11",
+    "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
-    "postcss": "^8.4.41",
-    "tailwindcss": "^3.4.10",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^8.2.0",
-    "vite": "^5.4.2",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.11",
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.6.0",
+    "vite": "^5.4.6",
     "vite-plugin-svgr": "^4.2.0"
   }
 }
diff --git a/src/pages/ServicePage.tsx b/src/pages/ServicePage.tsx
@@ -8,15 +8,16 @@ import { Button, Empty, Input, Pagination, Select, SelectProps } from "antd";
 import { Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
+const DEFAULT_LIMIT = 10;
+const DEFAULT_PAGE = 1;
+
 const ServicePage = () => {
   const [searchParams] = useSearchParams();
   const initialKeyword = searchParams.get("keyword") || "";
-  const initialLimit = parseInt(searchParams.get("limit") || "10") || 10;
-  const initialPage = parseInt(searchParams.get("page") || "1") || 1;
+  const initialLimit = Number(searchParams.get("limit")) || DEFAULT_LIMIT;
+  const initialPage = Number(searchParams.get("page")) || DEFAULT_PAGE;
   const initialTags =
-    searchParams.get("tags") == ""
-      ? []
-      : searchParams.get("tags")?.split(",") || [];
+    searchParams.get("tags")?.split(",")?.filter(Boolean) || [];
 
   const navigate = useNavigate();
   const isMobile = useMediaQuery();
@@ -35,7 +36,7 @@ const ServicePage = () => {
     limit
   );
 
-  const syncURLWithState = useCallback(() => {
+  useEffect(() => {
     const searchParams = new URLSearchParams(window.location.search);
 
     searchParams.set("page", page.toString());
@@ -49,38 +50,27 @@ const ServicePage = () => {
     });
   }, [page, limit, keyword, tags, navigate]);
 
-  const onPageChange = useCallback(
-    (page: number, pageSize: number) => {
-      setPage(page);
-      setLimit(pageSize);
-      syncURLWithState();
-    },
-    [syncURLWithState]
-  );
+  const onPageChange = useCallback((page: number, pageSize: number) => {
+    setPage(page);
+    setLimit(pageSize);
+  }, []);
 
-  const onKeywordChange = useCallback(
-    (newKeyword: string) => {
-      setKeyword(newKeyword);
-      syncURLWithState();
+  const onKeywordChange = useCallback((newKeyword: string) => {
+    setKeyword(newKeyword);
 
-      if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current);
-      }
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
 
-      debounceTimeoutRef.current = window.setTimeout(() => {
-        setDebouncedKeyword(newKeyword);
-      }, 300);
-    },
-    [syncURLWithState]
-  );
+    debounceTimeoutRef.current = window.setTimeout(() => {
+      setPage(DEFAULT_PAGE);
+      setDebouncedKeyword(newKeyword);
+    }, 300);
+  }, []);
 
-  const onTagsChange = useCallback(
-    (value: string[]) => {
-      setTags(value);
-      syncURLWithState();
-    },
-    [syncURLWithState]
-  );
+  const onTagsChange = useCallback((value: string[]) => {
+    setTags(value);
+  }, []);
 
   useEffect(() => {
     const fetchServiceTags = async () => {
@@ -134,9 +124,9 @@ const ServicePage = () => {
               align="center"
               total={total}
               showSizeChanger
-              defaultCurrent={1}
+              defaultCurrent={DEFAULT_PAGE}
               current={page}
-              defaultPageSize={10}
+              defaultPageSize={DEFAULT_LIMIT}
               pageSize={limit}
               pageSizeOptions={[10, 20, 50, 100]}
               showQuickJumper