Merge pull request lbryio#2039 from lbryio/fix-flow

Fix flow type errors of all viewers

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/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: {

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,
 };

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';
 
@@ -22,21 +22,20 @@ 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();
   }
 
   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,11 +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/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>
     );
   }

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();

src/renderer/component/viewers/pdfViewer.jsx

@@ -1,22 +1,17 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { stopContextMenu } from 'util/contextMenu';
 
 type Props = {
   source: string,
 };
 
 class PdfViewer extends React.PureComponent<Props> {
-  constructor(props) {
-    super(props);
-    this.viewer = React.createRef();
-  }
-
   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>
     );
   }