You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
3.8 KiB
140 lines
3.8 KiB
/*
|
|
* @Description:
|
|
* @Author: tangjiang
|
|
* @Github:
|
|
* @Date: 2019-11-27 14:59:51
|
|
* @LastEditors: tangjiang
|
|
* @LastEditTime: 2019-12-19 15:06:49
|
|
*/
|
|
import React, { useState, useEffect } from 'react';
|
|
import {connect} from 'react-redux';
|
|
import MyMonacoEditor from '../../components/myMonacoEditor';
|
|
import ControlSetting from '../../components/controlSetting';
|
|
import actions from '../../../../redux/actions';
|
|
|
|
const RightPane = (props) => {
|
|
|
|
const {
|
|
identifier,
|
|
submitInput,
|
|
submitUserCode,
|
|
input,
|
|
hack,
|
|
notice,
|
|
updateCode,
|
|
hadCodeUpdate,
|
|
editor_code,
|
|
updateNotice,
|
|
saveUserInputCode,
|
|
restoreInitialCode,
|
|
saveUserCodeForInterval
|
|
} = props;
|
|
|
|
const [editorCode, setEditorCode] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (editor_code) {
|
|
setEditorCode(editor_code);
|
|
} else {
|
|
setEditorCode(hack.code);
|
|
}
|
|
}, [hack, editor_code]);
|
|
|
|
const handleSubmitForm = () => {
|
|
// 提交时， 先调用提交接口，提交成功后，循环调用测评接口
|
|
submitUserCode(identifier, submitInput, 'submit');
|
|
// // 提交时，先调用评测接口， 评测通过后才调用保存接口
|
|
// updateCode(identifier, submitInput, 'submit');
|
|
}
|
|
|
|
let timer = null; // 定时器
|
|
// 代码块内容变化时
|
|
const handleCodeChange = (code) => {
|
|
// 保存用户提交的代码块
|
|
// console.log(code);
|
|
setEditorCode(code);
|
|
if (!timer) {
|
|
timer = setInterval(() => {
|
|
clearInterval(timer);
|
|
timer = null;
|
|
saveUserCodeForInterval && saveUserCodeForInterval(identifier, code);
|
|
}, 3000);
|
|
}
|
|
// 保存用户代码块
|
|
saveUserInputCode(code);
|
|
}
|
|
// 代码调试
|
|
const handleDebuggerCode = (value) => {
|
|
// 调用保存代码块接口，成功后，调用调试接口
|
|
updateCode(identifier, value, 'debug');
|
|
}
|
|
// 恢复初始代码
|
|
const handleRestoreInitialCode = () => {
|
|
restoreInitialCode(identifier, '恢复初始代码成功');
|
|
}
|
|
|
|
// 更新代码
|
|
const handleUpdateNotice = () => {
|
|
updateNotice && updateNotice();
|
|
};
|
|
|
|
return (
|
|
<div className={'right_pane_code_wrap'}>
|
|
<MyMonacoEditor
|
|
notice={notice}
|
|
identifier={identifier}
|
|
language={hack.language}
|
|
code={editorCode}
|
|
hadCodeUpdate={hadCodeUpdate}
|
|
onCodeChange={handleCodeChange}
|
|
onUpdateNotice={handleUpdateNotice}
|
|
onRestoreInitialCode={handleRestoreInitialCode}
|
|
/>
|
|
<ControlSetting
|
|
identifier={identifier}
|
|
inputValue={input}
|
|
onDebuggerCode={handleDebuggerCode}
|
|
onSubmitForm={handleSubmitForm}/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
|
|
const {
|
|
user_program_identifier,
|
|
hack,
|
|
userTestInput,
|
|
editor_code,
|
|
notice,
|
|
hadCodeUpdate
|
|
} = state.ojForUserReducer;
|
|
// const { language, code } = hack;
|
|
return {
|
|
hack,
|
|
notice,
|
|
hadCodeUpdate,
|
|
editor_code,
|
|
input: userTestInput,
|
|
submitInput: hack.input,
|
|
identifier: user_program_identifier
|
|
};
|
|
}
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
// type: 提交类型 debug | submit
|
|
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, msg) => dispatch(actions.restoreInitialCode(identifier, msg)),
|
|
});
|
|
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(RightPane); |