Merge branch 'imprv/user-group-create-update-parent' into imprv/user-group-delete

packages/app/package.json

@@ -235,7 +235,7 @@
     "stylelint": "^14.0.1",
     "stylelint-config-recess-order": "^2.0.1",
     "swagger2openapi": "^5.3.1",
-    "swr": "^1.0.1",
+    "swr": "^1.1.2",
     "terser-webpack-plugin": "^4.1.0",
     "throttle-debounce": "^2.0.0",
     "toastr": "^2.1.2",

packages/app/src/components/Admin/UserGroup/UserGroupPage.tsx

@@ -28,10 +28,10 @@ const UserGroupPage: FC<Props> = (props: Props) => {
   /*
    * Fetch
    */
-  const { data: userGroupsData, mutate: mutateUserGroups } = useSWRxUserGroupList();
-  const userGroupIds = userGroupsData?.userGroups?.map(group => group._id);
-  const { data: userGroupRelationsData, mutate: mutateUserGroupRelations } = useSWRxUserGroupRelationList(userGroupIds);
-  const { data: childUserGroupsData } = useSWRxChildUserGroupList(userGroupIds);
+  const { data: userGroups, mutate: mutateUserGroups } = useSWRxUserGroupList();
+  const userGroupIds = userGroups?.map(group => group._id);
+  const { data: userGroupRelations, mutate: mutateUserGroupRelations } = useSWRxUserGroupRelationList(userGroupIds);
+  const { data: childUserGroups } = useSWRxChildUserGroupList(userGroupIds);
 
   /*
    * State
@@ -70,20 +70,14 @@ const UserGroupPage: FC<Props> = (props: Props) => {
 
   const addUserGroup = useCallback(async(userGroupData: IUserGroup) => {
     try {
-      const res = await apiv3Post('/user-groups', {
+      await apiv3Post('/user-groups', {
         name: userGroupData.name,
         description: userGroupData.description,
         parent: userGroupData.parent,
       });
 
-      const newUserGroup = res.data.userGroup;
-      mutateUserGroups((current) => {
-        if (current == null) {
-          return undefined;
-        }
-
-        return { userGroups: [...current?.userGroups, newUserGroup] };
-      }, false);
+      // sync
+      await mutateUserGroups(undefined, true);
     }
     catch (err) {
       toastError(err);
@@ -97,21 +91,8 @@ const UserGroupPage: FC<Props> = (props: Props) => {
         transferToUserGroupId,
       });
 
-      mutateUserGroups((current) => {
-        if (current == null) {
-          return undefined;
-        }
-
-        return { userGroups: current.userGroups.filter(userGroup => userGroup._id !== deleteGroupId) };
-      }, false);
-
-      mutateUserGroupRelations((current) => {
-        if (current == null) {
-          return undefined;
-        }
-
-        return { userGroupRelations: current.userGroupRelations.filter(relation => relation.relatedGroup !== deleteGroupId) };
-      }, false);
+      // sync
+      await mutateUserGroups(undefined, true);
 
       setSelectedUserGroup(undefined);
       setDeleteModalShown(false);
@@ -123,7 +104,7 @@ const UserGroupPage: FC<Props> = (props: Props) => {
     }
   }, [mutateUserGroups, mutateUserGroupRelations]);
 
-  if (userGroupsData == null || userGroupRelationsData == null || childUserGroupsData == null) {
+  if (userGroups == null || userGroupRelations == null || childUserGroups == null) {
     return <></>;
   }
 
@@ -150,15 +131,15 @@ const UserGroupPage: FC<Props> = (props: Props) => {
       }
       <UserGroupTable
         appContainer={props.appContainer}
-        userGroups={userGroupsData.userGroups}
-        childUserGroups={childUserGroupsData.childUserGroups}
+        userGroups={userGroups}
+        childUserGroups={childUserGroups}
         isAclEnabled={isAclEnabled}
         onDelete={showDeleteModal}
-        userGroupRelations={userGroupRelationsData.userGroupRelations}
+        userGroupRelations={userGroupRelations}
       />
       <UserGroupDeleteModal
         appContainer={props.appContainer}
-        userGroups={userGroupsData.userGroups}
+        userGroups={userGroups}
         deleteUserGroup={selectedUserGroup}
         onDelete={deleteUserGroupById}
         isShow={isDeleteModalShown}

packages/app/src/stores/middlewares/serialize.ts

@@ -1,13 +0,0 @@
-import { Middleware, SWRHook } from 'swr';
-
-export const serializeKey: Middleware = (useSWRNext: SWRHook) => {
-  return (key, fetcher, config) => {
-    const serializedKey = Array.isArray(key) ? JSON.stringify(key) : key;
-
-    if (fetcher == null) {
-      return useSWRNext(serializedKey, config);
-    }
-
-    return useSWRNext(serializedKey, key => fetcher(...JSON.parse(key)), config);
-  };
-};

packages/app/src/stores/ui.tsx

@@ -274,7 +274,7 @@ export const useCreateModalPath = (): SWRResponse<string, Error> => {
   const { data: status } = useCreateModalStatus();
 
   return useSWR(
-    [currentPagePath, status],
+    currentPagePath != null && status != null ? [currentPagePath, status] : null,
     (currentPagePath, status) => {
       return status.path || currentPagePath;
     },

packages/app/src/stores/user-group.tsx

@@ -1,16 +1,15 @@
-import useSWR, { SWRResponse } from 'swr';
+import { SWRResponse } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
 import { apiv3Get } from '~/client/util/apiv3-client';
 import { IUserGroupHasId, IUserGroupRelationHasId } from '~/interfaces/user';
 import { UserGroupListResult, ChildUserGroupListResult, UserGroupRelationListResult } from '~/interfaces/user-group-response';
-import { serializeKey } from './middlewares/serialize';
 
 
-export const useSWRxUserGroupList = (initialData?: IUserGroupHasId[]): SWRResponse<UserGroupListResult, Error> => {
-  return useSWRImmutable(
+export const useSWRxUserGroupList = (initialData?: IUserGroupHasId[]): SWRResponse<IUserGroupHasId[], Error> => {
+  return useSWRImmutable<IUserGroupHasId[], Error>(
     '/user-groups',
-    endpoint => apiv3Get(endpoint, { pagination: false }).then(result => result.data),
+    endpoint => apiv3Get<UserGroupListResult>(endpoint, { pagination: false }).then(result => result.data.userGroups),
     {
       fallbackData: initialData,
     },
@@ -18,27 +17,29 @@ export const useSWRxUserGroupList = (initialData?: IUserGroupHasId[]): SWRRespon
 };
 
 export const useSWRxChildUserGroupList = (
-    parentIds?: string[], includeGrandChildren?: boolean, initialData?: IUserGroupHasId[],
-): SWRResponse<ChildUserGroupListResult, Error> => {
-  return useSWRImmutable(
+    parentIds: string[] | undefined, includeGrandChildren?: boolean, initialData?: IUserGroupHasId[],
+): SWRResponse<IUserGroupHasId[], Error> => {
+  return useSWRImmutable<IUserGroupHasId[], Error>(
     parentIds != null ? ['/user-groups/children', parentIds, includeGrandChildren] : null,
-    (endpoint, parentIds, includeGrandChildren) => apiv3Get(endpoint, { parentIds, includeGrandChildren }).then(result => result.data),
+    (endpoint, parentIds, includeGrandChildren) => apiv3Get<ChildUserGroupListResult>(
+      endpoint, { parentIds, includeGrandChildren },
+    ).then(result => result.data.childUserGroups),
     {
       fallbackData: initialData,
-      use: [serializeKey],
     },
   );
 };
 
 export const useSWRxUserGroupRelationList = (
-    groupIds?: string[], childGroupIds?: string[], initialData?: IUserGroupRelationHasId[],
-): SWRResponse<UserGroupRelationListResult, Error> => {
-  return useSWRImmutable(
-    groupIds != null && childGroupIds != null ? ['/user-group-relations', groupIds, childGroupIds] : null,
-    (endpoint, parentIds, childGroupIds) => apiv3Get(endpoint, { parentIds, childGroupIds }).then(result => result.data),
+    groupIds: string[] | undefined, childGroupIds?: string[], initialData?: IUserGroupRelationHasId[],
+): SWRResponse<IUserGroupRelationHasId[], Error> => {
+  return useSWRImmutable<IUserGroupRelationHasId[], Error>(
+    groupIds != null ? ['/user-group-relations', groupIds, childGroupIds] : null,
+    (endpoint, parentIds, childGroupIds) => apiv3Get<UserGroupRelationListResult>(
+      endpoint, { parentIds, childGroupIds },
+    ).then(result => result.data.userGroupRelations),
     {
       fallbackData: initialData,
-      use: [serializeKey],
     },
   );
 };

yarn.lock

@@ -6864,11 +6864,6 @@ deprecation@^2.0.0, deprecation@^2.3.1:
   resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
   integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
 
-dequal@2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
-  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
-
 des.js@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
@@ -19271,12 +19266,10 @@ swig-templates@^2.0.2:
     optimist "~0.6"
     uglify-js "2.6.0"
 
-swr@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-1.0.1.tgz#15f62846b87ee000e52fa07812bb65eb62d79483"
-  integrity sha512-EPQAxSjoD4IaM49rpRHK0q+/NzcwoT8c0/Ylu/u3/6mFj/CWnQVjNJ0MV2Iuw/U+EJSd2TX5czdAwKPYZIG0YA==
-  dependencies:
-    dequal "2.0.2"
+swr@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-1.1.2.tgz#9f3de2541931fccf03c48f322f1fc935a7551612"
+  integrity sha512-UsM0eo5T+kRPyWFZtWRx2XR5qzohs/LS4lDC0GCyLpCYFmsfTk28UCVDbOE9+KtoXY4FnwHYiF+ZYEU3hnJ1lQ==
 
 symbol-observable@1.0.1:
   version "1.0.1"