correct operrate changing type

packages/app/src/components/Admin/SlackIntegration/ManageCommandsProcessWithoutProxy.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { defaultSupportedCommandsNameForBroadcastUse, defaultSupportedCommandsNameForSingleUse } from '@growi/slack';
@@ -14,6 +14,9 @@ const PermissionTypes = {
   ALLOW_SPECIFIED: 'allowSpecified',
 };
 
+const defaultCommandsName = [...defaultSupportedCommandsNameForBroadcastUse, ...defaultSupportedCommandsNameForSingleUse];
+
+
 // A utility function that returns the new state but identical to the previous state
 const getUpdatedChannelsList = (prevState, commandName, value) => {
   // string to array
@@ -60,11 +63,11 @@ const getPermissionTypeFromValue = (value) => {
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 const ManageCommandsProcessWithoutProxy = ({ apiv3Put, commandPermission }) => {
   const { t } = useTranslation();
-
+  console.log(commandPermission, 66);
   const [permissionsCommandsState, setPermissionsCommandsState] = useState({
-    search: commandPermission.search,
-    create: commandPermission.create,
-    togetter: commandPermission.togetter,
+    search: commandPermission?.search,
+    create: commandPermission?.create,
+    togetter: commandPermission?.togetter,
   });
 
   const [currentPermissionTypes, setCurrentPermissionTypes] = useState(() => {
@@ -76,6 +79,7 @@ const ManageCommandsProcessWithoutProxy = ({ apiv3Put, commandPermission }) => {
     return initialState;
   });
 
+
   const updatePermissionsCommandsState = useCallback((e) => {
     const { target } = e;
     const { name: commandName, value } = target;
@@ -89,6 +93,16 @@ const ManageCommandsProcessWithoutProxy = ({ apiv3Put, commandPermission }) => {
     });
   }, []);
 
+  useEffect(() => {
+    console.log(commandPermission, 109);
+    setCurrentPermissionTypes({
+      search: getPermissionTypeFromValue(commandPermission?.search),
+      create:  getPermissionTypeFromValue(commandPermission?.create),
+      togetter:  getPermissionTypeFromValue(commandPermission?.togetter),
+    });
+
+  }, [commandPermission]);
+
   const updateChannelsListState = useCallback((e) => {
     const { target } = e;
     const { name: commandName, value } = target;
@@ -196,8 +210,6 @@ const ManageCommandsProcessWithoutProxy = ({ apiv3Put, commandPermission }) => {
   };
 
 
-  const defaultCommandsName = [...defaultSupportedCommandsNameForSingleUse, ...defaultSupportedCommandsNameForBroadcastUse];
-
   return (
     <div className="py-4 px-5">
       <p className="mb-4 font-weight-bold">{t('admin:slack_integration.accordion.manage_commands')}</p>

packages/app/src/components/Admin/SlackIntegration/SlackIntegration.jsx

@@ -55,7 +55,6 @@ const SlackIntegration = (props) => {
       setSlackAppIntegrations(slackAppIntegrations);
       setProxyServerUri(proxyServerUri);
       setCommandPermission(commandPermission);
-      console.log(commandPermission);
     }
     catch (err) {
       toastError(err);