Updated review page (#132)

* started ticket

* changed review preview

* renamed cards

* more frontend changes

* changed to role card

* fixed fetching roles

* changed styling

* fixed borders

* added vertical line

* formatting

* fixed linting

* small frontend changes

* formatting

* Update page.tsx

small tailwind thing

---------

Co-authored-by: Alton Banushi <[email protected]>

apps/web/src/app/(pages)/(dashboard)/roles/page.tsx

@@ -1,115 +1,59 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { z } from "zod";
 
-import type {
-  ReviewType,
-  WorkEnvironmentType,
-  WorkTermType,
-} from "@cooper/db/schema";
-import { WorkEnvironment, WorkTerm } from "@cooper/db/schema";
+import type { RoleType } from "@cooper/db/schema";
 import { cn } from "@cooper/ui";
-import { useToast } from "@cooper/ui/hooks/use-toast";
 
 import LoadingResults from "~/app/_components/loading-results";
 import NoResults from "~/app/_components/no-results";
-import { ReviewCard } from "~/app/_components/reviews/review-card";
-import { ReviewCardPreview } from "~/app/_components/reviews/review-card-preview";
-import SearchFilter from "~/app/_components/search/search-filter";
+import { RoleCardPreview } from "~/app/_components/reviews/role-card-preview";
+import { RoleInfo } from "~/app/_components/reviews/role-info";
 import { api } from "~/trpc/react";
 
-export default function Roles({
-  searchParams,
-}: {
-  searchParams?: {
-    search?: string;
-    cycle?: WorkTermType;
-    term?: WorkEnvironmentType;
-  };
-}) {
-  const { toast } = useToast();
+export default function Roles() {
+  const roles = api.role.list.useQuery();
 
-  const RolesSearchParam = z.object({
-    cycle: z
-      .nativeEnum(WorkTerm, {
-        message: "Invalid cycle type",
-      })
-      .optional(),
-    term: z
-      .nativeEnum(WorkEnvironment, {
-        message: "Invalid term type",
-      })
-      .optional(),
-  });
-
-  const validationResult = RolesSearchParam.safeParse(searchParams);
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  useEffect(() => {
-    if (mounted && !validationResult.success) {
-      toast({
-        title: "Invalid Search Parameters",
-        description: validationResult.error.issues
-          .map((issue) => issue.message)
-          .join(", "),
-        variant: "destructive",
-      });
-      setMounted(false);
-    }
-  }, [toast, mounted, validationResult]);
-
-  const reviews = api.review.list.useQuery({
-    search: searchParams?.search,
-    options: validationResult.success ? validationResult.data : {},
-  });
-
-  const [selectedReview, setSelectedReview] = useState<ReviewType | undefined>(
-    reviews.isSuccess ? reviews.data[0] : undefined,
+  const [selectedRole, setSelectedRole] = useState<RoleType | undefined>(
+    roles.isSuccess ? roles.data[0] : undefined,
   );
 
   useEffect(() => {
-    if (reviews.isSuccess) {
-      setSelectedReview(reviews.data[0]);
+    if (roles.isSuccess) {
+      setSelectedRole(roles.data[0]);
     }
-  }, [reviews.isSuccess, reviews.data]);
+  }, [roles.isSuccess, roles.data]);
 
   return (
     <>
-      <SearchFilter search={searchParams?.search} {...validationResult.data} />
-      {reviews.isSuccess && reviews.data.length > 0 && (
-        <div className="mb-8 grid h-[70dvh] w-4/5 grid-cols-5 gap-4 lg:w-3/4">
-          <div className="col-span-2 gap-3 overflow-scroll pr-4">
-            {reviews.data.map((review, i) => {
+      {roles.isSuccess && roles.data.length > 0 && (
+        <div className="flex h-[100dvh] w-[95%] gap-4 divide-x divide-[#474747] pl-4 pr-4 lg:w-[95%]">
+          <div className="w-[28%] gap-3">
+            {roles.data.map((role, i) => {
               return (
-                <div key={review.id} onClick={() => setSelectedReview(review)}>
-                  <ReviewCardPreview
-                    reviewObj={review}
+                <div key={role.id} onClick={() => setSelectedRole(role)}>
+                  <RoleCardPreview
+                    reviewObj={role}
                     className={cn(
-                      "mb-4 hover:border-2",
-                      selectedReview
-                        ? selectedReview.id === review.id &&
-                            "border-2 bg-cooper-gray-100"
-                        : !i && "border-2 bg-cooper-gray-100",
+                      "mb-4 hover:bg-cooper-gray-100",
+                      selectedRole
+                        ? selectedRole.id === role.id && "bg-cooper-gray-200"
+                        : !i && "bg-cooper-gray-200",
                     )}
                   />
                 </div>
               );
             })}
           </div>
-          <div className="col-span-3 overflow-scroll">
-            {reviews.data.length > 0 && reviews.data[0] && (
-              <ReviewCard reviewObj={selectedReview ?? reviews.data[0]} />
+          <div className="col-span-3 w-[72%] overflow-auto p-1">
+            {roles.data.length > 0 && roles.data[0] && (
+              <RoleInfo roleObj={selectedRole ?? roles.data[0]} />
             )}
           </div>
         </div>
       )}
-      {reviews.isSuccess && reviews.data.length === 0 && <NoResults />}
-      {reviews.isPending && <LoadingResults />}
+      {roles.isSuccess && roles.data.length === 0 && <NoResults />}
+      {roles.isPending && <LoadingResults />}
     </>
   );
 }

apps/web/src/app/_components/form/rating.tsx

@@ -36,7 +36,7 @@ export const Rating = forwardRef<HTMLInputElement, RatingProps>(
                 "size-20",
                 i < hoveredIndex || i < +getValues(name)
                   ? "fill-cooper-yellow-500"
-                  : "fill-cooper-gray-100",
+                  : "fill-cooper-gray-200",
                 "pr-2 hover:cursor-pointer",
               )}
               onMouseEnter={() => setHoveredIndex(i + 1)}