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/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

@@ -43,7 +43,7 @@ export default function StatisticsPage() {
       label: "Completed Courses",
       color: "var(--primary-700)",
     },
-    notCompleted: {
+    started: {
       label: "Started Courses",
       color: "var(--primary-300)",
     },
@@ -70,7 +70,7 @@ export default function StatisticsPage() {
       label: "Correct answers",
       color: "var(--primary-700)",
     },
-    notCompleted: {
+    started: {
       label: "Wrong answers",
       color: "var(--primary-300)",
     },

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/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>