fix: outdated dependencies + invalid coordinates + remove logs

Author: sjdonado

app/components/AutocompletePlacesInput.tsx

@@ -4,6 +4,7 @@ import { Loader as GoogleMapsApiLoader } from '@googlemaps/js-api-loader';
 
 import { type InputProps, default as Input } from './Input';
 import type { Search } from '~/schemas/search';
+import { useField } from 'remix-validated-form';
 
 interface AutocompletePlacesInput extends InputProps {
   autocompleteApiKey: string;
@@ -23,6 +24,7 @@ export default function AutocompletePlacesInput({
   const [isAutocompleteInitialized, setIsAutocompleteInitialized] = useState(false);
 
   const [coordinates, setCoordinates] = useState<Search['coordinates']>();
+  const { error, getInputProps } = useField('coordinates');
 
   const initializeAutocomplete = useCallback(async () => {
     if (!AddressInputRef.current || isAutocompleteInitialized) {
@@ -46,15 +48,10 @@ export default function AutocompletePlacesInput({
     autocomplete.addListener('place_changed', () => {
       const place = autocomplete.getPlace();
 
-      const Address = place?.address_components?.find(component =>
-        component.types.includes('postal_code')
-      )?.long_name;
-
-      const parsedZipCode = Address?.match(/\d+/)?.[0];
       const latitude = place?.geometry?.location?.lat();
       const longitude = place?.geometry?.location?.lng();
 
-      if (parsedZipCode && latitude && longitude) {
+      if (latitude && longitude) {
         setCoordinates({ latitude, longitude });
         google.maps?.event.clearInstanceListeners(autocomplete);
       }
@@ -68,8 +65,9 @@ export default function AutocompletePlacesInput({
   });
 
   return (
-    <div>
+    <div className="flex flex-col">
       <Input
+        className="!mb-0"
         forwardedRef={AddressInputRef}
         name={name}
         label={label}
@@ -79,7 +77,12 @@ export default function AutocompletePlacesInput({
         defaultValue={defaultValue}
         disabled={disabled}
       />
-      <input type="hidden" name="coordinates" value={JSON.stringify(coordinates)} />
+      <input
+        type="hidden"
+        name="coordinates"
+        {...getInputProps({ value: JSON.stringify(coordinates) })}
+      />
+      {error && <span className="mt-1 text-xs text-red-500">{error}</span>}
     </div>
   );
 }

app/components/Logs.tsx

@@ -17,7 +17,7 @@ export default function Logs({ logs }: LogsProps) {
 
   return (
     <div className="mb-4 flex flex-col justify-center gap-4">
-      <span className="divider" />
+      <hr />
       <div className="flex place-content-start items-center gap-2">
         <h3 className="cursor-pointer text-lg">Search logs</h3>
         {isExpanded && (

app/routes/_main.search.tsx

@@ -47,7 +47,7 @@ export const loader = async ({ request, context }: LoaderFunctionArgs) => {
   const jobId = url.searchParams.get('id');
 
   const searchJob = jobId ? await getKVRecord<SearchJobSerialized>(context, jobId) : null;
-  const autocompleteApiKey = context.cloudflare.env.PLACES_API_KEY;
+  const autocompleteApiKey = context.cloudflare.env.AUTOCOMPLETE_API_KEY;
 
   return { jobId, searchJob, autocompleteApiKey };
 };
@@ -65,7 +65,6 @@ export default function SearchPage() {
       const eventSource = new EventSource(`/search/job/${jobId}`);
 
       eventSource.onmessage = event => {
-        console.log('event', event);
         const [time, percentage, message] = event.data.split(',');
 
         if (message === DONE_JOB_MESSAGE) {
@@ -87,15 +86,13 @@ export default function SearchPage() {
 
   useEffect(() => {
     startSearchJob();
-  });
-
-  console.log('search', searchJob, 'jobState', jobState);
+  }, [startSearchJob]);
 
   return (
     <div className="flex flex-col gap-6">
       <ValidatedForm validator={validator} method="post" className="flex flex-col gap-6">
         <div className="rounded-lg border bg-base-200/30 p-4 md:p-6">
-          <div className="flex gap-4 [&>div]:flex-1">
+          <div className="flex flex-wrap gap-4 [&>div]:min-w-52 [&>div]:flex-1">
             <Input
               name="favoriteMealName"
               label="Meal/Dish/Food"

app/schemas/search.ts

@@ -7,11 +7,17 @@ export const SearchSchema = z.object({
     .max(30, { message: 'Too long' }),
   address: z.string().min(1, { message: 'Required field' }),
   coordinates: z.preprocess(
-    val => JSON.parse(val && typeof val === 'string' ? val : '{}'),
-    z.object({
-      latitude: z.number().min(-90).max(90),
-      longitude: z.number().min(-180).max(180),
-    })
+    val => JSON.parse(val && typeof val === 'string' ? val : 'null'),
+    z.object(
+      {
+        latitude: z.number().min(-90).max(90),
+        longitude: z.number().min(-180).max(180),
+      },
+      {
+        required_error: 'Required field',
+        invalid_type_error: 'Invalid address, select another location',
+      }
+    )
   ),
 });