add combobox for locations

.vscode/launch.json

@@ -1,6 +1,7 @@
 {
   "version": "0.2.0",
   "configurations": [
+
     {
       "name": "Next.js",
       "type": "node-terminal",

apps/web/src/app/_components/combo-box.tsx

@@ -26,6 +26,8 @@ interface ComboBoxProps {
   currLabel: string;
   onSelect: (option: string) => void;
   triggerClassName?: string;
+  onChange?: (value: string) => void;
+  variant?: "default" | "form";
 }
 
 /**
@@ -41,9 +43,16 @@ export default function ComboBox({
   currLabel,
   onSelect,
   triggerClassName,
+  onChange,
+  variant,
 }: ComboBoxProps) {
   const [isOpen, setIsOpen] = useState(false);
 
+  const styleVariant =
+    variant === "form"
+      ? "flex h-16 w-full rounded-md border-[3px] border-cooper-blue-600 bg-white px-3 py-2 text-xl font-normal ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+      : "";
+
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
       <PopoverTrigger
@@ -57,15 +66,25 @@ export default function ComboBox({
           variant="outline"
           role="combobox"
           aria-expanded={isOpen}
-          className="justify-between"
+          className={cn(
+            styleVariant,
+            "w-[400px] justify-between overflow-hidden text-ellipsis text-nowrap",
+          )}
         >
-          {defaultLabel}
+          <span className="overflow-hidden text-ellipsis whitespace-nowrap">
+            {defaultLabel}
+          </span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[400px] p-0">
         <Command>
-          <CommandInput placeholder={searchPlaceholder} />
+          <CommandInput
+            placeholder={searchPlaceholder}
+            onChangeCapture={(e) =>
+              onChange && onChange((e.target as HTMLInputElement).value)
+            }
+          />
           <CommandEmpty>{searchEmpty}</CommandEmpty>
           <CommandGroup>
             <CommandList>

apps/web/src/app/_components/form/sections/review-section.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 
 import {
@@ -10,14 +13,46 @@ import {
 import { Input } from "@cooper/ui/input";
 import { Textarea } from "@cooper/ui/textarea";
 
+import ComboBox from "~/app/_components/combo-box";
 import { FormSection } from "~/app/_components/form/form-section";
+import { api } from "~/trpc/react";
 
 /**
  * ReviewSection component renders form fields for writing a co-op review.
  */
 export function ReviewSection({ textColor }: { textColor: string }) {
   const form = useFormContext();
 
+  const [locationLabel, setLocationLabel] = useState<string>("");
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [prefix, setPrefix] = useState<string>("");
+
+  useEffect(() => {
+    const newPrefix =
+      searchTerm.length === 3 ? searchTerm.slice(0, 3).toLowerCase() : null;
+    if (newPrefix && newPrefix !== prefix) {
+      setPrefix(newPrefix);
+    }
+  }, [searchTerm]);
+
+  const locationsToUpdate = api.location.getByPrefix.useQuery(
+    { prefix },
+    { enabled: searchTerm.length === 3 },
+  );
+
+  const locationValuesAndLabels = locationsToUpdate.data
+    ? locationsToUpdate.data.map((location) => {
+        return {
+          value: location.id,
+          label:
+            location.city +
+            (location.state ? `, ${location.state}` : "") +
+            ", " +
+            location.country,
+        };
+      })
+    : [];
+
   return (
     <FormSection title="Review" className={textColor}>
       <FormField
@@ -49,17 +84,37 @@ export function ReviewSection({ textColor }: { textColor: string }) {
       <div className="flex justify-between space-x-2">
         <FormField
           control={form.control}
-          name="location"
+          name="locationId"
           render={({ field }) => (
             <FormItem>
               <FormLabel>Location</FormLabel>
               <FormControl>
-                <Input {...field} />
+                <ComboBox
+                  variant="form"
+                  defaultLabel={locationLabel || "Select location..."}
+                  searchPlaceholder="Search location..."
+                  searchEmpty="No location found."
+                  valuesAndLabels={locationValuesAndLabels}
+                  currLabel={locationLabel}
+                  onChange={(value) => {
+                    setSearchTerm(value);
+                  }}
+                  onSelect={(currentValue) => {
+                    setLocationLabel(
+                      currentValue === locationLabel ? "" : currentValue,
+                    );
+                    field.onChange(
+                      locationValuesAndLabels.find(
+                        (location) => location.label === currentValue,
+                      )?.value,
+                    );
+                    console.log(field.value);
+                  }}
+                />
               </FormControl>
-              <FormMessage />
             </FormItem>
           )}
-        />
+        ></FormField>
         <FormField
           control={form.control}
           name="hourlyPay"

apps/web/src/app/_components/reviews/review-card.tsx

@@ -3,6 +3,7 @@
 import type { ReviewType } from "@cooper/db/schema";
 import { Card, CardContent } from "@cooper/ui/card";
 
+import { api } from "~/trpc/react";
 import { ReviewCardStars } from "./review-card-stars";
 
 // const InterviewDifficulty = [
@@ -19,6 +20,21 @@ interface ReviewCardProps {
 }
 
 export function ReviewCard({ reviewObj }: ReviewCardProps) {
+  // ===== LOCATION DATA ===== //
+  const locationName = (reviewObj: ReviewType) => {
+    if (reviewObj.locationId) {
+      const { data: location } = api.location.getById.useQuery({
+        id: reviewObj.locationId,
+      });
+      return location
+        ? location.city +
+            (location.state ? `, ${location.state}` : "") +
+            ", " +
+            location.country
+        : "N/A";
+    }
+  };
+
   return (
     <Card className="mx-auto w-[94%]">
       <div className="flex pt-5">
@@ -29,10 +45,10 @@ export function ReviewCard({ reviewObj }: ReviewCardProps) {
             </div>
             <div className="align-center flex gap-2 pt-2">
               <span
-                className={`${reviewObj.location ? "visibility: visible" : "visibility: hidden"}`}
+                className={`${locationName(reviewObj) ? "visibility: visible" : "visibility: hidden"}`}
               >
                 {" "}
-                {reviewObj.location} •
+                {locationName(reviewObj)} •
               </span>
               <span>{reviewObj.workTerm}</span>
             </div>

apps/web/src/app/_components/reviews/role-card-preview.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 
-import type { RoleType } from "@cooper/db/schema";
+import type { ReviewType, RoleType } from "@cooper/db/schema";
 import { cn } from "@cooper/ui";
 import { Card, CardContent, CardHeader, CardTitle } from "@cooper/ui/card";
 
@@ -26,6 +26,21 @@ export function RoleCardPreview({
   const role = api.role.getById.useQuery({ id: reviewObj.id });
   const reviews = api.review.getByRole.useQuery({ id: reviewObj.id });
 
+  // ===== LOCATION DATA ===== //
+  const locationName = (reviewObj: ReviewType) => {
+    if (reviewObj.locationId) {
+      const { data: location } = api.location.getById.useQuery({
+        id: reviewObj.locationId,
+      });
+      return location
+        ? location.city +
+            (location.state ? `, ${location.state}` : "") +
+            ", " +
+            location.country
+        : "N/A";
+    }
+  };
+
   return (
     <Card
       className={cn(
@@ -49,13 +64,15 @@ export function RoleCardPreview({
                 <span>{company.data?.name}</span>
                 {reviews.isSuccess && reviews.data.length > 0 && (
                   <span
-                    className={`${reviews.data[0]?.location ? "visibility: visible" : "visibility: hidden"}`}
+                    className={`${(reviews.data[0] ? locationName(reviews.data[0]) : "") ? "visibility: visible" : "visibility: hidden"}`}
                   >
                     •
                   </span>
                 )}
                 {reviews.isSuccess && reviews.data.length > 0 && (
-                  <span>{reviews.data[0]?.location}</span>
+                  <span>
+                    {reviews.data[0] ? locationName(reviews.data[0]) : ""}
+                  </span>
                 )}
               </div>
             </div>

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

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 
-import type { RoleType } from "@cooper/db/schema";
+import type { ReviewType, RoleType } from "@cooper/db/schema";
 import { cn } from "@cooper/ui";
 import { Card, CardContent, CardHeader, CardTitle } from "@cooper/ui/card";
 
@@ -36,6 +36,21 @@ export function RoleInfo({ className, roleObj }: RoleCardProps) {
 
   const companyData = companyQuery.data;
 
+  // ===== LOCATION DATA ===== //
+  const locationName = (reviewObj: ReviewType) => {
+    if (reviewObj.locationId) {
+      const { data: location } = api.location.getById.useQuery({
+        id: reviewObj.locationId,
+      });
+      return location
+        ? location.city +
+            (location.state ? `, ${location.state}` : "") +
+            ", " +
+            location.country
+        : "N/A";
+    }
+  };
+
   return (
     <Card
       className={cn(
@@ -71,13 +86,15 @@ export function RoleInfo({ className, roleObj }: RoleCardProps) {
                   <span>{companyData?.name}</span>
                   {reviews.isSuccess && reviews.data.length > 0 && (
                     <span
-                      className={`${reviews.data[0]?.location ? "visibility: visible" : "visibility: hidden"}`}
+                      className={`${(reviews.data[0] ? locationName(reviews.data[0]) : "") ? "visibility: visible" : "visibility: hidden"}`}
                     >
                       •
                     </span>
                   )}
                   {reviews.isSuccess && reviews.data.length > 0 && (
-                    <span>{reviews.data[0]?.location}</span>
+                    <span>
+                      {reviews.data[0] ? locationName(reviews.data[0]) : ""}
+                    </span>
                   )}
                 </div>
               </div>

apps/web/src/app/_components/reviews/role-review-card.tsx

@@ -47,6 +47,21 @@ export async function RoleReviewCard({
 
   if (!company) return null;
 
+  // ===== LOCATION DATA ===== //
+  const locationName = async (locationId: string) => {
+    if (locationId) {
+      const location = await api.location.getById({
+        id: locationId,
+      });
+      return location
+        ? location.city +
+            (location.state ? `, ${location.state}` : "") +
+            ", " +
+            location.country
+        : "N/A";
+    }
+  };
+
   return (
     <Card
       className={cn(
@@ -79,7 +94,7 @@ export async function RoleReviewCard({
           <div className="m-4 flex items-center space-x-8">
             <div className="flex flex-col text-sm">
               <h4 className="font-semibold">Location</h4>
-              <p>{company.location}</p>
+              <p>{locationName(company.location)}</p>
             </div>
             <div className="flex flex-col text-sm">
               <h4 className="font-semibold">Work Model</h4>

packages/api/src/root.ts

@@ -4,6 +4,7 @@ import {
   profileRouter,
   reviewRouter,
   roleRouter,
+  locationRouter,
 } from "./router";
 import { createTRPCRouter } from "./trpc";
 
@@ -13,6 +14,7 @@ export const appRouter = createTRPCRouter({
   role: roleRouter,
   profile: profileRouter,
   review: reviewRouter,
+  location: locationRouter,
 });
 
 // export type definition of API

packages/api/src/router/index.ts

@@ -3,5 +3,6 @@ import { companyRouter } from "./company";
 import { profileRouter } from "./profile";
 import { reviewRouter } from "./review";
 import { roleRouter } from "./role";
+import { locationRouter } from "./location";
 
-export { authRouter, companyRouter, profileRouter, reviewRouter, roleRouter };
+export { authRouter, companyRouter, profileRouter, reviewRouter, roleRouter, locationRouter };

packages/api/src/router/location.ts

@@ -0,0 +1,38 @@
+import type { TRPCRouterRecord } from "@trpc/server";
+import { z } from "zod";
+
+import { asc, eq } from "@cooper/db";
+import { CreateLocationSchema, Location } from "@cooper/db/schema";
+
+import { protectedProcedure, publicProcedure } from "../trpc";
+
+export const locationRouter = {
+  list: publicProcedure.query(({ ctx }) => {
+    return ctx.db.query.Location.findMany({
+      orderBy: asc(Location.city),
+    });
+  }),
+
+  getById: publicProcedure
+    .input(z.object({ id: z.string() }))
+    .query(({ ctx, input }) => {
+      return ctx.db.query.Location.findFirst({
+        where: eq(Location.id, input.id),
+      });
+    }),
+
+  getByPrefix: publicProcedure
+    .input(z.object({ prefix: z.string() }))
+    .query(({ ctx, input }) => {
+      return ctx.db.query.Location.findMany({
+        where: (loc, { ilike }) => ilike(loc.city, `${input.prefix}%`),
+        orderBy: asc(Location.city),
+      });
+    }),
+
+  create: protectedProcedure
+    .input(CreateLocationSchema)
+    .mutation(({ ctx, input }) => {
+      return ctx.db.insert(Location).values(input);
+    }),
+} satisfies TRPCRouterRecord;