refactor(nova): improved ratings tabs implementation

litespace-org · Dec 17, 2024 · cdcf7a6 · cdcf7a6
1 parent b91301f
commit cdcf7a6
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 87 deletions.
diff --git a/apps/nova/src/components/TutorProfile/Ratings.tsx b/apps/nova/src/components/TutorProfile/Ratings.tsx
@@ -1,7 +1,7 @@
 import { useFindTutorRatings } from "@litespace/headless/rating";
 import React, { useCallback } from "react";
 import { LoadingTutorInfo } from "@/components/TutorProfile/LoadingTutorInfo";
-import { ratingOrganizer } from "@/lib/ratings";
+import { organizeRatings } from "@/lib/ratings";
 import { useUser } from "@litespace/headless/context/user";
 import {
   TutorRatingCard,
@@ -20,12 +20,12 @@ const NoTutorRatings: React.FC<{ tutorName: string | null }> = ({
 }) => {
   const intl = useFormatMessage();
   return (
-    <div className="flex flex-col mt-20 gap-14 items-center justify-center">
+    <div className="flex flex-col my-20 gap-14 items-center justify-center">
       <NewTutor />
       <Typography
         element="h4"
         weight="bold"
-        className="text-natural-950 text-center mb-20"
+        className="text-natural-950 text-center"
       >
         {intl("tutor.profile.first-rating", { tutor: tutorName })}
       </Typography>
@@ -51,7 +51,7 @@ const Ratings: React.FC<{ id: number; tutorName: string | null }> = ({
   if (ratingsQuery.error || !user)
     return <TutorLoadingError refetchRatings={refetchRatings} />;
 
-  const ratings = ratingOrganizer(ratingsQuery.data.list, user.id);
+  const ratings = organizeRatings(ratingsQuery.data.list, user.id);
 
   return (
     <div className="flex my-8 mx-10 gap-4 flex-wrap justify-center">
@@ -85,13 +85,22 @@ const Ratings: React.FC<{ id: number; tutorName: string | null }> = ({
       })}
 
       <div className="flex gap-10 flex-col items-center justify-center mt-10">
-        <Typography
-          element="subtitle-1"
-          weight="medium"
-          className="text-natural-950 w-2/3 text-center"
-        >
-          {intl("tutor.profile.your-ratings-help")}
-        </Typography>
+        <div>
+          <Typography
+            element="subtitle-1"
+            weight="medium"
+            className="text-natural-950 text-center"
+          >
+            {intl("tutor.profile.your-ratings-help")}
+          </Typography>
+          <Typography
+            element="subtitle-1"
+            weight="medium"
+            className="text-natural-950 text-center"
+          >
+            {intl("tutor.profile.we-care-about-ratings")}
+          </Typography>
+        </div>
         <Button
           size={ButtonSize.Small}
           className="w-[386px] flex items-center gap-2"

diff --git a/apps/nova/src/components/TutorProfile/TutorTabs.tsx b/apps/nova/src/components/TutorProfile/TutorTabs.tsx
@@ -6,8 +6,8 @@ import React, { useMemo, useState } from "react";
 import { LocalId } from "@litespace/luna/locales";
 import cn from "classnames";
 import { AnimatePresence, motion } from "framer-motion";
-import ProfileInfo from "./ProfileInfo";
-import Ratings from "./Ratings";
+import ProfileInfo from "@/components/TutorProfile/ProfileInfo";
+import Ratings from "@/components/TutorProfile/Ratings";
 
 type Tab = "profile" | "ratings";
 
@@ -60,68 +60,67 @@ export const TutorTabs: React.FC<{
   }, []);
 
   return (
-    <div className="mt-12">
-      <Tabs.Root
-        value={tab}
-        onValueChange={(value: string) => setTab(value as Tab)}
-      >
-        <Tabs.List className="border-b border-natural-300 flex gap-[56px] ">
-          {tabs.map(({ value, label }) => (
-            <Tabs.Trigger
-              key={value}
-              value={value}
-              className={cn("py-2 relative")}
+    <Tabs.Root
+      className="mt-12"
+      value={tab}
+      onValueChange={(value: string) => setTab(value as Tab)}
+    >
+      <Tabs.List className="border-b border-natural-300 flex gap-[56px] ">
+        {tabs.map(({ value, label }) => (
+          <Tabs.Trigger
+            key={value}
+            value={value}
+            className={cn("py-2 relative")}
+          >
+            <Typography
+              element="body"
+              weight="semibold"
+              className={cn(
+                "transition-colors duration-300",
+                value === tab ? "text-brand-700" : "text-natural-500"
+              )}
             >
-              <Typography
-                element="body"
-                weight="semibold"
-                className={cn(
-                  "transition-colors duration-300",
-                  value === tab ? "text-brand-700" : "text-natural-500"
-                )}
-              >
-                {intl(label)}
-              </Typography>
-              <AnimatePresence>
-                {tab === value ? (
-                  <motion.div
-                    initial={{ opacity: 0 }}
-                    animate={{
-                      opacity: 1,
-                      transition: {
-                        duration: 0.3,
-                      },
-                    }}
-                    exit={{ opacity: 0 }}
-                    className="absolute -bottom-[1px] left-0 w-full h-[3px] bg-brand-700 rounded-t-[10px]"
-                  />
-                ) : null}
-              </AnimatePresence>
-            </Tabs.Trigger>
-          ))}
-        </Tabs.List>
-
-        <div className="mt-8">
-          <AnimatePresence initial={false} mode="wait">
-            {tab === "profile" ? (
-              <Animate key="profile" tab="profile">
-                <ProfileInfo
-                  about={tutor.about}
-                  topics={tutor.topics}
-                  video={tutor.video}
+              {intl(label)}
+            </Typography>
+            <AnimatePresence>
+              {tab === value ? (
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{
+                    opacity: 1,
+                    transition: {
+                      duration: 0.3,
+                    },
+                  }}
+                  exit={{ opacity: 0 }}
+                  className="absolute -bottom-[1px] left-0 w-full h-[3px] bg-brand-700 rounded-t-[10px]"
                 />
-              </Animate>
-            ) : null}
-            {tab === "ratings" ? (
-              <Animate key="ratings" tab="ratings">
-                <div className="min-h-96">
-                  <Ratings tutorName={tutor.name} id={tutor.id} />
-                </div>
-              </Animate>
-            ) : null}
-          </AnimatePresence>
-        </div>
-      </Tabs.Root>
-    </div>
+              ) : null}
+            </AnimatePresence>
+          </Tabs.Trigger>
+        ))}
+      </Tabs.List>
+
+      <div className="mt-8">
+        <AnimatePresence initial={false} mode="wait">
+          {tab === "profile" ? (
+            <Animate key="profile" tab="profile">
+              <ProfileInfo
+                about={tutor.about}
+                topics={tutor.topics}
+                video={tutor.video}
+              />
+            </Animate>
+          ) : null}
+          {tab === "ratings" ? (
+            <Animate key="ratings" tab="ratings">
+              <div className="min-h-96">
+                <Ratings tutorName={tutor.name} id={tutor.id} />
+              </div>
+            </Animate>
+          ) : null}
+        </AnimatePresence>
+      </div>
+    </Tabs.Root>
   );
 };
diff --git a/apps/nova/src/lib/ratings.ts b/apps/nova/src/lib/ratings.ts
@@ -1,21 +1,14 @@
 import { IRating } from "@litespace/types";
+import { TutorRatingCardGroupProps } from "@litespace/luna/TutorFeedback";
 
-export const ratingOrganizer = (
+export const organizeRatings = (
   ratings: IRating.FindTutorRatingsApiResponse["list"],
   currentUserId: number
 ) => {
   let currentUserRating: IRating.RateeRatings | undefined;
   const ratingsWithFeedback: IRating.RateeRatings[] = [];
-  const ratingsWithoutFeedback: {
-    ratings: Array<{
-      name: string | null;
-
-      userId: number;
-
-      imageUrl: string | null;
-    }>;
-    value: number;
-  }[] = [];
+  const ratingsWithoutFeedback: Omit<TutorRatingCardGroupProps, "tutorName">[] =
+    [];
 
   ratings.forEach((rating) => {
     if (rating.userId === currentUserId) {

diff --git a/packages/luna/src/components/TutorFeedback/index.ts b/packages/luna/src/components/TutorFeedback/index.ts
@@ -2,3 +2,4 @@ export { TutorRatingCard } from "@/components/TutorFeedback/TutorRatingCard";
 export { EditRating } from "@/components/TutorFeedback/EditRating";
 export { DeleteRating } from "@/components/TutorFeedback/DeleteRating";
 export { TutorRatingCardGroup } from "@/components/TutorFeedback/TutorRatingCardGroup";
+export { type TutorRatingCardGroupProps } from "@/components/TutorFeedback/types";
diff --git a/packages/luna/src/locales/ar-eg.json b/packages/luna/src/locales/ar-eg.json
@@ -77,7 +77,8 @@
   "tutor.profile.tabs.reviews": "الأراء",
   "tutor.profile.loading": "برجاء الانتظار... نحضر لك معلومات المعلم!",
   "tutor.profile.rate-tutor": "قيم المعلم",
-  "tutor.profile.your-ratings-help": "آراؤك تساهم في تحسين طريقة تدريس معلمينا، ونحن نحرص على  استخدامها لتقديم تجربة تعليمية أفضل",
+  "tutor.profile.your-ratings-help": "آراؤك تساهم في تحسين طريقة تدريس معلمينا،",
+  "tutor.profile.we-care-about-ratings": " ونحن نحرص على استخدامها لتقديم تجربة تعليمية أفضل",
   "tutor.profile.first-rating": " كن من أوائل الطلاب الذين يكتشفون إمكانيات {tutor} المتميز! اغتنم الفرصة الآن قبل أن يصبح جدوله ممتلئًا!",
   "tutor.profile.error": " عذرًا، حدث خطأ أثناء تحميل المحتوى. برجاء المحاولة مرة أخرى",
   "tutor.profile.retry": "حاول مرة أخرى",
@@ -679,4 +680,4 @@
   "error.password.short": "رقم سري قصير",
   "error.password.long": "رقم سري طويل",
   "error.password.invalid": "يجب أن يحتوي علي أرقام، حروف ، رموز"
-}
+}