fix flow type errors of react refs

package.json

@@ -32,6 +32,7 @@
     "postinstall": "electron-builder install-app-deps && node build/downloadDaemon.js"
   },
   "dependencies": {
+    "@types/three": "^0.93.1",
     "bluebird": "^3.5.1",
     "breakdance": "^3.0.1",
     "classnames": "^2.2.5",

src/renderer/component/viewers/codeViewer.jsx

@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react';
+import * as React from 'react';
 import CodeMirror from 'codemirror/lib/codemirror';
 import { openSnippetMenu, stopContextMenu } from 'util/contextMenu';
 
@@ -30,13 +30,12 @@ class CodeViewer extends React.PureComponent<Props> {
   constructor(props: Props) {
     super(props);
     this.codeMirror = null;
-    this.textarea = React.createRef();
   }
 
   componentDidMount() {
     const { theme, contentType } = this.props;
     // Init CodeMirror
-    this.codeMirror = CodeMirror.fromTextArea(this.textarea.current, {
+    this.codeMirror = CodeMirror.fromTextArea(this.textarea, {
       // Auto detect syntax with file contentType
       mode: contentType,
       // Adaptive theme
@@ -54,13 +53,14 @@ class CodeViewer extends React.PureComponent<Props> {
     this.codeMirror.on('contextmenu', openSnippetMenu);
   }
 
+  textarea: ?HTMLTextAreaElement;
   codeMirror: any;
 
   render() {
     const { value } = this.props;
     return (
       <div className="code-viewer" onContextMenu={stopContextMenu}>
-        <textarea ref={this.textarea} disabled value={value} />
+        <textarea ref={textarea => (this.textarea = textarea)} disabled value={value} />
       </div>
     );
   }

src/renderer/component/viewers/pdfViewer.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { stopContextMenu } from 'util/contextMenu';
 
 type Props = {
@@ -7,18 +7,11 @@ type Props = {
 };
 
 class PdfViewer extends React.PureComponent<Props> {
-  constructor(props: Props) {
-    super(props);
-    this.viewer = React.createRef();
-  }
-
-  viewer: { current: any };
-
   render() {
     const { source } = this.props;
     return (
       <div className="file-render__viewer" onContextMenu={stopContextMenu}>
-        <webview ref={this.viewer} src={`chrome://pdf-viewer/index.html?src=file://${source}`} />
+        <webview src={`chrome://pdf-viewer/index.html?src=file://${source}`} />
       </div>
     );
   }

src/renderer/component/viewers/threeViewer/index.jsx

@@ -34,7 +34,8 @@ type State = {
 };
 
 class ThreeViewer extends React.PureComponent<Props, State> {
-  static testWebgl = new Promise((resolve, reject) => {
+  static testWebgl = (): Promise<void> =>
+    new Promise((resolve, reject) => {
       if (detectWebGL()) resolve();
       else reject();
     });
@@ -92,8 +93,6 @@ class ThreeViewer extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
     const { theme } = this.props;
-    this.viewer = React.createRef();
-    this.guiContainer = React.createRef();
     // Object defualt color
     this.materialColor = '#44b098';
     // Viewer themes
@@ -197,8 +196,10 @@ class ThreeViewer extends React.PureComponent<Props, State> {
   theme: viewerTheme;
   themes: { dark: viewerTheme, light: viewerTheme };
   materialColor: string;
+  // Refs
+  viewer: ?HTMLElement;
+  guiContainer: ?HTMLElement;
   // Too complex to add a custom type
-  // Posible solution: https://www.npmjs.com/package/@types/three
   gui: any;
   grid: any;
   mesh: any;
@@ -293,7 +294,9 @@ class ThreeViewer extends React.PureComponent<Props, State> {
 
       sceneFolder.add(config, 'reset').name('Reset');
 
-      this.guiContainer.current.appendChild(this.gui.domElement);
+      if (this.guiContainer) {
+        this.guiContainer.appendChild(this.gui.domElement);
+      }
     }
   }
 
@@ -336,7 +339,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
   };
 
   handleResize = () => {
-    const { offsetWidth: width, offsetHeight: height } = this.viewer.current;
+    const { offsetWidth: width, offsetHeight: height } = this.viewer || {};
     this.camera.aspect = width / height;
     this.camera.updateProjectionMatrix();
     this.controls.update();
@@ -415,9 +418,8 @@ class ThreeViewer extends React.PureComponent<Props, State> {
       ...this.theme,
     });
 
-    const viewer = this.viewer.current;
     const canvas = this.renderer.domElement;
-    const { offsetWidth: width, offsetHeight: height } = viewer;
+    const { offsetWidth: width, offsetHeight: height } = this.viewer || {};
 
     // Grid
     this.grid = ThreeGrid({ size: 100, gridColor, centerLineColor });
@@ -446,7 +448,9 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.startLoader();
 
     // Append canvas
-    viewer.appendChild(canvas);
+    if (this.viewer) {
+      this.viewer.appendChild(canvas);
+    }
 
     const updateScene = () => {
       this.frameID = requestAnimationFrame(updateScene);
@@ -471,11 +475,11 @@ class ThreeViewer extends React.PureComponent<Props, State> {
       <React.Fragment>
         {error && <LoadingScreen status={error} spinner={false} />}
         {showLoading && <LoadingScreen status={loadingMessage} spinner />}
-        <div ref={this.guiContainer} className={containerClass} />
+        <div ref={element => (this.guiContainer = element)} className={containerClass} />
         <div
           style={{ opacity: showViewer ? 1 : 0 }}
           className="three-viewer file-render__viewer"
-          ref={this.viewer}
+          ref={viewer => (this.viewer = viewer)}
         />
       </React.Fragment>
     );

yarn.lock

@@ -130,6 +130,10 @@
   version "8.10.21"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.21.tgz#12b3f2359b27aa05a45d886c8ba1eb8d1a77e285"
 
+"@types/three@^0.93.1":
+  version "0.93.1"
+  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.93.1.tgz#0b9ba53182afe16659e220d670471b4475687d64"
+
 "@types/webpack-env@^1.13.5":
   version "1.13.6"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.13.6.tgz#128d1685a7c34d31ed17010fc87d6a12c1de6976"