fix(react): stale lesson data after navigation

Author: AriPerkkio

packages/react/src/Panels/WorkspacePanel.tsx

@@ -36,6 +36,12 @@ export function WorkspacePanel({ tutorialStore, theme }: Props) {
   const hasPreviews = tutorialStore.hasPreviews();
   const hideTerminalPanel = !tutorialStore.hasTerminalPanel();
 
+  /**
+   * Re-render when lesson changes. Some children are accessing non-reactive properties of store,
+   * so we need to re-render whole application in order to get those stale references updated.
+   */
+  useStore(tutorialStore.ref);
+
   const terminalPanelRef = useRef<ImperativePanelHandle>(null);
   const terminalExpanded = useRef(false);
 
@@ -89,6 +95,7 @@ function EditorSection({ theme, tutorialStore, hasEditor }: PanelProps) {
   const selectedFile = useStore(tutorialStore.selectedFile);
   const currentDocument = useStore(tutorialStore.currentDocument);
   const lessonFullyLoaded = useStore(tutorialStore.lessonFullyLoaded);
+  const storeRef = useStore(tutorialStore.ref);
 
   const lesson = tutorialStore.lesson!;
 
@@ -116,7 +123,7 @@ function EditorSection({ theme, tutorialStore, hasEditor }: PanelProps) {
     } else {
       setHelpAction('reset');
     }
-  }, [tutorialStore.ref]);
+  }, [storeRef]);
 
   return (
     <Panel
@@ -128,7 +135,7 @@ function EditorSection({ theme, tutorialStore, hasEditor }: PanelProps) {
       className="transition-theme bg-tk-elements-panel-backgroundColor text-tk-elements-panel-textColor"
     >
       <EditorPanel
-        id={tutorialStore.ref}
+        id={storeRef}
         theme={theme}
         showFileTree={tutorialStore.hasFileTree()}
         editorDocument={currentDocument}
@@ -157,6 +164,7 @@ function PreviewsSection({
   const previewRef = useRef<ImperativePreviewHandle>(null);
   const lesson = tutorialStore.lesson!;
   const terminalConfig = useStore(tutorialStore.terminalConfig);
+  const storeRef = useStore(tutorialStore.ref);
 
   function showTerminal() {
     const { current: terminal } = terminalPanelRef;
@@ -206,7 +214,7 @@ function PreviewsSection({
     });
 
     return () => unsubscribe();
-  }, [tutorialStore.ref]);
+  }, [storeRef]);
 
   return (
     <Panel

packages/runtime/src/store/index.ts

@@ -39,7 +39,7 @@ export class TutorialStore {
   private _lessonFilesFetcher: LessonFilesFetcher;
   private _lessonTask: Task<unknown> | undefined;
   private _lesson: Lesson | undefined;
-  private _ref: number = 1;
+  private _ref = atom(1);
   private _themeRef = atom(1);
 
   private _lessonFiles: Files | undefined;
@@ -135,7 +135,7 @@ export class TutorialStore {
 
     this._lessonTask?.cancel();
 
-    this._ref += 1;
+    this._ref.set(1 + (this._ref.value || 0));
     this._lesson = lesson;
     this.lessonFullyLoaded.set(false);
 
@@ -219,7 +219,7 @@ export class TutorialStore {
     return this._lesson;
   }
 
-  get ref(): unknown {
+  get ref(): ReadableAtom<unknown> {
     return this._ref;
   }