代码块添加定时保存，描述信息添加缓存

5 years ago · 93ed0c8eee
parent 6416596b48
commit 93ed0c8eee
7 changed files with 44 additions and 27 deletions
--- a/public/react/src/modules/developer/newOrEditTask/index.js
+++ b/public/react/src/modules/developer/newOrEditTask/index.js
@ -28,7 +28,6 @@ const NewOrEditTask = (props) => {
    identifier,
  } = props;
  
-  console.log('props =====>>>>', props);
  // 表单提交
  const handleSubmitForm = () => {
    // 调用输入表单验证功能
@ -77,7 +76,7 @@ const NewOrEditTask = (props) => {
          onClick={handleClickPublish}>立即发布</Button>
      </div>
      <div className="split-pane-area">
-        <SplitPane split="vertical" minSize={200} maxSize={-200} defaultSize="50%">
+        <SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="40%">
          <div className={'split-pane-left'}>
            <LeftPane />
          </div>
--- a/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js
+++ b/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js
@ -4,7 +4,7 @@
 * @Github: 
 * @Date: 2019-11-20 10:35:40
 * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-06 16:56:24
+ * @LastEditTime: 2019-12-06 20:20:27
 */
 import 'quill/dist/quill.core.css';
 import 'quill/dist/quill.bubble.css';
@ -272,7 +272,7 @@ class EditTab extends React.Component {
              style={{ height: '300px' }}
              placeholder="请输入描述信息" 
              onEditorChange={this.handleChangeDescription}
-              htmlCtx={ojForm.description}
+              htmlCtx={ojForm.description || fromStore('oj_description')}
              options={quillConfig}
            />
          </FormItem>
--- a/public/react/src/modules/developer/newOrEditTask/rightpane/index.js
+++ b/public/react/src/modules/developer/newOrEditTask/rightpane/index.js
@ -4,7 +4,7 @@
 * @Github: 
 * @Date: 2019-12-01 10:18:35
 * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-03 09:11:50
+ * @LastEditTime: 2019-12-06 17:50:58
 */
 import './index.scss';
 import React from 'react';
@ -17,14 +17,25 @@ function RightPane (props, ref) {

  const {
    // identifier,
+    code,
    onSubmitForm,
    saveOjFormCode
  } = props;
  
+  // let timer = null;
  // 代码改变时，保存
-  const handleCodeChange = (code) => {
+  const handleCodeChange = (updateCode) => {
    // 保存用户输入的代码
-    saveOjFormCode(code);
+    // if (!timer) {
+    //   timer = setInterval(() => {
+    //     clearInterval(timer);
+    //     timer = null;
+    //     if (updateCode) {
+    //       console.log('调用更新代码------>>>>>>', updateCode);
+    //     }
+    //   }, 3000);
+    // }
+    saveOjFormCode(updateCode);
  }
  // 启动调试代码
  // const handleDebuggerCode = (value) => {
@ -32,7 +43,11 @@ function RightPane (props, ref) {
  // }
  return (
    <div className={'right_pane_code_wrap'}>
-      <MyMonacoEditor language={props.language} code={props.code} onCodeChange={handleCodeChange}/>
+      <MyMonacoEditor 
+        language={props.language} 
+        code={props.code} 
+        onCodeChange={handleCodeChange}/>
+        
      <ControlSetting
        // identifier={identifier}
        inputValue={props.input} 
--- a/public/react/src/modules/developer/studentStudy/index.js
+++ b/public/react/src/modules/developer/studentStudy/index.js
@ -4,7 +4,7 @@
 * @Github: 
 * @Date: 2019-11-23 10:53:19
 * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-06 17:02:32
+ * @LastEditTime: 2019-12-06 18:59:22
 */
 import './index.scss';
 import React, { useEffect } from 'react';
@ -56,7 +56,7 @@ const StudentStudy = (props) => {
        </div>
      </div>
      <div className="split-pane-area">
-        <SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="50%">
+        <SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="40%">
          <div className={'split-pane-left'}>
            <LeftPane />
          </div>
--- a/public/react/src/modules/developer/studentStudy/rightpane/index.js
+++ b/public/react/src/modules/developer/studentStudy/rightpane/index.js
@ -4,7 +4,7 @@
 * @Github: 
 * @Date: 2019-11-27 14:59:51
 * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-06 17:17:27
+ * @LastEditTime: 2019-12-06 18:48:52
 */
 import React, { useState, useEffect } from 'react';
 import {connect} from 'react-redux';
@ -22,12 +22,14 @@ const RightPane = (props) => {
    hack,
    updateCode,
    saveUserInputCode,
-    restoreInitialCode
+    restoreInitialCode,
+    saveUserCodeForInterval
  } = props;

  const [editorCode, setEditorCode] = useState('');

  useEffect(() => {
+    console.log('1111111');
    setEditorCode(hack.code);
  }, [hack]);
  
@ -38,22 +40,19 @@ const RightPane = (props) => {
    // updateCode(identifier, submitInput, 'submit');
  }

+  let timer = null; // 定时器
  // 代码块内容变化时
  const handleCodeChange = (code) => {
    // 保存用户提交的代码块
-    // console.log(code);
-    // 保存用户代码块
-    const { userCode } = props;
-    let timer;
+    console.log(code);
    if (!timer) {
      timer = setInterval(() => {
-        if (userCode && userCode !== code) {
-        } else {
-          clearInterval(timer);
-          timer = null;
-        }
+        clearInterval(timer);
+        timer = null;
+        saveUserCodeForInterval(identifier, code);
      }, 3000);
    }
+     // 保存用户代码块
    saveUserInputCode(code);
  }
  // 代码调试
@ -86,11 +85,10 @@ const RightPane = (props) => {

 const mapStateToProps = (state) => {

-  const {user_program_identifier, hack, userTestInput, userCode} = state.ojForUserReducer;
+  const {user_program_identifier, hack, userTestInput} = state.ojForUserReducer;
  // const { language, code } = hack;
  return {
    hack,
-    userCode,
    input: userTestInput,
    submitInput: hack.input, 
    identifier: user_program_identifier
@ -102,8 +100,10 @@ const mapDispatchToProps = (dispatch) => ({
  submitUserCode: (identifier, inputValue, type) => dispatch(actions.submitUserCode(identifier, inputValue, type)),
  // 更新代码块内容
  updateCode: (identifier, inputValue, type) => dispatch(actions.updateCode(identifier, inputValue, type)),
-  // 保存用户代码块
+  // 保存用户代码块至Reducer中
  saveUserInputCode: (code) => dispatch(actions.saveUserInputCode(code)),
+  // 保存用户代码至后台
+  saveUserCodeForInterval: (identifier, code) => dispatch(actions.saveUserCodeForInterval(identifier, code)),
  // 恢复初始代码
  restoreInitialCode: (identifier) => dispatch(actions.restoreInitialCode(identifier)),
 });
--- a/public/react/src/redux/actions/ojForUser.js
+++ b/public/react/src/redux/actions/ojForUser.js
@ -4,7 +4,7 @@
 * @Github: 
 * @Date: 2019-11-27 13:42:11
 * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-06 17:16:14
+ * @LastEditTime: 2019-12-06 17:56:02
 */
 import types from "./actionTypes";
 import { Base64 } from 'js-base64';
@ -84,11 +84,12 @@ export const getUserProgramDetail = (identifier, type) => {
 export const saveUserCodeForInterval = (identifier, code) => {
  return (dispatch) => {
    fetchUpdateCode(identifier, {
-      code
+      code: Base64.encode(code)
    }).then(res => {
      if (res.data.status === 401) {
        return;
      };
+      console.log('代码保存成功', res);
    });
  }
 }
--- a/public/react/src/redux/actions/ojForm.js
+++ b/public/react/src/redux/actions/ojForm.js
@ -4,13 +4,14 @@
 * @Github: 
 * @Date: 2019-11-20 16:35:46
 * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-05 08:47:50
+ * @LastEditTime: 2019-12-06 20:24:11
 */
 import types from './actionTypes';
 import CONST from '../../constants';
 import { fetchPostOjForm, fetchGetOjById, publishTask } from '../../services/ojService';
 import { Base64 } from 'js-base64';
 import { message, notification } from 'antd';
+import { toStore } from 'educoder'; 
 const { jcLabel } = CONST;
 // 表单字段映射
 const maps = {
@ -205,6 +206,7 @@ export const validateOjForm = (props, type) => {
      }

      function linkToDev () {
+        toStore('oj_description', '');
        dispatch({
          type: types.IS_MY_SOURCE,
          payload: true