feat(ui): new lesson card for tutors

apps/web/src/components/UpcomingLessons/Content.tsx

@@ -28,6 +28,8 @@ import { Button } from "@litespace/ui/Button";
 import { UNCANCELLABLE_LESSON_HOURS } from "@litespace/utils";
 import CloseCircle from "@litespace/assets/CloseCircle";
 import { ConfirmationDialog } from "@litespace/ui/ConfirmationDialog";
+import { useUserTopics } from "@litespace/headless/topic";
+
 type Lessons = ILesson.FindUserLessonsApiResponse["list"];
 
 export const Content: React.FC<{
@@ -46,7 +48,8 @@ export const Content: React.FC<{
   const toast = useToast();
   const { user } = useUser();
   const navigate = useNavigate();
-
+  const { query } = useUserTopics();
+  const userTopics = query.data;
   const [cancelLessonData, setCancelLessonData] = useState<{
     id: number | null;
     start: string | null;
@@ -65,6 +68,8 @@ export const Content: React.FC<{
   const [manageLessonData, setManageLessonData] =
     useState<ManageLessonPayload | null>(null);
 
+  console.log(userTopics);
+
   const onCancelSuccess = useCallback(() => {
     toast.success({ title: intl("cancel-lesson.success") });
     subscription.refetch();
@@ -140,8 +145,9 @@ export const Content: React.FC<{
 
   return (
     <div>
-      <div className="grid grid-cols-[repeat(auto-fill,minmax(265px,1fr))] gap-x-2 md:gap-x-3 gap-y-4 md:gap-y-6">
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(385px,1fr))] gap-x-2 md:gap-x-3 gap-y-4 md:gap-y-6">
         {list.map((item) => {
+          // console.log("list", item.lesson);
           const tutor = item.members.find(
             (member) =>
               member.role === IUser.Role.Tutor ||
@@ -153,6 +159,11 @@ export const Content: React.FC<{
           );
 
           if (!tutor || !otherMember) return null;
+
+          const userOfStudent = userTopics
+            ?.filter((t) => t.userId === otherMember.userId)
+            .map((t) => t.name.ar);
+          console.log(userOfStudent);
           return (
             <motion.div
               initial={{ opacity: 0 }}
@@ -209,6 +220,8 @@ export const Content: React.FC<{
                     otherMember.role === IUser.Role.Student
                       ? "student"
                       : "tutor",
+                  topics: userOfStudent,
+                  // level: "A1",
                 }}
                 sendingMessage={sendingMessageLessonId === item.lesson.id}
                 disabled={!!sendingMessageLessonId}

packages/ui/src/components/Lessons/LessonCard.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import LessonCard, { Props } from "@/components/Lessons/LessonCard";
 import dayjs from "@/lib/dayjs";
 import { faker } from "@faker-js/faker/locale/ar";
+import { range } from "lodash";
 
 const meta: Meta<Props> = {
   title: "Lessons/LessonCard",
@@ -30,6 +31,7 @@ export const BeforeJoinForStudent: Story = {
       name: faker.person.fullName(),
       image: url,
       role: "tutor",
+      topics: range(7).map(() => faker.lorem.words(1)),
     },
     ...actions,
   },
@@ -45,6 +47,8 @@ export const BeforeJoinForTutor: Story = {
       name: faker.person.fullName(),
       image: url,
       role: "student",
+      topics: range(7).map(() => faker.lorem.words(1)),
+      level: "C1",
     },
     ...actions,
   },
@@ -60,6 +64,8 @@ export const CanJoinLesson: Story = {
       name: faker.person.fullName(),
       image: url,
       role: "tutor",
+      topics: range(7).map(() => faker.lorem.words(1)),
+      level: "C1",
     },
     ...actions,
   },
@@ -75,6 +81,8 @@ export const CanJoinLessonNow: Story = {
       name: faker.person.fullName(),
       image: url,
       role: "tutor",
+      topics: range(7).map(() => faker.lorem.words(1)),
+      level: "C1",
     },
     ...actions,
   },
@@ -90,6 +98,8 @@ export const AfterLessonStarted: Story = {
       name: faker.person.fullName(),
       image: url,
       role: "tutor",
+      topics: range(7).map(() => faker.lorem.words(1)),
+      level: "C1",
     },
     ...actions,
   },
@@ -105,6 +115,8 @@ export const LessonAboutToEnd: Story = {
       name: faker.person.fullName(),
       image: url,
       role: "tutor",
+      topics: range(7).map(() => faker.lorem.words(1)),
+      level: "C1",
     },
     ...actions,
   },
@@ -120,6 +132,7 @@ export const AfterLessonFinishForStudent: Story = {
       name: faker.person.fullName(),
       image: url,
       role: "tutor",
+      topics: range(9).map(() => faker.lorem.words(1)),
     },
     ...actions,
   },
@@ -135,6 +148,8 @@ export const AfterLessonFinishForTutor: Story = {
       name: faker.person.fullName(),
       image: url,
       role: "student",
+      topics: range(7).map(() => faker.lorem.words(1)),
+      level: "C1",
     },
     ...actions,
   },
@@ -150,6 +165,8 @@ export const CanceledByTutor: Story = {
       name: faker.person.fullName(),
       image: url,
       role: "tutor",
+      topics: range(7).map(() => faker.lorem.words(1)),
+      level: "C1",
     },
     ...actions,
   },
@@ -165,6 +182,8 @@ export const CanceledByStudent: Story = {
       name: faker.person.fullName(),
       image: url,
       role: "student",
+      topics: range(7).map(() => faker.lorem.words(1)),
+      level: "C1",
     },
     ...actions,
   },
@@ -180,6 +199,8 @@ export const CanceledByCurrentTutor: Story = {
       name: faker.person.fullName(),
       image: url,
       role: "student",
+      topics: range(7).map(() => faker.lorem.words(1)),
+      level: "C1",
     },
     ...actions,
   },
@@ -195,6 +216,8 @@ export const CanceledByCurrentStudent: Story = {
       name: faker.person.fullName(),
       image: url,
       role: "tutor",
+      topics: range(7).map(() => faker.lorem.words(1)),
+      level: "C1",
     },
     ...actions,
   },