From 4042d4038e77e12c8361a639d249d95314724ce5 Mon Sep 17 00:00:00 2001
From: Rushil Umaretiya <rushilwiz@gmail.com>
Date: Sun, 11 Apr 2021 12:45:55 -0400
Subject: [PATCH] feat: added marker funcitonality
---
src/components/Pool.tsx | 88 ++++++++++++++++++++++++++++++++++++--
src/components/PoolMap.tsx | 28 +++++++++---
src/types.d.ts | 8 ++++
3 files changed, 113 insertions(+), 11 deletions(-)
diff --git a/src/components/Pool.tsx b/src/components/Pool.tsx
index dbe7367..465758a 100644
--- a/src/components/Pool.tsx
+++ b/src/components/Pool.tsx
@@ -8,6 +8,11 @@ import { makeAPIPostCall } from '../api/utils';
import AuthenticationContext from './AuthenticationContext';
import PoolMap from './PoolMap';
+import PlacesAutocomplete, {
+ geocodeByAddress,
+ getLatLng,
+} from 'react-places-autocomplete';
+
// eslint-disable-next-line
const SAMPLE_POOL = {
id: '123',
@@ -42,7 +47,14 @@ export default function Pool({
triggerUpdate: Function;
}) {
const { user } = useContext(AuthenticationContext);
+ const [address, setAddress] = useState('');
+ const handleChange = (address: string) => {
+ setAddress(address);
+ };
+ const handleSelect = (address: string) => {
+ setAddress(address);
+ };
const commentTextareaRef = useRef<HTMLTextAreaElement>(null);
const [commentStatus, setCommentStatus] = useState<
null | 'pending' | 'errored'
@@ -79,13 +91,78 @@ export default function Pool({
);
const onRegister = useCallback(() => {
- makeAPIPostCall(`/pools/${pool._id}/join`).then(() => triggerUpdate());
- }, [pool._id, triggerUpdate]);
+ makeAPIPostCall(`/pools/${pool._id}/join`)
+ .then(() => geocodeByAddress(address))
+ .then((results) => getLatLng(results[0]))
+ .then(({ lat, lng }) =>
+ makeAPIPostCall(`/addresses`, {
+ pool: pool._id,
+ location: address,
+ lat: lat,
+ lng: lng,
+ })
+ )
+ .then(() => triggerUpdate());
+ }, [pool._id, address, triggerUpdate]);
const onUnregister = useCallback(() => {
- makeAPIPostCall(`/pools/${pool._id}/leave`).then(() => triggerUpdate());
+ makeAPIPostCall(`/pools/${pool._id}/leave`)
+ .then(() =>
+ makeAPIPostCall(`/addresses/remove`, {
+ pool: pool._id,
+ })
+ )
+ .then(() => triggerUpdate());
}, [pool._id, triggerUpdate]);
+ const mapField = (
+ <div className="form-group">
+ <PlacesAutocomplete
+ value={address}
+ onChange={handleChange}
+ onSelect={handleSelect}
+ >
+ {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
+ <div>
+ <label className="" htmlFor="address">
+ Address:
+ </label>
+ <input
+ name="address"
+ id="address"
+ {...getInputProps({
+ placeholder: 'Search Places ...',
+ className: 'location-search-input form-control',
+ })}
+ />
+ <div className="autocomplete-dropdown-container">
+ {loading && <div>Loading...</div>}
+ {suggestions.map((suggestion) => {
+ const className = suggestion.active
+ ? 'suggestion-item--active'
+ : 'suggestion-item';
+ // inline style for demonstration purpose
+ const style = suggestion.active
+ ? { backgroundColor: '#fafafa', cursor: 'pointer' }
+ : { backgroundColor: '#ffffff', cursor: 'pointer' };
+ return (
+ <div
+ {...getSuggestionItemProps(suggestion, {
+ className,
+ style,
+ })}
+ >
+ <span>{suggestion.description}</span>
+ </div>
+ );
+ })}
+ </div>
+ </div>
+ )}
+ </PlacesAutocomplete>
+ </div>
+ );
+
return (
<Card style={{ margin: '3rem auto', padding: '1rem 1rem', width: '50%' }}>
{pool && (
@@ -103,6 +180,9 @@ export default function Pool({
<b>End Time</b>: {pool.end_time || '3:30 PM'}
</Typography>
<Typography variant="body1">{pool.description}</Typography>
+ {user && pool.participant_ids?.includes(user._id)
+ ? undefined
+ : mapField}
{user && (
<Button
variant="contained"
@@ -120,7 +200,7 @@ export default function Pool({
</Button>
)}
<hr />
- <PoolMap />
+ <PoolMap pool={pool._id} />
<hr />
<Textarea
cols={80}
diff --git a/src/components/PoolMap.tsx b/src/components/PoolMap.tsx
index a925dba..5b06e10 100644
--- a/src/components/PoolMap.tsx
+++ b/src/components/PoolMap.tsx
@@ -1,15 +1,29 @@
import GoogleMapReact from 'google-map-react';
+import { makeAPIGetCall } from '../api/utils';
-const position = { lat: 39.043758, lng: -77.487442 };
+const position = { lat: 38.817, lng: -77.1679 };
-export default function PoolMap() {
+export default function PoolMap(pool: any) {
const renderMarkers = (map: any, maps: any) => {
- let marker = new maps.Marker({
- position,
- map,
- title: 'Hello World!',
+ let markers: any[] = [];
+ makeAPIGetCall(`/addresses/pool/${pool.pool}`).then((res) => {
+ if (res.data.data) {
+ res.data.data.forEach((element: any) => {
+ let marker = new maps.Marker({
+ position: {
+ lat: parseFloat(element.lat),
+ lng: parseFloat(element.lng),
+ },
+ map,
+ title: 'Hello World!',
+ });
+ markers.push(marker);
+ });
+ }
});
- return marker;
+
+ console.log(markers);
+ return markers;
};
return (
diff --git a/src/types.d.ts b/src/types.d.ts
index 62e429a..5f5e17a 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -48,4 +48,12 @@ declare namespace Carpool {
start_time: string;
end_time: string;
}
+
+ export interface Address {
+ user: string;
+ pool: string;
+ location: string;
+ lat: string;
+ lng: string;
+ }
}