Merge pull request #34 from sjdonado/chore-release-prep

Chore release prep

Author: sjdonado

app/components/AutocompletePlacesInput.tsx

@@ -1,114 +1,88 @@
-import { useRef, useState, useEffect } from 'react';
-import { useControlField } from 'remix-validated-form';
+import { useRef, useState, useEffect, useCallback } from 'react';
+
+import { Loader as GoogleMapsApiLoader } from '@googlemaps/js-api-loader';
 
-import {
-  initializeAutocomplete,
-  cleanUpAutocomplete,
-} from '~/utils/autocomplete.client';
 import { type InputProps, default as Input } from './Input';
+import type { Search } from '~/schemas/search';
+import { useField } from 'remix-validated-form';
 
 interface AutocompletePlacesInput extends InputProps {
-  placesApiKey: string;
-  onCoordinatesChange:  (coordinates: {
-    latitude: number;
-    longitude: number;
-  }) => void;
+  autocompleteApiKey: string;
 }
 
-export default function AutocompletePlacesInput ({
+export default function AutocompletePlacesInput({
   name,
   label,
   placeholder,
-  placesApiKey,
+  autocompleteApiKey,
   defaultValue,
   icon,
   disabled,
-  onCoordinatesChange,
-  ...rest
 }: AutocompletePlacesInput) {
-  const [zipCode, setZipCode] = useState(defaultValue);
-  const [
-    isAutocompleteInitialized,
-    setIsAutocompleteInitialized,
-  ] = useState<boolean>(false);
-
-  const [latitude, setLatitude] =
-    useControlField<number | undefined>('latitude', 'searchForm');
-  const [longitude, setLongitude] =
-    useControlField<number | undefined>('longitude', 'searchForm');
-
-  const zipCodeInputRef = useRef(null);
-
-  const onPlaceChangeHandler = (
-    autocomplete: google.maps.places.Autocomplete,
-  ) => {
-    return () => {
-      const place = autocomplete.getPlace();
-      const parsedZipCode = place
-        ?.address_components
-        ?.find((component) => component.types.includes('postal_code'))
-        ?.long_name;
-      const onlyNumbersRegExp = /^\d+$/;
-      if (parsedZipCode && onlyNumbersRegExp.test(parsedZipCode)) {
-        const latitude = place?.geometry?.location?.lat();
-        const longitude = place?.geometry?.location?.lng();
-        if (latitude && longitude) {
-          setLatitude(latitude);
-          setLongitude(longitude);
-          onCoordinatesChange({
-            latitude,
-            longitude,
-          });
-          cleanUpAutocomplete(autocomplete);
-          setIsAutocompleteInitialized(false);
-        }
-      }
+  const AddressInputRef = useRef(null);
+
+  const [isAutocompleteInitialized, setIsAutocompleteInitialized] = useState(false);
+
+  const [coordinates, setCoordinates] = useState<Search['coordinates']>();
+  const { error, getInputProps } = useField('coordinates');
+
+  const initializeAutocomplete = useCallback(async () => {
+    if (!AddressInputRef.current || isAutocompleteInitialized) {
+      return;
+    }
+
+    const googleMapsApiLoader = new GoogleMapsApiLoader({
+      apiKey: autocompleteApiKey,
+      version: 'weekly',
+    });
+
+    const { Autocomplete } = await googleMapsApiLoader.importLibrary('places');
+
+    const options = {
+      fields: ['formatted_address', 'geometry', 'name', 'address_components'],
+      strictBounds: false,
     };
-  }
 
-  useEffect(() => {
-    const loadAutocomplete = async() => {
-      if (zipCodeInputRef.current) {
-        if (!isAutocompleteInitialized) {
-          await initializeAutocomplete({
-            input: zipCodeInputRef.current,
-            onPlaceChangeHandler,
-            apiKey: placesApiKey,
-          });
-          setIsAutocompleteInitialized(true);
-        }
+    const autocomplete = new Autocomplete(AddressInputRef.current, options);
+
+    autocomplete.addListener('place_changed', () => {
+      const place = autocomplete.getPlace();
+
+      const latitude = place?.geometry?.location?.lat();
+      const longitude = place?.geometry?.location?.lng();
+
+      if (latitude && longitude) {
+        setCoordinates({ latitude, longitude });
+        google.maps?.event.clearInstanceListeners(autocomplete);
       }
-    }
+    });
 
-    loadAutocomplete();
+    setIsAutocompleteInitialized(true);
+  }, [AddressInputRef, isAutocompleteInitialized, autocompleteApiKey]);
+
+  useEffect(() => {
+    initializeAutocomplete();
   });
 
   return (
-    <div>
+    <div className="flex flex-col">
       <Input
-          name={name}
-          label={label}
-          type="number"
-          placeholder="080001"
-          icon={icon}
-          defaultValue={defaultValue}
-          disabled={disabled}
-          onChange={(e) => setZipCode(e.target.value)}
-          value={zipCode}
-          forwardedRef={zipCodeInputRef}
-        />
-        <input
-          type="hidden"
-          name="latitude"
-          value={latitude}
-          onChange={(e) => setLatitude(parseFloat(e.target.value))}
-        />
-        <input
-          type="hidden"
-          name="longitude"
-          value={longitude}
-          onChange={(e) => setLongitude(parseFloat(e.target.value))}
-        />
+        className="!mb-0"
+        forwardedRef={AddressInputRef}
+        name={name}
+        label={label}
+        type="text"
+        placeholder={placeholder}
+        icon={icon}
+        defaultValue={defaultValue}
+        disabled={disabled}
+      />
+      <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/Header.tsx

@@ -7,7 +7,10 @@ export default function Header() {
         <h1 className="text-3xl font-bold">Cule filo</h1>
       </Link>
       <p className="text-justify text-gray-500">
-        Search for your favorite meal near you, quickly, enhanced by AI and for free.
+        Craving your favorite meal? Our AI-powered search makes it easy to find the top 3
+        restaurants serving it near you. Just enter the dish you're looking for and your
+        location, and let our intelligent algorithm do the rest. Whether it's a local
+        specialty or a global delicacy, our free app will guide you to the perfect spot.
       </p>
     </div>
   );

app/components/Input.tsx

@@ -31,11 +31,11 @@ export default function Input({
       <div className="relative mt-2 rounded-md">
         <div className="relative">
           <input
+            ref={forwardedRef}
             className={clsx(
               'peer input input-sm input-bordered !h-10 w-full rounded-md !pl-9',
               error && 'input-error'
             )}
-            ref={forwardedRef}
             {...rest}
             {...getInputProps({
               id: name,

app/components/Logs.tsx

@@ -1,13 +1,11 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid';
 
 interface LogsProps {
   logs: string[];
 }
 
-export default function Logs({
-  logs,
-}: LogsProps) {
+export default function Logs({ logs }: LogsProps) {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const logsRef = useRef<null | HTMLDivElement>(null);
 
@@ -19,29 +17,29 @@ export default function Logs({
 
   return (
     <div className="mb-4 flex flex-col justify-center gap-4">
-      <hr className="divider" />
-      <div className="flex flex-row place-content-start items-center gap-4">
-        <h3 className="text-lg">Search logs</h3>
+      <hr />
+      <div className="flex place-content-start items-center gap-2">
+        <h3 className="cursor-pointer text-lg">Search logs</h3>
         {isExpanded && (
           <ChevronUpIcon
             className="cursor-pointer"
-            onClick={(_e) => setIsExpanded(false)}
+            onClick={_e => setIsExpanded(false)}
             width="20"
             height="20"
           />
         )}
         {!isExpanded && (
           <ChevronDownIcon
             className="cursor-pointer"
-            onClick={(_e) => setIsExpanded(true)}
+            onClick={_e => setIsExpanded(true)}
             width="20"
             height="20"
           />
         )}
       </div>
       {isExpanded && (
         <div className="flex w-full flex-col items-start gap-2" ref={logsRef}>
-          {(logs).map(log => (
+          {logs.map(log => (
             <p key={log} className="text-sm text-gray-500">
               {log}
             </p>

app/components/PlaceCard.tsx

@@ -21,13 +21,6 @@ export default function PlaceCard({ place }: { place: Place }) {
                 <span className="text-xs font-bold">★{place.rating}</span>
               </div>
             )}
-            {place.isOpen !== null && (
-              <div className="badge badge-ghost">
-                <span className="text-xs font-bold">
-                  {place.isOpen ? 'Open now' : 'Closed now'}
-                </span>
-              </div>
-            )}
             {place.price !== null && (
               <div className="badge badge-ghost">
                 <span className="text-xs font-bold">{place.price}</span>

app/components/SearchCard.tsx

@@ -6,7 +6,7 @@ export default function SearchCard({ search }: { search: SearchJobSerialized })
     <div className="flex flex-col gap-2 rounded-lg border p-4">
       <div className="mb-1 flex flex-wrap justify-between gap-4">
         <Link to={`/search?id=${search.id}`} className="link">
-          {search.input.favoriteMealName} - {search.input.zipCode}
+          {search.input.favoriteMealName} - {search.input.address}
         </Link>
         <div className="badge badge-ghost">
           <span className="text-xs font-bold">{search.state}</span>

app/jobs/search.server.ts

@@ -3,7 +3,7 @@ import { DONE_JOB_MESSAGE, SearchJobState } from '~/constants/job';
 
 import type { SearchJob } from '~/schemas/job';
 import { SearchJobParsedSchema } from '~/schemas/job';
-import type { PlaceGeoData } from '~/schemas/place';
+import type { PlaceLocation } from '~/schemas/place';
 
 import {
   getKVRecord,
@@ -22,19 +22,18 @@ import {
 export async function createSearchJob(
   context: AppLoadContext,
   favoriteMealName: string,
-  geoData: PlaceGeoData
+  address: string,
+  location: PlaceLocation
 ) {
   const key = crypto.randomUUID();
 
   const initState = SearchJobParsedSchema.parse({
     input: {
       favoriteMealName,
-      zipCode: geoData.zipCode,
-      latitude: geoData.coordinates.latitude,
-      longitude:geoData.coordinates.longitude,
+      address,
     },
+    location,
     state: SearchJobState.Created,
-    geoData,
     createdAt: Date.now(),
   });
 
@@ -90,7 +89,7 @@ export async function startOrCheckSearchJob(context: AppLoadContext, key: string
         const allPlaces = new Map<string, PlaceAPIResponse['places'][0]>();
 
         const originalQuery = job.input.favoriteMealName;
-        const coordinates = job.geoData.coordinates;
+        const coordinates = job.location.coordinates;
 
         async function searchAndAppendToAllPlaces(query: string, baseProgress = 0.01) {
           console.log(
@@ -265,7 +264,6 @@ export async function startOrCheckSearchJob(context: AppLoadContext, key: string
           const name = place.displayName.text;
           const address = place.formattedAddress;
           const url = place.googleMapsUri;
-          const isOpen = place.currentOpeningHours?.openNow;
 
           const description =
             placesDescriptions.find(p => p?.id === id)?.description ?? null;
@@ -281,7 +279,6 @@ export async function startOrCheckSearchJob(context: AppLoadContext, key: string
             thumbnail,
             rating: { number: place.rating, count: place.userRatingCount },
             price: place.priceLevel,
-            isOpen,
           };
         });
 

app/root.tsx

@@ -14,7 +14,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         />
         <meta
           name="description"
-          content="Search for your favorite meal near you, quickly, enhanced by AI and for free."
+          content="Discover the top 3 restaurants serving your favorite meal near you. Just enter your craving and location in our free AI-powered app, and start your culinary adventure today!"
         />
 
         <meta property="og:title" content="Cule filo" />
@@ -23,10 +23,10 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <meta property="og:site_name" content="Cule filo" />
         <meta
           property="og:description"
-          content="Search for your favorite meal near you, quickly, enhanced by AI and for free."
+          content="Discover the top 3 restaurants serving your favorite meal near you. Just enter your craving and location in our free AI-powered app, and start your culinary adventure today!"
         />
 
-        <title>Cule filo</title>
+        <title>Cule filo - AI-powered meal search</title>
 
         <Meta />
         <Links />