feat: display rating on group card (#121)

* feat: display rating on group card * fix: typecheck
Solvro · Jan 2, 2025 · 86aa0fa · 86aa0fa
1 parent e607df5
commit 86aa0fa
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 3 deletions.
diff --git a/frontend/src/app/plans/edit/[id]/page.client.tsx b/frontend/src/app/plans/edit/[id]/page.client.tsx
@@ -237,7 +237,6 @@ export function CreateNewPlanPage({
       </div>
     );
   }
-
   return (
     <div className="flex w-full flex-1 flex-col items-center justify-center gap-5 py-3 md:flex-row md:items-start">
       <div className="flex max-h-screen w-full flex-none flex-col items-center justify-center gap-2 px-2 md:ml-4 md:w-[350px] md:flex-col">
@@ -399,6 +398,8 @@ export function CreateNewPlanPage({
                                   .split(":")
                                   .slice(0, 2)
                                   .join(":"),
+                                spotsOccupied: g.spotsOccupied,
+                                spotsTotal: g.spotsTotal,
                               }) satisfies ExtendedGroup,
                           ),
                         }))

diff --git a/frontend/src/components/class-block-stars.tsx b/frontend/src/components/class-block-stars.tsx
@@ -0,0 +1,39 @@
+import { StarHalfIcon, StarIcon } from "lucide-react";
+
+function customRound(rating: number): number {
+  const integerPart = Math.floor(rating);
+  const decimalPart = rating - integerPart;
+
+  if (decimalPart > 0.7) {
+    return integerPart + 1;
+  } else if (decimalPart >= 0.3) {
+    return integerPart + 0.5;
+  } else {
+    return integerPart;
+  }
+}
+
+export function StarsRating({ rating }: { rating: number }) {
+  const roundedRating = customRound(rating);
+  const fullPoints = Math.floor(roundedRating);
+  const isHalfPoint = roundedRating % 1 === 0.5;
+  return (
+    <div className="flex gap-1">
+      {Array.from({ length: fullPoints }).map((_, index) => {
+        return (
+          <StarIcon
+            fill="#9e881c"
+            color="#9e881c"
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            width={10}
+            height={10}
+          />
+        );
+      })}
+      {isHalfPoint ? (
+        <StarHalfIcon fill="#9e881c" color="#9e881c" width={10} height={10} />
+      ) : null}
+    </div>
+  );
+}
diff --git a/frontend/src/components/class-block.tsx b/frontend/src/components/class-block.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 
+import { StarsRating } from "@/components/class-block-stars";
 import { cn } from "@/lib/utils";
 
 export const typeClasses = {
@@ -34,6 +35,8 @@ export function ClassBlock({
   courseType,
   isChecked,
   isDisabled,
+  spotsOccupied,
+  spotsTotal,
   onClick,
   isReadonly = false,
 }: {
@@ -47,11 +50,13 @@ export function ClassBlock({
   isChecked: boolean;
   isDisabled: boolean;
   isReadonly?: boolean;
+  spotsOccupied: number;
+  spotsTotal: number;
   onClick: () => void;
 }) {
   const position = calculatePosition(startTime, endTime);
   const [startGrid, durationSpan] = position;
-
+  const randomRating = Math.random() * 5;
   return (
     <button
       suppressHydrationWarning={true}
@@ -74,11 +79,26 @@ export function ClassBlock({
       )}
     >
       <div className="flex w-full justify-between">
-        <p>{`${courseType} ${week === "" ? "" : `|${week}`}`}</p>
+        <div className="flex gap-1">
+          <p>{`${courseType} ${week === "" ? "" : `|${week}`}`}</p>
+          <StarsRating rating={randomRating} />
+        </div>
         <p>{`Grupa ${groupNumber}`}</p>
       </div>
       <p className="truncate font-bold">{courseName}</p>
       <p className="truncate font-semibold">{lecturer}</p>
+      <p className="mt-2 flex w-full justify-between truncate">
+        Miejsca:
+        <span className="font-bold">
+          {spotsOccupied}/{spotsTotal}
+        </span>
+      </p>
+      <p className="flex w-full justify-between truncate">
+        Średnia ocena:
+        <span className="font-bold">
+          {randomRating.toFixed(1)} (1200 opinii)
+        </span>
+      </p>
     </button>
   );
 }
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
@@ -13,6 +13,8 @@ export interface ClassBlockProps {
   week: "" | "TN" | "TP";
   courseType: "C" | "L" | "P" | "S" | "W";
   registrationId: string;
+  spotsOccupied: number;
+  spotsTotal: number;
 }
 
 export interface Registration {

diff --git a/frontend/src/lib/utils/update-local-plan.ts b/frontend/src/lib/utils/update-local-plan.ts
@@ -58,6 +58,8 @@ export const updateLocalPlan = async (
             week: g.week.replace("-", "") as "" | "TN" | "TP",
             endTime: g.endTime.split(":").slice(0, 2).join(":"),
             startTime: g.startTime.split(":").slice(0, 2).join(":"),
+            spotsOccupied: g.spotsOccupied,
+            spotsTotal: g.spotsTotal,
           }));
           return {
             id: c.id,

diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
@@ -80,6 +80,8 @@ export type CourseType = {
     type: "C" | "L" | "P" | "S" | "W";
     url: string;
     courseId: string;
+    spotsOccupied: number;
+    spotsTotal: number;
     createdAt: string;
     updatedAt: string;
   }[];