Changed from error object to individual states

src/client/js/components/Admin/SlackIntegration/CustomBotWithoutProxySettingsAccordion.jsx

@@ -9,7 +9,8 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
   const { appContainer } = props;
   const { t } = useTranslation('admin');
   const [openAccordionIndexes, setOpenAccordionIndexes] = useState(new Set());
-  const [connectionErrorLog, setConnectionErrorLog] = useState({});
+  const [connectionErrorCode, setConnectionErrorCode] = useState(null);
+  const [connectionErrorMessage, setConnectionErrorMessage] = useState(null);
 
   const onToggleAccordionHandler = (i) => {
     const accordionIndexes = new Set(openAccordionIndexes);
@@ -23,7 +24,8 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
   };
 
   const onTestConnectionHandler = async() => {
-    setConnectionErrorLog({ connectionErrorCode: null, connectionErrorMessage: null });
+    setConnectionErrorCode(null);
+    setConnectionErrorMessage(null);
     try {
       await appContainer.apiv3.post('slack-integration/notification-test-to-slack-work-space', {
         // TODO put proper request
@@ -31,11 +33,8 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
       });
     }
     catch (err) {
-      setConnectionErrorLog(prevState => ({
-        ...prevState,
-        connectionErrorCode: err[0].code,
-        connectionErrorMessage: err[0].message,
-      }));
+      setConnectionErrorCode(err[0].code);
+      setConnectionErrorMessage(err[0].message);
     }
   };
 
@@ -148,15 +147,15 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
             <div className="d-flex justify-content-center">
               <button type="button" className="btn btn-info m-3 px-5 font-weight-bold" onClick={onTestConnectionHandler}>Test</button>
             </div>
-            {connectionErrorLog.connectionErrorMessage != null
+            {connectionErrorMessage != null
               && <p className="text-danger text-center m-4">エラーが発生しました。下記のログを確認してください。</p>
             }
             <div className="row m-3 justify-content-center">
               <div className="col-sm-5 slack-connection-error-log">
                 <p className="border-info slack-connection-error-log-title mb-1 pl-2">Logs</p>
                 <div className="card border-info slack-connection-error-log-body rounded-lg px-5 py-4">
-                  <p className="m-0">{connectionErrorLog.connectionErrorCode}</p>
-                  <p className="m-0">{connectionErrorLog.connectionErrorMessage}</p>
+                  <p className="m-0">{connectionErrorCode}</p>
+                  <p className="m-0">{connectionErrorMessage}</p>
                 </div>
               </div>
             </div>