Pull panoramas from Pano

.env.sample

@@ -0,0 +1 @@
+REACT_APP_PANO_URL=http://127.0.0.1:8081

README.md

@@ -8,6 +8,10 @@
 
 Installs dependencies.
 
+```
+echo '127.0.0.1 map.nycmesh.net' >> /etc/hosts
+```
+
 #### `yarn start`
 
 Runs the app in development mode.  

src/components/Gallery/component.js

@@ -1,18 +1,20 @@
 import React, { PureComponent } from "react";
 import { Link } from "react-router-dom";
 import DocumentTitle from "react-document-title";
+import { PANO_URL } from "../../utils";
 
 export default class Gallery extends PureComponent {
 	constructor(props) {
 		super(props);
 		this.state = {
-			panoramas: this.getPanoramas()
+			panoramas: []//this.getPanoramas()
 		};
 	}
 
 	componentDidMount() {
 		this.keyDownHandler = this.handleKeyDown.bind(this);
 		window.addEventListener("keydown", this.keyDownHandler, true);
+		this.fetchPanoramas();
 	}
 
 	componentWillUnmount() {
@@ -71,13 +73,13 @@ export default class Gallery extends PureComponent {
 						onClick={() =>
 							window
 								.open(
-									`https://node-db.netlify.app/panoramas/${src}`,
+									`${src}`,
 									"_blank"
 								)
 								.focus()
 						}
 						className="db center mh-100 mw-100 zoom-in"
-						src={`https://node-db.netlify.app/panoramas/${src}`}
+						src={`${src}`}
 						alt="Panorama"
 					/>
 					{this.renderPreviews()}
@@ -105,7 +107,7 @@ export default class Gallery extends PureComponent {
 								index === panoId - 1 ? "" : "o-30"
 							}`}
 							style={{
-								backgroundImage: `url("https://node-db.netlify.app/panoramas/${panorama}")`
+								backgroundImage: `url("${panorama}")`
 							}}
 						/>
 					</Link>
@@ -114,20 +116,16 @@ export default class Gallery extends PureComponent {
 		);
 	}
 
-	getPanoramas() {
-		const { match, nodesById } = this.props;
-		const { nodeId } = match.params;
-		const node = nodesById[nodeId];
-
-		if (!node) {
-			return [];
-		}
-
-		const { panoramas } = node;
-		if (!panoramas || !panoramas.length) {
-			return [];
-		}
-
-		return panoramas;
-	}
+    fetchPanoramas = async () => {
+        try {
+            const { match } = this.props;
+            const { nodeId } = match.params;
+            const panoResponse = await fetch(`${PANO_URL}/api/v1/install/${nodeId}`);
+            const j = await panoResponse.json();
+            let urls = j.map(image => image.url);
+            this.setState({ panoramas: urls });
+        } catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    };
 }

src/components/NodeDetail/component.js

@@ -1,13 +1,37 @@
 import React, { PureComponent } from "react";
 import { OverlayView } from "react-google-maps";
 import { Link } from "react-router-dom";
+import { PANO_URL } from "../../utils";
 
 const getPixelPositionOffset = (width, height) => ({
 	x: -width / 2,
 	y: -height
 });
 
 export default class NodeDetail extends PureComponent {
+    constructor(props) {
+		super(props);
+		this.state = {
+			panoramas: []
+		};
+	}
+
+    componentDidMount() {
+        this.fetchPanoramas();
+    }
+
+    fetchPanoramas = async () => {
+        try {
+			console.log(`PANO_URL = ${PANO_URL}`);
+            const panoResponse = await fetch(`${PANO_URL}/api/v1/install/${this.props.nodeId}`);
+            const j = await panoResponse.json();
+            let urls = j.map(image => image.url);
+            this.setState({ panoramas: urls });
+        } catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    };
+
 	render() {
 		const { nodeId, nodesById } = this.props;
 
@@ -63,17 +87,17 @@ export default class NodeDetail extends PureComponent {
 	}
 
 	renderImage(node) {
-		const { id, panoramas } = node;
-		if (!panoramas || !panoramas.length) {
+		const { id } = node;
+		if (!this.state.panoramas || !this.state.panoramas.length) {
 			return null;
 		}
-		const [firstPanorama] = panoramas;
+		const [firstPanorama] = this.state.panoramas;
 		return (
 			<Link to={`/nodes/${id}/panoramas/1`} className="db h2 w2">
 				<div
 					className="h-100 w-100 cover bg-center bg-near-white"
 					style={{
-						backgroundImage: `url("https://node-db.netlify.app/panoramas/${firstPanorama}")`
+						backgroundImage: `url("${firstPanorama}")`
 					}}
 				/>
 			</Link>

src/utils/index.js

@@ -73,3 +73,5 @@ export const sectorColors = {
 	potential: "#aaa",
 	default: "#007aff"
 };
+
+export const PANO_URL = process.env.REACT_APP_PANO_URL;