Merge remote-tracking branch 'origin/naafi-document-loading-placeholder'

1 files changed, 68 insertions, 0 deletions

diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx
new file mode 100644
index 000000000..90bf90095
--- /dev/null
+++ b/src/client/views/nodes/LoadingBox.tsx
@@ -0,0 +1,68 @@
+import { observer } from 'mobx-react';
+import { ViewBoxAnnotatableComponent } from '../DocComponent';
+import { FieldView, FieldViewProps } from './FieldView';
+import * as React from 'react';
+import './LoadingBox.scss';
+import ReactLoading from 'react-loading';
+import { StrCast } from '../../../fields/Types';
+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)
+ *  5) Fixing the stacking view bug
+ *  6) Fixing the CSS
+ *
+ * @author naafiyan
+ */
+@observer
+export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(LoadingBox, fieldKey);
+    }
+
+    /**
+     * 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;
+    }
+
+    constructor(props: any) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className="loadingBoxContainer">
+                {this.isLoading ? (
+                    <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 className="textContainer">
+                        <p className="headerText">Error Loading File: </p>
+                        <span className="text">{StrCast(this.rootDoc.title)}</span>
+                    </div>
+                )}
+            </div>
+        );
+    }
+}