part 4

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

@@ -148,17 +148,24 @@ GenelatingTokensAndRegisteringProxyServiceProcess.propTypes = {
 };
 
 
-const WithProxyAccordions = (props) => {
+export const TestProcess = () => {
+  const { t } = useTranslation();
   const [testChannel, setTestChannel] = useState('');
   /* eslint-disable no-unused-vars */
   // TODO: Add connection Logs
   const [connectionErrorCode, setConnectionErrorCode] = useState(null);
   const [connectionErrorMessage, setConnectionErrorMessage] = useState(null);
   const [connectionSuccessMessage, setConnectionSuccessMessage] = useState(null);
-  const [proxyUri, setProxyUri] = useState(null);
 
-  const { t } = useTranslation();
-  const growiUrl = props.appContainer.config.crowi.url;
+  // TODO: Show test logs
+  let value = '';
+  if (connectionErrorMessage != null) {
+    value = [connectionErrorCode, connectionErrorMessage];
+  }
+  if (connectionSuccessMessage != null) {
+    value = connectionSuccessMessage;
+  }
+
 
   // TODO: Handle test button
   const submitForm = (e) => {
@@ -171,63 +178,58 @@ const WithProxyAccordions = (props) => {
     setTestChannel(channel);
   };
 
-  // TODO: Show test logs
-  let value = '';
-  if (connectionErrorMessage != null) {
-    value = [connectionErrorCode, connectionErrorMessage];
-  }
-  if (connectionSuccessMessage != null) {
-    value = connectionSuccessMessage;
-  }
-
-  const testProcess = () => {
-    return (
-      <>
-        <p className="text-center m-4">{t('admin:slack_integration.accordion.test_connection_by_pressing_button')}</p>
-        <div className="d-flex justify-content-center">
-          <form className="form-row justify-content-center" onSubmit={e => submitForm(e)}>
-            <div className="input-group col-8">
-              <div className="input-group-prepend">
-                <span className="input-group-text" id="slack-channel-addon"><i className="fa fa-hashtag" /></span>
-              </div>
-              <input
-                className="form-control"
-                type="text"
-                value={testChannel}
-                placeholder="Slack Channel"
-              // TODO: Handle test button
-                onChange={e => inputTestChannelHandler(e.target.value)}
-              />
-            </div>
-            <button
-              type="submit"
-              className="btn btn-info mx-3 font-weight-bold"
-              disabled={testChannel.trim() === ''}
-            >Test
-            </button>
-          </form>
-        </div>
-        {connectionErrorMessage != null
-        && <p className="text-danger text-center my-4">{t('admin:slack_integration.accordion.error_check_logs_below')}</p>}
-        {connectionSuccessMessage != null
-        && <p className="text-info text-center my-4">{t('admin:slack_integration.accordion.send_message_to_slack_work_space')}</p>}
-        <form>
-          <div className="row my-3 justify-content-center">
-            <div className="form-group slack-connection-log col-md-4">
-              <label className="mb-1"><p className="border-info slack-connection-log-title pl-2 m-0">Logs</p></label>
-              <textarea
-                className="form-control card border-info slack-connection-log-body rounded-lg"
-                rows="5"
-              // TODO: Show test logs
-                value={value}
-                readOnly
-              />
+  return (
+    <>
+      <p className="text-center m-4">{t('admin:slack_integration.accordion.test_connection_by_pressing_button')}</p>
+      <div className="d-flex justify-content-center">
+        <form className="form-row justify-content-center" onSubmit={e => submitForm(e)}>
+          <div className="input-group col-8">
+            <div className="input-group-prepend">
+              <span className="input-group-text" id="slack-channel-addon"><i className="fa fa-hashtag" /></span>
             </div>
+            <input
+              className="form-control"
+              type="text"
+              value={testChannel}
+              placeholder="Slack Channel"
+            // TODO: Handle test button
+              onChange={e => inputTestChannelHandler(e.target.value)}
+            />
           </div>
+          <button
+            type="submit"
+            className="btn btn-info mx-3 font-weight-bold"
+            disabled={testChannel.trim() === ''}
+          >Test
+          </button>
         </form>
-      </>
-    );
-  };
+      </div>
+      {connectionErrorMessage != null
+      && <p className="text-danger text-center my-4">{t('admin:slack_integration.accordion.error_check_logs_below')}</p>}
+      {connectionSuccessMessage != null
+      && <p className="text-info text-center my-4">{t('admin:slack_integration.accordion.send_message_to_slack_work_space')}</p>}
+      <form>
+        <div className="row my-3 justify-content-center">
+          <div className="form-group slack-connection-log col-md-4">
+            <label className="mb-1"><p className="border-info slack-connection-log-title pl-2 m-0">Logs</p></label>
+            <textarea
+              className="form-control card border-info slack-connection-log-body rounded-lg"
+              rows="5"
+            // TODO: Show test logs
+              value={value}
+              readOnly
+            />
+          </div>
+        </div>
+      </form>
+    </>
+  );
+};
+
+
+const WithProxyAccordions = (props) => {
+  const { t } = useTranslation();
+
 
   const customBotCooperationProcedure = {
     '①': {
@@ -248,7 +250,7 @@ const WithProxyAccordions = (props) => {
     },
     '⑤': {
       title: t('admin:slack_integration.accordion.test_connection'),
-      content: testProcess(),
+      content: <TestProcess />,
     },
   };
 
@@ -267,7 +269,7 @@ const WithProxyAccordions = (props) => {
     },
     '④': {
       title: t('admin:slack_integration.accordion.test_connection'),
-      content: testProcess(),
+      content: <TestProcess />,
     },
   };