swrize

packages/app/src/components/Admin/UserGroupDetail/UserGroupDetailPage.tsx

@@ -17,6 +17,8 @@ import { IPageHasId } from '~/interfaces/page';
 import {
   IUserGroup, IUserGroupHasId, IUserGroupRelation, IUserGroupRelationHasId,
 } from '~/interfaces/user';
+import { useSWRxUserGroupPages, useSWRxUserGroupRelationList } from '~/stores/user-group';
+
 
 const UserGroupDetailPage: FC = () => {
   const rootElem = document.getElementById('admin-user-group-detail');
@@ -26,7 +28,7 @@ const UserGroupDetailPage: FC = () => {
    * State (from AdminUserGroupDetailContainer)
    */
   const [userGroup, setUserGroup] = useState<IUserGroupHasId>(JSON.parse(rootElem?.getAttribute('data-user-group') || 'null'));
-  const [userGroupRelations, setUserGroupRelations] = useState<IUserGroupRelationHasId[]>([]); // For user list
+  // const [userGroupRelations, setUserGroupRelations] = useState<IUserGroupRelationHasId[]>([]); // For user list
 
   // TODO 85062: /_api/v3/user-groups/children?include_grand_child=boolean
   const [childUserGroups, setChildUserGroups] = useState<IUserGroupHasId[]>([]); // TODO 85062: fetch data on init (findChildGroupsByParentIds) For child group list
@@ -39,26 +41,32 @@ const UserGroupDetailPage: FC = () => {
   const [isAlsoMailSearched, setAlsoMailSearched] = useState<boolean>(false);
   const [isAlsoNameSearched, setAlsoNameSearched] = useState<boolean>(false);
 
+  /*
+   * Fetch
+   */
+  const { data: userGroupPages, mutate: mutateUserGroupPages } = useSWRxUserGroupPages(userGroup._id, 2, 2);
+  const { data: userGroupRelations, mutate: mutateUserGroupRelations } = useSWRxUserGroupRelationList([userGroup._id]);
+
   /*
    * Function
    */
-  const sync = useCallback(async() => {
-    try {
-      const [
-        userGroupRelations,
-        relatedPages,
-      ] = await Promise.all([
-        apiv3Get(`/user-groups/${userGroup._id}/user-group-relations`).then(res => res.data.userGroupRelations),
-        apiv3Get(`/user-groups/${userGroup._id}/pages`).then(res => res.data.pages),
-      ]);
-
-      setUserGroupRelations(userGroupRelations);
-      setRelatedPages(relatedPages);
-    }
-    catch (err) {
-      toastError(new Error('Failed to fetch data'));
-    }
-  }, [userGroup]);
+  // const sync = useCallback(async() => {
+  //   try {
+  //     const [
+  //       userGroupRelations,
+  //       relatedPages,
+  //     ] = await Promise.all([
+  //       apiv3Get(`/user-groups/${userGroup._id}/user-group-relations`).then(res => res.data.userGroupRelations),
+  //       apiv3Get(`/user-groups/${userGroup._id}/pages`).then(res => res.data.pages),
+  //     ]);
+
+  //     setUserGroupRelations(userGroupRelations);
+  //     setRelatedPages(relatedPages);
+  //   }
+  //   catch (err) {
+  //     toastError(new Error('Failed to fetch data'));
+  //   }
+  // }, [userGroup]);
 
   // TODO 85062: old name: switchIsAlsoMailSearched
   const toggleIsAlsoMailSearched = useCallback(() => {
@@ -107,22 +115,23 @@ const UserGroupDetailPage: FC = () => {
   // TODO 85062: will be used in UserGroupUserFormByInput
   const addUserByUsername = useCallback(async(username: string) => {
     await apiv3Post(`/user-groups/${userGroup._id}/users/${username}`);
-
-    await sync();
-  }, [userGroup, sync]);
+    mutateUserGroupPages();
+    mutateUserGroupRelations();
+    // await sync();
+  }, [userGroup, mutateUserGroupPages, mutateUserGroupRelations]);
 
   const removeUserByUsername = useCallback(async(username: string) => {
-    const res = await apiv3Delete(`/user-groups/${userGroup._id}/users/${username}`);
-
-    setUserGroupRelations(prev => prev.filter(u => u._id !== res.data.userGroupRelation._id)); // TODO 85062: use swr to sync
-  }, [userGroup]);
+    await apiv3Delete(`/user-groups/${userGroup._id}/users/${username}`);
+    mutateUserGroupRelations();
+    // setUserGroupRelations(prev => prev.filter(u => u._id !== res.data.userGroupRelation._id)); // TODO 85062: use swr to sync
+  }, [userGroup, mutateUserGroupRelations]);
 
   /*
    * componentDidMount
    */
-  useEffect(() => {
-    sync();
-  }, []);
+  // useEffect(() => {
+  //   sync();
+  // }, []);
 
   /*
    * Dependencies
@@ -151,9 +160,9 @@ const UserGroupDetailPage: FC = () => {
       <UserGroupUserTable />
       <UserGroupUserModal />
       <h2 className="admin-setting-header mt-4">{t('Page')}</h2>
-      <div className="page-list">
+      {/* <div className="page-list">
         <UserGroupPageList />
-      </div>
+      </div> */}
     </div>
   );