Merge pull request #178 from MEITREX/refetch-course-data

Refetch when navigate back

Author: c-neli-r

components/courses/student/StudentCourseLayout.tsx

@@ -118,18 +118,34 @@ export default function CourseLayout({
   const router = useRouter();
   const [error, setError] = useState<any>(null);
   const confirm = useConfirmation();
+  const [refreshKey, setRefreshKey] = useState(0);
 
   const pathname = usePathname();
   const noContentPaths = ["/quiz", "/media", "/quiz", "/submissions"];
   const hideContent = noContentPaths.some((path) => pathname?.includes(path));
 
   const data = useLazyLoadQuery<StudentCourseLayoutCourseIdQuery>(
     studentCourseIdQuery,
-    { id: courseId }
+    { id: courseId },
+    { fetchPolicy: "network-only", fetchKey: refreshKey }
   );
+
   const course = data.coursesByIds?.[0];
   const userId = data.currentUserInfo.id;
 
+  // Force a layout remount to refetch data when navigating back.
+  // In Next.js, layouts stay mounted between subpages, so their data requests aren't re-run.
+  // This simple refresh ensures updated data (e.g. course progress).
+  // The clean solution would be to move data fetching into the subpages,
+  // so data refetches automatically when those components are mounted.
+  useEffect(() => {
+    const chaptersPageRegex = /^\/courses\/[^\/]+(\/chapters)?$/;
+    const coursePageRegex = /^\/courses\/[^\/]+$/;
+    if (coursePageRegex.test(pathname) || chaptersPageRegex.test(pathname)) {
+      setRefreshKey((prev) => prev + 1);
+    }
+  }, [pathname]);
+
   const [leave] = useMutation<StudentCourseLayoutLeaveMutation>(graphql`
     mutation StudentCourseLayoutLeaveMutation($courseId: UUID!) {
       leaveCourse(courseId: $courseId) {