Use ENV vars to get the API endpoint and default hostname for the ser…

…ver-side rendering

.env.development

@@ -1,3 +1,5 @@
 NEXT_PUBLIC_API_MOCKING=enabled
 NEXT_PURGE_CSS=enabled
 NEXT_TELEMETRY_DISABLED=1
+DEFAULT_HOSTNAME="staging.appsignal-status.online"
+API_ENDPOINT="api.appsignal-status.online"

components/UptimeMonitor/UptimeMonitor.js

@@ -24,7 +24,7 @@ export const UptimeMonitorLoading = () => {
   );
 };
 
-const UptimeMonitor = ({ hostname, uptimeMonitor }) => {
+const UptimeMonitor = ({ uptimeMonitor }) => {
   const [overlayOpen, setOverlayOpen] = React.useState(false);
   const [loading, setLoading] = React.useState(true);
   const [monitor, setMonitor] = React.useState([]);
@@ -33,14 +33,7 @@ const UptimeMonitor = ({ hostname, uptimeMonitor }) => {
     // We use the mounted variable to make sure React stops trying to use state
     // when the component is unmounted.
     let mounted = true;
-    fetch(
-      `https://api.appsignal-status.online/status_pages/${Buffer.from(
-        hostname
-      ).toString("base64")}/monitors/${uptimeMonitor.id}.json`,
-      {
-        mode: "cors",
-      }
-    )
+    fetch(uptimeMonitor.endpoint, { mode: "cors" })
       .then((res) => res.json())
       .then((result) => {
         if (mounted) {
@@ -50,7 +43,7 @@ const UptimeMonitor = ({ hostname, uptimeMonitor }) => {
       });
 
     return () => (mounted = false);
-  }, [hostname, uptimeMonitor.id]);
+  }, [uptimeMonitor.id, uptimeMonitor.endpoint]);
 
   return (
     <>
@@ -86,7 +79,6 @@ const UptimeMonitor = ({ hostname, uptimeMonitor }) => {
 
 UptimeMonitor.propTypes = {
   uptimeMonitor: PropTypes.object.isRequired,
-  hostname: PropTypes.string.isRequired,
 };
 
 export default UptimeMonitor;

components/UptimeMonitor/UptimeMonitor.test.js

@@ -6,7 +6,6 @@ import statusPageMock from "../../mocks/status_pages/appsignal.json";
 const build = (props = {}) => {
   return render(
     <UptimeMonitor
-      hostname="example.com"
       uptimeMonitor={statusPageMock.uptime_monitors[0]}
       {...props}
     />

components/UptimeMonitors/UptimeMonitors.js

@@ -12,11 +12,7 @@ const UptimeMonitors = ({ statusPage }) => {
     }
 
     return statusPage.uptime_monitors.map((monitor) => (
-      <UptimeMonitor
-        key={monitor.url}
-        uptimeMonitor={monitor}
-        hostname={statusPage.hostname}
-      />
+      <UptimeMonitor key={monitor.url} uptimeMonitor={monitor} />
     ));
   };
   return (
@@ -32,7 +28,6 @@ const UptimeMonitors = ({ statusPage }) => {
 
 UptimeMonitors.propTypes = {
   statusPage: PropTypes.shape({
-    hostname: PropTypes.string.isRequired,
     uptime_monitors: PropTypes.array.isRequired,
   }).isRequired,
 };

mocks/status_pages/appsignal.json

@@ -26,21 +26,24 @@
       "title": "homepage",
       "url": "https://www.appsignal.com",
       "description": "The AppSignal homepage. Notify #operations when this alert is triggered. ",
-      "regions": ["europe", "south-america", "north-america", "asia-pacific"]
+      "regions": ["europe", "south-america", "north-america", "asia-pacific"],
+      "endpoint": "https://api.appsignal-status.online/status_pages/1/monitors/homepage.json"
     },
     {
       "id": "blog",
       "title": "blog",
       "url": "https://blog.appsignal.com",
       "description": "",
-      "regions": ["europe", "south-america", "north-america", "asia-pacific"]
+      "regions": ["europe", "south-america", "north-america", "asia-pacific"],
+      "endpoint": "https://api.appsignal-status.online/status_pages/1/monitors/blog.json"
     },
     {
       "id": "always-down",
       "title": "Always Down",
       "url": "https://banana.appsignal.com",
       "description": "This endpoint will always be down!",
-      "regions": ["europe", "south-america", "north-america", "asia-pacific"]
+      "regions": ["europe", "south-america", "north-america", "asia-pacific"],
+      "endpoint": "https://api.appsignal-status.online/status_pages/1/monitors/always-down.json"
     }
   ]
 }