Location Type and Frontend Call Example

sandboxnu · Feb 25, 2025 · 323c75c · 323c75c
1 parent a0c6d15
commit 323c75c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 27 deletions.
diff --git a/apps/web/src/app/_components/form/sections/review-section.tsx b/apps/web/src/app/_components/form/sections/review-section.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 
+import type { LocationType } from "@cooper/db/schema";
 import {
   FormControl,
   FormField,
@@ -14,6 +15,7 @@ import { Textarea } from "@cooper/ui/textarea";
 import type { ComboBoxOption } from "~/app/_components/combo-box";
 import ComboBox from "~/app/_components/combo-box";
 import { FormSection } from "~/app/_components/form/form-section";
+import { api } from "~/trpc/server";
 
 /**
  * ReviewSection component renders form fields for writing a co-op review.
@@ -25,25 +27,20 @@ export function ReviewSection({ textColor }: { textColor: string }) {
   const [locationLabel, setLocationLabel] = useState<string>("");
   const [searchTerm, setSearchTerm] = useState<string>("");
 
-  useEffect(() => {
-    if (searchTerm.length === 2) {
+  useEffect(async () => {
+    if (searchTerm.length === 2 || searchTerm.length === 3) {
       const prefix = searchTerm.toLowerCase();
-      const moduleName = `${prefix}Cities`;
 
-      import(`../constants/cities/${prefix}`)
-        .then((module) => {
-          const cities = module[moduleName];
-          const flattenedNames = cities.map(
-            (location: { city: string; state: string; country: string }) => ({
-              value: location.city,
-              label: `${location.city}, ${location.state}, ${location.country}`,
-            }),
-          );
-          setLocations(flattenedNames);
-        })
-        .catch((error) => {
-          console.error(`Error loading module for prefix ${prefix}:`, error);
-        });
+      const locationsToUpdate = await api.location.getByPrefix({ prefix });
+
+      if (locationsToUpdate.isSuccess && locationsToUpdate.data) {
+        setLocations(
+          locationsToUpdate.map((location: LocationType) => ({
+            value: location.id,
+            label: location.city,
+          })),
+        );
+      }
     }
   }, [searchTerm]);
 

diff --git a/packages/api/src/router/location.ts b/packages/api/src/router/location.ts
@@ -1,30 +1,29 @@
-
 import type { TRPCRouterRecord } from "@trpc/server";
 import { z } from "zod";
 
 import { asc } from "@cooper/db";
-import { CreateLocationSchema, Location} from "@cooper/db/schema";
+import { CreateLocationSchema, Location } from "@cooper/db/schema";
 
 import { protectedProcedure, publicProcedure } from "../trpc";
 
 // doesn't work yet bc the schema is on my other laptop :D
 export const locationRouter = {
   list: publicProcedure.query(({ ctx }) => {
-      return ctx.db.query.Location.findMany({
-        orderBy: asc(Location.city),
-      });
-    }),
+    return ctx.db.query.Location.findMany({
+      orderBy: asc(Location.city),
+    });
+  }),
 
-getByPrefix: publicProcedure
+  getByPrefix: publicProcedure
     .input(z.object({ prefix: z.string() }))
     .query(({ ctx, input }) => {
       return ctx.db.query.Location.findMany({
-        where: (loc) => loc.city.startsWith(input.prefix),
-        orderBy: 
+        where: (loc, { ilike }) => ilike(loc.city, `${input.prefix}%`),
+        orderBy: asc(Location.city),
       });
     }),
 
-create: protectedProcedure
+  create: protectedProcedure
     .input(CreateLocationSchema)
     .mutation(({ ctx, input }) => {
       return ctx.db.insert(Location).values(input);