From b2db90949f6f3ac905ad99459d7d717565c48ac1 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Sun, 11 Apr 2021 14:30:02 -0400
Subject: [PATCH] update PoolMap.tsx
---
src/components/Pool.tsx | 2 +-
src/components/PoolMap.tsx | 53 ++++++++++++++++++++++----------------
2 files changed, 32 insertions(+), 23 deletions(-)
diff --git a/src/components/Pool.tsx b/src/components/Pool.tsx
index 465758a..a1ea5a0 100644
--- a/src/components/Pool.tsx
+++ b/src/components/Pool.tsx
@@ -200,7 +200,7 @@ export default function Pool({
</Button>
)}
<hr />
- <PoolMap pool={pool._id} />
+ <PoolMap pool={pool} />
<hr />
<Textarea
cols={80}
diff --git a/src/components/PoolMap.tsx b/src/components/PoolMap.tsx
index 5b06e10..6cb26bd 100644
--- a/src/components/PoolMap.tsx
+++ b/src/components/PoolMap.tsx
@@ -1,30 +1,39 @@
import GoogleMapReact from 'google-map-react';
+import { useCallback } from 'react';
import { makeAPIGetCall } from '../api/utils';
const position = { lat: 38.817, lng: -77.1679 };
-export default function PoolMap(pool: any) {
- const renderMarkers = (map: any, maps: any) => {
- 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);
- });
- }
- });
+export type AddressMarker = {
+ user: string;
+ pool: string;
+ location: string;
+ lat: string;
+ lng: string;
+};
- console.log(markers);
- return markers;
- };
+export default function PoolMap({ pool }: { pool: Carpool.Pool }) {
+ const renderMarkers = useCallback(
+ (map: any, maps: any) => {
+ let markers: any[] = [];
+ makeAPIGetCall(`/addresses/pool/${pool._id}`).then((res) => {
+ if (res.data.data) {
+ res.data.data.forEach((element: AddressMarker) => {
+ let marker = new maps.Marker({
+ position: {
+ lat: parseFloat(element.lat),
+ lng: parseFloat(element.lng),
+ },
+ map,
+ title: 'Anonymous Address',
+ });
+ markers.push(marker);
+ });
+ }
+ });
+ },
+ [pool._id]
+ );
return (
<div style={{ height: '50vh', width: '100%' }}>
@@ -36,7 +45,7 @@ export default function PoolMap(pool: any) {
defaultZoom={11}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }: any) => renderMarkers(map, maps)}
- ></GoogleMapReact>
+ />
</div>
);
}