fix: multiple viewers fill in the same container

package.json

@@ -41,6 +41,7 @@
   "devDependencies": {
     "autoprefixer": "^7.1.0",
     "babel-core": "^6.24.1",
+    "babel-eslint": "^10.0.3",
     "babel-jest": "^20.0.3",
     "babel-loader": "^7.0.0",
     "babel-plugin-transform-class-properties": "^6.19.0",

src/.eslintrc

@@ -1,6 +1,6 @@
 {
   "rules": {
-    "react/prop-types": [0, {customValidators: ["skipUndeclared"]}],
+    "react/prop-types": [0, { "customValidators": ["skipUndeclared"] }],
     "jsx-a11y/media-has-caption": [0],
     "jsx-a11y/anchor-has-content": [0],
     "jsx-a11y/no-static-element-interactions": [0],
@@ -11,13 +11,14 @@
     "no-mixed-operators": [0],
     "max-len": [0],
     "react/no-unused-prop-types": [0],
-    "react/no-did-mount-set-state": [0],
+    "react/no-did-mount-set-state": [0]
   },
+  "parser": "babel-eslint",
   "extends": "airbnb",
   "globals": {
-    XMLHttpRequest: true,
-    XDomainRequest: true,
-    document: true,
-    window: true
+    "XMLHttpRequest": true,
+    "XDomainRequest": true,
+    "document": true,
+    "window": true
   }
 }

src/components/drivers/docx-viewer.jsx

@@ -7,35 +7,39 @@ import 'styles/docx.scss';
 import Loading from '../loading';
 
 export default class extends Component {
+  divRef = React.createRef();
   componentDidMount() {
     const jsonFile = new XMLHttpRequest();
     jsonFile.open('GET', this.props.filePath, true);
     jsonFile.send();
     jsonFile.responseType = 'arraybuffer';
     jsonFile.onreadystatechange = () => {
       if (jsonFile.readyState === 4 && jsonFile.status === 200) {
-        mammoth.convertToHtml(
-          { arrayBuffer: jsonFile.response },
-          { includeDefaultStyleMap: true },
-        )
-        .then((result) => {
-          const docEl = document.createElement('div');
-          docEl.className = 'document-container';
-          docEl.innerHTML = result.value;
-          document.getElementById('docx').innerHTML = docEl.outerHTML;
-        })
-        .catch((a) => {
-          console.log('alexei: something went wrong', a);
-        })
-        .done();
+        mammoth
+          .convertToHtml(
+            { arrayBuffer: jsonFile.response },
+            { includeDefaultStyleMap: true },
+          )
+          .then(result => {
+            const docEl = document.createElement('div');
+            docEl.className = 'document-container';
+            docEl.innerHTML = result.value;
+            if (this.divRef.current)
+              this.divRef.current.innerHTML = docEl.outerHTML;
+          })
+          .catch(a => {
+            console.log('alexei: something went wrong', a);
+          })
+          .done();
       }
     };
   }
 
   render() {
     return (
-      <div id="docx">
+      <div ref={this.divRef}>
         <Loading />
-      </div>);
+      </div>
+    );
   }
 }

src/components/drivers/photo-viewer.jsx

@@ -5,14 +5,21 @@ import React, { Component } from 'react';
 import 'styles/photo-viewer.scss';
 
 export default class PhotoViewer extends Component {
+  divRef = React.createRef();
+
   componentDidMount() {
     const { originalWidth, originalHeight } = this.props;
-    const imageDimensions = this.getImageDimensions.call(this, originalWidth, originalHeight);
+    const imageDimensions = this.getImageDimensions.call(
+      this,
+      originalWidth,
+      originalHeight,
+    );
 
     this.props.texture.image.style.width = `${imageDimensions.width}px`;
     this.props.texture.image.style.height = `${imageDimensions.height}px`;
     this.props.texture.image.setAttribute('class', 'photo');
-    document.getElementById('pg-photo-container').appendChild(this.props.texture.image);
+    if (this.divRef.current)
+      this.divRef.current.appendChild(this.props.texture.image);
   }
 
   getImageDimensions(originalWidth, originalHeight) {
@@ -46,7 +53,11 @@ export default class PhotoViewer extends Component {
     };
 
     return (
-      <div style={containerStyles} className="photo-viewer-container" id="pg-photo-container" />
+      <div
+        style={containerStyles}
+        className="photo-viewer-container"
+        ref={this.divRef}
+      />
     );
   }
 }

