fix(client): move problem reset mechanism to its component (#579)

judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemSubmissionEditor/ProblemSubmissionEditor.jsx

@@ -86,9 +86,12 @@ export class ProblemSubmissionEditor extends Component {
       gradingLanguage: defaultGradingLanguage,
     };
 
+    let canReset = false;
+
     (skeletons || []).forEach(skeleton => {
       if (skeleton.languages.indexOf(defaultGradingLanguage) >= 0) {
         initialValues.editor = decodeBase64(skeleton.content);
+        canReset = true;
       }
     });
 
@@ -107,7 +110,9 @@ export class ProblemSubmissionEditor extends Component {
             <form onSubmit={handleSubmit} className={classNames({ show: this.state.isResponsiveButtonClicked })}>
               <div className="editor-header">
                 <Field component={FormSelect2} {...gradingLanguageField} />
-                <Button className="reset-button" small text="Reset code" intent={Intent.NONE} onClick={onReset} />
+                {canReset && (
+                  <Button className="reset-button" small text="Reset code" intent={Intent.NONE} onClick={onReset} />
+                )}
               </div>
               {submissionHint && (
                 <p>

judgels-client/src/routes/courses/courses/single/chapters/single/problems/modules/chapterProblemActions.js

@@ -1,9 +1,16 @@
 import { chapterProblemAPI } from '../../../../../../../../modules/api/jerahmeel/chapterProblem';
 import { selectToken } from '../../../../../../../../modules/session/sessionSelectors';
+import { RefreshChapterProblem } from '../single/modules/chapterProblemReducer';
 
 export function getProblemWorksheet(chapterJid, problemAlias, language) {
   return async (dispatch, getState) => {
     const token = selectToken(getState());
     return await chapterProblemAPI.getProblemWorksheet(token, chapterJid, problemAlias, language);
   };
 }
+
+export function refreshProblem({ shouldScrollToEditorial }) {
+  return async dispatch => {
+    await dispatch(RefreshChapterProblem({ refreshKey: Date.now(), shouldScrollToEditorial }));
+  };
+}

judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/ChapterProblemPage/ChapterProblemPage.jsx

@@ -37,12 +37,11 @@ export class ChapterProblemPage extends Component {
   async componentDidUpdate(prevProps) {
     if (
       this.props.statementLanguage !== prevProps.statementLanguage ||
-      this.props.chapterProblemRefreshKey !== prevProps.chapterProblemRefreshKey ||
+      this.props.refreshKey !== prevProps.refreshKey ||
       this.props.match.params.problemAlias !== prevProps.match.params.problemAlias
     ) {
       const shouldScrollToEditorial =
-        this.props.chapterProblemRefreshKey !== prevProps.chapterProblemRefreshKey &&
-        this.props.chapterProblemShouldScrollToEditorial;
+        this.props.refreshKey !== prevProps.refreshKey && this.props.shouldScrollToEditorial;
       await this.refreshProblem(shouldScrollToEditorial);
     }
   }
@@ -178,8 +177,8 @@ const mapStateToProps = state => ({
   course: selectCourse(state),
   chapter: selectCourseChapter(state),
   chapters: selectCourseChapters(state),
-  chapterProblemRefreshKey: selectChapterProblemRefreshKey(state),
-  chapterProblemShouldScrollToEditorial: selectChapterProblemShouldScrollToEditorial(state),
+  refreshKey: selectChapterProblemRefreshKey(state),
+  shouldScrollToEditorial: selectChapterProblemShouldScrollToEditorial(state),
   statementLanguage: selectStatementLanguage(state),
 });
 const mapDispatchToProps = {

judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/Programming/ChapterProblemWorkspacePage/ChapterProblemWorkspacePage.jsx

@@ -1,3 +1,4 @@
+import { Component } from 'react';
 import { connect } from 'react-redux';
 
 import { ProblemSubmissionCard } from '../../../../../../../../../../components/ProblemWorksheetCard/Programming/ProblemSubmissionCard/ProblemSubmissionCard.jsx';
@@ -8,26 +9,18 @@ import { getGradingLanguageFamily } from '../../../../../../../../../../modules/
 import { selectGradingLanguage } from '../../../../../../../../../../modules/webPrefs/webPrefsSelectors';
 import { selectCourse } from '../../../../../../../modules/courseSelectors';
 import { selectCourseChapter } from '../../../../../modules/courseChapterSelectors';
-import { RefreshChapterProblem } from '../../modules/chapterProblemReducer.js';
-import { selectChapterProblemShouldResetEditor } from '../../modules/chapterProblemSelectors.js';
 
 import * as webPrefsActions from '../../../../../../../../../../modules/webPrefs/webPrefsActions';
 import * as chapterProblemSubmissionActions from '../submissions/modules/chapterProblemSubmissionActions';
 
-function ChapterProblemWorkspacePage({
-  worksheet,
-  course,
-  chapter,
-  shouldResetEditor,
-  gradingLanguage,
-  onCreateSubmission,
-  onUpdateGradingLanguage,
-  onRefreshChapterProblem,
-}) {
-  const { submissionConfig, reasonNotAllowedToSubmit } = worksheet.worksheet;
-  const { problem, skeletons, lastSubmission, lastSubmissionSource } = worksheet;
+class ChapterProblemWorkspacePage extends Component {
+  state = {
+    shouldResetEditor: false,
+  };
 
-  const createSubmission = async data => {
+  createSubmission = async data => {
+    const { worksheet, course, chapter, onCreateSubmission, onUpdateGradingLanguage } = this.props;
+    const { problem } = worksheet;
     onUpdateGradingLanguage(data.gradingLanguage);
 
     sendGAEvent({ category: 'Courses', action: 'Submit course problem', label: course.name });
@@ -48,49 +41,60 @@ function ChapterProblemWorkspacePage({
     return await onCreateSubmission(course.slug, chapter.jid, chapter.alias, problem.problemJid, problem.alias, data);
   };
 
-  const resetEditor = () => {
+  resetEditor = () => {
     if (window.confirm('Are you sure to reset your code to the initial state?')) {
-      onRefreshChapterProblem({ refreshKey: new Date(), shouldResetEditor: true });
+      this.setState({ shouldResetEditor: null }, () => {
+        this.setState({ shouldResetEditor: true });
+      });
     }
   };
 
-  if (isOutputOnly(submissionConfig.gradingEngine)) {
+  render() {
+    const { gradingLanguage, worksheet } = this.props;
+    const { skeletons, lastSubmission, lastSubmissionSource } = worksheet;
+    const { submissionConfig, reasonNotAllowedToSubmit } = worksheet.worksheet;
+    const { shouldResetEditor } = this.state;
+
+    if (shouldResetEditor === null) {
+      return null;
+    }
+
+    if (isOutputOnly(submissionConfig.gradingEngine)) {
+      return (
+        <ProblemSubmissionCard
+          config={submissionConfig}
+          onSubmit={createSubmission}
+          reasonNotAllowedToSubmit={reasonNotAllowedToSubmit}
+          preferredGradingLanguage={gradingLanguage}
+        />
+      );
+    }
+
     return (
-      <ProblemSubmissionCard
+      <ProblemSubmissionEditor
+        skeletons={skeletons}
+        lastSubmission={lastSubmission}
+        lastSubmissionSource={lastSubmissionSource}
         config={submissionConfig}
-        onSubmit={createSubmission}
         reasonNotAllowedToSubmit={reasonNotAllowedToSubmit}
         preferredGradingLanguage={gradingLanguage}
+        shouldReset={shouldResetEditor}
+        onSubmit={this.createSubmission}
+        onReset={this.resetEditor}
       />
     );
   }
-
-  return (
-    <ProblemSubmissionEditor
-      shouldReset={shouldResetEditor}
-      onReset={resetEditor}
-      skeletons={skeletons}
-      lastSubmission={lastSubmission}
-      lastSubmissionSource={lastSubmissionSource}
-      config={submissionConfig}
-      onSubmit={createSubmission}
-      reasonNotAllowedToSubmit={reasonNotAllowedToSubmit}
-      preferredGradingLanguage={gradingLanguage}
-    />
-  );
 }
 
 const mapStateToProps = state => ({
   course: selectCourse(state),
   chapter: selectCourseChapter(state),
-  shouldResetEditor: selectChapterProblemShouldResetEditor(state),
   gradingLanguage: selectGradingLanguage(state),
 });
 
 const mapDispatchToProps = {
   onCreateSubmission: chapterProblemSubmissionActions.createSubmission,
   onUpdateGradingLanguage: webPrefsActions.updateGradingLanguage,
-  onRefreshChapterProblem: RefreshChapterProblem,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(ChapterProblemWorkspacePage);

judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/Programming/submissions/single/ChapterProblemSubmissionPage/ChapterProblemSubmissionPage.jsx

@@ -11,9 +11,9 @@ import { VerdictCode } from '../../../../../../../../../../../../modules/api/gab
 import { selectStatementLanguage } from '../../../../../../../../../../../../modules/webPrefs/webPrefsSelectors';
 import { selectCourse } from '../../../../../../../../../modules/courseSelectors';
 import { selectCourseChapter } from '../../../../../../../modules/courseChapterSelectors';
-import { RefreshChapterProblem } from '../../../../modules/chapterProblemReducer';
 
 import * as breadcrumbsActions from '../../../../../../../../../../../../modules/breadcrumbs/breadcrumbsActions';
+import * as chapterProblemActions from '../../../../../modules/chapterProblemActions';
 import * as chapterProblemSubmissionActions from '../../modules/chapterProblemSubmissionActions';
 
 export class ChapterProblemSubmissionPage extends Component {
@@ -81,8 +81,7 @@ export class ChapterProblemSubmissionPage extends Component {
     } else {
       if (this.currentTimeout) {
         clearTimeout(this.currentTimeout);
-        this.props.onRefreshChapterProblem({
-          refreshKey: Date.now(),
+        this.props.onRefreshProblem({
           shouldScrollToEditorial: verdictCode === VerdictCode.AC,
         });
       }
@@ -119,7 +118,7 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = {
-  onRefreshChapterProblem: RefreshChapterProblem,
+  onRefreshProblem: chapterProblemActions.refreshProblem,
   onGetSubmissionWithSource: chapterProblemSubmissionActions.getSubmissionWithSource,
   onGetSubmissionSourceImage: chapterProblemSubmissionActions.getSubmissionSourceImage,
   onPushBreadcrumb: breadcrumbsActions.pushBreadcrumb,

judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/modules/chapterProblemReducer.js

@@ -1,13 +1,12 @@
 export const initialState = {
   refreshKey: undefined,
   shouldScrollToEditorial: false,
-  shouldResetEditor: false,
 };
 
-export function RefreshChapterProblem({ refreshKey, shouldScrollToEditorial, shouldResetEditor }) {
+export function RefreshChapterProblem({ refreshKey, shouldScrollToEditorial }) {
   return {
     type: 'jerahmeel/chapterProblem/REFRESH',
-    payload: { refreshKey, shouldScrollToEditorial, shouldResetEditor },
+    payload: { refreshKey, shouldScrollToEditorial },
   };
 }
 

judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/modules/chapterProblemSelectors.js

@@ -5,7 +5,3 @@ export function selectChapterProblemRefreshKey(state) {
 export function selectChapterProblemShouldScrollToEditorial(state) {
   return state.jerahmeel.chapterProblem.shouldScrollToEditorial;
 }
-
-export function selectChapterProblemShouldResetEditor(state) {
-  return state.jerahmeel.chapterProblem.shouldResetEditor;
-}