improve props

apps/app/src/components/Admin/UserGroup/UserGroupForm.tsx

@@ -1,15 +1,13 @@
-import React, {
-  FC, useCallback, useState, useEffect,
-} from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import dateFnsFormat from 'date-fns/format';
 import { useTranslation } from 'next-i18next';
 
 import { IUserGroupHasId } from '~/interfaces/user';
-import { useSWRxUserGroup } from '~/stores/user-group';
 
 type Props = {
   userGroup: IUserGroupHasId,
+  parentUserGroup: IUserGroupHasId | undefined,
   selectableParentUserGroups?: IUserGroupHasId[],
   submitButtonLabel: string;
   onSubmit?: (targetGroup: IUserGroupHasId, userGroupData: Partial<IUserGroupHasId>) => Promise<void> | void
@@ -20,22 +18,14 @@ export const UserGroupForm: FC<Props> = (props: Props) => {
   const { t } = useTranslation('admin');
 
   const {
-    userGroup, selectableParentUserGroups, submitButtonLabel, onSubmit,
+    userGroup, parentUserGroup, selectableParentUserGroups, submitButtonLabel, onSubmit,
   } = props;
-
-  const parentUserGroupId = userGroup?.parent;
-  const { data: parentUserGroup } = useSWRxUserGroup(parentUserGroupId as string);
   /*
    * State
    */
   const [currentName, setName] = useState(userGroup != null ? userGroup.name : '');
   const [currentDescription, setDescription] = useState(userGroup != null ? userGroup.description : '');
-  const [selectedParent, setSelectedParent] = useState<IUserGroupHasId | undefined>();
-
-  useEffect(() => {
-    setSelectedParent(parentUserGroup);
-  }, [parentUserGroup]);
-
+  const [selectedParent, setSelectedParent] = useState<IUserGroupHasId | undefined>(parentUserGroup);
   /*
    * Function
    */

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

@@ -48,6 +48,9 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
   const { userGroupId: currentUserGroupId } = props;
 
   const { data: currentUserGroup } = useSWRxUserGroup(currentUserGroupId);
+  const parentUserGroupId = currentUserGroup?.parent;
+  const { data: parentUserGroup } = useSWRxUserGroup(parentUserGroupId as string);
+
   const [searchType, setSearchType] = useState<SearchType>(SearchTypes.PARTIAL);
   const [isAlsoMailSearched, setAlsoMailSearched] = useState<boolean>(false);
   const [isAlsoNameSearched, setAlsoNameSearched] = useState<boolean>(false);
@@ -356,6 +359,7 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
       <div className="mt-4 form-box">
         <UserGroupForm
           userGroup={currentUserGroup}
+          parentUserGroup={parentUserGroup}
           selectableParentUserGroups={selectableParentUserGroups}
           submitButtonLabel={t('Update')}
           onSubmit={onClickSubmitForm}