src/components/drivers/photo360-viewer.jsx

@@ -5,6 +5,7 @@ import * as THREE from 'three';
 import 'styles/photo360.scss';
 
 export default class extends Component {
+  divRef = React.createRef();
   constructor(props) {
     super(props);
     let savedX;
@@ -28,8 +29,7 @@ export default class extends Component {
   }
 
   componentDidMount() {
-    const el = document.getElementById('360-photo');
-    const positionInfo = el.getBoundingClientRect();
+    const positionInfo = this.divRef.current.getBoundingClientRect();
     const height = positionInfo.height;
     const width = positionInfo.width;
 
@@ -89,15 +89,20 @@ export default class extends Component {
     });
   }
 
-
   updateView() {
     const latitude = Math.max(-85, Math.min(85, this.state.latitude));
 
     // moving the camera according to current latitude (vertical movement)
     // and longitude (horizontal movement)
-    this.camera.target.x = 500 * Math.sin(THREE.Math.degToRad(90 - latitude)) * Math.cos(THREE.Math.degToRad(this.state.longitude));
+    this.camera.target.x =
+      500 *
+      Math.sin(THREE.Math.degToRad(90 - latitude)) *
+      Math.cos(THREE.Math.degToRad(this.state.longitude));
     this.camera.target.y = 500 * Math.cos(THREE.Math.degToRad(90 - latitude));
-    this.camera.target.z = 500 * Math.sin(THREE.Math.degToRad(90 - latitude)) * Math.sin(THREE.Math.degToRad(this.state.longitude));
+    this.camera.target.z =
+      500 *
+      Math.sin(THREE.Math.degToRad(90 - latitude)) *
+      Math.sin(THREE.Math.degToRad(this.state.longitude));
     this.camera.lookAt(this.camera.target);
 
     this.renderer.render(this.scene, this.camera);
@@ -106,7 +111,7 @@ export default class extends Component {
   render() {
     return (
       <div
-        id="360-photo"
+        ref={this.divRef}
         className="photo360"
         onMouseDown={this.onMouseDown}
         onMouseMove={this.onMouseMove}

src/components/file-viewer.jsx

@@ -18,6 +18,7 @@ import {
 } from './drivers';
 
 class FileViewer extends Component {
+  divRef = React.createRef();
   constructor(props) {
     super(props);
     this.state = {
@@ -26,7 +27,7 @@ class FileViewer extends Component {
   }
 
   componentDidMount() {
-    const container = document.getElementById('pg-viewer');
+    const container = this.divRef.current;
     const height = container ? container.clientHeight : 0;
     const width = container ? container.clientWidth : 0;
     this.setState({ height, width });
@@ -38,7 +39,9 @@ class FileViewer extends Component {
         return withFetching(CsvViewer, this.props);
       }
       case 'xlsx': {
-        const newProps = Object.assign({}, this.props, { responseType: 'arraybuffer' });
+        const newProps = Object.assign({}, this.props, {
+          responseType: 'arraybuffer',
+        });
         return withFetching(XlsxViewer, newProps);
       }
       case 'jpg':
@@ -74,8 +77,12 @@ class FileViewer extends Component {
     const Driver = this.getDriver(this.props);
     return (
       <div className="pg-viewer-wrapper">
-        <div className="pg-viewer" id="pg-viewer">
-          <Driver {...this.props} width={this.state.width} height={this.state.height} />
+        <div className="pg-viewer" ref={this.divRef}>
+          <Driver
+            {...this.props}
+            width={this.state.width}
+            height={this.state.height}
+          />
         </div>
       </div>
     );