🗾 Add filtering to mapview and implement buttons on mapview modal (#456)

* All stuff

* Remove logs

api/src/api/resource.js

@@ -162,7 +162,10 @@ router.get(
     if (!('totalData' in resources[0])) {
       const resourcesList = resources;
       resources = [];
-      resources[0] = { totalData: resourcesList };
+      resources[0] = {
+        totalData: resourcesList,
+        totalCount: [resourcesList.length],
+      };
     }
 
     res.json({

client/src/components/MapManager.jsx

@@ -1,84 +1,79 @@
 // @flow
 
-import React, { useState, useEffect } from 'react';
-import { getResourcesByCategory } from '../utils/api';
+import React, { useState, useEffect, useMemo } from 'react';
 
+import type { Resource } from '../types/models';
+import { CHAMPAIGN_COORDS } from '../utils/geocoding';
 import MapViewList from './MapViewList';
 import ResourceMap from './ResourceMap';
 
-const CHAMPAIGN_COORDS = [-88.2434, 40.1164];
-
-type Props = { locationResult: { center: [number, number] } };
+type Props = {
+  locationResult: { center: [number, number] },
+  resources: Array<Resource>,
+};
 
 const MapManager = (props: Props) => {
-  const { locationResult } = props;
+  const { locationResult, resources, savedResources, updateSaved } = props;
 
-  const [resources, setResources] = useState<Array<Resource>>([]);
   const [selectedResource, setSelectedResource] = useState<Resource>(null);
   const [currentLocation, setCurrentLocation] = useState<[number, number]>(
     CHAMPAIGN_COORDS,
   );
 
-  useEffect(() => {
-    const fetchResources = async () => {
-      const res = await getResourcesByCategory(
-        null,
-        null,
-        null,
-        null,
-        null,
-        null,
-        null,
-        null,
-        locationResult.center ?? CHAMPAIGN_COORDS,
-      );
-      const newResources = [];
-      if (res != null) {
-        res.result.totalData.forEach((r) => {
-          newResources.push({
-            name: r.name,
-            city: r.city,
-            address: r.address,
-            cost: r.cost,
-            id: r._id.toString(),
-            image: r.image,
-            languages: r.availableLanguages,
-            distance: r.calculatedDistance,
-            description: r.description,
-            website: r.website,
-            phoneNumber: r.phoneNumbers[0]?.phoneNumber,
-            email: r.email,
-            category: r.category[0],
-            coordinates: r.geoLocation.coordinates,
-          });
-        });
-      }
-      setResources(newResources);
-      setCurrentLocation(newResources[0].coordinates);
-    };
-
-    fetchResources();
-  }, [locationResult.center]);
-
   useEffect(() => {
     if (locationResult?.center) {
       setCurrentLocation(locationResult.center);
     }
   }, [locationResult]);
 
+  const formattedResources = useMemo(
+    () =>
+      resources.map((r) => ({
+        name: r.name,
+        city: r.city,
+        address: r.address,
+        cost: r.cost,
+        id: r._id.toString(),
+        image: r.image,
+        languages: r.availableLanguages,
+        distance: r.calculatedDistance,
+        description: r.description,
+        website: r.website,
+        phoneNumber: r.phoneNumbers[0]?.phoneNumber,
+        email: r.email,
+        category: r.category[0],
+        coordinates: r.geoLocation?.coordinates,
+      })),
+    [resources],
+  );
+  const origin = locationResult?.center ?? CHAMPAIGN_COORDS;
+  const directionsURL =
+    selectedResource &&
+    'https://www.google.com/maps/dir/?api=1&' +
+      `${encodeURI(
+        `origin=${origin[1]},` +
+          `${origin[0]}&destination=` +
+          `${selectedResource.coordinates[1]},` +
+          `${selectedResource.coordinates[0]}`,
+      )}`;
+
   return (
     <>
       <MapViewList
-        resources={resources}
+        resources={formattedResources}
         selectedResource={selectedResource}
         setSelectedResource={(resource) => {
           setSelectedResource(resource);
           setCurrentLocation(resource.coordinates);
         }}
       />
       <ResourceMap
-        resources={resources}
+        directionsURL={directionsURL}
+        resources={formattedResources}
+        savedResources={savedResources}
+        updateSaved={updateSaved}
         selectedResource={selectedResource}
+        setSelectedResource={setSelectedResource}
         currentLocation={currentLocation}
         className="map"
       />

client/src/components/MapViewModal.jsx

@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react';
-import { Card, Row, Col } from 'antd';
+import { Popover, Card, Row, Col } from 'antd';
 import {
   CompassTwoTone,
   HeartTwoTone,
@@ -14,7 +14,16 @@ import {
   MessageTwoTone,
   FolderOpenTwoTone,
   CloseCircleFilled,
+  HeartFilled,
 } from '@ant-design/icons';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { saveResource, deleteSavedResource } from '../utils/auth';
+import { useAuth } from '../utils/use-auth';
+import {
+  loginMessage,
+  savedMessage,
+  unsavedMessage,
+} from '../utils/savedMessages';
 
 import '../css/MapViewModal.css';
 import languageConversion from '../utils/languages';
@@ -37,11 +46,23 @@ const GridItem = (props: ItemProps) => {
 };
 
 type Props = {
+  directionsURL: string,
   resource: Resource,
+  setModalOpened: (boolean) => void,
+  isSaved: boolean,
+  updateSaved: () => void,
 };
 
 const MapViewModal = (props: Props) => {
-  const { resource, setModalOpened } = props;
+  const { authed } = useAuth();
+  const intl = useIntl();
+  const {
+    directionsURL,
+    resource,
+    setModalOpened,
+    isSaved,
+    updateSaved,
+  } = props;
 
   let languages = '';
   resource.languages.forEach((language) => {
@@ -55,9 +76,55 @@ const MapViewModal = (props: Props) => {
     setModalOpened(false);
   };
 
+  const copyLink = () => {
+    const link = `https://nawc-staging.vercel.app/resources/${resource.id}`;
+    navigator.clipboard.writeText(link);
+  };
+
+  const saveResourceHandler = async () => {
+    await saveResource(resource.id);
+    updateSaved();
+  };
+
+  const deleteSavedResourceHandler = async () => {
+    await deleteSavedResource(resource.id);
+    updateSaved();
+  };
+
+  let saveButton = (
+    <Popover content={loginMessage}>
+      <HeartTwoTone className="main-icon" />
+    </Popover>
+  );
+  if (authed) {
+    if (isSaved) {
+      saveButton = (
+        <Popover content={unsavedMessage}>
+          <HeartFilled
+            className="main-icon"
+            onClick={async () => {
+              await deleteSavedResourceHandler();
+            }}
+            style={{ color: '#1890ff' }}
+          />
+        </Popover>
+      );
+    } else {
+      saveButton = (
+        <Popover content={savedMessage}>
+          <HeartTwoTone
+            className="main-icon"
+            onClick={async () => {
+              await saveResourceHandler();
+            }}
+          />
+        </Popover>
+      );
+    }
+  }
+
   return (
     <Card
-      hoverable
       className="card"
       cover={
         <img
@@ -72,24 +139,38 @@ const MapViewModal = (props: Props) => {
       <Row className="top-row">
         <Col span={8}>
           <Row className="icon-pair">
-            <CompassTwoTone className="main-icon" />
+            <CompassTwoTone
+              className="main-icon"
+              onClick={() => window.open(directionsURL)}
+            />
           </Row>
           <Row className="icon-pair">Directions</Row>
         </Col>
         <Col span={8}>
+          <Row className="icon-pair">{saveButton}</Row>
           <Row className="icon-pair">
-            <HeartTwoTone className="main-icon" />
+            <FormattedMessage id="save" defaultMessage="Save" />
           </Row>
-          <Row className="icon-pair">Save</Row>
         </Col>
         <Col span={8}>
           <Row className="icon-pair">
-            <ShareAltOutlined
-              className="main-icon"
-              style={{ color: '#1890FF' }}
-            />
+            <Popover
+              content={intl.formatMessage({
+                id: 'linkCopied',
+                defaultMessage: 'Resource link copied!',
+              })}
+              trigger="click"
+            >
+              <ShareAltOutlined
+                className="main-icon"
+                style={{ color: '#1890FF' }}
+                onClick={copyLink}
+              />
+            </Popover>
+          </Row>
+          <Row className="icon-pair">
+            <FormattedMessage id="share" defaultMessage="Share" />
           </Row>
-          <Row className="icon-pair">Share</Row>
         </Col>
       </Row>
       <GridItem

client/src/components/ResourceFilterAutofill.jsx

@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 import { AutoComplete, Input } from 'antd';
 import { HomeTwoTone } from '@ant-design/icons';
-import searchLocation from '../utils/geocoding';
+import { searchLocation } from '../utils/geocoding';
 
 type Props = {
   setLocationResult: (Array) => void,

client/src/components/ResourceMap.jsx

@@ -6,7 +6,7 @@ import '../css/ResourceMap.css';
 import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
 import MapViewModal from './MapViewModal';
 
-type Props = {};
+type Props = { directionsURL: string };
 
 const Map = ReactMapboxGl({
   accessToken:
@@ -16,7 +16,15 @@ const Map = ReactMapboxGl({
 });
 
 const ResourceMap = (props: Props) => {
-  const { resources, selectedResource, currentLocation } = props;
+  const {
+    directionsURL,
+    resources,
+    selectedResource,
+    setSelectedResource,
+    currentLocation,
+    savedResources,
+    updateSaved,
+  } = props;
   const [modalOpened, setModalOpened] = useState<Boolean>(false);
 
   useEffect(() => {
@@ -49,8 +57,14 @@ const ResourceMap = (props: Props) => {
       {mapComponent}
       {modalOpened && selectedResource && (
         <MapViewModal
+          directionsURL={directionsURL}
           resource={selectedResource}
-          setModalOpened={setModalOpened}
+          isSaved={savedResources.has(selectedResource.id)}
+          updateSaved={updateSaved}
+          setModalOpened={(isOpen) => {
+            setModalOpened(isOpen);
+            if (isOpen === false) setSelectedResource(null);
+          }}
           className="modal"
         />
       )}