From 9b0996b18f5f4e48604fd5ee07b1c0b9d1883f24 Mon Sep 17 00:00:00 2001 From: zmeyer44 Date: Mon, 23 Oct 2023 16:04:12 -0400 Subject: [PATCH] loction working --- components/LocationSearch/index.tsx | 181 ++++++++++++++++------ components/Modals/CreateCalendarEvent.tsx | 18 ++- 2 files changed, 146 insertions(+), 53 deletions(-) diff --git a/components/LocationSearch/index.tsx b/components/LocationSearch/index.tsx index 8a823d0..e6d42af 100644 --- a/components/LocationSearch/index.tsx +++ b/components/LocationSearch/index.tsx @@ -1,45 +1,55 @@ "use client"; -import { useMemo } from "react"; -import usePlacesAutocomplete from "use-places-autocomplete"; +import { useMemo, useState } from "react"; +import usePlacesAutocomplete, { + getGeocode, + getLatLng, +} from "use-places-autocomplete"; import { Input } from "../ui/input"; import { cn } from "@/lib/utils"; -import { HiOutlineBuildingStorefront } from "react-icons/hi2"; +import { + HiOutlineBuildingStorefront, + HiOutlineMapPin, + HiOutlineHomeModern, + HiOutlineFilm, + HiOutlineShoppingBag, + HiOutlineBuildingLibrary, +} from "react-icons/hi2"; +import { RxMagnifyingGlass } from "react-icons/rx"; +import { LiaGlassMartiniSolid } from "react-icons/lia"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { Button } from "@/components/ui/button"; -import { - Command, - CommandEmpty, - CommandGroup, - CommandItem, - CommandInput, - CommandList, - CommandSeparator, -} from "@/components/ui/command"; import { useLoadScript } from "@react-google-maps/api"; +import Spinner from "../spinner"; -export default function LocationSearchInput() { +type LocationSearchInputProps = { + onSelect: (location: { + name: string; + address: string; + coordinates: { lat: number; lng: number }; + }) => void; + location?: { + name: string; + address: string; + coordinates: { lat: number; lng: number }; + }; +}; +export default function LocationSearchInput({ + onSelect, + location, +}: LocationSearchInputProps) { + console.log("LOCATION", location); const libraries = useMemo(() => ["places"], []); const { isLoaded, loadError } = useLoadScript({ googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY as string, libraries: libraries as any, }); - const { - ready, - value, - suggestions: { status, data }, // results from Google Places API for the given search term - setValue, // use this method to link input value with the autocomplete hook - clearSuggestions, - } = usePlacesAutocomplete({ - requestOptions: { componentRestrictions: { country: "us" } }, // restrict search to US - debounce: 300, - cache: 86400, - }); + if (loadError) { - return

hello{JSON.stringify(loadError)}

; + return

{JSON.stringify(loadError)}

; } if (!isLoaded) { return ( @@ -48,80 +58,155 @@ export default function LocationSearchInput() { disabled={true} className={cn( "justify-start p-0 text-left font-normal", - !value && "text-muted-foreground", + "text-muted-foreground", )} > Add a location... ); } - return ; + return ; } -function CommandSearch() { + +type CommandSearchProps = { + onSelect: (location: { + name: string; + address: string; + coordinates: { lat: number; lng: number }; + }) => void; + location?: { + name: string; + address: string; + coordinates: { lat: number; lng: number }; + }; +}; +function CommandSearch({ location, onSelect }: CommandSearchProps) { + const [open, setOpen] = useState(false); const { ready, value, - suggestions: { status, data }, // results from Google Places API for the given search term + suggestions: { status, data, loading }, // results from Google Places API for the given search term setValue, // use this method to link input value with the autocomplete hook clearSuggestions, } = usePlacesAutocomplete({ - requestOptions: { componentRestrictions: { country: "us" } }, // restrict search to US + requestOptions: {}, debounce: 300, cache: 86400, }); + async function handleSelect(placeId: string, name: string) { + const result = await getGeocode({ + placeId, + }); + if (!result[0]) return; + const coordinates = getLatLng(result[0]); + setOpen(false); + return onSelect({ + name, + coordinates, + address: result[0].formatted_address, + }); + } return ( - +
- setValue(e.target.value)} - placeholder="Search places..." - disabled={!ready} - /> +
+ setValue(e.target.value)} + placeholder="Search places..." + disabled={!ready} + /> +
+ +
+
    {data.map((place) => { const { - description, place_id, structured_formatting: { main_text, secondary_text }, + types, } = place; return (
  • console.log(place)} + onClick={() => handleSelect(place_id, main_text)} className={cn( - "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-muted", + "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-muted", )} > - -
    -

    {main_text}

    - + +
    +

    {main_text}

    + {secondary_text}
    • ); })} + {data.length === 0 && status === "ZERO_RESULTS" && ( +
    +

    No results found

    +
    + )} + {loading && ( +
    + +
    + )}
); } + +function RenderIcon({ + types, + className, +}: { + types: string[]; + className?: string; +}) { + if (types.includes("restaurant")) { + return ; + } else if (types.includes("art_gallery")) { + return ; + } else if (types.includes("bar")) { + return ; + } else if (types.includes("city_hall")) { + return ; + } else if (types.includes("store")) { + return ; + } else if (types.includes("movie_theater")) { + return ; + } + return ; +} diff --git a/components/Modals/CreateCalendarEvent.tsx b/components/Modals/CreateCalendarEvent.tsx index b345cbb..5fa6182 100644 --- a/components/Modals/CreateCalendarEvent.tsx +++ b/components/Modals/CreateCalendarEvent.tsx @@ -49,6 +49,11 @@ export default function CreateCalendarEventModal() { const [timezone, setTimezone] = useState( Intl.DateTimeFormat().resolvedOptions().timeZone, ); + const [location, setLocation] = useState<{ + address: string; + name: string; + coordinates: { lat: number; lng: number }; + }>(); useEffect(() => { if (startDate && endDate) { @@ -93,7 +98,7 @@ export default function CreateCalendarEventModal() {
-
+
Start
@@ -132,7 +137,7 @@ export default function CreateCalendarEventModal() {
-
+
End
@@ -172,7 +177,7 @@ export default function CreateCalendarEventModal() {
-
+
-
+
- + setLocation(l)} + />