Skip to content

Commit 36fe4a6

Browse files
Bhoomi-PipaliaBhoomi Pipalia
Bhoomi-Pipalia
and
Bhoomi Pipalia
authored
Feature/wsdev 6080 map (#544)
* fix: location picket to use the react google maps api * fix: props in locationpicker component * fix: toast to remove transition and add the native classes to animate the toast * fix: remove unwanted packages * add: latest packages and react 19 * add: changelog * revert: card image aspect ration --------- Co-authored-by: Bhoomi Pipalia <bhoomipipalia@Bhoomis-MacBook-Pro-2.local>
1 parent 8dab98d commit 36fe4a6

File tree

17 files changed

+1338
-1101
lines changed

17 files changed

+1338
-1101
lines changed

‎CHANGELOG.mdx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,18 @@ Prefix the change with one of these keywords:
1717

1818
## [Unreleased]
1919

20+
### Breaking
21+
22+
- Update to react 19, and all other packages
23+
24+
### Fixed
25+
26+
- `LocationPicker` block by replacing react-places-autocomplete with @react-google-maps/api
27+
28+
### Removed
29+
30+
- Aspect ratio from card image
31+
2032
## [0.25.17] — [0.26.0]
2133

2234
### Fixed / Reverted

‎lib/components/Card/CardInitials.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const styles = {
99

1010
export const CardInitials = ({ initials }: CardInitialsProps) => {
1111
return (
12-
<figure className={`cu-figure cu-figure--round ${styles.round} ${styles.figure}`}>
12+
<figure className={`cu-figure--round ${styles.round} ${styles.figure}`}>
1313
<div className="relative">
1414
<img
1515
src="https://cu-production.s3.amazonaws.com/rds/assets/graphics/grey-bg.jpg"

‎lib/components/Card/CardVideo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const CardVideo = ({ source }: CardVideoProps) => {
2323
} else {
2424
return (
2525
<div className="relative pt-[56.25%] bg-cu-black-800 mb-2 rounded-t-lg overflow-hidden">
26-
<ReactPlayer url={source} className="absolute top-0 left-0" width="100%" height="100%" controls />
26+
<ReactPlayer src={source} className="absolute top-0 left-0" width="100%" height="100%" controls />
2727
</div>
2828
)
2929
}

‎lib/components/Card/styles.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,6 @@
2929
@apply w-full;
3030
}
3131

32-
.cu-card .cu-figure img {
33-
@apply aspect-[3/2];
34-
}
35-
3632
.cu-card .cu-figure--round img,
3733
.cu-card .cu-figure--round svg {
3834
@apply mx-auto h-32 w-32 rounded-full border-4 border-white object-cover shadow-md @sm:md:h-48 @sm:md:w-48;

‎lib/components/Form/PlacesAutoComplete/PlacesAutoComplete.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,7 @@ export const PlacesAutoComplete = ({ name, showmap = true, ...rest }: PlacesAuto
4040
className="cu-placesautocomplete grid gap-5"
4141
aria-invalid={meta.touched && meta.error ? true : false}
4242
>
43-
<LocationPicker
44-
singleMarker
45-
singleMarkerCallback={markerCallback}
46-
eventAddress={coordinates?.address}
47-
eventLatitude={coordinates?.coordinates?.lat}
48-
eventLongitude={coordinates?.coordinates?.lng}
49-
/>
43+
<LocationPicker markerCallback={markerCallback} address={coordinates?.address} />
5044
{showmap && (
5145
<Location
5246
lat={coordinates?.coordinates?.lat?.toString()}

‎lib/components/LinkProvider/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export interface ILinkProvider {
77
children: React.ReactNode
88
}
99

10-
export const Link: FC<ILinkProvider> = ({ type, children }): JSX.Element => {
10+
export const Link: FC<ILinkProvider> = ({ type, children }): React.ReactElement => {
1111
return <LinkContext.Provider value={type}>{children}</LinkContext.Provider>
1212
}
1313

‎lib/components/Location/Location.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export interface LocationProps {
1717
export const Location = ({ markers, location, lat, lng, zoom = 15, center, isRounded = true }: LocationProps) => {
1818
const [showInfo, setShowInfo] = React.useState(false)
1919

20-
const mapRef = React.useRef()
20+
const mapRef = React.useRef<google.maps.Map | null>(null)
2121

2222
const [activeMarker, setActiveMarker] = useState(null)
2323

‎lib/components/LocationPicker/LocationPicker.stories.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,22 +33,23 @@ export const Default: Story = () => {
3333
coordinates: { lat: number; lng: number }
3434
address: string
3535
}
36-
const [coordinates, setCoordinates] = useState<{ coordinates: { lat: number; lng: number }; address: string }>({
36+
const [coordinates, setCoordinates] = useState<SingleMarkerInterface>({
3737
coordinates: {
3838
lat: 45.3850225,
3939
lng: -75.6946679,
4040
},
4141
address: "Carleton University Raven's Nest",
4242
})
4343
const markerCallback = useCallback(
44-
(coord: SingleMarkerInterface) => {
45-
setCoordinates(coord)
44+
(coordinates: SingleMarkerInterface) => {
45+
setCoordinates(coordinates)
4646
},
4747
[setCoordinates],
4848
)
49+
4950
return (
5051
<Main>
51-
<LocationPicker singleMarker singleMarkerCallback={markerCallback} />{' '}
52+
<LocationPicker address={coordinates.address} markerCallback={markerCallback} />
5253
<Location
5354
lat={coordinates?.coordinates?.lat?.toString()}
5455
lng={coordinates?.coordinates?.lng?.toString()}
@@ -65,22 +66,22 @@ export const EventAddress: Story = () => {
6566
coordinates: { lat: number; lng: number }
6667
address: string
6768
}
68-
const [coordinates, setCoordinates] = useState<{ coordinates: { lat: number; lng: number }; address: string }>({
69+
const [coordinates, setCoordinates] = useState<SingleMarkerInterface>({
6970
coordinates: {
7071
lat: 40.712776,
7172
lng: -74.005974,
7273
},
7374
address: 'New York City, NY',
7475
})
7576
const markerCallback = useCallback(
76-
(coord: SingleMarkerInterface) => {
77-
setCoordinates(coord)
77+
(coordinates: SingleMarkerInterface) => {
78+
setCoordinates(coordinates)
7879
},
7980
[setCoordinates],
8081
)
8182
return (
8283
<Main>
83-
<LocationPicker singleMarker eventAddress="New York City, NY" singleMarkerCallback={markerCallback} />
84+
<LocationPicker address="New York City, NY" markerCallback={markerCallback} />
8485
<Location
8586
lat={coordinates?.coordinates?.lat?.toString()}
8687
lng={coordinates?.coordinates?.lng?.toString()}

‎lib/components/LocationPicker/LocationPicker.tsx‎

Lines changed: 62 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,77 @@
1-
import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
1+
import { Autocomplete, useJsApiLoader } from '@react-google-maps/api'
2+
import { useRef, useEffect } from 'react'
23
import { Icon } from '../Icon/Icon'
3-
import { useEffect, useState } from 'react'
4-
import PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-places-autocomplete'
54

6-
export interface LocationPickerProps {
7-
posCallback?: (pos: { name: string; id: string; position: object }[]) => void
8-
centerCallback?: (center: { lat: number; lng: number }) => void
9-
singleMarker?: boolean
10-
singleMarkerCallback?: (marker: { coordinates: { lat: number; lng: number }; address: string }) => void
11-
eventLatitude?: number
12-
eventLongitude?: number
13-
eventAddress?: string
5+
const libraries: 'places'[] = ['places']
6+
7+
export interface SingleMarkerInterface {
8+
address: string
9+
coordinates: { lat: number; lng: number }
1410
}
1511

16-
export const LocationPicker = ({
17-
posCallback,
18-
centerCallback,
19-
singleMarker,
20-
singleMarkerCallback,
21-
eventAddress,
22-
eventLatitude,
23-
eventLongitude,
24-
}: LocationPickerProps) => {
25-
const [address, setAddress] = useState(eventAddress ? eventAddress : '')
26-
const [center, setCenter] = useState<{ lat: number; lng: number }>({
27-
lat: 45.3850225,
28-
lng: -75.6946679,
29-
})
30-
const [pos, setPos] = useState<{ name: string; id: string; position: object }[]>([])
31-
const [coordinates, setCoordinates] = useState({
32-
lat: eventLatitude ? eventLatitude : 45.3850225,
33-
lng: eventLongitude ? eventLongitude : -75.6946679,
12+
interface ILocationPickerProps {
13+
address?: string
14+
markerCallback?: (coordinates: SingleMarkerInterface) => void
15+
}
16+
17+
export function LocationPicker({ address, markerCallback }: ILocationPickerProps) {
18+
// eslint-disable-next-line no-undef
19+
const autocompleteRef = useRef<google.maps.places.Autocomplete | null>(null)
20+
const inputRef = useRef<HTMLInputElement | null>(null)
21+
22+
const { isLoaded } = useJsApiLoader({
23+
googleMapsApiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
24+
libraries,
3425
})
3526

36-
const handleSelect = async (value: string) => {
37-
const results = await geocodeByAddress(value)
38-
const latLng = await getLatLng(results[0])
39-
const placeID = results[0].place_id
40-
setAddress(value)
41-
setCenter({ lat: latLng.lat, lng: latLng.lng })
42-
setPos([...pos, { name: value, id: placeID, position: latLng }])
43-
setCoordinates(latLng)
27+
useEffect(() => {
28+
if (address && inputRef.current) {
29+
inputRef.current.value = address
30+
}
31+
}, [address])
32+
33+
// eslint-disable-next-line no-undef
34+
const onLoad = (autocomplete: google.maps.places.Autocomplete) => {
35+
autocompleteRef.current = autocomplete
4436
}
4537

46-
useEffect(() => {
47-
if (posCallback) posCallback(pos)
48-
}, [pos, posCallback])
38+
const onPlaceChanged = () => {
39+
const place = autocompleteRef.current?.getPlace()
40+
if (place?.geometry?.location) {
41+
const newAddress = place.formatted_address || ''
42+
const newLat = place.geometry.location.lat()
43+
const newLng = place.geometry.location.lng()
4944

50-
useEffect(() => {
51-
if (centerCallback) centerCallback(center)
52-
}, [center, centerCallback])
45+
markerCallback?.({
46+
coordinates: { lat: newLat, lng: newLng },
47+
address: newAddress,
48+
})
49+
}
50+
}
5351

54-
useEffect(() => {
55-
if (singleMarker && singleMarkerCallback) singleMarkerCallback({ coordinates, address: address })
56-
}, [coordinates, address, singleMarkerCallback, singleMarker])
52+
if (!isLoaded) return null
5753

5854
return (
59-
<div className="cu-locationpicker not-prose">
60-
<PlacesAutocomplete value={address} onChange={setAddress} onSelect={handleSelect}>
61-
{({ getInputProps, suggestions, getSuggestionItemProps }) => (
62-
<Combobox value={address} onChange={handleSelect}>
63-
<div className="relative">
64-
<Icon
65-
name="magnifying-glass"
66-
size={20}
67-
className="pointer-events-none absolute left-3.5 top-3.5"
68-
color="#9CA3AF"
69-
/>
70-
<ComboboxInput
71-
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"
72-
{...getInputProps({ placeholder: 'Type address' })}
73-
/>
74-
{address && (
75-
<span
76-
className="absolute right-3.5 top-2.5 cursor-pointer text-2xl select-none"
77-
style={{ lineHeight: '1', color: '#9CA3AF' }}
78-
onClick={() => setAddress('')}
79-
role="button"
80-
tabIndex={0}
81-
aria-label="Clear address"
82-
>
83-
×
84-
</span>
85-
)}
86-
</div>
87-
<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">
88-
{suggestions.map((suggestion) => {
89-
return (
90-
<ComboboxOption key={suggestion.index} value={suggestion}>
91-
{({ active }) => (
92-
<ul>
93-
<li
94-
{...getSuggestionItemProps(suggestion)}
95-
className={`p-4 text-cu-black-600 hover:cursor-pointer ${
96-
active ? 'bg-cu-black-50 text-cu-black-900' : 'bg-white'
97-
}`}
98-
key={suggestion.index}
99-
>
100-
{suggestion.description}
101-
</li>
102-
</ul>
103-
)}
104-
</ComboboxOption>
105-
)
106-
})}
107-
</ComboboxOptions>
108-
</Combobox>
109-
)}
110-
</PlacesAutocomplete>
55+
<div className="relative">
56+
<Autocomplete onLoad={onLoad} onPlaceChanged={onPlaceChanged}>
57+
<input
58+
ref={inputRef}
59+
defaultValue={address}
60+
placeholder="Search for a location"
61+
style={{
62+
width: '100%',
63+
padding: '8px 8px 8px 40px',
64+
border: '1px solid #ccc',
65+
borderRadius: '4px',
66+
}}
67+
/>
68+
</Autocomplete>
69+
<Icon
70+
name="magnifying-glass"
71+
size={16}
72+
className="pointer-events-none absolute left-3.5 top-3.5"
73+
color="#999999"
74+
/>
11175
</div>
11276
)
11377
}

‎lib/components/Table/Table.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export interface ColumnDefinitionType {
1313

1414
export interface TableProps {
1515
data: {
16-
[k: string]: string | number | JSX.Element
16+
[k: string]: string | number | React.ReactElement
1717
}[]
1818
colgroup?: number[]
1919
columns: ColumnDefinitionType[]

0 commit comments

Comments
 (0)