refactor: apply review feedback

apps/web/app/assets/svgs/index.ts

@@ -25,3 +25,4 @@ export { default as Phone } from "./phone.svg?react";
 export { default as FreeRight } from "./free-right.svg?react";
 export { default as Checkmark } from "./checkmark.svg?react";
 export { default as Flame } from "./flame.svg?react";
+export { default as NoData } from "./no-data.svg?react";

apps/web/app/components/Gravatar.tsx → apps/web/app/components/Gravatar/Gravatar.tsx

@@ -1,6 +1,8 @@
 import CryptoJS from "crypto-js";
 
-import { AvatarImage } from "./ui/avatar";
+import { AvatarImage } from "../ui/avatar";
+
+import { DEFAULT_GRAVATAR_HASH } from "./gravatar.const";
 
 type GravatarProps = {
   email: string | undefined;
@@ -9,9 +11,7 @@ type GravatarProps = {
 };
 
 export const Gravatar = ({ email, size = 200, className = "" }: GravatarProps) => {
-  const defaultGravatarHash = "27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109";
-
-  const hash = email ? CryptoJS.MD5(email.toLowerCase().trim()).toString() : defaultGravatarHash;
+  const hash = email ? CryptoJS.MD5(email.toLowerCase().trim()).toString() : DEFAULT_GRAVATAR_HASH;
   const gravatarUrl = `https://www.gravatar.com/avatar/${hash}?s=${size}&d=mp`;
 
   return (

apps/web/app/components/Gravatar/gravatar.const.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_GRAVATAR_HASH =
+  "27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109";

apps/web/app/components/Gravatar/index.ts

@@ -0,0 +1 @@
+export { Gravatar } from "./Gravatar";

apps/web/app/modules/Courses/Lesson/QuizSummaryModal.tsx

@@ -48,7 +48,7 @@ export const QuizSummaryModal = ({
               <Button variant="outline">Try Again</Button>
             </DialogTrigger>
             <DialogTrigger asChild>
-              <Link to={`/course/${courseId}/`}>
+              <Link to={`/course/${courseId}`}>
                 <Button className="w-full">Back to Course</Button>
               </Link>
             </DialogTrigger>

apps/web/app/modules/Courses/Lesson/Summary/index.tsx

@@ -23,11 +23,6 @@ export default function Summary({ lesson }: SummaryProps) {
 
   const lessonItemsSummary = getSummaryItems(lesson);
 
-  console.log({ lesson });
-  console.log({ lessonItemsSummary });
-  console.log({ lessonItemsCount });
-  console.log({ lessonItemsCompletedCount });
-
   return (
     <Card className="sr-only lg:not-sr-only rounded-none max-w-[383px] w-full flex flex-col grow border-none drop-shadow-primary">
       {isQuiz && <QuizSummary data={lesson} lessonId={lesson.id} courseId={courseId} />}

apps/web/app/modules/Statistics/Statistics.page.tsx

@@ -29,7 +29,7 @@ export default function StatisticsPage() {
       {
         state: "Started Courses",
         percentage: userStatistics?.averageStats.courseStats.started,
-        fill: "var(--primary-700)",
+        fill: "var(--primary-300)",
       },
     ],
     [
@@ -59,7 +59,7 @@ export default function StatisticsPage() {
       {
         state: "Wrong Answers",
         percentage: userStatistics?.quizzes.totalWrongAnswers,
-        fill: "var(--primary-700)",
+        fill: "var(--primary-300)",
       },
     ],
     [userStatistics?.quizzes.totalCorrectAnswers, userStatistics?.quizzes.totalWrongAnswers],

apps/web/app/modules/Statistics/components/ContinueLearningCard.tsx

@@ -1,3 +1,7 @@
+import { Link } from "@remix-run/react";
+
+import { Icon } from "~/components/Icon";
+import { Button } from "~/components/ui/button";
 import { Skeleton } from "~/components/ui/skeleton";
 import { useUserRole } from "~/hooks/useUserRole";
 import { LessonCard } from "~/modules/Courses/CourseView/LessonCard";
@@ -24,6 +28,22 @@ export const ContinueLearningCard = ({ isLoading = false, lesson }: ContinueLear
     );
   }
 
+  if (!lesson) {
+    return (
+      <div className="w-full h-full items-center justify-between flex-col md:gap-8 2xl:flex-col 2xl:gap-y-4 p-8 gap-y-4 bg-white rounded-lg drop-shadow-card 2xl:max-w-[296px] flex flex-col">
+        <div className="text-center md:w-fit 2xl:w-full">
+          <h2 className="body-lg-md text-neutral-950">
+            Currently don&apos;t have any enrolled lessons
+          </h2>
+        </div>
+        <Icon name="NoData" />
+        <Link to="/courses" className="w-full md:w-min 2xl:w-full">
+          <Button className="w-full">Search courses</Button>
+        </Link>
+      </div>
+    );
+  }
+
   return (
     <div className="w-full h-full md:flex-row md:gap-8 2xl:flex-col 2xl:gap-y-4 p-4 gap-y-4 bg-white rounded-lg drop-shadow-card 2xl:max-w-[296px] flex flex-col">
       <div className="text-center md:w-fit 2xl:w-full">
@@ -35,17 +55,15 @@ export const ContinueLearningCard = ({ isLoading = false, lesson }: ContinueLear
           {lesson?.courseDescription}
         </p>
       </div>
-      {lesson && (
-        <LessonCard
-          {...lesson}
-          customHref={`/course/${lesson.courseId}/lesson/${lesson.id}`}
-          isAdmin={isAdmin}
-          isEnrolled={!!lesson.enrolled}
-          itemsCount={lesson.itemsCount}
-          itemsCompletedCount={lesson.itemsCompletedCount}
-          index={1}
-        />
-      )}
+      <LessonCard
+        {...lesson}
+        customHref={`/course/${lesson.courseId}/lesson/${lesson.id}`}
+        isAdmin={isAdmin}
+        isEnrolled={!!lesson.enrolled}
+        itemsCount={lesson.itemsCount}
+        itemsCompletedCount={lesson.itemsCompletedCount}
+        index={1}
+      />
     </div>
   );
 };

apps/web/app/modules/Statistics/components/ProfileWithCalendar.tsx

@@ -1,3 +1,5 @@
+import { keys, pickBy } from "lodash-es";
+
 import { Gravatar } from "~/components/Gravatar";
 import { Icon } from "~/components/Icon";
 import { Avatar } from "~/components/ui/avatar";
@@ -79,7 +81,7 @@ export const ProfileWithCalendar = ({ user, isLoading = true, streak }: ProfileW
             showOutsideDays
             fixedWeeks
             weekStartsOn={1}
-            dates={Object.keys(streak?.activityHistory || {}) ?? []}
+            dates={keys(pickBy(streak?.activityHistory, Boolean))}
           />
         </div>
       </div>

apps/web/app/modules/Statistics/components/RatesChart.tsx

@@ -124,7 +124,7 @@ export const RatesChart = ({ isLoading = false, resourceName, chartData }: Rates
               axisLine={false}
               tickFormatter={(value) => value.slice(0, 3)}
             />
-            <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />} />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
             <Bar dataKey="completed" fill="var(--color-completed)" />
             <Bar dataKey="started" fill="var(--color-started)" />
           </BarChart>

apps/web/vite.config.ts

@@ -24,7 +24,7 @@ export default defineConfig(({ mode }) => {
           v3_fetcherPersist: true,
           v3_relativeSplatPath: true,
           v3_throwAbortReason: true,
-          unstable_singleFetch: true,
+          v3_singleFetch: true,
         },
         ssr: false, // SPA MODE - Might migrate to React Router 7
         routes,