Merge branch 'release' into main

src/constant/text.ts

@@ -26,7 +26,7 @@ export const STEPPER_NEXT = 'Next'
 export const STEPPER_BACK = 'Back'
 export const SIDEBAR_OVERVIEW = 'ภาพรวมเนื้อหา'
 export const SIDEBAR_EXAMINATION = 'การทดสอบ'
-export const SIDEBAR_RANKING = 'จัดลำดับคำแนน'
+export const SIDEBAR_RANKING = 'จัดลำดับคะแนน'
 export const SIDEBAR_LOGOUT = 'ออกจากระบบ'
 export const SIDEBAR_CLOSE = 'ปิดหน้าต่าง'
 

src/view-model/activity/ActivityViewModel.tsx

@@ -78,17 +78,19 @@ export default class ActivityViewModel implements IActivityViewModel {
       this.activityInfo = res;
       baseView?.onViewModelChanged()
       baseView?.props.appStore?.setPercent(70)
-      if (!res) return
+      if (!res || !this.baseView) return
       if (!baseView.props.learningStore!.store.roadMap) {
         const { content_id: contentId } = res.activity;
         baseView.props.learningStore!.FetchRoadmap(contentId, (res: RoadMap) => {
-          baseView.props.appStore?.setPercent(100)
+          if (!this.baseView) return;
+          console.log(this.baseView)
+          this.baseView.props.appStore?.setPercent(100)
           const stepper = generateStepper(res, this.getCurrentActivityOrder(res), true);
           stepper.onNext = this.moveNext;
           stepper.onPrev = this.movePrev;
-          baseView.props.appStore!.setStepper(stepper)
+          this.baseView.props.appStore!.setStepper(stepper)
         }, () => {
-          baseView.props.history.replace('/overview');
+          this.baseView?.props.history.replace('/overview');
           return;
         })
       } else {

src/view-model/exam/ExamViewModel.tsx

@@ -93,6 +93,7 @@ export default class ExamViewModel implements IExamViewModel {
       return;
     }
     baseView.props.examinationStore!.FetchExam(examId).then((res: Exam | null) => {
+      if (!this.baseView) return;
       if (!res) {
         baseView.props.history.replace('/examination/overview');
         return;

src/view-model/lecture/LectureViewModel.tsx

@@ -47,10 +47,11 @@ export default class LectureViewModel implements ILectureViewModel {
     baseView.props.appStore!.setStepper(generateEmptyStepper())
     baseView?.props.appStore!.setPercent(40)
     baseView.props.learningStore!.FetchRoadmap(contentID, (res : RoadMap) => {
-      baseView?.props.appStore?.addPercent(30);
+      if (!this.baseView) return;
+      this.baseView?.props.appStore?.addPercent(30);
       const stepper = generateStepper(res, 0, true);
       stepper.onNext = this.onClickNext;
-      baseView.props.appStore!.setStepper(stepper)
+      this.baseView.props.appStore!.setStepper(stepper)
     }, () => {
       baseView.props.history.replace('/overview');
       return;

src/view/activity/ActivityPage.tsx

@@ -104,6 +104,17 @@ class ActivityPage extends React.Component<ActivityProps, ActivityState>
     }
   }
 
+  /**
+   * On component will unmount, detach view.
+   * 
+   * @remarks
+   * This is a part of view component.
+   *
+   */
+  componentWillUnmount(): void {
+    this.activityViewModel.detachView();
+  }
+
   /**
    * On user request hint, show hint popups.
    * 

src/view/exam/ExamPage.tsx

@@ -101,6 +101,17 @@ class ExamPage
     this.examViewModel.attachView(this);
   }
 
+  /**
+   * On component will unmount, detach view.
+   * 
+   * @remarks
+   * This is a part of view component.
+   *
+   */
+   public componentWillUnmount () : void {
+    this.examViewModel.detachView();
+  }
+
   /**
    * On user's enter examination, generating all activity.
    * 

src/view/layout/app/Sidebar.tsx

@@ -131,13 +131,13 @@ class Sidebar extends React.Component <OverviewProps, SidebarState>{
           <SideItem className='z-10' isExpand={isExpand} text={SIDEBAR_LOGOUT} icon={<LogoutOutlined style={{ fontSize: 25 }}/>}  onClick={() => { this.showLogoutPopup();}} />
         </div>
       </div>
-      <div className='bg-primary md:hidden px-8 py-4 w-full'>
+      <div className={`bg-primary ${isMobileExpand ? 'hidden' : ''} md:hidden px-8 py-4 w-full`}>
         <div  className='my-auto text-white' >
         <MenuOutlined  style={{ fontSize: 40 }} onClick={()=>{this.setMobileExpand(!isMobileExpand);}}/>
         </div>
       </div>
-      <div className={`absolute ${isMobileExpand ? ' ' : 'hidden'} md:hidden top-0 h-screen bg-primary w-full transition-all z-50`} >
-        <div className={`cursor-pointer flex flex-none inline h-auto pb-7 mt-7 w-8/12 mx-auto ${isExpand ? '' : 'pl-3'} `} style={{borderBottom:'0.5px solid #BBBFC0', transition: "all 0.5s"}} onClick={() => { this.onClickPage('overview') }}>
+      <div className={`absolute ${isMobileExpand ? ' ' : 'hidden'} sticky md:hidden top-0 h-screen bg-primary w-full transition-all z-50`} >
+        <div className={`cursor-pointer flex flex-none inline h-auto pb-7 pt-7 w-8/12 mx-auto ${isExpand ? '' : 'pl-3'} `} style={{borderBottom:'0.5px solid #BBBFC0', transition: "all 0.5s"}} onClick={() => { this.onClickPage('overview') }}>
           <img src={HalfLeftLogo} alt="Logo" className='ml-auto w-auto h-16' />
           <img src={HalfRightLogo} alt="Logo" className='mr-auto w-auto h-14' style={{transition: "all 1s", opacity : isExpand ? 1 : 0, width : isExpand ? '' : ''}}/>
         </div>

src/view/lecture/LecturePage.tsx

@@ -81,6 +81,17 @@ class LecturePage extends React.Component<LectureProps, LectureComponentState>
     })
   }
 
+  /**
+   * On component will unmount, detach view.
+   * 
+   * @remarks
+   * This is a part of view component.
+   *
+   */
+  public componentWillUnmount () : void {
+    this.lectureViewModel.detachView();
+  }
+
   public render(): JSX.Element {
     const { lectureInfo } = this.state;
     const sourceInfo : SourceInfo | null = lectureInfo ? {