From 15cbdd42a86e83cccf64df9f9f57a2f5e7cd3cae Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sun, 14 Oct 2018 18:27:09 -0600
Subject: [PATCH 1/4] fix more flow errors for document viewers

---
 .../component/common/markdown-preview.jsx     | 33 ++++++++++++-------
 src/renderer/component/fileRender/view.jsx    |  4 +--
 src/renderer/component/viewers/codeViewer.jsx |  6 ++--
 .../component/viewers/documentViewer.jsx      | 23 ++++++++-----
 src/renderer/component/viewers/docxViewer.jsx | 14 +++++---
 src/renderer/component/viewers/pdfViewer.jsx  |  4 ++-
 6 files changed, 55 insertions(+), 29 deletions(-)

diff --git a/src/renderer/component/common/markdown-preview.jsx b/src/renderer/component/common/markdown-preview.jsx
index b00ae7025..78af2273d 100644
--- a/src/renderer/component/common/markdown-preview.jsx
+++ b/src/renderer/component/common/markdown-preview.jsx
@@ -6,25 +6,34 @@ import remarkEmoji from 'remark-emoji';
 import ExternalLink from 'component/externalLink';
 import defaultSchema from 'hast-util-sanitize/lib/github.json';
 
+type MarkdownProps = {
+  content: ?string,
+  promptLinks?: boolean,
+};
+
+type SimpleLinkProps = {
+  href?: string,
+  title?: string,
+  children?: React.Node,
+};
+
+const SimpleLink = (props: SimpleLinkProps) => {
+  const { href, title, children } = props;
+  return (
+    <a href={href} title={title}>
+      {children}
+    </a>
+  );
+};
+
 // Use github sanitation schema
 const schema = { ...defaultSchema };
 
 // Extend sanitation schema to support lbry protocol
 schema.protocols.href[3] = 'lbry';
 
