diff --git a/.env.sample b/.env.sample new file mode 100644 index 0000000..f4f3a9d --- /dev/null +++ b/.env.sample @@ -0,0 +1 @@ +REACT_APP_PANO_URL=http://127.0.0.1:8081 diff --git a/README.md b/README.md index cee488e..2724632 100644 --- a/README.md +++ b/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. diff --git a/src/components/Gallery/component.js b/src/components/Gallery/component.js index 5acfbb0..f7f8553 100644 --- a/src/components/Gallery/component.js +++ b/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}")` }} /> @@ -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); + } + }; } diff --git a/src/components/NodeDetail/component.js b/src/components/NodeDetail/component.js index c71a9bb..9cd3dde 100644 --- a/src/components/NodeDetail/component.js +++ b/src/components/NodeDetail/component.js @@ -1,6 +1,7 @@ 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, @@ -8,6 +9,29 @@ const getPixelPositionOffset = (width, 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 (
diff --git a/src/utils/index.js b/src/utils/index.js index 70d0d39..2b580cc 100644 --- a/src/utils/index.js +++ b/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;