FeaturePanel: OpenPlaceGuide integration (#215)

src/components/FeaturePanel/FeatureOpenPlaceGuideLink.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { t } from '../../services/intl';
+import { fetchJson } from '../../services/fetch';
+import { useFeatureContext } from '../utils/FeatureContext';
+import { getUrlOsmId } from '../../services/helpers';
+
+const Spacer = styled.div`
+  padding-bottom: 10px;
+`;
+
+const getData = async (center, osmId) => {
+  if (center === undefined || !center.length) {
+    return null;
+  }
+  const body = await fetchJson(
+    `https://discover.openplaceguide.org/v2/discover?lat=${center[1]}&lon=${center[0]}&osmId=${osmId}`,
+  );
+  return body;
+};
+
+export const FeatureOpenPlaceGuideLink = () => {
+  const supportedCountries = ['et']; // refer to the list of countries here: https://github.com/OpenPlaceGuide/discover-cf-worker/blob/main/index.js#L43
+
+  const { feature } = useFeatureContext();
+  const osmId = getUrlOsmId(feature.osmMeta);
+
+  if (!supportedCountries.includes(feature.countryCode)) {
+    return null;
+  }
+
+  const [instances, setInstances] = useState([]);
+
+  useEffect(() => {
+    getData(feature.center, osmId).then(setInstances);
+  }, [osmId]);
+
+  if (instances.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {instances.map((instance) => (
+        <>
+          <a href={instance.url}>
+            {t('featurepanel.more_in_openplaceguide', {
+              instanceName: instance.name,
+            })}
+          </a>
+          <Spacer />
+        </>
+      ))}
+    </>
+  );
+};

src/components/FeaturePanel/FeaturePanel.tsx

@@ -17,6 +17,7 @@ import { FeatureDescription } from './FeatureDescription';
 import { ObjectsAround } from './ObjectsAround';
 import { OsmError } from './OsmError';
 import { Members } from './Members';
+import { FeatureOpenPlaceGuideLink } from './FeatureOpenPlaceGuideLink';
 import { getLabel } from '../../helpers/featureLabel';
 import { ImageSection } from './ImageSection/ImageSection';
 import { PublicTransport } from './PublicTransport/PublicTransport';
@@ -121,6 +122,8 @@ export const FeaturePanel = () => {
 
                   <PublicTransport tags={tags} />
 
+                  <FeatureOpenPlaceGuideLink />
+
                   {editEnabled && <SuggestEdit />}
 
                   {point && <ObjectsAround advanced={advanced} />}

src/locales/vocabulary.js

@@ -95,6 +95,7 @@ export default {
   'featurepanel.uncertain_image': 'This is the closest street view image from Mapillary. It may be inaccurate.',
   'featurepanel.inline_edit_title': 'Edit',
   'featurepanel.objects_around': 'Nearby objects',
+  'featurepanel.more_in_openplaceguide': 'More information on __instanceName__',
 
   'opening_hours.open': 'Open: __todayTime__',
   'opening_hours.now_closed_but_today': 'Closed now - Open __todayTime__',