Merge pull request #1746 from TrashMob-eco/dev/dop/replace-partnerReq…

…uestDetail-map [PartnerRequestDetail] - Replace azuremap with googlemap
TrashMob-eco · Oct 23, 2024 · 4229087 · 4229087
2 parents b033e9b + 1b3c74d
commit 4229087
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 46 deletions.
diff --git a/TrashMob/client-app/src/components/Map/GoogleMap/GoogleMap.tsx b/TrashMob/client-app/src/components/Map/GoogleMap/GoogleMap.tsx
@@ -4,18 +4,24 @@ import * as MapStore from '../../../store/MapStore';
 import { useGetDefaultMapCenter } from '../../../hooks/useGetDefaultMapCenter';
 
 export const GoogleMap = (props: PropsWithChildren<MapProps>) => {
+	const {
+		defaultCenter: defaultCenterProps,
+		defaultZoom: defaultZoomProps,
+		children,
+		...rest
+	} = props
 	const defaultCenter = useGetDefaultMapCenter()
 	return (
 		<Map
 			mapId='6f295631d841c617'
 			gestureHandling='greedy'
 			disableDefaultUI
 			style={{ width: '100%', height: '500px' }}
-			defaultZoom={MapStore.defaultUserLocationZoom}
-			defaultCenter={defaultCenter}
-			{...props}
+			defaultZoom={defaultZoomProps || MapStore.defaultUserLocationZoom}
+			defaultCenter={defaultCenterProps || defaultCenter}
+			{...rest}
 		>
-			{props.children}
+			{children}
 		</Map>
 	)
 }
diff --git a/TrashMob/client-app/src/components/Partners/PartnerRequestDetails.tsx b/TrashMob/client-app/src/components/Partners/PartnerRequestDetails.tsx
@@ -4,20 +4,20 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
 import { Button, Col, Container, Form, Row } from 'react-bootstrap';
 import { data } from 'azure-maps-control';
-import { AzureMapsProvider, IAzureMapOptions } from 'react-azure-maps';
 import { Guid } from 'guid-typescript';
 import PhoneInput from 'react-phone-input-2';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import * as ToolTips from '../../store/ToolTips';
 import UserData from '../Models/UserData';
-import * as MapStore from '../../store/MapStore';
-import MapControllerSinglePointNoEvents from '../MapControllerSinglePointNoEvent';
 import PartnerRequestStatusData from '../Models/PartnerRequestStatusData';
 import PartnerTypeData from '../Models/PartnerTypeData';
 import { getPartnerRequestStatus } from '../../store/partnerRequestStatusHelper';
 import { getPartnerType } from '../../store/partnerTypeHelper';
 import { GetPartnerRequestById, GetPartnerRequestStatuses, GetPartnerTypes } from '../../services/partners';
 import { Services } from '../../config/services.config';
+import { APIProvider, Marker } from '@vis.gl/react-google-maps';
+import { useGetGoogleMapApiKey } from '../../hooks/useGetGoogleMapApiKey';
+import { GoogleMap } from '../Map/GoogleMap';
 
 export interface PartnerRequestDetailsMatchParams {
     partnerRequestId: string;
@@ -46,12 +46,6 @@ export const PartnerRequestDetails: React.FC<PartnerRequestDetailsParams> = (pro
     const [lastUpdatedDate, setLastUpdatedDate] = React.useState<Date>(new Date());
     const [partnerRequestStatusId, setPartnerRequestStatusId] = React.useState<number>(0);
     const [partnerTypeId, setPartnerTypeId] = React.useState<number>(0);
-
-    const [center, setCenter] = React.useState<data.Position>(
-        new data.Position(MapStore.defaultLongitude, MapStore.defaultLatitude),
-    );
-    const [mapOptions, setMapOptions] = React.useState<IAzureMapOptions>();
-    const [isMapKeyLoaded, setIsMapKeyLoaded] = React.useState<boolean>(false);
     const [partnerRequestStatusList, setPartnerRequestStatusList] = React.useState<PartnerRequestStatusData[]>([]);
     const [partnerTypeList, setPartnerTypeList] = React.useState<PartnerTypeData[]>([]);
     const [isPartnerRequestDataLoaded, setIsPartnerRequestDataLoaded] = React.useState<boolean>(false);
@@ -139,19 +133,7 @@ export const PartnerRequestDetails: React.FC<PartnerRequestDetailsParams> = (pro
                 });
             });
         }
-        MapStore.getOption().then((opts) => {
-            setMapOptions(opts);
-            setIsMapKeyLoaded(true);
-        });
-
-        if ('geolocation' in navigator) {
-            navigator.geolocation.getCurrentPosition((position) => {
-                const point = new data.Position(position.coords.longitude, position.coords.latitude);
-                setCenter(point);
-            });
-        } else {
-            console.log('Not Available');
-        }
+
     }, [props.currentUser, props.isUserLoaded, partnerRequestId]);
 
     // This will handle Cancel button click event.
@@ -204,10 +186,6 @@ export const PartnerRequestDetails: React.FC<PartnerRequestDetailsParams> = (pro
         return <Tooltip {...props}>{ToolTips.PartnerRequestLastUpdatedDate}</Tooltip>;
     }
 
-    function handleLocationChange(point: data.Position) {
-        // Do nothing. This is a read-only form
-    }
-
     // Returns the HTML Form to the render() method.
     function renderDetailsForm() {
         return (
@@ -421,21 +399,15 @@ export const PartnerRequestDetails: React.FC<PartnerRequestDetailsParams> = (pro
                                     </Col>
                                 </Form.Row>
                                 <Form.Row>
-                                    <AzureMapsProvider>
-                                        <>
-                                            <MapControllerSinglePointNoEvents
-                                                center={center}
-                                                mapOptions={mapOptions}
-                                                isMapKeyLoaded={isMapKeyLoaded}
-                                                latitude={latitude}
-                                                longitude={longitude}
-                                                onLocationChange={handleLocationChange}
-                                                currentUser={props.currentUser}
-                                                isUserLoaded={props.isUserLoaded}
-                                                isDraggable={false}
-                                            />
-                                        </>
-                                    </AzureMapsProvider>
+                                    <GoogleMap 
+                                        defaultCenter={{ lat: latitude, lng: longitude }}
+                                        defaultZoom={11}
+                                    >
+                                        <Marker 
+                                            position={{ lat: latitude, lng: longitude }}
+                                            draggable={false}
+                                        />
+                                    </GoogleMap>
                                 </Form.Row>
                                 <Form.Group className='form-group'>
                                     <Button className='action' onClick={(e) => handleCancel(e)}>
@@ -506,4 +478,17 @@ export const PartnerRequestDetails: React.FC<PartnerRequestDetailsParams> = (pro
     );
 };
 
-export default withRouter(PartnerRequestDetails);
+const PartnerRequestDetailsWrapper = (props: PartnerRequestDetailsParams) => {
+    const { data: googleApiKey, isLoading } = useGetGoogleMapApiKey()
+
+    if (isLoading) return null;
+
+    return (
+        <APIProvider apiKey={googleApiKey || ''}>
+            <PartnerRequestDetails {...props} />
+        </APIProvider>
+    );
+};
+
+
+export default withRouter(PartnerRequestDetailsWrapper);