feat: Add distance information from user to location

src/components/vendor.tsx

@@ -1,4 +1,5 @@
 import { FC, Fragment, ReactNode } from 'react';
+import { Distance } from '../elements/distance';
 import { Hyperlink } from '../elements/hyperlink';
 import { Tag } from '../elements/tag';
 import { Icon, IconName } from '../identity/icon';
@@ -52,6 +53,8 @@ const styles = {
   offer: 'font-sans break-word mt-2 mb-8 flex-grow-0',
   region: 'font-sans text-gray-500 fill-current text-base font-light tracking-tight inline-flex flex-row items-center mb-4',
   regionIcon: 'mr-2 flex-shrink-0',
+  distance:
+    'font-sans text-gray-500 fill-current text-base font-light tracking-tight inline-flex flex-row items-center mb-4',
   tags: 'my-2 flex flex-wrap',
 
   col: 'flex flex-col lg:flex-row w-full box-border',
@@ -76,9 +79,23 @@ type Props = {
   hours: string[];
   options: string[];
   contact: string[];
+  coordinates?: number[];
+  userCoordinates?: number[];
 };
 
-export const Vendor: FC<Props> = ({ title, tags, region, body, categories, hours, address, options, contact }) => (
+export const Vendor: FC<Props> = ({
+  title,
+  tags,
+  region,
+  body,
+  categories,
+  hours,
+  address,
+  options,
+  contact,
+  coordinates,
+  userCoordinates,
+}) => (
   <li className={styles.listing}>
     {/* <img
         className={styles.img}
@@ -119,6 +136,18 @@ export const Vendor: FC<Props> = ({ title, tags, region, body, categories, hours
           <Icon className={styles.regionIcon} name="place" size={16} /> <span>{region}</span>
         </h3>
 
+        {coordinates && userCoordinates && (
+          <div>
+            <Distance
+              className={styles.distance}
+              userLat={userCoordinates[0]}
+              userLon={userCoordinates[1]}
+              vendorLat={coordinates[0]}
+              vendorLon={coordinates[1]}
+            />
+          </div>
+        )}
+
         {address && (
           <div className={styles.attribute}>
             <strong className={styles.key}>Ort</strong>

src/compositions/search-with-results.tsx

@@ -29,6 +29,9 @@ const getVendors = `query Vendors($service: [Service!], $zip: Int, $tenants: [Te
     address
     order
     contact
+    location {
+      coordinates
+    }
   }
   total
 }`;
@@ -45,7 +48,7 @@ export const SearchWithResults: FC<Props> = ({ query, categories }) => {
   const [zip, setZip] = useState<string>('');
   const [categoryFilter, setCategoryFilter] = useState<string[]>([]);
 
-  const [, postcode] = useGetCurrentPosition();
+  const [userCoordinates, postcode] = useGetCurrentPosition();
 
   useEffect(() => {
     if (query['zip']) {
@@ -91,7 +94,7 @@ export const SearchWithResults: FC<Props> = ({ query, categories }) => {
 
       const { vendors } = data;
 
-      return vendors.map(({ name, id, categories, contact, hours, address, body, order, region, service }) => (
+      return vendors.map(({ name, id, categories, contact, hours, address, body, order, region, service, location }) => (
         <Vendor
           key={id}
           title={name}
@@ -103,6 +106,8 @@ export const SearchWithResults: FC<Props> = ({ query, categories }) => {
           address={address}
           options={order}
           contact={contact}
+          coordinates={location && location.coordinates}
+          userCoordinates={userCoordinates}
         />
       ));
     },

src/compositions/vendor-list.tsx

@@ -4,12 +4,13 @@ import { Vendor as VendorType } from '../entities/vendor';
 
 type Props = {
   vendors: VendorType[];
+  userCoordinates?: number[];
 };
 
-export const VendorList: FC<Props> = ({ vendors }) => {
+export const VendorList: FC<Props> = ({ vendors, userCoordinates }) => {
   return (
     <ul>
-      {vendors.map(({ name, id, categories, contact, hours, address, body, order, region, service }) => (
+      {vendors.map(({ name, id, categories, contact, hours, address, body, order, region, service, location }) => (
         <Vendor
           key={id}
           title={name}
@@ -21,6 +22,8 @@ export const VendorList: FC<Props> = ({ vendors }) => {
           address={address}
           options={order}
           contact={contact}
+          coordinates={location && location.coordinates}
+          userCoordinates={userCoordinates}
         />
       ))}
     </ul>

src/elements/distance.tsx

@@ -0,0 +1,37 @@
+import { FC, ReactNode } from 'react';
+
+const getDistance = (userLat: number, userLon: number, vendorLat: number, vendorLon: number) => {
+  if (userLat == vendorLat && userLon == vendorLon) {
+    return 0;
+  } else {
+    const radlat1 = (Math.PI * userLat) / 180;
+    const radlat2 = (Math.PI * vendorLat) / 180;
+    const theta = userLon - vendorLon;
+    const radtheta = (Math.PI * theta) / 180;
+    const distance =
+      ((Math.acos(
+        Math.min(1, Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta))
+      ) *
+        180) /
+        Math.PI) *
+      60 *
+      1.1515 *
+      1.609344;
+
+    if (distance < 2) {
+      return 'in der Nähe';
+    }
+
+    if (distance > 100) {
+      return 'über 100km entfernt';
+    }
+
+    return `${Math.round(distance)}km entfernt`;
+  }
+};
+
+type Props = { className?: string; userLat: number; userLon: number; vendorLat: number; vendorLon: number };
+
+export const Distance: FC<Props> = ({ userLat, userLon, vendorLat, vendorLon, className = '' }) => (
+  <span className={className}>{getDistance(userLat, userLon, vendorLat, vendorLon)}</span>
+);

src/entities/vendor.ts

@@ -15,14 +15,16 @@ type VendorData = {
   order: Order[];
   contact: string[];
   tenant: Tenant;
+  location?: Location;
+};
+
+type Location = {
+  type: 'Point';
+  coordinates: [number, number];
 };
 
 export type MongoVendor = {
   _id: string;
-  location?: {
-    type: 'Point';
-    coordinates: [number, number];
-  };
 } & VendorData;
 
 export type Vendor = {

src/schemas/graphql.ts

@@ -38,6 +38,11 @@ export const schema = buildSchema(`
     SFY
   }
 
+  type Location {
+    type: String!
+    coordinates: [Float!]!
+  }
+
   type Vendor {
     id: String!
     name: String!
@@ -50,6 +55,7 @@ export const schema = buildSchema(`
     order: [Order]!
     contact: [String]!
     tenant: String!
+    location: Location
   }
 
   input VendorInput {