Merge branch 'main' into replace-clearbit-logos

Author: tracyyh

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useSearchParams } from "next/navigation";
 import { ChevronDown } from "lucide-react";
 
 import type { RoleType } from "@cooper/db/schema";
@@ -20,10 +21,17 @@ import { RoleInfo } from "~/app/_components/reviews/role-info";
 import { api } from "~/trpc/react";
 
 export default function Roles() {
+  const searchParams = useSearchParams();
+  const searchValue = searchParams.get("search") ?? ""; // Get search query from URL
+
   const [selectedFilter, setSelectedFilter] = useState<
     "default" | "rating" | "newest" | "oldest" | undefined
   >("default");
-  const roles = api.role.list.useQuery({ sortBy: selectedFilter });
+  const roles = api.role.list.useQuery({
+    sortBy: selectedFilter,
+    search: searchValue,
+  });
+
   const buttonStyle =
     "bg-white hover:bg-cooper-gray-200 border-white text-black p-2";
 

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

@@ -2,13 +2,19 @@
 
 import { useRouter } from "next/navigation";
 
+import { useSearchParams } from "next/navigation";
 import { CompanyCardPreview } from "~/app/_components/companies/company-card-preview";
 import LoadingResults from "~/app/_components/loading-results";
 import NoResults from "~/app/_components/no-results";
 import { api } from "~/trpc/react";
 
 export default function Companies() {
-  const companies = api.company.list.useQuery({});
+  const searchParams = useSearchParams();
+  const searchValue = searchParams.get("search") ?? ""; // Get search query from URL
+
+  const companies = api.company.list.useQuery({
+    search: searchValue,
+  });
 
   const router = useRouter();
 

apps/web/src/app/_components/reviews/role-info.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import Image from "next/image";
+import Link from "next/link";
 
 import type { ReviewType, RoleType } from "@cooper/db/schema";
 import { cn } from "@cooper/ui";
@@ -279,8 +280,14 @@ export function RoleInfo({ className, roleObj }: RoleCardProps) {
           <div className="col-span-2" id="reviews">
             <CollapsableInfoCard title="Reviews">
               {reviews.isSuccess && reviews.data.length === 0 && (
-                <div className="flex h-full w-full items-center justify-center text-[#5a5a5a]">
-                  No reviews yet!
+                <div className="flex h-full w-full flex-col items-center justify-center text-[#5a5a5a]">
+                  <p>No reviews yet</p>
+                  <Link
+                    href={`/review?id=${roleObj.id}`}
+                    className="ml-2 underline"
+                  >
+                    Add one!
+                  </Link>
                 </div>
               )}
               {reviews.isSuccess && reviews.data.length > 0 && (

packages/api/src/router/role.ts

@@ -26,6 +26,7 @@ export const roleRouter = {
       }),
     )
     .query(async ({ ctx, input }) => {
+      let roles: RoleType[] = [];
       if (ctx.sortBy === "rating") {
         const rolesWithRatings = await ctx.db.execute(sql`
         SELECT 
@@ -37,20 +38,40 @@ export const roleRouter = {
         ORDER BY avg_rating DESC
       `);
 
-        const roles = rolesWithRatings.rows.map((role) => ({
+        roles = rolesWithRatings.rows.map((role) => ({
           ...(role as RoleType),
         }));
-
-        const fuseOptions = ["title", "description"];
-        return performFuseSearch<RoleType>(roles, fuseOptions, input.search);
+      } else {
+        roles = await ctx.db.query.Role.findMany({
+          orderBy: ordering[ctx.sortBy],
+        });
       }
 
-      const roles = await ctx.db.query.Role.findMany({
-        orderBy: ordering[ctx.sortBy],
+      // Extract unique company IDs
+      const companyIds = [...new Set(roles.map((role) => role.companyId))];
+
+      // Fetch companies that match the extracted company IDs
+      const companies = await ctx.db.query.Company.findMany({
+        where: (company, { inArray }) => inArray(company.id, companyIds),
+      });
+
+      const rolesWithCompanies = roles.map((role) => {
+        const company = companies.find((c) => c.id === role.companyId);
+        return {
+          ...role,
+          companyName: company?.name ?? "",
+        };
       });
 
-      const fuseOptions = ["title", "description"];
-      return performFuseSearch<RoleType>(roles, fuseOptions, input.search);
+      const fuseOptions = ["title", "description", "companyName"];
+
+      const searchedRoles = performFuseSearch<
+        RoleType & { companyName: string }
+      >(rolesWithCompanies, fuseOptions, input.search);
+
+      return searchedRoles.map((role) => ({
+        ...(role as RoleType),
+      }));
     }),
 
   getByTitle: sortableProcedure