Set Maximum Avatars and Improve Performance (#19)

bps-kota-bontang · Sep 17, 2024 · 87b7efa · 87b7efa
2 parents a468732 + 989e513
commit 87b7efa
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 49 deletions.
diff --git a/src/components/team/TeamItem.tsx b/src/components/team/TeamItem.tsx
@@ -86,7 +86,9 @@ const TeamItem = ({ team, onItemUpdated, onItemDeleted }: TeamItemProps) => {
       maskClosable: true,
       closable: true,
       okCancel: true,
-      title: status ? `Hapus Admin: ${user.name}` : `Jadikan Admin: ${user.name}`,
+      title: status
+        ? `Hapus Admin: ${user.name}`
+        : `Jadikan Admin: ${user.name}`,
       content: status
         ? `Apakah Anda yakin ingin menghapus ${user.name} sebagai Admin?`
         : `Apakah Anda yakin ingin menjadikan ${user.name} sebagai Admin?`,
@@ -150,7 +152,12 @@ const TeamItem = ({ team, onItemUpdated, onItemDeleted }: TeamItemProps) => {
 
         <div className="flex flex-col justify-center gap-3 mr-10">
           <div className="text-lg text-black font-semibold">{team.name}</div>
-          <Avatar.Group>
+          <Avatar.Group
+            max={{
+              count: 5,
+              style: { color: "#f56a00", backgroundColor: "#fde3cf" },
+            }}
+          >
             {team.users.map((item, index) => {
               return (
                 <Tooltip title={item.user.name} placement="top" key={index}>

diff --git a/src/pages/ServicePage.tsx b/src/pages/ServicePage.tsx
@@ -9,50 +9,59 @@ import { Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
 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 initialTags =
+    searchParams.get("tags") == ""
+      ? []
+      : searchParams.get("tags")?.split(",") || [];
+
   const navigate = useNavigate();
   const isMobile = useMediaQuery();
-  const [keyword, setKeyword] = useState<string>("");
+  const [keyword, setKeyword] = useState<string>(initialKeyword);
+  const [page, setPage] = useState<number>(initialPage);
+  const [limit, setLimit] = useState<number>(initialLimit);
+  const [tags, setTags] = useState<string[]>(initialTags);
+  const [options, setOptions] = useState<SelectProps["options"]>([]);
   const [debouncedKeyword, setDebouncedKeyword] = useState(keyword);
   const debounceTimeoutRef = useRef<number | null>(null);
-  const [page, setPage] = useState<number>(1);
-  const [limit, setLimit] = useState<number>(10);
-  const [tags, setTags] = useState<string[]>([]);
-  const [options, setOptions] = useState<SelectProps["options"]>([]);
-  const [searchParams] = useSearchParams();
+
   const { services, total, fetchServices } = useServices(
     debouncedKeyword,
     tags,
     page,
     limit
   );
 
+  const syncURLWithState = useCallback(() => {
+    const searchParams = new URLSearchParams(window.location.search);
+
+    searchParams.set("page", page.toString());
+    searchParams.set("limit", limit.toString());
+    searchParams.set("keyword", keyword);
+    searchParams.set("tags", tags.join(","));
+
+    navigate({
+      pathname: window.location.pathname,
+      search: searchParams.toString(),
+    });
+  }, [page, limit, keyword, tags, navigate]);
+
   const onPageChange = useCallback(
     (page: number, pageSize: number) => {
       setPage(page);
       setLimit(pageSize);
-
-      const searchParams = new URLSearchParams(window.location.search);
-      searchParams.set("page", page.toString());
-      searchParams.set("limit", pageSize.toString());
-
-      navigate({
-        pathname: window.location.pathname,
-        search: searchParams.toString(),
-      });
+      syncURLWithState();
     },
-    [navigate]
+    [syncURLWithState]
   );
 
   const onKeywordChange = useCallback(
     (newKeyword: string) => {
       setKeyword(newKeyword);
-      const searchParams = new URLSearchParams(window.location.search);
-      searchParams.set("keyword", newKeyword);
-
-      navigate({
-        pathname: window.location.pathname,
-        search: searchParams.toString(),
-      });
+      syncURLWithState();
 
       if (debounceTimeoutRef.current) {
         clearTimeout(debounceTimeoutRef.current);
@@ -62,38 +71,17 @@ const ServicePage = () => {
         setDebouncedKeyword(newKeyword);
       }, 300);
     },
-    [navigate]
+    [syncURLWithState]
   );
 
   const onTagsChange = useCallback(
     (value: string[]) => {
       setTags(value);
-      const searchParams = new URLSearchParams(window.location.search);
-      searchParams.set("tags", value.join(","));
-
-      navigate({
-        pathname: window.location.pathname,
-        search: searchParams.toString(),
-      });
+      syncURLWithState();
     },
-    [navigate]
+    [syncURLWithState]
   );
 
-  useEffect(() => {
-    const initialKeyword = searchParams.get("keyword") || "";
-    const initialLimit = parseInt(searchParams.get("limit") || "10") || 10;
-    const initialPage = parseInt(searchParams.get("page") || "1") || 1;
-    const initialTags =
-      searchParams.get("tags") == ""
-        ? []
-        : searchParams.get("tags")?.split(",") || [];
-
-    setKeyword(initialKeyword);
-    setLimit(initialLimit);
-    setPage(initialPage);
-    setTags(initialTags);
-  }, [searchParams]);
-
   useEffect(() => {
     const fetchServiceTags = async () => {
       const data = await getServiceTags();