feat: add actions map

fixes #80

platform/client-admin/src/components/Menu.tsx

@@ -10,7 +10,7 @@ import './Menu.css'
 const routes = {
   operationPages: [
     { title: 'Actions', path: '/actions', icon: codeWorking },
-    { title: 'Action Map', path: '/map', icon: mapOutline },
+    { title: 'Action Map', path: '/actionsMap', icon: mapOutline },
     { title: 'Optimizations', path: '/optimize', icon: optionsSharp },
     { title: 'Reports', path: '/reports', icon: textOutline },
   ],

platform/client-admin/src/components/Router.tsx

@@ -12,7 +12,7 @@ import { ViewVolunteerPage } from '../pages/ViewVolunteerPage';
 
 import { Menu } from './Menu';
 import { SchedulePage } from '../pages/SchedulePage';
-import { MapPage } from '../pages/MapPage';
+import { ActionsMapPage } from '../pages/ActionsMapPage';
 import { OptimizePage } from '../pages/OptimizePage';
 import { DistributionCentrePage } from '../pages/DistributionCentrePage';
 import { RecipientsPage } from '../pages/RecipientsPage';
@@ -39,7 +39,7 @@ export const Router: React.FC = () => {
               <Route path="/viewAction/:id" component={ViewActionPage} exact />
               <Route path="/createAction" component={CreateVolunteerActionPage} exact />
               <Route path="/actions" component={ActionPage} exact />
-              <Route path="/map" component={MapPage} exact />
+              <Route path="/actionsMap" component={ActionsMapPage} exact />
               <Route path="/schedule" component={SchedulePage} exact />
               <Route path="/optimize" component={OptimizePage} exact />
               <Route path="/reports" component={ActionReportPage} exact />

platform/client-admin/src/pages/ActionPage.tsx

@@ -14,7 +14,7 @@ import { useFindVolunteerActionsQuery } from '../dataFacade';
 import { add } from 'ionicons/icons';
 
 export const ActionPage: React.FC<RouteComponentProps> = ({ match }) => {
-  const { data, loading, error } = useFindVolunteerActionsQuery()
+  const { data, loading, error } = useFindVolunteerActionsQuery();
 
   if (error) {
     console.log(error);

platform/client-admin/src/pages/ActionsMapPage.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { RouteComponentProps, useHistory } from 'react-router-dom';
+import { useFindVolunteerActionsQuery } from '../dataFacade';
+import { IonLoading, IonPage, IonContent, IonFooter } from '@ionic/react';
+import { Header, Empty } from '../components';
+import { Marker } from 'google-maps-react';
+import { Map } from '../components/Map';
+
+const RED_DOT = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
+const YELLOW_DOT = "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png";
+
+export const ActionsMapPage: React.FC<RouteComponentProps> = ({ match }) => {
+  const history = useHistory();
+  const { data, loading, error } = useFindVolunteerActionsQuery();
+
+  if (error) {
+    console.log(error);
+  }
+
+  if (loading) {
+    return <IonLoading isOpen={loading} message={'Loading...'} />
+  };
+
+  const volunteerActions = data?.findVolunteerActions?.items || [];
+
+
+  let mapContent = <Empty />;
+
+  if (volunteerActions.length > 0) {
+    const totalLatLong = {
+      lat: 0, lng: 0
+    };
+
+    const markers: JSX.Element[] = [];
+
+    const getDistributionCentreMarker = (distributionCentre: any, index: number): JSX.Element => {
+      const lat = distributionCentre?.lat!;
+      const lng = distributionCentre?.long!;
+
+      totalLatLong.lat += lat;
+      totalLatLong.lng += lng;
+
+      const title = `${distributionCentre?.address1} ${distributionCentre?.address2} ${distributionCentre?.city}`;
+
+      return <Marker
+        key={index}
+        title={title}
+        label={distributionCentre?.name!}
+        icon={{
+          url: YELLOW_DOT
+        }}
+        onClick={() => history.push(`/manageDistributionCentre/${distributionCentre?.id}`)}
+        position={{
+          lat,
+          lng
+        }} />
+
+    }
+
+    const getRecipientMarker = (recipient: any, index: number): JSX.Element => {
+      const lat = recipient?.lat!;
+      const lng = recipient?.long!;
+
+      totalLatLong.lat += lat;
+      totalLatLong.lng += lng;
+
+      const title = `${recipient?.address1} ${recipient?.address2} ${recipient?.city}`;
+
+      return <Marker
+        key={index}
+        title={title}
+        label={recipient?.firstName! + " " + recipient?.lastName!}
+        icon={{
+          url: RED_DOT
+        }}
+        onClick={() => history.push(`/manageRecipient/${recipient?.id}`)}
+        position={{
+          lat,
+          lng
+        }} />
+
+    }
+
+    let markersCounter = 0;
+    for (const volunteerAction of volunteerActions) {
+      const recipient = volunteerAction?.recipient;
+      const distributionCentre = volunteerAction?.distributionCentre;
+      markers.push(getRecipientMarker(recipient, markersCounter++));
+      markers.push(getDistributionCentreMarker(distributionCentre, markersCounter++));
+    }
+
+    mapContent = <Map
+      zoom={2}
+      center={{
+        lat: totalLatLong.lat / markersCounter,
+        lng: totalLatLong.lng / markersCounter
+      }}>
+      {markers}
+    </Map>
+  }
+
+  return (
+    <IonPage>
+      <Header title="Actions Map" match={match} />
+      <IonContent className="ion-padding" >
+        {mapContent}
+      </IonContent>
+      <IonFooter>
+        <div>
+          OpenVolunteer Platform
+        </div>
+      </IonFooter>
+    </IonPage >
+  );
+
+};

platform/client-admin/src/pages/DistributionCentrePage.tsx

@@ -30,7 +30,7 @@ export const DistributionCentrePage: React.FC<RouteComponentProps> = ({ match })
       lat: 0, lng: 0
     };
 
-    let distributionMarkers = distributionCentres
+    const distributionMarkers = distributionCentres
       .map((distributionCentre, index) => {
         const lat = distributionCentre?.lat!;
         const lng = distributionCentre?.long!;
@@ -63,7 +63,7 @@ export const DistributionCentrePage: React.FC<RouteComponentProps> = ({ match })
 
   return (
     <IonPage>
-      <Header title="List of Distribution" match={match} />
+      <Header title="Distribution Centers Map" match={match} />
       <IonContent className="ion-padding" >
         {mapContent}
         <IonFab vertical="top" horizontal="center" slot="fixed">