From 8fffdbee00a893c89f27f7324b911b222fef15e9 Mon Sep 17 00:00:00 2001
From: Alexander Menk <alex@addismap.com>
Date: Mon, 1 Jul 2024 15:53:15 +0200
Subject: [PATCH] FeaturePanel: OpenPlaceGuide integration (#215)

---
 .../FeatureOpenPlaceGuideLink.tsx             | 56 +++++++++++++++++++
 src/components/FeaturePanel/FeaturePanel.tsx  |  3 +
 src/locales/vocabulary.js                     |  1 +
 3 files changed, 60 insertions(+)
 create mode 100644 src/components/FeaturePanel/FeatureOpenPlaceGuideLink.tsx

diff --git a/src/components/FeaturePanel/FeatureOpenPlaceGuideLink.tsx b/src/components/FeaturePanel/FeatureOpenPlaceGuideLink.tsx
new file mode 100644
index 000000000..120116fde
--- /dev/null
+++ b/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 />
+        </>
+      ))}
+    </>
+  );
+};
diff --git a/src/components/FeaturePanel/FeaturePanel.tsx b/src/components/FeaturePanel/FeaturePanel.tsx
index b8d76dfde..f7d2b29c3 100644
--- a/src/components/FeaturePanel/FeaturePanel.tsx
+++ b/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} />}
diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js
index 161226aab..a385a4e31 100644
--- a/src/locales/vocabulary.js
+++ b/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__',