-type MarkdownProps = {
-  content: string,
-  promptLinks?: boolean,
-};
-
-const SimpleLink = ({ href, title, children }) => (
-  <a href={href} title={title}>
-    {children}
-  </a>
-);
-
 const MarkdownPreview = (props: MarkdownProps) => {
-  const { content, externalLinks, promptLinks } = props;
+  const { content, promptLinks } = props;
   const remarkOptions = {
     sanitize: schema,
     remarkReactComponents: {
diff --git a/src/renderer/component/fileRender/view.jsx b/src/renderer/component/fileRender/view.jsx
index b9901564e..80a3236a5 100644
--- a/src/renderer/component/fileRender/view.jsx
+++ b/src/renderer/component/fileRender/view.jsx
@@ -10,11 +10,11 @@ import HtmlViewer from 'component/viewers/htmlViewer';
 type Props = {
   mediaType: string,
   source: {
+    stream: string => void,
     fileName: string,
     fileType: string,
+    contentType: string,
     downloadPath: string,
-    stream: opts => void,
-    blob: callback => void,
   },
   currentTheme: string,
 };
diff --git a/src/renderer/component/viewers/codeViewer.jsx b/src/renderer/component/viewers/codeViewer.jsx
index 1d5164468..af6ea8fc0 100644
--- a/src/renderer/component/viewers/codeViewer.jsx
+++ b/src/renderer/component/viewers/codeViewer.jsx
@@ -22,12 +22,12 @@ import 'codemirror/mode/javascript/javascript';
 
 type Props = {
   theme: string,
-  value: string,
+  value: ?string,
   contentType: string,
 };
 
 class CodeViewer extends React.PureComponent<Props> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     this.codeMirror = null;
     this.textarea = React.createRef();
@@ -54,6 +54,8 @@ class CodeViewer extends React.PureComponent<Props> {
     this.codeMirror.on('contextmenu', openSnippetMenu);
   }
 
+  codeMirror: any;
+
   render() {
     const { value } = this.props;
     return (
diff --git a/src/renderer/component/viewers/documentViewer.jsx b/src/renderer/component/viewers/documentViewer.jsx
index 608d34873..ed309236d 100644
--- a/src/renderer/component/viewers/documentViewer.jsx
+++ b/src/renderer/component/viewers/documentViewer.jsx
@@ -8,19 +8,25 @@ import MarkdownPreview from 'component/common/markdown-preview';
 type Props = {
   theme: string,
   source: {
-    stream: opts => void,
+    stream: string => any,
     fileType: string,
     contentType: string,
   },
 };
 
-class DocumentViewer extends React.PureComponent<Props> {
-  constructor(props) {
+type State = {
+  error: boolean,
+  loading: boolean,
+  content: ?string,
+};
+
+class DocumentViewer extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = {
-      error: null,
-      content: null,
+      error: false,
       loading: true,
+      content: null,
     };
   }
 
@@ -38,13 +44,14 @@ class DocumentViewer extends React.PureComponent<Props> {
       this.setState({ content: data, loading: false });
     });
 
-    stream.on('error', error => {
+    stream.on('error', () => {
       this.setState({ error: true, loading: false });
     });
   }
 
-  renderDocument(content = null) {
+  renderDocument() {
     let viewer = null;
+    const { content } = this.state;
     const { source, theme } = this.props;
     const { fileType, contentType } = source;
     const markdownType = ['md', 'markdown'];
@@ -70,7 +77,7 @@ class DocumentViewer extends React.PureComponent<Props> {
       <div className="file-render__viewer document-viewer">
         {loading && !error && <LoadingScreen status={loadingMessage} spinner />}
         {error && <LoadingScreen status={errorMessage} spinner={!error} />}
-        {isReady && this.renderDocument(content)}
+        {isReady && this.renderDocument()}
       </div>
     );
   }
diff --git a/src/renderer/component/viewers/docxViewer.jsx b/src/renderer/component/viewers/docxViewer.jsx
index 9959678c5..790269fe6 100644
--- a/src/renderer/component/viewers/docxViewer.jsx
+++ b/src/renderer/component/viewers/docxViewer.jsx
@@ -10,11 +10,17 @@ type Props = {
   source: string,
 };
 
-class DocxViewer extends React.PureComponent<Props> {
-  constructor(props) {
+type State = {
+  error: boolean,
+  loading: boolean,
+  content: ?string,
+};
+
+class DocxViewer extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = {
-      error: null,
+      error: false,
       content: null,
       loading: true,
     };
@@ -46,7 +52,7 @@ class DocxViewer extends React.PureComponent<Props> {
         const markdown = breakdance.render(result.value);
         this.setState({ content: markdown, loading: false });
       })
-      .catch(error => {
+      .catch(() => {
         this.setState({ error: true, loading: false });
       })
       .done();
diff --git a/src/renderer/component/viewers/pdfViewer.jsx b/src/renderer/component/viewers/pdfViewer.jsx
index ce0a2095a..4f15ec315 100644
--- a/src/renderer/component/viewers/pdfViewer.jsx
+++ b/src/renderer/component/viewers/pdfViewer.jsx
@@ -7,11 +7,13 @@ type Props = {
 };
 
 class PdfViewer extends React.PureComponent<Props> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     this.viewer = React.createRef();
   }
 
+  viewer: { current: any };
+
   render() {
     const { source } = this.props;
     return (
-- 
2.45.2


From 46dc577d10f0c9c29baa6e16b5a271f6a21d1387 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sun, 14 Oct 2018 19:42:01 -0600
Subject: [PATCH 2/4] fix some flow errors of the three-viewer component

---
 .../component/viewers/threeViewer/index.jsx   | 108 ++++++++++++------
 1 file changed, 73 insertions(+), 35 deletions(-)

diff --git a/src/renderer/component/viewers/threeViewer/index.jsx b/src/renderer/component/viewers/threeViewer/index.jsx
index 0f4afb433..18e13d523 100644
--- a/src/renderer/component/viewers/threeViewer/index.jsx
+++ b/src/renderer/component/viewers/threeViewer/index.jsx
@@ -12,6 +12,13 @@ import ThreeScene from './internal/scene';
 import ThreeLoader from './internal/loader';
 import ThreeRenderer from './internal/renderer';
 
+type viewerTheme = {
+  gridColor: string,
+  groundColor: string,
+  backgroundColor: string,
+  centerLineColor: string,
+};
+
 type Props = {
   theme: string,
   source: {
@@ -32,7 +39,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     else reject();
   });
 
-  static createOrbitControls(camera, canvas) {
+  static createOrbitControls(camera: any, canvas: any) {
     const controls = new THREE.OrbitControls(camera, canvas);
     // Controls configuration
     controls.enableDamping = true;
@@ -46,7 +53,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     return controls;
   }
 
-  static fitMeshToCamera(group) {
+  static fitMeshToCamera(group: any) {
     const max = { x: 0, y: 0, z: 0 };
     const min = { x: 0, y: 0, z: 0 };
 
@@ -82,18 +89,6 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     See: https://github.com/mrdoob/three.js/blob/dev/docs/scenes/js/material.js#L195
   */
 
-  static updateMaterial(material, geometry) {
-    material.vertexColors = +material.vertexColors; // Ensure number
-    material.side = +material.side; // Ensure number
-    material.needsUpdate = true;
-    // If Geometry needs update
-    if (geometry) {
-      geometry.verticesNeedUpdate = true;
-      geometry.normalsNeedUpdate = true;
-      geometry.colorsNeedUpdate = true;
-    }
-  }
-
   constructor(props: Props) {
     super(props);
     const { theme } = this.props;
@@ -124,6 +119,17 @@ class ThreeViewer extends React.PureComponent<Props, State> {
       isReady: false,
       isLoading: false,
     };
+    // Internal objects
+    this.gui = null;
+    this.grid = null;
+    this.mesh = null;
+    this.camera = null;
+    this.frameID = null;
+    this.renderer = null;
+    this.material = null;
+    this.geometry = null;
+    this.targetCenter = null;
+    this.bufferGeometry = null;
   }
 
   componentDidMount() {
@@ -187,7 +193,37 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     }
   }
 
-  transformGroup(group) {
+  // Define component types
+  theme: viewerTheme;
+  themes: { dark: viewerTheme, light: viewerTheme };
+  materialColor: string;
+  // Too complex to add a custom type
+  // Posible solution: https://www.npmjs.com/package/@types/three
+  gui: any;
+  grid: any;
+  mesh: any;
+  scene: any;
+  camera: any;
+  frameID: any;
+  controls: any;
+  material: any;
+  geometry: any;
+  targetCenter: any;
+  bufferGeometry: any;
+
+  updateMaterial(material: any, geometry: any) {
+    this.material.vertexColors = +material.vertexColors; // Ensure number
+    this.material.side = +material.side; // Ensure number
+    this.material.needsUpdate = true;
+    // If Geometry needs update
+    if (geometry) {
+      this.geometry.verticesNeedUpdate = true;
+      this.geometry.normalsNeedUpdate = true;
+      this.geometry.colorsNeedUpdate = true;
+    }
+  }
+
+  transformGroup(group: any) {
     ThreeViewer.fitMeshToCamera(group);
 
     if (!this.targetCenter) {
@@ -203,20 +239,19 @@ class ThreeViewer extends React.PureComponent<Props, State> {
 
       const config = {
         color: this.materialColor,
-      };
-
-      config.reset = () => {
-        // Reset material color
-        config.color = this.materialColor;
-        // Reset material
-        this.material.color.set(config.color);
-        this.material.flatShading = true;
-        this.material.shininess = 30;
-        this.material.wireframe = false;
-        // Reset autoRotate
-        this.controls.autoRotate = false;
-        // Reset camera
-        this.restoreCamera();
+        reset: () => {
+          // Reset material color
+          config.color = this.materialColor;
+          // Reset material
+          this.material.color.set(config.color);
+          this.material.flatShading = true;
+          this.material.shininess = 30;
+          this.material.wireframe = false;
+          // Reset autoRotate
+          this.controls.autoRotate = false;
+          // Reset camera
+          this.restoreCamera();
+        },
       };
 
       const materialFolder = this.gui.addFolder('Material');
@@ -240,7 +275,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
         .add(this.material, 'flatShading')
         .name('FlatShading')
         .onChange(() => {
-          ThreeViewer.updateMaterial(this.material);
+          this.updateMaterial(this.material);
         })
         .listen();
 
@@ -262,7 +297,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     }
   }
 
-  createGeometry(data) {
+  createGeometry(data: any) {
     this.bufferGeometry = data;
     this.bufferGeometry.computeBoundingBox();
     this.bufferGeometry.center();
@@ -308,7 +343,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.renderer.setSize(width, height);
   };
 
-  updateControlsTarget(point) {
+  updateControlsTarget(point: { x: number, y: number, z: number }) {
     this.controls.target.fromArray([point.x, point.y, point.z]);
     this.controls.update();
   }
@@ -319,7 +354,10 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.updateControlsTarget(this.targetCenter);
   }
 
-  renderStl(data) {
+  // Flow requested to add it here
+  renderer: any;
+
+  renderStl(data: any) {
     this.createGeometry(data);
     this.mesh = new THREE.Mesh(this.geometry, this.material);
     this.mesh.name = 'model';
@@ -327,7 +365,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.transformGroup(this.mesh);
   }
 
-  renderObj(event) {
+  renderObj(event: any) {
     const mesh = event.detail.loaderRootNode;
     this.mesh = new THREE.Group();
     this.mesh.name = 'model';
@@ -352,7 +390,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.transformGroup(this.mesh);
   }
 
-  renderModel(fileType, parsedData) {
+  renderModel(fileType: string, parsedData: any) {
     const renderTypes = {
       stl: data => this.renderStl(data),
       obj: data => this.renderObj(data),
-- 
2.45.2


From 2dbb7717dadfc99be190d7720322127ef49d91b9 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Mon, 15 Oct 2018 00:26:46 -0600
Subject: [PATCH 3/4] fix flow type errors of react refs

---
 package.json                                  |  1 +
 src/renderer/component/viewers/codeViewer.jsx |  8 ++---
 src/renderer/component/viewers/pdfViewer.jsx  | 11 ++-----
 .../component/viewers/threeViewer/index.jsx   | 32 +++++++++++--------
 yarn.lock                                     |  4 +++
 5 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index b10cec32d..0fe9622c2 100644
--- a/package.json
+++ b/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",
diff --git a/src/renderer/component/viewers/codeViewer.jsx b/src/renderer/component/viewers/codeViewer.jsx
index af6ea8fc0..d10f3135c 100644
--- a/src/renderer/component/viewers/codeViewer.jsx
+++ b/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>
     );
   }
diff --git a/src/renderer/component/viewers/pdfViewer.jsx b/src/renderer/component/viewers/pdfViewer.jsx
index 4f15ec315..e297adfd1 100644
--- a/src/renderer/component/viewers/pdfViewer.jsx
+++ b/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>
     );
   }
diff --git a/src/renderer/component/viewers/threeViewer/index.jsx b/src/renderer/component/viewers/threeViewer/index.jsx
index 18e13d523..ad7f67b32 100644
--- a/src/renderer/component/viewers/threeViewer/index.jsx
+++ b/src/renderer/component/viewers/threeViewer/index.jsx
@@ -34,10 +34,11 @@ type State = {
 };
 
 class ThreeViewer extends React.PureComponent<Props, State> {
-  static testWebgl = new Promise((resolve, reject) => {
-    if (detectWebGL()) resolve();
-    else reject();
-  });
+  static testWebgl = (): Promise<void> =>
+    new Promise((resolve, reject) => {
+      if (detectWebGL()) resolve();
+      else reject();
+    });
 
   static createOrbitControls(camera: any, canvas: any) {
     const controls = new THREE.OrbitControls(camera, canvas);
@@ -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>
     );
diff --git a/yarn.lock b/yarn.lock
index ff1003b87..5f1f4193e 100644
--- a/yarn.lock
+++ b/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"
-- 
2.45.2


From ae9a139f215a95e9c1478e34ace02a478df2d969 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Mon, 15 Oct 2018 10:01:27 -0600
Subject: [PATCH 4/4] fix promise error

---
 src/renderer/component/viewers/threeViewer/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/component/viewers/threeViewer/index.jsx b/src/renderer/component/viewers/threeViewer/index.jsx
index ad7f67b32..229347830 100644
--- a/src/renderer/component/viewers/threeViewer/index.jsx
+++ b/src/renderer/component/viewers/threeViewer/index.jsx
@@ -132,7 +132,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
   }
 
   componentDidMount() {
-    ThreeViewer.testWebgl
+    ThreeViewer.testWebgl()
       .then(() => {
         this.renderScene();
         // Update render on resize window
-- 
2.45.2