optimize UserGroupModal

apps/app/src/client/components/Admin/UserGroup/UserGroupModal.tsx

@@ -1,5 +1,7 @@
 import type { FC } from 'react';
-import React, { useState, useEffect, useCallback } from 'react';
+import React, {
+  useState, useEffect, useCallback, useMemo,
+} from 'react';
 
 import type { Ref, IUserGroup, IUserGroupHasId } from '@growi/core';
 import { useTranslation } from 'next-i18next';
@@ -16,12 +18,12 @@ type Props = {
   isExternalGroup?: boolean
 };
 
-export const UserGroupModal: FC<Props> = (props: Props) => {
+const UserGroupModalSubstance: FC<Props> = (props: Props) => {
 
   const { t } = useTranslation('admin');
 
   const {
-    userGroup, buttonLabel, onClickSubmit, isShow, onHide, isExternalGroup = false,
+    userGroup, buttonLabel, onClickSubmit, onHide, isExternalGroup = false,
   } = props;
 
   /*
@@ -42,6 +44,14 @@ export const UserGroupModal: FC<Props> = (props: Props) => {
     setDescription(e.target.value);
   }, []);
 
+  // Memoized user group data for submission
+  const userGroupData = useMemo(() => ({
+    _id: userGroup?._id,
+    name: currentName,
+    description: currentDescription,
+    parent: currentParent,
+  }), [userGroup?._id, currentName, currentDescription, currentParent]);
+
   const onSubmitHandler = useCallback(async(e) => {
     e.preventDefault(); // no reload
 
@@ -49,13 +59,8 @@ export const UserGroupModal: FC<Props> = (props: Props) => {
       return;
     }
 
-    await onClickSubmit({
-      _id: userGroup?._id,
-      name: currentName,
-      description: currentDescription,
-      parent: currentParent,
-    });
-  }, [userGroup, currentName, currentDescription, currentParent, onClickSubmit]);
+    await onClickSubmit(userGroupData);
+  }, [onClickSubmit, userGroupData]);
 
   // componentDidMount
   useEffect(() => {
@@ -66,58 +71,68 @@ export const UserGroupModal: FC<Props> = (props: Props) => {
     }
   }, [userGroup]);
 
+  return (
+    <form onSubmit={onSubmitHandler}>
+      <ModalHeader tag="h4" toggle={onHide}>
+        {t('user_group_management.basic_info')}
+      </ModalHeader>
+
+      <ModalBody>
+        <div>
+          <label htmlFor="name" className="form-label">
+            {t('user_group_management.group_name')}
+          </label>
+          <input
+            className="form-control"
+            type="text"
+            name="name"
+            placeholder={t('user_group_management.group_example')}
+            value={currentName}
+            onChange={onChangeNameHandler}
+            required
+            disabled={isExternalGroup}
+          />
+        </div>
+
+        <div>
+          <label htmlFor="description" className="form-label">
+            {t('Description')}
+          </label>
+          <textarea className="form-control" name="description" value={currentDescription} onChange={onChangeDescriptionHandler} />
+          {isExternalGroup && (
+            <p className="form-text text-muted">
+              <small>
+                {t('external_user_group.description_form_detail')}
+              </small>
+            </p>
+          )}
+        </div>
+
+        {/* TODO 90732: Add a drop-down to show selectable parents */}
+
+        {/* TODO 85462: Add a note that "if you change the parent, the offspring will also be moved together */}
+
+      </ModalBody>
+
+      <ModalFooter>
+        <div>
+          <button type="submit" className="btn btn-primary">
+            {buttonLabel}
+          </button>
+        </div>
+      </ModalFooter>
+    </form>
+  );
+};
+
+export const UserGroupModal: FC<Props> = (props: Props) => {
+  const { isShow, onHide } = props;
+
   return (
     <Modal className="modal-md" isOpen={isShow} toggle={onHide}>
-      <form onSubmit={onSubmitHandler}>
-        <ModalHeader tag="h4" toggle={onHide}>
-          {t('user_group_management.basic_info')}
-        </ModalHeader>
-
-        <ModalBody>
-          <div>
-            <label htmlFor="name" className="form-label">
-              {t('user_group_management.group_name')}
-            </label>
-            <input
-              className="form-control"
-              type="text"
-              name="name"
-              placeholder={t('user_group_management.group_example')}
-              value={currentName}
-              onChange={onChangeNameHandler}
-              required
-              disabled={isExternalGroup}
-            />
-          </div>
-
-          <div>
-            <label htmlFor="description" className="form-label">
-              {t('Description')}
-            </label>
-            <textarea className="form-control" name="description" value={currentDescription} onChange={onChangeDescriptionHandler} />
-            {isExternalGroup && (
-              <p className="form-text text-muted">
-                <small>
-                  {t('external_user_group.description_form_detail')}
-                </small>
-              </p>
-            )}
-          </div>
-
-          {/* TODO 90732: Add a drop-down to show selectable parents */}
-
-          {/* TODO 85462: Add a note that "if you change the parent, the offspring will also be moved together */}
-
-        </ModalBody>
-
-        <ModalFooter>
-          <div>
-            <button type="submit" className="btn btn-primary">
-              {buttonLabel}
-            </button>
-          </div>
-        </ModalFooter>
-      </form>
+      {isShow && (
+        <UserGroupModalSubstance {...props} />
+      )}
     </Modal>
   );
 };