From 6023948abacdf1b9edc24e29a0d7645a75feb073 Mon Sep 17 00:00:00 2001
From: Jakub Wilk <j.wilk@selleo.com>
Date: Fri, 10 Jan 2025 09:35:58 +0100
Subject: [PATCH] fix: update lesson sidebar to use lessonId and fetch course
 data dynamically (#353)

* fix: update lesson sidebar to use lessonId and fetch course data dynamically

* fix: pass handleNext prop to Quiz component for improved navigation after quiz submission
---
 apps/web/app/entry.client.tsx                 |  1 -
 .../modules/Courses/Lesson/Lesson.page.tsx    |  2 +-
 .../modules/Courses/Lesson/LessonContent.tsx  |  2 +-
 .../modules/Courses/Lesson/LessonSidebar.tsx  | 45 ++++++++++++-------
 apps/web/app/modules/Courses/Lesson/Quiz.tsx  | 12 +++--
 apps/web/app/modules/Global/Providers.tsx     | 32 ++++++++++++-
 apps/web/package.json                         |  2 +-
 pnpm-lock.yaml                                | 20 ++++-----
 8 files changed, 79 insertions(+), 37 deletions(-)

diff --git a/apps/web/app/entry.client.tsx b/apps/web/app/entry.client.tsx
index 886dedab5..0b58e8073 100644
--- a/apps/web/app/entry.client.tsx
+++ b/apps/web/app/entry.client.tsx
@@ -32,7 +32,6 @@ Sentry.init({
   tracesSampleRate: 1.0,
   replaysSessionSampleRate: 0.1,
   replaysOnErrorSampleRate: 1.0,
-
   environment: import.meta.env.MODE,
   beforeSend(event) {
     if (import.meta.env.DEV) {
diff --git a/apps/web/app/modules/Courses/Lesson/Lesson.page.tsx b/apps/web/app/modules/Courses/Lesson/Lesson.page.tsx
index ed901baae..92401cbdf 100644
--- a/apps/web/app/modules/Courses/Lesson/Lesson.page.tsx
+++ b/apps/web/app/modules/Courses/Lesson/Lesson.page.tsx
@@ -119,7 +119,7 @@ export default function LessonPage() {
             isLastLesson={isLast}
           />
         </div>
-        <LessonSidebar course={course} courseId={courseId} />
+        <LessonSidebar courseId={courseId} lessonId={lessonId} />
       </div>
     </PageWrapper>
   );
diff --git a/apps/web/app/modules/Courses/Lesson/LessonContent.tsx b/apps/web/app/modules/Courses/Lesson/LessonContent.tsx
index acde60086..30d8c52ee 100644
--- a/apps/web/app/modules/Courses/Lesson/LessonContent.tsx
+++ b/apps/web/app/modules/Courses/Lesson/LessonContent.tsx
@@ -42,7 +42,7 @@ export const LessonContent = ({
   const Content = () =>
     match(lesson.type)
       .with("text", () => <Viewer variant="lesson" content={lesson?.description ?? ""} />)
-      .with("quiz", () => <Quiz lesson={lesson} />)
+      .with("quiz", () => <Quiz lesson={lesson} handleNext={handleNext} />)
       .with("video", () => (
         <Video
           url={lesson.fileUrl}
diff --git a/apps/web/app/modules/Courses/Lesson/LessonSidebar.tsx b/apps/web/app/modules/Courses/Lesson/LessonSidebar.tsx
index 5d36813a6..2b891a28e 100644
--- a/apps/web/app/modules/Courses/Lesson/LessonSidebar.tsx
+++ b/apps/web/app/modules/Courses/Lesson/LessonSidebar.tsx
@@ -1,10 +1,8 @@
-// TODO: Need to be fixed
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import { Link, useLocation } from "@remix-run/react";
-import { startCase } from "lodash-es";
+import { last, startCase } from "lodash-es";
 import { useEffect, useState } from "react";
 
+import { useCourse } from "~/api/queries";
 import CourseProgress from "~/components/CourseProgress";
 import { Icon } from "~/components/Icon";
 import {
@@ -18,11 +16,9 @@ import { CategoryChip } from "~/components/ui/CategoryChip";
 import { cn } from "~/lib/utils";
 import { LessonTypesIcons } from "~/modules/Courses/CourseView/lessonTypes";
 
-import type { GetCourseResponse } from "~/api/generated-api";
-
 type LessonSidebarProps = {
-  course: GetCourseResponse["data"];
   courseId: string;
+  lessonId: string;
 };
 
 const progressBadge = {
@@ -31,7 +27,9 @@ const progressBadge = {
   not_started: "NotStartedRounded",
 } as const;
 
-export const LessonSidebar = ({ course, courseId }: LessonSidebarProps) => {
+export const LessonSidebar = ({ courseId, lessonId }: LessonSidebarProps) => {
+  const { data: course } = useCourse(courseId);
+
   const { state } = useLocation();
   const [activeChapter, setActiveChapter] = useState<string | undefined>(state?.chapterId);
 
@@ -43,6 +41,8 @@ export const LessonSidebar = ({ course, courseId }: LessonSidebarProps) => {
     setActiveChapter(value);
   };
 
+  if (!course) return null;
+
   return (
     <div className="w-full bg-white h-full rounded-lg">
       <div className="flex flex-col gap-y-12">
@@ -57,7 +57,7 @@ export const LessonSidebar = ({ course, courseId }: LessonSidebarProps) => {
             courseLessonCount={course.courseChapterCount ?? 0}
           />
         </div>
-        <div className="flex flex-col px-4 gap-y-4">
+        <div className="flex flex-col px-4 gap-y-4 pb-4">
           <p className="px-4 body-lg-md text-neutral-950">Table of content:</p>
           <div className="flex flex-col">
             <Accordion
@@ -69,7 +69,15 @@ export const LessonSidebar = ({ course, courseId }: LessonSidebarProps) => {
               {course?.chapters?.map(({ id, title, lessons, chapterProgress }) => {
                 return (
                   <AccordionItem value={id} key={id}>
-                    <AccordionTrigger className="flex hover:bg-neutral-50 gap-x-4 px-6 py-4 text-start [&[data-state=open]>div>div>svg]:rotate-180 [&[data-state=open]>div>div>svg]:duration-200 [&[data-state=open]]:border-t [&[data-state=open]]:border-x [&[data-state=open]>div>div>svg]:ease-out data-[state=closed]:rounded-lg data-[state=open]:rounded-t-lg">
+                    <AccordionTrigger
+                      className={cn(
+                        "flex hover:bg-neutral-50 gap-x-4 px-6 py-4 text-start border border-neutral-200 [&[data-state=open]>div>div>svg]:rotate-180 [&[data-state=open]>div>div>svg]:duration-200 [&[data-state=open]>div>div>svg]:ease-out data-[state=closed]:border-t-transparent data-[state=closed]:border-x-transparent data-[state=closed]:rounded-none data-[state=open]:rounded-t-lg",
+                        {
+                          "data-[state=closed]:border-b-0":
+                            last(course?.chapters)?.id === id || activeChapter !== id,
+                        },
+                      )}
+                    >
                       <Badge
                         variant="icon"
                         icon={progressBadge[chapterProgress ?? "not_started"]}
@@ -78,21 +86,27 @@ export const LessonSidebar = ({ course, courseId }: LessonSidebarProps) => {
                       <div className="body-base-md text-neutral-950 text-start w-full">{title}</div>
                       <Icon name="CarretDownLarge" className="size-6 text-primary-700" />
                     </AccordionTrigger>
-                    <AccordionContent className="flex flex-col divide-y border-b">
+                    <AccordionContent className="flex flex-col border border-t-0 rounded-b-lg">
                       {lessons?.map(({ id, title, status, type }) => {
                         return (
                           <Link
                             key={id}
                             to={status === "completed" ? `/course/${courseId}/lesson/${id}` : "#"}
-                            className={cn("flex gap-x-4 py-2 px-6 border-x hover:bg-neutral-50", {
-                              "bg-primary-50 border-l-2 border-l-primary-600":
-                                status === "completed",
+                            className={cn("flex gap-x-4 py-2 px-6 hover:bg-neutral-50", {
                               "cursor-not-allowed": status === "not_started",
+                              "bg-primary-50 border-l-2 border-l-primary-600 last:rounded-es-lg":
+                                lessonId === id,
                             })}
                           >
                             <Badge
                               variant="icon"
-                              icon={progressBadge[status ?? "not_started"]}
+                              icon={
+                                progressBadge[
+                                  id === lessonId && status === "not_started"
+                                    ? "in_progress"
+                                    : status
+                                ]
+                              }
                               iconClasses="w-6 h-auto shrink-0"
                             />{" "}
                             <div className="flex flex-col w-full">
@@ -100,6 +114,7 @@ export const LessonSidebar = ({ course, courseId }: LessonSidebarProps) => {
                               <p className="details text-neutral-800">{startCase(type)}</p>
                             </div>
                             <Icon
+                              // @ts-expect-error - TODO: do we need the 'file' type?
                               name={LessonTypesIcons[type]}
                               className="size-6 text-primary-700"
                             />
diff --git a/apps/web/app/modules/Courses/Lesson/Quiz.tsx b/apps/web/app/modules/Courses/Lesson/Quiz.tsx
index ee60ae150..5341bfc47 100644
--- a/apps/web/app/modules/Courses/Lesson/Quiz.tsx
+++ b/apps/web/app/modules/Courses/Lesson/Quiz.tsx
@@ -1,4 +1,4 @@
-import { useNavigate, useParams } from "@remix-run/react";
+import { useParams } from "@remix-run/react";
 import { FormProvider, useForm } from "react-hook-form";
 
 import { useSubmitQuiz } from "~/api/mutations";
@@ -12,6 +12,7 @@ import type { TQuestionsForm } from "~/modules/Courses/Lesson/types";
 
 type QuizProps = {
   lesson: GetLessonByIdResponse["data"];
+  handleNext: () => void;
 };
 
 function transformData(input: TQuestionsForm) {
@@ -178,9 +179,8 @@ function transformData(input: TQuestionsForm) {
   return result;
 }
 
-export const Quiz = ({ lesson }: QuizProps) => {
-  const { lessonId = "", courseId = "" } = useParams();
-  const navigate = useNavigate();
+export const Quiz = ({ lesson, handleNext }: QuizProps) => {
+  const { lessonId = "" } = useParams();
 
   const questions = lesson.quizDetails?.questions;
 
@@ -190,9 +190,7 @@ export const Quiz = ({ lesson }: QuizProps) => {
   });
 
   const submitQuiz = useSubmitQuiz({
-    handleOnSuccess: () => {
-      navigate(`/course/${courseId}/lesson/${lesson.nextLessonId}`);
-    },
+    handleOnSuccess: handleNext,
   });
 
   if (!questions?.length) return null;
diff --git a/apps/web/app/modules/Global/Providers.tsx b/apps/web/app/modules/Global/Providers.tsx
index 586f24996..472bf11a4 100644
--- a/apps/web/app/modules/Global/Providers.tsx
+++ b/apps/web/app/modules/Global/Providers.tsx
@@ -1,12 +1,42 @@
 import { QueryClientProvider } from "@tanstack/react-query";
+import { lazy, Suspense, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 
 import { queryClient } from "../../api/queryClient";
 import { ThemeProvider } from "../Theme/ThemeProvider";
 
+const ReactQueryDevtools = lazy(() =>
+  import("@tanstack/react-query-devtools").then(({ ReactQueryDevtools }) => ({
+    default: ReactQueryDevtools,
+  })),
+);
+
 export function Providers({ children }: { children: React.ReactNode }) {
+  const [mounted, setMounted] = useState(false);
+
+  /*
+   * awful hack but this is the only way (I found) to make react-query devtools work in our remix
+   */
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   return (
     <ThemeProvider>
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      <QueryClientProvider client={queryClient}>
+        {children}
+
+        {mounted && process.env.NODE_ENV === "development" && (
+          <>
+            {createPortal(
+              <Suspense fallback={null}>
+                <ReactQueryDevtools initialIsOpen={false} />
+              </Suspense>,
+              document.body,
+            )}
+          </>
+        )}
+      </QueryClientProvider>
     </ThemeProvider>
   );
 }
diff --git a/apps/web/package.json b/apps/web/package.json
index 89dde5663..86e966138 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -50,7 +50,7 @@
     "@stripe/react-stripe-js": "2.8.0",
     "@stripe/stripe-js": "4.6.0",
     "@tanstack/react-query": "5.40.1",
-    "@tanstack/react-query-devtools": "5",
+    "@tanstack/react-query-devtools": "5.40.1",
     "@tanstack/react-table": "8.20.1",
     "@tiptap/extension-color": "2.10.3",
     "@tiptap/extension-document": "2.10.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e90f564aa..08e075190 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -402,8 +402,8 @@ importers:
         specifier: 5.40.1
         version: 5.40.1(react@18.3.1)
       '@tanstack/react-query-devtools':
-        specifier: '5'
-        version: 5.61.5(@tanstack/react-query@5.40.1(react@18.3.1))(react@18.3.1)
+        specifier: 5.40.1
+        version: 5.40.1(@tanstack/react-query@5.40.1(react@18.3.1))(react@18.3.1)
       '@tanstack/react-table':
         specifier: 8.20.1
         version: 8.20.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -4298,13 +4298,13 @@ packages:
   '@tanstack/query-core@5.40.0':
     resolution: {integrity: sha512-eD8K8jsOIq0Z5u/QbvOmfvKKE/XC39jA7yv4hgpl/1SRiU+J8QCIwgM/mEHuunQsL87dcvnHqSVLmf9pD4CiaA==}
 
-  '@tanstack/query-devtools@5.61.4':
-    resolution: {integrity: sha512-21Tw+u8E3IJJj4A/Bct4H0uBaDTEu7zBrR79FeSyY+mS2gx5/m316oDtJiKkILc819VSTYt+sFzODoJNcpPqZQ==}
+  '@tanstack/query-devtools@5.37.1':
+    resolution: {integrity: sha512-XcG4IIHIv0YQKrexTqo2zogQWR1Sz672tX2KsfE9kzB+9zhx44vRKH5si4WDILE1PIWQpStFs/NnrDQrBAUQpg==}
 
-  '@tanstack/react-query-devtools@5.61.5':
-    resolution: {integrity: sha512-P2DwlKyoGar6FX2XL324gM7AX8fuXm6DecLvfUoGpWbxtbuAtfzglRiCDLKkc5tJ7pekuaZsFFas/cyfTymoCQ==}
+  '@tanstack/react-query-devtools@5.40.1':
+    resolution: {integrity: sha512-/AN2UsbuL+28/KSlBkVHq/4chHTEp4l2UWTKWixXbn4pprLQrZGmQTAKN4tYxZDuNwNZY5+Zp67pDfXj+F/UBA==}
     peerDependencies:
-      '@tanstack/react-query': ^5.61.5
+      '@tanstack/react-query': ^5.40.1
       react: ^18 || ^19
 
   '@tanstack/react-query@5.40.1':
@@ -15930,11 +15930,11 @@ snapshots:
 
   '@tanstack/query-core@5.40.0': {}
 
-  '@tanstack/query-devtools@5.61.4': {}
+  '@tanstack/query-devtools@5.37.1': {}
 
-  '@tanstack/react-query-devtools@5.61.5(@tanstack/react-query@5.40.1(react@18.3.1))(react@18.3.1)':
+  '@tanstack/react-query-devtools@5.40.1(@tanstack/react-query@5.40.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@tanstack/query-devtools': 5.61.4
+      '@tanstack/query-devtools': 5.37.1
       '@tanstack/react-query': 5.40.1(react@18.3.1)
       react: 18.3.1