Merge branch 'restoringEslint' into sarah-ai-visualization

1 files changed, 49 insertions, 51 deletions

diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index da01e099c..7a1e35636 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -1,9 +1,11 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import * as rp from 'request-promise';
-import { Utils } from '../Utils';
+import { ClientUtils } from '../ClientUtils';
 import { DocServer } from '../client/DocServer';
 import { Networking } from '../client/Network';
 import { Docs } from '../client/documents/Documents';
@@ -13,8 +15,9 @@ import { List } from '../fields/List';
 import { listSpec } from '../fields/Schema';
 import { Cast } from '../fields/Types';
 import './ImageUpload.scss';
-import { MobileInterface } from './MobileInterface';
+
 const { DFLT_IMAGE_NATIVE_DIM } = require('../client/views/global/globalCssVariables.module.scss'); // prettier-ignore
+
 export interface ImageUploadProps {
     Document: Doc; // Target document for upload (upload location)
 }
@@ -24,28 +27,30 @@ const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace('px', ''));
 
 @observer
 export class Uploader extends React.Component<ImageUploadProps> {
-    @observable error: string = '';
     @observable nm: string = 'Choose files'; // Text of 'Choose Files' button
     @observable process: string = ''; // Current status of upload
+    @observable private dialogueBoxOpacity = 1;
 
     onClick = async () => {
         try {
+            // eslint-disable-next-line react/destructuring-assignment
             const col = this.props.Document;
             await Docs.Prototypes.initialize();
             const imgPrev = document.getElementById('img_preview');
             this.setOpacity(1, '1'); // Slab 1
-            if (imgPrev) {
-                const files: FileList | null = inputRef.current!.files;
+            if (imgPrev && inputRef.current) {
+                const { files } = inputRef.current;
                 this.setOpacity(2, '1'); // Slab 2
                 if (files && files.length !== 0) {
                     this.process = 'Uploading Files';
                     for (let index = 0; index < files.length; ++index) {
                         const file = files[index];
+                        // eslint-disable-next-line no-await-in-loop
                         const res = await Networking.UploadFilesToServer({ file });
                         this.setOpacity(3, '1'); // Slab 3
                         // For each item that the user has selected
                         res.map(async ({ result }) => {
-                            const name = file.name;
+                            const { name } = file;
                             if (result instanceof Error) {
                                 return;
                             }
@@ -62,17 +67,17 @@ export class Uploader extends React.Component<ImageUploadProps> {
                                 doc = Docs.Create.ImageDocument(path, { _nativeWidth: defaultNativeImageDim, _width: 400, title: name });
                             }
                             this.setOpacity(4, '1'); // Slab 4
-                            const res = await rp.get(Utils.prepend('/getUserDocumentIds'));
-                            if (!res) {
+                            const docidsRes = await rp.get(ClientUtils.prepend('/getUserDocumentIds'));
+                            if (!docidsRes) {
                                 throw new Error('No user id returned');
                             }
-                            const field = await DocServer.GetRefField(JSON.parse(res).userDocumentId);
+                            const field = await DocServer.GetRefField(JSON.parse(docidsRes).userDocumentId);
                             let pending: Opt<Doc>;
                             if (field instanceof Doc) {
                                 pending = col;
                             }
                             if (pending) {
-                                const data = await Cast(pending.data, listSpec(Doc));
+                                const data = Cast(pending.data, listSpec(Doc));
                                 if (data) data.push(doc);
                                 else pending.data = new List([doc]);
                                 this.setOpacity(5, '1'); // Slab 5
@@ -93,22 +98,49 @@ export class Uploader extends React.Component<ImageUploadProps> {
                 setTimeout(this.clearUpload, 3000);
             }
         } catch (error) {
-            this.error = JSON.stringify(error);
+            console.log(JSON.stringify(error));
         }
     };
 
+    // Returns the upload interface for mobile
+    private get uploadInterface() {
+        return (
+            <div className="imgupload_cont">
+                <div className="closeUpload" onClick={() => this.closeUpload()}>
+                    <FontAwesomeIcon icon="window-close" size="lg" />
+                </div>
+                <FontAwesomeIcon icon="upload" size="lg" style={{ fontSize: '130' }} />
+                <input type="file" accept="application/pdf, video/*,image/*" className={`inputFile ${this.nm !== 'Choose files' ? 'active' : ''}`} id="input_image_file" ref={inputRef} onChange={this.inputLabel} multiple />
+                <label className="file" id="label" htmlFor="input_image_file">
+                    {this.nm}
+                </label>
+                <div className="upload_label" onClick={this.onClick}>
+                    Upload
+                </div>
+                <img id="img_preview" src="" alt="" />
+                <div className="loadingImage">
+                    <div className="loadingSlab" id="slab1" />
+                    <div className="loadingSlab" id="slab2" />
+                    <div className="loadingSlab" id="slab3" />
+                    <div className="loadingSlab" id="slab4" />
+                    <div className="loadingSlab" id="slab5" />
+                    <div className="loadingSlab" id="slab6" />
+                    <div className="loadingSlab" id="slab7" />
+                </div>
+                <p className="status">{this.process}</p>
+            </div>
+        );
+    }
+
     // Updates label after a files is selected (so user knows a file is uploaded)
     inputLabel = async () => {
-        const files: FileList | null = inputRef.current!.files;
-        await files;
+        const files: FileList | null = await inputRef.current!.files;
         if (files && files.length === 1) {
             this.nm = files[0].name;
         } else if (files && files.length > 1) {
             this.nm = files.length.toString() + ' files selected';
         }
-    };
-
-    // Loops through load icons, and resets buttons
+    }; // Loops through load icons, and resets buttons
     @action
     clearUpload = () => {
         for (let i = 1; i < 8; i++) {
@@ -125,7 +157,6 @@ export class Uploader extends React.Component<ImageUploadProps> {
     // Clears the upload and closes the upload menu
     closeUpload = () => {
         this.clearUpload();
-        MobileInterface.Instance.toggleUpload();
     };
 
     // Handles the setting of the loading bar
@@ -134,40 +165,7 @@ export class Uploader extends React.Component<ImageUploadProps> {
         if (slab) slab.style.opacity = opacity;
     };
 
-    // Returns the upload interface for mobile
-    private get uploadInterface() {
-        return (
-            <div className="imgupload_cont">
-                <div className="closeUpload" onClick={() => this.closeUpload()}>
-                    <FontAwesomeIcon icon="window-close" size={'lg'} />
-                </div>
-                <FontAwesomeIcon icon="upload" size="lg" style={{ fontSize: '130' }} />
-                <input type="file" accept="application/pdf, video/*,image/*" className={`inputFile ${this.nm !== 'Choose files' ? 'active' : ''}`} id="input_image_file" ref={inputRef} onChange={this.inputLabel} multiple></input>
-                <label className="file" id="label" htmlFor="input_image_file">
-                    {this.nm}
-                </label>
-                <div className="upload_label" onClick={this.onClick}>
-                    Upload
-                </div>
-                <img id="img_preview" src=""></img>
-                <div className="loadingImage">
-                    <div className="loadingSlab" id="slab1" />
-                    <div className="loadingSlab" id="slab2" />
-                    <div className="loadingSlab" id="slab3" />
-                    <div className="loadingSlab" id="slab4" />
-                    <div className="loadingSlab" id="slab5" />
-                    <div className="loadingSlab" id="slab6" />
-                    <div className="loadingSlab" id="slab7" />
-                </div>
-                <p className="status">{this.process}</p>
-            </div>
-        );
-    }
-
-    @observable private dialogueBoxOpacity = 1;
-    @observable private overlayOpacity = 0.4;
-
     render() {
-        return <MainViewModal contents={this.uploadInterface} isDisplayed={true} interactive={true} dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.closeUpload} />;
+        return <MainViewModal contents={this.uploadInterface} isDisplayed interactive dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} closeOnExternalClick={this.closeUpload} />;
     }
 }