Fix editor freezing issue when JSON parse failed

Composer/packages/client/src/constants/index.ts

@@ -79,7 +79,6 @@ export enum ActionTypes {
   CONNECT_BOT_FAILURE = 'CONNECT_BOT_FAILURE',
   RELOAD_BOT_SUCCESS = 'RELOAD_BOT_SUCCESS',
   RELOAD_BOT_FAILURE = 'RELOAD_BOT_FAILURE',
-  UPDATE_ENV_SETTING = 'UPDATE_ENV_SETTING',
   SYNC_ENV_SETTING = 'SYNC_ENV_SETTING',
   SET_ERROR = 'SET_ERROR',
   TO_START_BOT = 'TO_START_BOT',

Composer/packages/client/src/pages/setting/dialog-settings/index.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useState, useContext } from 'react';
 import { Controlled as CodeMirror } from 'react-codemirror2';
 import jsonlint from 'jsonlint-webpack';
 import 'codemirror/lib/codemirror.css';
@@ -31,9 +31,10 @@ const cmOptions = {
 export const DialogSettings = () => {
   const { state, actions } = useContext(StoreContext);
   const { botName, settings } = state;
-
+  const [value, setValue] = useState(JSON.stringify(settings, null, 2));
   const updateFormData = (editor, data, newValue) => {
     try {
+      setValue(newValue);
       const result = JSON.parse(newValue);
       try {
         actions.setSettings(botName, result);
@@ -46,7 +47,7 @@ export const DialogSettings = () => {
   };
 
   return botName ? (
-    <CodeMirror value={JSON.stringify(settings, null, 2)} onBeforeChange={updateFormData} options={cmOptions} />
+    <CodeMirror value={value} onBeforeChange={updateFormData} options={cmOptions} />
   ) : (
     <div>Data Loading...</div>
   );

Composer/packages/client/src/store/action/setting.ts

@@ -1,11 +1,13 @@
 import axios from 'axios';
-import { get } from 'lodash';
+import { get, debounce } from 'lodash';
 
 import { ActionCreator, DialogSetting } from '../types';
 import settingsStorage from '../../utils/dialogSettingStorage';
 import { SensitiveProperties } from '../../constants';
 
 import { BASEURL, ActionTypes } from './../../constants/index';
+
+const post = debounce(axios.post, 1000);
 export const setSettings: ActionCreator = async ({ dispatch }, botName: string, settings: DialogSetting) => {
   try {
     // set value to store
@@ -21,7 +23,7 @@ export const setSettings: ActionCreator = async ({ dispatch }, botName: string,
       settingsStorage.setField(botName, property, propertyValue ? propertyValue : '');
     }
     // set value to server
-    await axios.post(`${BASEURL}/projects/opened/settings`, { settings });
+    await post(`${BASEURL}/projects/opened/settings`, { settings });
   } catch (err) {
     dispatch({
       type: ActionTypes.SET_ERROR,

Composer/packages/client/src/store/reducer/index.ts

@@ -170,11 +170,6 @@ const syncEnvSetting: ReducerFunc = (state, { settings }) => {
   return state;
 };
 
-const updateEnvSetting: ReducerFunc = state => {
-  state.isEnvSettingUpdated = !state.isEnvSettingUpdated;
-  return state;
-};
-
 const setTemplateProjects: ReducerFunc = (state, { response } = {}) => {
   const data = response && response.data;
 
@@ -235,7 +230,6 @@ export const reducer = createReducer({
   [ActionTypes.RELOAD_BOT_SUCCESS]: setBotLoadErrorMsg,
   [ActionTypes.SET_ERROR]: setError,
   [ActionTypes.SET_DESIGN_PAGE_LOCATION]: setDesignPageLocation,
-  [ActionTypes.UPDATE_ENV_SETTING]: updateEnvSetting,
   [ActionTypes.SYNC_ENV_SETTING]: syncEnvSetting,
   [ActionTypes.USER_LOGIN_SUCCESS]: setUserToken,
   [ActionTypes.USER_LOGIN_FAILURE]: setUserToken, // will be invoked with token = undefined