Feature/wsdev 6080 map

lib/components/Card/CardVideo.tsx

@@ -23,7 +23,7 @@ export const CardVideo = ({ source }: CardVideoProps) => {
   } else {
     return (
       <div className="relative pt-[56.25%] bg-cu-black-800 mb-2 rounded-t-lg overflow-hidden">
-        <ReactPlayer url={source} className="absolute top-0 left-0" width="100%" height="100%" controls />
+        <ReactPlayer src={source} className="absolute top-0 left-0" width="100%" height="100%" controls />
       </div>
     )
   }

lib/components/Form/PlacesAutoComplete/PlacesAutoComplete.tsx

@@ -40,13 +40,7 @@ export const PlacesAutoComplete = ({ name, showmap = true, ...rest }: PlacesAuto
         className="cu-placesautocomplete grid gap-5"
         aria-invalid={meta.touched && meta.error ? true : false}
       >
-        <LocationPicker
-          singleMarker
-          singleMarkerCallback={markerCallback}
-          eventAddress={coordinates?.address}
-          eventLatitude={coordinates?.coordinates?.lat}
-          eventLongitude={coordinates?.coordinates?.lng}
-        />
+        <LocationPicker markerCallback={markerCallback} address={coordinates?.address} />
         {showmap && (
           <Location
             lat={coordinates?.coordinates?.lat?.toString()}

lib/components/LinkProvider/index.tsx

@@ -7,7 +7,7 @@ export interface ILinkProvider {
   children: React.ReactNode
 }
 
-export const Link: FC<ILinkProvider> = ({ type, children }): JSX.Element => {
+export const Link: FC<ILinkProvider> = ({ type, children }): React.ReactElement => {
   return <LinkContext.Provider value={type}>{children}</LinkContext.Provider>
 }
 

lib/components/Location/Location.tsx

@@ -17,7 +17,7 @@ export interface LocationProps {
 export const Location = ({ markers, location, lat, lng, zoom = 15, center, isRounded = true }: LocationProps) => {
   const [showInfo, setShowInfo] = React.useState(false)
 
-  const mapRef = React.useRef()
+  const mapRef = React.useRef<google.maps.Map | null>(null)
 
   const [activeMarker, setActiveMarker] = useState(null)
 

lib/components/LocationPicker/LocationPicker.stories.tsx

@@ -33,22 +33,23 @@ export const Default: Story = () => {
     coordinates: { lat: number; lng: number }
     address: string
   }
-  const [coordinates, setCoordinates] = useState<{ coordinates: { lat: number; lng: number }; address: string }>({
+  const [coordinates, setCoordinates] = useState<SingleMarkerInterface>({
     coordinates: {
       lat: 45.3850225,
       lng: -75.6946679,
     },
     address: "Carleton University Raven's Nest",
   })
   const markerCallback = useCallback(
-    (coord: SingleMarkerInterface) => {
-      setCoordinates(coord)
+    (coordinates: SingleMarkerInterface) => {
+      setCoordinates(coordinates)
     },
     [setCoordinates],
   )
+
   return (
     <Main>
-      <LocationPicker singleMarker singleMarkerCallback={markerCallback} />{' '}
+      <LocationPicker address={coordinates.address} markerCallback={markerCallback} />
       <Location
         lat={coordinates?.coordinates?.lat?.toString()}
         lng={coordinates?.coordinates?.lng?.toString()}
@@ -65,22 +66,22 @@ export const EventAddress: Story = () => {
     coordinates: { lat: number; lng: number }
     address: string
   }
-  const [coordinates, setCoordinates] = useState<{ coordinates: { lat: number; lng: number }; address: string }>({
+  const [coordinates, setCoordinates] = useState<SingleMarkerInterface>({
     coordinates: {
       lat: 40.712776,
       lng: -74.005974,
     },
     address: 'New York City, NY',
   })
   const markerCallback = useCallback(
-    (coord: SingleMarkerInterface) => {
-      setCoordinates(coord)
+    (coordinates: SingleMarkerInterface) => {
+      setCoordinates(coordinates)
     },
     [setCoordinates],
   )
   return (
     <Main>
-      <LocationPicker singleMarker eventAddress="New York City, NY" singleMarkerCallback={markerCallback} />
+      <LocationPicker address="New York City, NY" markerCallback={markerCallback} />
       <Location
         lat={coordinates?.coordinates?.lat?.toString()}
         lng={coordinates?.coordinates?.lng?.toString()}

lib/components/LocationPicker/LocationPicker.tsx

@@ -1,113 +1,77 @@
-import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
+import { Autocomplete, useJsApiLoader } from '@react-google-maps/api'
+import { useRef, useEffect } from 'react'
 import { Icon } from '../Icon/Icon'
-import { useEffect, useState } from 'react'
-import PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-places-autocomplete'
 
-export interface LocationPickerProps {
-  posCallback?: (pos: { name: string; id: string; position: object }[]) => void
-  centerCallback?: (center: { lat: number; lng: number }) => void
-  singleMarker?: boolean
-  singleMarkerCallback?: (marker: { coordinates: { lat: number; lng: number }; address: string }) => void
-  eventLatitude?: number
-  eventLongitude?: number
-  eventAddress?: string
+const libraries: 'places'[] = ['places']
+
+export interface SingleMarkerInterface {
+  address: string
+  coordinates: { lat: number; lng: number }
 }
 
-export const LocationPicker = ({
-  posCallback,
-  centerCallback,
-  singleMarker,
-  singleMarkerCallback,
-  eventAddress,
-  eventLatitude,
-  eventLongitude,
-}: LocationPickerProps) => {
-  const [address, setAddress] = useState(eventAddress ? eventAddress : '')
-  const [center, setCenter] = useState<{ lat: number; lng: number }>({
-    lat: 45.3850225,
-    lng: -75.6946679,
-  })
-  const [pos, setPos] = useState<{ name: string; id: string; position: object }[]>([])
-  const [coordinates, setCoordinates] = useState({
-    lat: eventLatitude ? eventLatitude : 45.3850225,
-    lng: eventLongitude ? eventLongitude : -75.6946679,
+interface ILocationPickerProps {
+  address?: string
+  markerCallback?: (coordinates: SingleMarkerInterface) => void
+}
+
+export function LocationPicker({ address, markerCallback }: ILocationPickerProps) {
+  // eslint-disable-next-line no-undef
+  const autocompleteRef = useRef<google.maps.places.Autocomplete | null>(null)
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  const { isLoaded } = useJsApiLoader({
+    googleMapsApiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
+    libraries,
   })
 
-  const handleSelect = async (value: string) => {
-    const results = await geocodeByAddress(value)
-    const latLng = await getLatLng(results[0])
-    const placeID = results[0].place_id
-    setAddress(value)
-    setCenter({ lat: latLng.lat, lng: latLng.lng })
-    setPos([...pos, { name: value, id: placeID, position: latLng }])
-    setCoordinates(latLng)
+  useEffect(() => {
+    if (address && inputRef.current) {
+      inputRef.current.value = address
+    }
+  }, [address])
+
+  // eslint-disable-next-line no-undef
+  const onLoad = (autocomplete: google.maps.places.Autocomplete) => {
+    autocompleteRef.current = autocomplete
   }
 
-  useEffect(() => {
-    if (posCallback) posCallback(pos)
-  }, [pos, posCallback])
+  const onPlaceChanged = () => {
+    const place = autocompleteRef.current?.getPlace()
+    if (place?.geometry?.location) {
+      const newAddress = place.formatted_address || ''
+      const newLat = place.geometry.location.lat()
+      const newLng = place.geometry.location.lng()
 
-  useEffect(() => {
-    if (centerCallback) centerCallback(center)
-  }, [center, centerCallback])
+      markerCallback?.({
+        coordinates: { lat: newLat, lng: newLng },
+        address: newAddress,
+      })
+    }
+  }
 
-  useEffect(() => {
-    if (singleMarker && singleMarkerCallback) singleMarkerCallback({ coordinates, address: address })
-  }, [coordinates, address, singleMarkerCallback, singleMarker])
+  if (!isLoaded) return null
 
   return (
-    <div className="cu-locationpicker not-prose">
-      <PlacesAutocomplete value={address} onChange={setAddress} onSelect={handleSelect}>
-        {({ getInputProps, suggestions, getSuggestionItemProps }) => (
-          <Combobox value={address} onChange={handleSelect}>
-            <div className="relative">
-              <Icon
-                name="magnifying-glass"
-                size={20}
-                className="pointer-events-none absolute left-3.5 top-3.5"
-                color="#9CA3AF"
-              />
-              <ComboboxInput
-                className="w-full h-12 pl-10 pr-4 bg-white border rounded-lg border-cu-black-200 text-cu-black-800 placeholder-cu-black-400 focus:border-cu-black-400 focus:outline-none focus:ring-0 sm:text-sm"
-                {...getInputProps({ placeholder: 'Type address' })}
-              />
-              {address && (
-                <span
-                  className="absolute right-3.5 top-2.5 cursor-pointer text-2xl select-none"
-                  style={{ lineHeight: '1', color: '#9CA3AF' }}
-                  onClick={() => setAddress('')}
-                  role="button"
-                  tabIndex={0}
-                  aria-label="Clear address"
-                >
-                  ×
-                </span>
-              )}
-            </div>
-            <ComboboxOptions className="mt-3 max-h-80 divide-y divide-cu-black-100 overflow-y-auto bg-white px-1.5 text-sm text-cu-black-800">
-              {suggestions.map((suggestion) => {
-                return (
-                  <ComboboxOption key={suggestion.index} value={suggestion}>
-                    {({ active }) => (
-                      <ul>
-                        <li
-                          {...getSuggestionItemProps(suggestion)}
-                          className={`p-4 text-cu-black-600 hover:cursor-pointer ${
-                            active ? 'bg-cu-black-50 text-cu-black-900' : 'bg-white'
-                          }`}
-                          key={suggestion.index}
-                        >
-                          {suggestion.description}
-                        </li>
-                      </ul>
-                    )}
-                  </ComboboxOption>
-                )
-              })}
-            </ComboboxOptions>
-          </Combobox>
-        )}
-      </PlacesAutocomplete>
+    <div className="relative">
+      <Autocomplete onLoad={onLoad} onPlaceChanged={onPlaceChanged}>
+        <input
+          ref={inputRef}
+          defaultValue={address}
+          placeholder="Search for a location"
+          style={{
+            width: '100%',
+            padding: '8px 8px 8px 40px',
+            border: '1px solid #ccc',
+            borderRadius: '4px',
+          }}
+        />
+      </Autocomplete>
+      <Icon
+        name="magnifying-glass"
+        size={16}
+        className="pointer-events-none absolute left-3.5 top-3.5"
+        color="#999999"
+      />
     </div>
   )
 }

lib/components/Table/Table.tsx

@@ -13,7 +13,7 @@ export interface ColumnDefinitionType {
 
 export interface TableProps {
   data: {
-    [k: string]: string | number | JSX.Element
+    [k: string]: string | number | React.ReactElement
   }[]
   colgroup?: number[]
   columns: ColumnDefinitionType[]

lib/components/Table/TableRows.tsx

@@ -3,7 +3,7 @@ import { styles } from './Table.Styles'
 
 type TableRowsProps = {
   data: {
-    [k: string]: string | number | JSX.Element
+    [k: string]: string | number | React.ReactElement
   }[]
   columns: ColumnDefinitionType[]
   striped: boolean

lib/components/Toast/Toast.tsx

@@ -1,5 +1,4 @@
-import { Fragment, PropsWithChildren, useState } from 'react'
-import { Transition } from '@headlessui/react'
+import { PropsWithChildren, useState } from 'react'
 import { Icon } from '../Icon/Icon'
 export interface ToastBaseProps {
   type: 'success' | 'error' | 'warning' | 'info'
@@ -26,6 +25,7 @@ const Content = ({ children }: PropsWithChildren) => {
 
 const ToastBase = ({ children, type }: PropsWithChildren<ToastBaseProps>) => {
   const [showToast, setShowToast] = useState(true)
+  const [shouldRender, setShouldRender] = useState(true)
 
   const toastTypes = {
     success: {
@@ -42,16 +42,23 @@ const ToastBase = ({ children, type }: PropsWithChildren<ToastBaseProps>) => {
     },
   }
 
+  const handleClose = () => {
+    setShowToast(false)
+    // Remove the element after transition completes
+    setTimeout(() => {
+      setShouldRender(false)
+    }, 200) // Match the duration-200 class
+  }
+
+  if (!shouldRender) return null
+
   return (
-    <Transition
-      show={showToast}
-      as={Fragment}
-      enter="transform ease-out duration-300 transition"
-      enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-      enterTo="translate-y-0 opacity-100 sm:translate-x-0"
-      leave="transition ease-in duration-100"
-      leaveFrom="opacity-100"
-      leaveTo="opacity-0"
+    <div
+      className={`cu-toast pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 transform transition ease-in duration-200 ${
+        showToast
+          ? 'translate-y-0 opacity-200 sm:translate-x-0 '
+          : 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2'
+      }`}
     >
       <div className="cu-toast pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
         <div className="p-4">
@@ -62,9 +69,7 @@ const ToastBase = ({ children, type }: PropsWithChildren<ToastBaseProps>) => {
               <button
                 type="button"
                 className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                onClick={() => {
-                  setShowToast(false)
-                }}
+                onClick={handleClose}
               >
                 <span className="sr-only">Close</span>
                 <Icon name="xmark" size={20} className="h-5 w-5" aria-hidden="true" />
@@ -73,7 +78,7 @@ const ToastBase = ({ children, type }: PropsWithChildren<ToastBaseProps>) => {
           </div>
         </div>
       </div>
-    </Transition>
+    </div>
   )
 }
 

lib/data/TableData.ts

@@ -1,5 +1,5 @@
 export interface TableDataProps {
-  [k: string]: string | number | JSX.Element
+  [k: string]: string | number | React.ReactElement
 }
 
 export const TableData: TableDataProps[] = [

lib/hooks/useSortableTable.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 
 interface DataProps {
-  [k: string]: string | number | JSX.Element
+  [k: string]: string | number | React.ReactElement
 }
 
 export const useSortableTable = (data: DataProps[]) => {