feat(client): reload chapters sidebar when submission graded

judgels-client/src/routes/courses/courses/single/CourseChaptersSidebar/CourseChaptersSidebar.jsx

@@ -10,6 +10,7 @@ import { ProgressTag } from '../../../../../components/ProgressTag/ProgressTag';
 import { ProgressBar } from '../../../../../components/ProgressBar/ProgressBar';
 import { selectCourse } from '../../modules/courseSelectors';
 import { PutCourseChapter } from '../chapters/modules/courseChapterReducer';
+import { selectChapterProblemRefreshKey } from '../chapters/single/problems/single/modules/chapterProblemSelectors';
 import * as courseChapterActions from '../chapters/modules/courseChapterActions';
 
 import './CourseChaptersSidebar.scss';
@@ -21,11 +22,19 @@ class CourseChaptersSidebar extends Component {
   };
 
   async componentDidMount() {
-    const response = await this.props.onGetChapters(this.props.course.jid);
-    this.setState({ response });
+    await this.refreshChapters();
+  }
+
+  async componentDidUpdate(prevProps) {
+    if (this.props.chapterProblemRefreshKey !== prevProps.chapterProblemRefreshKey) {
+      await this.refreshChapters();
+    }
   }
 
-  componentDidUpdate() {}
+  refreshChapters = async () => {
+    const response = await this.props.onGetChapters(this.props.course.jid);
+    this.setState({ response });
+  };
 
   render() {
     return (
@@ -176,6 +185,7 @@ class CourseChaptersSidebar extends Component {
 
 const mapStateToProps = state => ({
   course: selectCourse(state),
+  chapterProblemRefreshKey: selectChapterProblemRefreshKey(state),
 });
 
 const mapDispatchToProps = {

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

@@ -14,7 +14,7 @@ import { ProblemType } from '../../../../../../../../../modules/api/sandalphon/p
 import { selectCourse } from '../../../../../../modules/courseSelectors';
 import { selectCourseChapter } from '../../../../modules/courseChapterSelectors';
 import { selectCourseChapters } from '../../../../modules/courseChaptersSelectors';
-import { selectChapterProblemKey } from '../modules/chapterProblemSelectors';
+import { selectChapterProblemRefreshKey } from '../modules/chapterProblemSelectors';
 import { selectStatementLanguage } from '../../../../../../../../../modules/webPrefs/webPrefsSelectors';
 import * as chapterProblemActions from '../../modules/chapterProblemActions';
 import * as breadcrumbsActions from '../../../../../../../../../modules/breadcrumbs/breadcrumbsActions';
@@ -33,7 +33,7 @@ export class ChapterProblemPage extends Component {
   async componentDidUpdate(prevProps) {
     if (
       this.props.statementLanguage !== prevProps.statementLanguage ||
-      this.props.chapterProblemKey !== prevProps.chapterProblemKey ||
+      this.props.chapterProblemRefreshKey !== prevProps.chapterProblemRefreshKey ||
       this.props.match.params.problemAlias !== prevProps.match.params.problemAlias
     ) {
       await this.refreshProblem();
@@ -155,7 +155,7 @@ const mapStateToProps = state => ({
   course: selectCourse(state),
   chapter: selectCourseChapter(state),
   chapters: selectCourseChapters(state),
-  chapterProblemKey: selectChapterProblemKey(state),
+  chapterProblemRefreshKey: selectChapterProblemRefreshKey(state),
   statementLanguage: selectStatementLanguage(state),
 });
 const mapDispatchToProps = {

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

@@ -1,5 +1,5 @@
 export const initialState = {
-  value: undefined,
+  refreshKey: undefined,
 };
 
 export function RefreshChapterProblem(key) {
@@ -12,7 +12,7 @@ export function RefreshChapterProblem(key) {
 export default function chapterProblemReducer(state = initialState, action) {
   switch (action.type) {
     case 'jerahmeel/chapterProblem/REFRESH':
-      return { ...state, value: action.payload };
+      return { ...state, refreshKey: action.payload };
     default:
       return state;
   }

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

@@ -1,3 +1,3 @@
-export function selectChapterProblemKey(state) {
-  return state.jerahmeel.chapterProblem.value;
+export function selectChapterProblemRefreshKey(state) {
+  return state.jerahmeel.chapterProblem.refreshKey;
 }