1 files changed, 30 insertions, 34 deletions

diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx
index 249461b67..ab8878fc1 100644
--- a/src/client/views/nodes/LoadingBox.tsx
+++ b/src/client/views/nodes/LoadingBox.tsx
@@ -5,46 +5,42 @@ import * as React from 'react';
 import './LoadingBox.scss';
 import ReactLoading from 'react-loading';
 import { StrCast } from '../../../fields/Types';
-import { computed, observable } from 'mobx';
+import { computed } from 'mobx';
 import { Docs } from '../../documents/Documents';
 
+/**
+ * LoadingBox Class represents a placeholder doc for documents that are currently
+ * being uploaded to the server and being fetched by the client. The LoadingBox doc is then used to
+ * generate the actual type of doc that is required once the document has been successfully uploaded.
+ *
+ * Design considerations:
+ * We are using the docToFiles map in Documents to keep track of all files being uploaded in one session of the client.
+ * If the file is not found we assume an error has occurred with the file upload, e.g. it has been interrupted by a client refresh
+ * or network issues. The docToFiles essentially gets reset everytime the page is refreshed.
+ *
+ * TODOs:
+ *  1) ability to query server to retrieve files that already exist if users upload duplicate files.
+ *  2) ability to restart upload if there is an error
+ *  3) detect network error and notify the user
+ *  4 )if file upload gets interrupted, it still gets uploaded to the server if there are no network interruptions which leads to unused space. this could be
+ *      handled with (1)
+ *
+ * @author naafiyan
+ */
 @observer
 export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(LoadingBox, fieldKey);
     }
 
-    @computed
-    private get isLoading() {
-        const file = Docs.Create.filesToDocs.get(this.rootDoc);
+    /**
+     * Returns true if file is uploading, false otherwise
+     */
+    @computed private get isLoading(): boolean {
+        const file = Docs.Create.docsToFiles.get(this.rootDoc);
         return file ? true : false;
     }
 
-    componentDidMount() {
-        console.log(this.rootDoc);
-        // const file = Docs.Create.filesToDocs.get(this.rootDoc);
-        // if (file) {
-        //     console.log('Got to file');
-        //     Docs.Create.filesToDocs.delete(this.rootDoc);
-        //     // now that there is a doc do whatever slowload was going to do with that file
-        //     if (typeof file === 'string') {
-        //         // uploadYoutubeVideo and similar should return a placeholder, one for each placeholder
-        //         // (await DocUtils.uploadYoutubeVideo(files, options)));
-        //     } else {
-        //         // uploadFilesToDocs and similar should return a placeholder, one for each placeholder
-        //         DocUtils.uploadFileToDoc(file, {}, this.rootDoc);
-        //     }
-        // } else {
-        //     // check if file now exists on server or not
-        //     // if it does we need to retreieve it and create the appropriate doc (rest of what uploadFileToDoc was doing minus uploading)
-        //     // if it doesn't display an error message "upload failed"
-        // }
-        // query endpoints to:
-        // check if file now exists on server or not
-        // if it does we need to retreieve it and create the appropriate doc (rest of what uploadFileToDoc was doing minus uploading)
-        // if it doesn't display an error message "upload failed"
-    }
-
     constructor(props: any) {
         super(props);
     }
@@ -53,15 +49,15 @@ export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return (
             <div className="loadingBoxContainer">
                 {this.isLoading ? (
-                    <div>
-                        <p className="text">Loading:</p>
-                        <br></br>
+                    <div className="textContainer">
+                        <p className="headerText">Loading:</p>
                         <span className="text">{StrCast(this.rootDoc.title)}</span>
                         <ReactLoading type={'spinningBubbles'} color={'blue'} height={100} width={100} />
                     </div>
                 ) : (
-                    <div>
-                        <span>Error Loading File: {StrCast(this.rootDoc.title)}</span>
+                    <div className="textContainer">
+                        <p className="headerText">Error Loading File: </p>
+                        <span className="text">{StrCast(this.rootDoc.title)}</span>
                     </div>
                 )}
             </div>