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/companies/company-card-preview.tsx

@@ -36,7 +36,7 @@ export function CompanyCardPreview({ companyObj }: CompanyCardPreviewProps) {
             </div>
             <div className="flex flex-col text-sm">
               <h4 className="font-semibold">Location</h4>
-              <p>{companyObj.location}</p>
+              <p>TODO: companies</p>
             </div>
           </div>
           <div className="m-4 flex items-center space-x-4">

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

@@ -93,7 +93,7 @@ const formSchema = z.object({
     .min(8, {
       message: "The review must be at least 8 characters.",
     }),
-  location: z.string().optional(),
+  locationId: z.string().optional(),
   hourlyPay: z.coerce
     .number()
     .positive()
@@ -166,7 +166,7 @@ const steps: {
   },
   {
     label: "Review",
-    fields: ["reviewHeadline", "textReview", "location", "hourlyPay"],
+    fields: ["reviewHeadline", "textReview", "locationId", "hourlyPay"],
     borderColor: "border-cooper-green-500",
     textColor: "text-cooper-green-500",
     bgColor: "bg-cooper-green-500",
@@ -214,7 +214,7 @@ export function ReviewForm(props: ReviewFormProps) {
       interviewReview: "",
       reviewHeadline: "",
       textReview: "",
-      location: "",
+      locationId: "",
       hourlyPay: "",
       workEnvironment: undefined,
       drugTest: undefined,

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);
+    }
+  }, [prefix, 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,36 @@ 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 className="flex flex-col justify-end">
               <FormLabel>Location</FormLabel>
               <FormControl>
-                <Input {...field} />
+                <ComboBox
+                  variant="form"
+                  defaultLabel={locationLabel || "Type to begin..."}
+                  searchPlaceholder="Type to begin..."
+                  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,
+                    );
+                  }}
+                />
               </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

@@ -29,6 +29,22 @@ export function RoleCardPreview({
     roleId: role.data?.id ?? "",
   });
 
+  // ===== LOCATION DATA ===== //
+  // TODO: Fix this
+  // 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(
@@ -50,15 +66,17 @@ export function RoleCardPreview({
               </CardTitle>
               <div className="align-center flex gap-2 text-cooper-gray-400">
                 <span>{company.data?.name}</span>
-                {reviews.isSuccess && reviews.data.length > 0 && (
+                {/* {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

@@ -36,6 +36,22 @@ export function RoleInfo({ className, roleObj }: RoleCardProps) {
   const companyData = companyQuery.data;
   const averages = api.role.getAverageById.useQuery({ roleId: roleObj.id });
 
+  // ===== LOCATION DATA ===== //
+  // TODO: Fix this
+  // 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(
@@ -70,15 +86,17 @@ export function RoleInfo({ className, roleObj }: RoleCardProps) {
                 </CardTitle>
                 <div className="align-center flex gap-2 text-cooper-gray-400">
                   <span>{companyData?.name}</span>
-                  {reviews.isSuccess && reviews.data.length > 0 && (
+                  {/* {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>

packages/api/src/root.ts

@@ -1,6 +1,7 @@
 import {
   authRouter,
   companyRouter,
+  locationRouter,
   profileRouter,
   reviewRouter,
   roleRouter,
@@ -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/company.ts

@@ -3,7 +3,13 @@ import { z } from "zod";
 
 import type { ReviewType } from "@cooper/db/schema";
 import { desc, eq } from "@cooper/db";
-import { Company, CreateCompanySchema, Review } from "@cooper/db/schema";
+import {
+  CompaniesToLocations,
+  Company,
+  CreateCompanySchema,
+  Location,
+  Review,
+} from "@cooper/db/schema";
 
 import { protectedProcedure, publicProcedure } from "../trpc";
 
@@ -30,6 +36,16 @@ export const companyRouter = {
       });
     }),
 
+  getLocationsById: publicProcedure
+    .input(z.object({ id: z.string() }))
+    .query(({ ctx, input }) => {
+      return ctx.db
+        .select()
+        .from(CompaniesToLocations)
+        .innerJoin(Location, eq(CompaniesToLocations.locationId, Location.id))
+        .where(eq(CompaniesToLocations.companyId, input.id));
+    }),
+
   create: protectedProcedure
     .input(CreateCompanySchema)
     .mutation(({ ctx, input }) => {

packages/api/src/router/companytoLocation.ts

@@ -0,0 +1,16 @@
+import type { TRPCRouterRecord } from "@trpc/server";
+
+import {
+  CompaniesToLocations,
+  CreateCompanyToLocationSchema,
+} from "@cooper/db/schema";
+
+import { protectedProcedure } from "../trpc";
+
+export const companyToLocationRouter = {
+  create: protectedProcedure
+    .input(CreateCompanyToLocationSchema)
+    .mutation(({ ctx, input }) => {
+      return ctx.db.insert(CompaniesToLocations).values(input);
+    }),
+} satisfies TRPCRouterRecord;