Fixing two way binding

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

@@ -11,15 +11,18 @@ const CustomBotNonProxySettings = (props) => {
   const { appContainer } = props;
   const { t } = useTranslation();
 
-  const [slackSigningSecret, setSlackSigningSecret] = useState('');
-  const [slackBotToken, setSlackBotToken] = useState('');
+  const [secret, setSecret] = useState('');
+  const [token, setToken] = useState('');
   const botType = 'non-proxy';
 
   useEffect(() => {
     async function fetchData() {
       try {
         const res = await appContainer.apiv3.get('/slack-integration/');
-        console.log(res);
+        const { slackSigningSecret, slackBotToken } = res.data.slackBotSettingParams.customBotNonProxySettings;
+        console.log(slackSigningSecret, slackBotToken);
+        setSecret(slackSigningSecret);
+        setToken(slackBotToken);
       }
       catch (err) {
         toastError(err);
@@ -31,12 +34,13 @@ const CustomBotNonProxySettings = (props) => {
   async function updateHandler() {
     try {
       await appContainer.apiv3.put('/slack-integration/custom-bot-non-proxy', {
-        slackSigningSecret,
-        slackBotToken,
+        secret,
+        token,
         botType,
       });
       toastSuccess(t('toaster.update_successed', { target: t('admin:slack_integration.custom_bot_non_proxy_settings') }));
-    } catch (err) {
+    }
+    catch (err) {
       toastError(err);
     }
   }
@@ -54,14 +58,14 @@ const CustomBotNonProxySettings = (props) => {
       <div className="form-group row">
         <label className="text-left text-md-right col-md-3 col-form-label">Signing Secret</label>
         <div className="col-md-6">
-          <input className="form-control" type="text" onChange={e => setSlackSigningSecret(e.target.value)} />
+          <input className="form-control" type="text" value={secret} onChange={e => setSecret(e.target.value)} />
         </div>
       </div>
 
       <div className="form-group row mb-5">
         <label className="text-left text-md-right col-md-3 col-form-label">Bot User OAuth Token</label>
         <div className="col-md-6">
-          <input className="form-control" type="text" onChange={e => setSlackBotToken(e.target.value)} />
+          <input className="form-control" type="text" value={token} onChange={e => setToken(e.target.value)} />
         </div>
       </div>
 

src/server/routes/apiv3/slack-integration.js

@@ -75,14 +75,14 @@ module.exports = (crowi) => {
         // TODO impl this after GW-4939
         // AccessToken: "tempaccessdatahogehoge",
       },
-      cusotmBotNonProxySettings: {
+      customBotNonProxySettings: {
         // TODO impl this after GW-4939
         // AccessToken: "tempaccessdatahogehoge",
         slackSigningSecret: crowi.configManager.getConfig('crowi', 'slackbot:signingSecret'),
         slackBotToken: crowi.configManager.getConfig('crowi', 'slackbot:token'),
       },
       // TODO imple when creating with proxy
-      cusotmBotWithProxySettings: {
+      customBotWithProxySettings: {
         // TODO impl this after GW-4939
         // AccessToken: "tempaccessdatahogehoge",
       },