refs 125405: make swr util for updating child in group list

apps/app/src/client/services/user-group.ts

@@ -1,6 +1,3 @@
-import { IUserGroupHasId, IUserGroupRelationHasId } from '@growi/core';
-import { SWRResponse } from 'swr';
-
 import {
   useSWRxAncestorExternalUserGroups,
   useSWRxChildExternalUserGroupList,
@@ -8,29 +5,27 @@ import {
   useSWRxExternalUserGroupRelationList,
   useSWRxExternalUserGroupRelations,
 } from '~/features/external-user-group/client/stores/external-user-group';
-import { IExternalUserGroupHasId, IExternalUserGroupRelationHasId } from '~/features/external-user-group/interfaces/external-user-group';
-import { ChildUserGroupListResult, IUserGroupRelationHasIdPopulatedUser } from '~/interfaces/user-group-response';
 import {
   useSWRxAncestorUserGroups,
   useSWRxChildUserGroupList, useSWRxUserGroup, useSWRxUserGroupRelationList, useSWRxUserGroupRelations,
 } from '~/stores/user-group';
 
-export const useUserGroup = (userGroupId: string, isExternalGroup: boolean):
-SWRResponse<IUserGroupHasId, Error, any> | SWRResponse<IExternalUserGroupHasId, Error, any> => {
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useUserGroup = (userGroupId: string, isExternalGroup: boolean) => {
   const userGroupRes = useSWRxUserGroup(isExternalGroup ? null : userGroupId);
   const externalUserGroupRes = useSWRxExternalUserGroup(isExternalGroup ? userGroupId : null);
   return isExternalGroup ? externalUserGroupRes : userGroupRes;
 };
 
-export const useUserGroupRelations = (userGroupId: string, isExternalGroup: boolean):
-SWRResponse<IUserGroupRelationHasIdPopulatedUser[], Error, any> => {
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useUserGroupRelations = (userGroupId: string, isExternalGroup: boolean) => {
   const userGroupRes = useSWRxUserGroupRelations(isExternalGroup ? null : userGroupId);
   const externalUserGroupRes = useSWRxExternalUserGroupRelations(isExternalGroup ? userGroupId : null);
   return isExternalGroup ? externalUserGroupRes : userGroupRes;
 };
 
-export const useChildUserGroupList = (userGroupId: string, isExternalGroup: boolean):
-SWRResponse<ChildUserGroupListResult, Error, any> | SWRResponse<ChildUserGroupListResult<IExternalUserGroupHasId>, Error, any> => {
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useChildUserGroupList = (userGroupId: string, isExternalGroup: boolean) => {
   const userGroupRes = useSWRxChildUserGroupList(
     !isExternalGroup ? [userGroupId] : [], true,
   );
@@ -40,15 +35,15 @@ SWRResponse<ChildUserGroupListResult, Error, any> | SWRResponse<ChildUserGroupLi
   return isExternalGroup ? externalUserGroupRes : userGroupRes;
 };
 
-export const useUserGroupRelationList = (userGroupIds: string[], isExternalGroup: boolean):
-SWRResponse<IUserGroupRelationHasId[], Error, any> | SWRResponse<IExternalUserGroupRelationHasId[], Error, any> => {
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useUserGroupRelationList = (userGroupIds: string[], isExternalGroup: boolean) => {
   const userGroupRes = useSWRxUserGroupRelationList(isExternalGroup ? null : userGroupIds);
   const externalUserGroupRes = useSWRxExternalUserGroupRelationList(isExternalGroup ? userGroupIds : null);
   return isExternalGroup ? externalUserGroupRes : userGroupRes;
 };
 
-export const useAncestorUserGroups = (userGroupId: string, isExternalGroup: boolean):
-SWRResponse<IUserGroupHasId[], Error, any> | SWRResponse<IExternalUserGroupHasId[], Error, any> => {
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useAncestorUserGroups = (userGroupId: string, isExternalGroup: boolean) => {
   const userGroupRes = useSWRxAncestorUserGroups(isExternalGroup ? null : userGroupId);
   const externalUserGroupRes = useSWRxAncestorExternalUserGroups(isExternalGroup ? userGroupId : null);
   return isExternalGroup ? externalUserGroupRes : userGroupRes;

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

@@ -16,6 +16,7 @@ import {
   apiv3Get, apiv3Put, apiv3Delete, apiv3Post,
 } from '~/client/util/apiv3-client';
 import { toastSuccess, toastError } from '~/client/util/toastr';
+import { IExternalUserGroupHasId } from '~/features/external-user-group/interfaces/external-user-group';
 import { IUserGroup, IUserGroupHasId } from '~/interfaces/user';
 import { SearchTypes, SearchType } from '~/interfaces/user-group';
 import Xss from '~/services/xss';
@@ -80,7 +81,7 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
 
   const { data: userGroupRelations, mutate: mutateUserGroupRelations } = useUserGroupRelations(currentUserGroupId, isExternalGroup);
 
-  const { data: childUserGroupsList, mutate: mutateChildUserGroups } = useChildUserGroupList(currentUserGroupId, isExternalGroup);
+  const { data: childUserGroupsList, mutate: mutateChildUserGroups, updateChild } = useChildUserGroupList(currentUserGroupId, isExternalGroup);
   const childUserGroups = childUserGroupsList != null ? childUserGroupsList.childUserGroups : [];
   const grandChildUserGroups = childUserGroupsList != null ? childUserGroupsList.grandChildUserGroups : [];
   const childUserGroupIds = childUserGroups.map(group => group._id);
@@ -125,19 +126,26 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
 
   const updateUserGroup = useCallback(async(userGroup: IUserGroupHasId, update: Partial<IUserGroupHasId>, forceUpdateParents: boolean) => {
     const parentId = typeof update.parent === 'string' ? update.parent : update.parent?._id;
-    await apiv3Put<{ userGroup: IUserGroupHasId }>(`/user-groups/${userGroup._id}`, {
-      name: update.name,
-      description: update.description,
-      parentId: parentId ?? null,
-      forceUpdateParents,
-    });
+    if (isExternalGroup) {
+      await apiv3Put<{ userGroup: IExternalUserGroupHasId }>(`/external-user-groups/${userGroup._id}`, {
+        description: update.description,
+      });
+    }
+    else {
+      await apiv3Put<{ userGroup: IUserGroupHasId }>(`/user-groups/${userGroup._id}`, {
+        name: update.name,
+        description: update.description,
+        parentId: parentId ?? null,
+        forceUpdateParents,
+      });
+    }
 
     // mutate
     mutateChildUserGroups();
     mutateAncestorUserGroups();
     mutateSelectableChildUserGroups();
     mutateSelectableParentUserGroups();
-  }, [mutateAncestorUserGroups, mutateChildUserGroups, mutateSelectableChildUserGroups, mutateSelectableParentUserGroups]);
+  }, [mutateAncestorUserGroups, mutateChildUserGroups, mutateSelectableChildUserGroups, mutateSelectableParentUserGroups, isExternalGroup]);
 
   const onSubmitUpdateGroup = useCallback(
     async(targetGroup: IUserGroupHasId, userGroupData: Partial<IUserGroupHasId>, forceUpdateParents: boolean): Promise<void> => {
@@ -225,30 +233,16 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
 
   const updateChildUserGroup = useCallback(async(userGroupData: IUserGroupHasId) => {
     try {
-      if (isExternalGroup) {
-        await apiv3Put(`/external-user-groups/${userGroupData._id}`, {
-          description: userGroupData.description,
-        });
-      }
-      else {
-        await apiv3Put(`/user-groups/${userGroupData._id}`, {
-          name: userGroupData.name,
-          description: userGroupData.description,
-          parentId: userGroupData.parent,
-        });
-      }
+      updateChild(userGroupData);
 
       toastSuccess(t('toaster.update_successed', { target: t('UserGroup'), ns: 'commons' }));
 
-      // mutate
-      mutateChildUserGroups();
-
       hideUpdateModal();
     }
     catch (err) {
       toastError(err);
     }
-  }, [t, mutateChildUserGroups, hideUpdateModal, isExternalGroup]);
+  }, [t, updateChild, hideUpdateModal]);
 
   const onClickAddExistingUserGroupButtonHandler = useCallback(async(selectedChild: IUserGroupHasId): Promise<void> => {
     // show confirm modal before submiting

apps/app/src/features/external-user-group/client/stores/external-user-group.ts

@@ -1,7 +1,8 @@
+import { SWRResponseWithUtils, withUtils } from '@growi/core';
 import useSWR, { SWRResponse } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
-import { apiv3Get } from '~/client/util/apiv3-client';
+import { apiv3Get, apiv3Put } from '~/client/util/apiv3-client';
 import { IExternalUserGroupHasId, IExternalUserGroupRelationHasId, LdapGroupSyncSettings } from '~/features/external-user-group/interfaces/external-user-group';
 import { ChildUserGroupListResult, IUserGroupRelationHasIdPopulatedUser, UserGroupRelationListResult } from '~/interfaces/user-group-response';
 
@@ -31,16 +32,29 @@ export const useSWRxExternalUserGroupList = (initialData?: IExternalUserGroupHas
   );
 };
 
+type ChildExternalUserGroupListUtils = {
+  updateChild(childGroupData: IExternalUserGroupHasId): Promise<void>, // update one child and refresh list
+}
 export const useSWRxChildExternalUserGroupList = (
     parentIds?: string[], includeGrandChildren?: boolean,
-): SWRResponse<ChildUserGroupListResult<IExternalUserGroupHasId>, Error> => {
+): SWRResponseWithUtils<ChildExternalUserGroupListUtils, ChildUserGroupListResult<IExternalUserGroupHasId>, Error> => {
   const shouldFetch = parentIds != null && parentIds.length > 0;
-  return useSWRImmutable(
+
+  const swrResponse = useSWRImmutable(
     shouldFetch ? ['/external-user-groups/children', parentIds, includeGrandChildren] : null,
     ([endpoint, parentIds, includeGrandChildren]) => apiv3Get<ChildUserGroupListResult<IExternalUserGroupHasId>>(
       endpoint, { parentIds, includeGrandChildren },
     ).then((result => result.data)),
   );
+
+  const updateChild = async(childGroupData: IExternalUserGroupHasId) => {
+    await apiv3Put(`/external-user-groups/${childGroupData._id}`, {
+      description: childGroupData.description,
+    });
+    swrResponse.mutate();
+  };
+
+  return withUtils(swrResponse, { updateChild });
 };
 
 export const useSWRxExternalUserGroupRelations = (groupId: string | null): SWRResponse<IUserGroupRelationHasIdPopulatedUser[], Error> => {

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

@@ -1,8 +1,9 @@
+import { SWRResponseWithUtils, withUtils } from '@growi/core';
 import useSWR, { SWRResponse } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
 import { apiGet } from '~/client/util/apiv1-client';
-import { apiv3Get } from '~/client/util/apiv3-client';
+import { apiv3Get, apiv3Put } from '~/client/util/apiv3-client';
 import { IPageHasId } from '~/interfaces/page';
 import { IUserGroupHasId, IUserGroupRelationHasId } from '~/interfaces/user';
 import {
@@ -41,16 +42,31 @@ export const useSWRxUserGroupList = (initialData?: IUserGroupHasId[], isExternal
   );
 };
 
+type ChildUserGroupListUtils = {
+  updateChild(childGroupData: IUserGroupHasId): Promise<void>, // update one child and refresh list
+}
 export const useSWRxChildUserGroupList = (
     parentIds?: string[], includeGrandChildren?: boolean,
-): SWRResponse<ChildUserGroupListResult, Error> => {
+): SWRResponseWithUtils<ChildUserGroupListUtils, ChildUserGroupListResult, Error> => {
   const shouldFetch = parentIds != null && parentIds.length > 0;
-  return useSWRImmutable(
+
+  const swrResponse = useSWRImmutable(
     shouldFetch ? ['/user-groups/children', parentIds, includeGrandChildren] : null,
     ([endpoint, parentIds, includeGrandChildren]) => apiv3Get<ChildUserGroupListResult>(
       endpoint, { parentIds, includeGrandChildren },
     ).then((result => result.data)),
   );
+
+  const updateChild = async(childGroupData: IUserGroupHasId) => {
+    await apiv3Put(`/user-groups/${childGroupData._id}`, {
+      name: childGroupData.name,
+      description: childGroupData.description,
+      parentId: childGroupData.parent,
+    });
+    swrResponse.mutate();
+  };
+
+  return withUtils(swrResponse, { updateChild });
 };
 
 export const useSWRxUserGroupRelations = (groupId: string | null): SWRResponse<IUserGroupRelationHasIdPopulatedUser[], Error> => {