Feat: Added Approx. Distance on resource card

components/DetailedHome.jsx

@@ -25,9 +25,11 @@ import HomeTabs from '@components/HomeTabs';
 import { useRouter } from 'next/router';
 import { isVerified } from '../lib/utils';
 import MapContainer from './MapContainer';
+import useCurrentLocation from '@hooks/useCurrentLocation';
 
 export default function DetailedHome({ state, district, type }) {
     const { locale } = useLocaleContext();
+    const { location: currentLocation, error } = useCurrentLocation();
     const t = useLocale(locale, 'home');
     const router = useRouter();
 
@@ -209,6 +211,7 @@ export default function DetailedHome({ state, district, type }) {
                             {tabVal === 'result' && (
                                 <SearchResult
                                     changeTabs={changeTabs}
+                                    currentLocation={currentLocation}
                                     type={resourceChosen}
                                     district={districtChosen}
                                     resources={resources[resourceChosen]}
@@ -223,6 +226,7 @@ export default function DetailedHome({ state, district, type }) {
                             {tabVal === 'maps' && (
                                 <MapContainer
                                     resourceChosen={resourceChosen}
+                                    currentLocation={currentLocation}
                                     resources={locationResources[resourceChosen]}
                                     district={getStateIfDistrictAll(stateChosen, districtChosen)}
                                     state={stateChosen}

components/MapContainer.jsx

@@ -4,6 +4,7 @@ import { fetchLocation } from '../lib/external';
 import { faDirections } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { tabsInfo } from '@lib/tabs';
+import { getHaversineDistance } from '@lib/utils';
 import MapInfoWindow from './MapInfoWindow';
 import Badge from './Badge';
 
@@ -20,20 +21,10 @@ export class MapContainer extends Component {
     activeMarker: {},
     selectedPlace: {},
     centerLocation: null,
-    currentLocation: null,
     zoom: defaultZoom
   };
 
   componentDidMount() {
-    const that = this;
-    navigator.geolocation.getCurrentPosition(function (position) {
-      that.setState({
-        currentLocation: {
-          lat: position.coords.latitude,
-          lng: position.coords.longitude
-        }
-      });
-    });
     if (this.props.district || this.props.state) {
       fetchLocation(`${this.props.district} ${this.props.state}`)
         .then((response) => {
@@ -45,7 +36,8 @@ export class MapContainer extends Component {
             });
           }
         })
-        .catch(() => {
+        .catch((err) => {
+          console.log('Error while fetching searched location\'s lattitude and longitude: ', err);
           this.setState({
             centerLocation: defaultLocation,
             zoom: defaultZoom
@@ -71,22 +63,6 @@ export class MapContainer extends Component {
     }
   };
 
-  getHaversineDistance = (firstLocation, secondLocation) => {
-    if (!firstLocation) return null;
-    const earthRadius = 6371; // km
-    const diffLat = ((secondLocation.lat - firstLocation.lat) * Math.PI) / 180;
-    const diffLng = ((secondLocation.lng - firstLocation.lng) * Math.PI) / 180;
-    const arc =
-      Math.cos((firstLocation.lat * Math.PI) / 180) *
-        Math.cos((secondLocation.lat * Math.PI) / 180) *
-        Math.sin(diffLng / 2) *
-        Math.sin(diffLng / 2) +
-      Math.sin(diffLat / 2) * Math.sin(diffLat / 2);
-    const line = 2 * Math.atan2(Math.sqrt(arc), Math.sqrt(1 - arc));
-    const distance = earthRadius * line;
-    return distance.toFixed();
-  };
-
   openInGoogleMap = () => {
     const lat = this.state.selectedPlace?.info.latitude;
     const lng = this.state.selectedPlace?.info.longitude;
@@ -113,7 +89,7 @@ export class MapContainer extends Component {
             position={this.state.centerLocation}
             onClick={this.onMarkerClick}
             name={'Searched Location'}
-            currentLocation={true}
+            isCurrentLocation={true}
           />
           {this.props.resources.map((resource) => {
             return (
@@ -123,7 +99,7 @@ export class MapContainer extends Component {
                 key={resource.external_id}
                 name={resource.title}
                 info={resource}
-                distance={this.getHaversineDistance(this.state.currentLocation, {
+                distance={getHaversineDistance(this.props.currentLocation, {
                   lat: resource.latitude,
                   lng: resource.longitude
                 })}
@@ -138,9 +114,11 @@ export class MapContainer extends Component {
               <h1 class="text-black-800">
                 <strong>{this.state.selectedPlace.info?.title ||
                   this.state.selectedPlace.name}</strong>
-                <Badge status={this.state.selectedPlace.info?.verification_status} />
+                {!this.state.selectedPlace?.isCurrentLocation && (
+                  <Badge status={this.state.selectedPlace.info?.verification_status} />
+                )}
               </h1>
-              {!this.state.selectedPlace?.currentLocation && (
+              {!this.state.selectedPlace?.isCurrentLocation && (
                 <>
                   {this.state.selectedPlace.info?.phone_1 && (
                     <strong className="text-purple-500">
@@ -175,7 +153,7 @@ export class MapContainer extends Component {
                       icon={faDirections}
                       className="w-2 h-2 dark:text-primary-500"
                     />
-                    <span className="text-xs ml-2">Directions</span>
+                    <span className="text-xs ml-2">Get Directions</span>
                   </button>
                   {this.state.selectedPlace.distance && (
                     <p>
@@ -198,5 +176,6 @@ export default GoogleApiWrapper((props) => ({
   resourceChoosen: props.resourceChosen,
   resources: props.resources,
   districtChoosen: props.districtChoosen,
-  stateChoosen: props.stateChoosen
+  stateChoosen: props.stateChoosen,
+  currentLocation: props.currentLocation
 }))(MapContainer);

components/ResourceCard.jsx

@@ -1,15 +1,17 @@
 import React from 'react';
+import TimeAgo from 'timeago-react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import SocialSharing from '@components/SocialSharing';
 import { faBed, faEnvelope, faHeartbeat, faLink, faMapMarkerAlt, faDirections, faMedkit, faMobileAlt, faPhoneAlt, faProcedures } from '@fortawesome/free-solid-svg-icons';
 import { copyTextGenerator, getGoogleMapsDirectionLink } from '@lib/utils';
 import { useRouter } from 'next/router';
+import { getHaversineDistance } from '@lib/utils';
 import Badge from './Badge';
 import Description from './Description';
-import TimeAgo from 'timeago-react';
+
 import FeedbackCounter from './FeedbackCounter';
 
-const ResourceCard = ({ data, type: filterType }) => {
+const ResourceCard = ({ data, type: filterType, currentLocation }) => {
 
     // General Data
     const { title, district } = data;
@@ -188,6 +190,20 @@ const ResourceCard = ({ data, type: filterType }) => {
                     {/* TODO: Waiting for Endpoint from Backend */}
                     {/* <FeedbackCounter upvotes={upvotes} downvotes={downvotes} /> */}
                 </div>
+                <div className="flex items-center mx-1 mt-2 xs:my-0 xs:space-x-2">
+                { currentLocation && latitude && longitude && (
+                    <span className="text-xs mt-2 xs:my-0">
+                        <span className="text-secondary-400 dark:text-primary-300">Approximately</span>
+                        <span className="font-bold">
+                            &nbsp;{getHaversineDistance(currentLocation, {
+                                lat: latitude,
+                                lng: longitude
+                            })} Kms
+                        </span>
+                        <span className="text-secondary-400 dark:text-primary-300">&nbsp;from your location</span>
+                    </span>
+                )}
+                </div>
             </div>
         </div>
     );

components/SearchResult.jsx

@@ -2,7 +2,7 @@ import { filterResourcesBy } from '@lib/utils';
 import React, { useState } from 'react';
 import ResourceCard from './ResourceCard';
 import NoResultFound from './NoResultFound';
-const SearchResult = ({ resources, type, district, changeTabs }) => {
+const SearchResult = ({ resources, type, district, changeTabs, currentLocation }) => {
     const [selectedFilter, setSelectedFilter] = useState('show_all');
     const resourcesListing = filterResourcesBy(resources, selectedFilter);
     const noData = resourcesListing.length === 0 && selectedFilter === 'show_all';
@@ -64,7 +64,7 @@ const SearchResult = ({ resources, type, district, changeTabs }) => {
                 {resourcesListing.length > 0 ? (
                     resourcesListing.map((resource) => {
                         return (
-                            <ResourceCard key={resource.external_id} type={type} data={resource} />
+                            <ResourceCard key={resource.external_id} type={type} data={resource} currentLocation={currentLocation} />
                         );
                     })
                 ) : (

hooks/useCurrentLocation.js

@@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react';
+
+const useCurrentLocation = () => {
+  const [error, setError] = useState();
+  const [location, setLocation] = useState();
+
+  // Success handler for geolocation's `getCurrentPosition` method
+  const handleSuccess = position => {
+    const { latitude, longitude } = position.coords;
+
+    setLocation({
+      lat: latitude,
+      lng: longitude
+    });
+  };
+
+  // Error handler for geolocation's `getCurrentPosition` method
+  const handleError = error => {
+    setError(error.message);
+  };
+
+  useEffect(() => {
+    // If the geolocation is not defined in the used browser you can handle it as an error
+    if (!navigator.geolocation) {
+      setError('Geolocation is not supported.');
+      return;
+    }
+    navigator.geolocation.getCurrentPosition(handleSuccess, handleError, {
+      timeout: 1000 * 60 * 1 // 1 min (1000 ms * 60 sec * 1 minute = 60 000ms)
+    });
+  }, []);
+  return { location, error };
+};
+
+export default useCurrentLocation;

lib/utils.js

@@ -173,3 +173,19 @@ export const filterResourcesBy = (list, type) => {
         return '';
     }
 }
+
+export const getHaversineDistance = (firstLocation, secondLocation) => {
+    if (!firstLocation) return null;
+    const earthRadius = 6371; // km
+    const diffLat = ((secondLocation.lat - firstLocation.lat) * Math.PI) / 180;
+    const diffLng = ((secondLocation.lng - firstLocation.lng) * Math.PI) / 180;
+    const arc =
+      Math.cos((firstLocation.lat * Math.PI) / 180) *
+        Math.cos((secondLocation.lat * Math.PI) / 180) *
+        Math.sin(diffLng / 2) *
+        Math.sin(diffLng / 2) +
+      Math.sin(diffLat / 2) * Math.sin(diffLat / 2);
+    const line = 2 * Math.atan2(Math.sqrt(arc), Math.sqrt(1 - arc));
+    const distance = earthRadius * line;
+    return distance.toFixed();
+};