From b08e28ac279c0199d7f828d05e6e346865579592 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 21 May 2019 19:44:27 -0400
Subject: Fixed image upload

---
 src/mobile/ImageUpload.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

(limited to 'src/mobile/ImageUpload.tsx')

diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 1f9e160ce..690937339 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -20,12 +20,15 @@ import { List } from '../new_fields/List';
 //     }
 // }
 
-const onFileLoad = async (file: any) => {
+const onFileLoad = async (file: React.ChangeEvent<HTMLInputElement>) => {
+    file.persist();
+    await Docs.initProtos();
     let imgPrev = document.getElementById("img_preview");
     if (imgPrev) {
-        let files: File[] = file.target.files;
-        if (files.length !== 0) {
+        let files: FileList | null = file.target.files;
+        if (files && files.length !== 0) {
             console.log(files[0]);
+            const name = files[0].name;
             let formData = new FormData();
             formData.append("file", files[0]);
 
@@ -37,7 +40,7 @@ const onFileLoad = async (file: any) => {
             const json = await res.json();
             json.map(async (file: any) => {
                 let path = window.location.origin + file;
-                var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200 });
+                var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200, title: name });
 
                 const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId));
                 if (!res) {
-- 
cgit v1.2.3-70-g09d2


From ab001ffd9749814c3f0b0f30e9f86f65e2f8ac0c Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 21 May 2019 20:49:49 -0400
Subject: "Rebased" Stanley's image upload changes

---
 src/client/documents/Documents.ts                  |  3 ++
 src/client/views/Main.scss                         | 15 ++++++
 src/client/views/MainView.tsx                      | 33 ++++++++++---
 .../views/collections/CollectionBaseView.tsx       |  1 +
 .../views/collections/CollectionStackingView.scss  | 44 ++++++++++++++++++
 .../views/collections/CollectionStackingView.tsx   | 54 ++++++++++++++++++++++
 src/client/views/collections/CollectionView.tsx    |  3 ++
 src/mobile/ImageUpload.scss                        | 21 ++++++++-
 src/mobile/ImageUpload.tsx                         |  1 +
 .../authentication/models/current_user_utils.ts    |  2 +-
 10 files changed, 168 insertions(+), 9 deletions(-)
 create mode 100644 src/client/views/collections/CollectionStackingView.scss
 create mode 100644 src/client/views/collections/CollectionStackingView.tsx

(limited to 'src/mobile/ImageUpload.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 3d65826a9..b17544229 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -292,6 +292,9 @@ export namespace Docs {
     export function TreeDocument(documents: Array<Doc>, options: DocumentOptions) {
         return CreateInstance(collProto, new List(documents), { schemaColumns: new List(["title"]), ...options, viewType: CollectionViewType.Tree });
     }
+    export function StackingDocument(documents: Array<Doc>, options: DocumentOptions) {
+        return CreateInstance(collProto, new List(documents), { schemaColumns: new List(["title"]), ...options, viewType: CollectionViewType.Stacking });
+    }
     export function DockDocument(documents: Array<Doc>, config: string, options: DocumentOptions, id?: string) {
         return CreateInstance(collProto, new List(documents), { ...options, viewType: CollectionViewType.Docking, dockingConfig: config }, id);
     }
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index d63b0147b..302c49c10 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -97,6 +97,21 @@ button:hover {
     right: 0px;
 }
 
+.main-notifs-badge {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    color: white;
+    background: #f44b42;
+    font-weight: 300;
+    border-radius: 100%;
+    width: 25px;
+    height: 25px;
+    text-align: center;
+    padding-top: 4px;
+    font-size: 12px;
+}
+
 //toolbar stuff
 #toolbar {
     position: absolute;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index af224747d..1d491d11f 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,5 +1,5 @@
 import { IconName, library } from '@fortawesome/fontawesome-svg-core';
-import { faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup, faPenNib, faRedoAlt, faTable, faTree, faUndoAlt } from '@fortawesome/free-solid-svg-icons';
+import { faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup, faPenNib, faRedoAlt, faTable, faTree, faUndoAlt, faBell } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, configure, observable, runInAction, trace } from 'mobx';
 import { observer } from 'mobx-react';
@@ -25,7 +25,7 @@ import { DocumentView } from './nodes/DocumentView';
 import { PreviewCursor } from './PreviewCursor';
 import { SearchBox } from './SearchBox';
 import { SelectionManager } from '../util/SelectionManager';
-import { FieldResult, Field, Doc, Opt } from '../../new_fields/Doc';
+import { FieldResult, Field, Doc, Opt, DocListCast } from '../../new_fields/Doc';
 import { Cast, FieldValue, StrCast } from '../../new_fields/Types';
 import { DocServer } from '../DocServer';
 import { listSpec } from '../../new_fields/Schema';
@@ -137,12 +137,14 @@ export class MainView extends React.Component {
             // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
             setTimeout(() => {
                 this.openWorkspace(mainDoc);
-                let pendingDocument = Docs.SchemaDocument(["title"], [], { title: "New Mobile Uploads" });
-                mainDoc.optionalRightCollection = pendingDocument;
+                // let pendingDocument = Docs.StackingDocument([], { title: "New Mobile Uploads" });
+                // mainDoc.optionalRightCollection = pendingDocument;
             }, 0);
         }
     }
 
+    @observable _notifsCol: Opt<Doc>;
+
     @action
     openWorkspace = async (doc: Doc, fromHistory = false) => {
         CurrentUserUtils.MainDocId = doc[Id];
@@ -153,12 +155,19 @@ export class MainView extends React.Component {
         setTimeout(async () => {
             if (col) {
                 const l = Cast(col.data, listSpec(Doc));
-                if (l && l.length > 0) {
-                    CollectionDockingView.Instance.AddRightSplit(col);
+                if (l) {
+                    runInAction(() => this._notifsCol = col);
                 }
             }
         }, 100);
     }
+
+    openNotifsCol = () => {
+        if (this._notifsCol) {
+            CollectionDockingView.Instance.AddRightSplit(this._notifsCol);
+        }
+    }
+
     @action
     onResize = (r: any) => {
         this.pwidth = r.offset.width;
@@ -254,11 +263,23 @@ export class MainView extends React.Component {
     /* @TODO this should really be moved into a moveable toolbar component, but for now let's put it here to meet the deadline */
     @computed
     get miscButtons() {
+        const length = this._notifsCol ? DocListCast(this._notifsCol.data).length : 0;
+        const notifsRef = React.createRef<HTMLDivElement>();
+        const dragNotifs = action(() => this._notifsCol!);
         let logoutRef = React.createRef<HTMLDivElement>();
 
         return [
             <button className="clear-db-button" key="clear-db" onClick={e => e.shiftKey && e.altKey && DocServer.DeleteDatabase()}>Clear Database</button>,
             <div id="toolbar" key="toolbar">
+                <div ref={notifsRef}>
+                    <button className="toolbar-button round-button" title="Notifs"
+                        onClick={this.openNotifsCol} onPointerDown={this._notifsCol ? SetupDrag(notifsRef, dragNotifs) : emptyFunction}>
+                        <FontAwesomeIcon icon={faBell} size="sm" />
+                    </button>
+                    <div className="main-notifs-badge" style={length > 0 ? { "display": "initial" } : { "display": "none" }}>
+                        {length}
+                    </div>
+                </div>
                 <button className="toolbar-button round-button" title="Search" onClick={this.toggleSearch}><FontAwesomeIcon icon="search" size="sm" /></button>
                 <button className="toolbar-button round-button" title="Undo" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button>
                 <button className="toolbar-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button>
diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index 5686ccfef..2bccde241 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -16,6 +16,7 @@ export enum CollectionViewType {
     Schema,
     Docking,
     Tree,
+    Stacking
 }
 
 export interface CollectionRenderProps {
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
new file mode 100644
index 000000000..803e680e5
--- /dev/null
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -0,0 +1,44 @@
+@import "../globalCssVariables";
+
+.collectionStackingView {
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    overflow-y: scroll;
+    min-width: 250px;
+    border-width: 0;
+    box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
+    border-color: $light-color-secondary;
+    border-style: solid;
+    border-radius: 0 0 $border-radius $border-radius;
+    box-sizing: border-box;
+
+    .collectionStackingView-docView-container {
+        width: 45%;
+        margin: 5% 2.5%;
+        padding-left: 2.5%;
+        height: auto;
+    }
+
+    .collectionStackingView-flexCont {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    .collectionStackingView-description {
+        font-size: 100%;
+        margin-bottom: 1vw;
+        padding: 10px;
+        height: 2vw;
+        width: 100%;
+        font-family: $sans-serif;
+        background: $dark-color;
+        color: $light-color;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
new file mode 100644
index 000000000..a1cb73123
--- /dev/null
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -0,0 +1,54 @@
+import React = require("react");
+import { observer } from "mobx-react";
+import { CollectionSubView } from "./CollectionSubView";
+import Measure from "react-measure";
+import { Doc, WidthSym, HeightSym } from "../../../new_fields/Doc";
+import { DocumentView } from "../nodes/DocumentView";
+import { Transform } from "../../util/Transform";
+import { emptyFunction, returnOne } from "../../../Utils";
+import "./CollectionStackingView.scss";
+import { runInAction, action, observable, computed } from "mobx";
+import { StrCast } from "../../../new_fields/Types";
+
+@observer
+export class CollectionStackingView extends CollectionSubView(doc => doc) {
+    getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform();
+
+    @action
+    moveDocument = (doc: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean): boolean => {
+        this.props.removeDocument(doc);
+        addDocument(doc);
+        return true;
+    }
+
+    render() {
+        const docs = this.childDocs;
+        return (
+            <div className="collectionStackingView" onWheel={(e: React.WheelEvent) => e.stopPropagation()}>
+                <div className="collectionStackingView-description">{StrCast(this.props.Document.documentText, StrCast(this.props.Document.title, "stacking collection"))}</div>
+                <div className="collectionStackingView-flexCont">
+                    {docs.map(d => {
+                        return (<div className="collectionStackingView-docView-container">
+                            <DocumentView Document={d}
+                                addDocument={this.props.addDocument} removeDocument={this.props.removeDocument}
+                                moveDocument={this.moveDocument}
+                                ContainingCollectionView={this.props.CollectionView}
+                                isTopMost={false}
+                                ScreenToLocalTransform={this.getPreviewTransform}
+                                focus={emptyFunction}
+                                ContentScaling={returnOne}
+                                PanelWidth={d[WidthSym]}
+                                PanelHeight={d[HeightSym]}
+                                selectOnLoad={false}
+                                parentActive={this.props.active}
+                                addDocTab={this.props.addDocTab}
+                                bringToFront={emptyFunction}
+                                toggleMinimized={emptyFunction}
+                                whenActiveChanged={this.props.active} />
+                        </div>);
+                    })}
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index bfdef8e8c..39c8af4ab 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -12,6 +12,7 @@ import { CollectionDockingView } from "./CollectionDockingView";
 import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionTreeView } from "./CollectionTreeView";
 import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
+import { CollectionStackingView } from './CollectionStackingView';
 export const COLLECTION_BORDER_WIDTH = 2;
 
 library.add(faTh);
@@ -31,6 +32,7 @@ export class CollectionView extends React.Component<FieldViewProps> {
             case CollectionViewType.Schema: return (<CollectionSchemaView {...props} CollectionView={this} />);
             case CollectionViewType.Docking: return (<CollectionDockingView {...props} CollectionView={this} />);
             case CollectionViewType.Tree: return (<CollectionTreeView {...props} CollectionView={this} />);
+            case CollectionViewType.Stacking: return (<CollectionStackingView {...props} CollectionView={this} />);
             case CollectionViewType.Freeform:
             default:
                 return (<CollectionFreeFormView {...props} CollectionView={this} />);
@@ -48,6 +50,7 @@ export class CollectionView extends React.Component<FieldViewProps> {
             }
             ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Schema), icon: "th-list" });
             ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Tree), icon: "tree" });
+            ContextMenu.Instance.addItem({ description: "Stacking", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Stacking), icon: "th-list" });
         }
     }
 
diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index d0b7d4e41..65305dd04 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -1,7 +1,13 @@
+@import "../client/views/globalCssVariables.scss";
+
 .imgupload_cont {
-    height: 100vh;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
     width: 100vw;
-    align-content: center;
+    height: 100vh;
+
     .button_file {
         text-align: center;
         height: 50%;
@@ -10,4 +16,15 @@
         color: grey;
         font-size: 3em;
     }
+
+    .upload_label {
+        width: 80vw;
+        height: 40vh;
+        background: $dark-color;
+        font-size: 10vw;
+        font-family: $sans-serif;
+        text-align: center;
+        padding-top: 20vh;
+        color: white;
+    }
 }
\ No newline at end of file
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 690937339..84bbfeb14 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -71,6 +71,7 @@ const onFileLoad = async (file: React.ChangeEvent<HTMLInputElement>) => {
 ReactDOM.render((
     <div className="imgupload_cont">
         {/* <button className = "button_file"  = {onPointerDown}> Open Image </button> */}
+        <label htmlFor="input_image_file" className="upload_label">Upload an Image</label>
         <input type="file" accept="image/*" onChange={onFileLoad} className="input_file" id="input_image_file"></input>
         <img id="img_preview" src=""></img>
         <div id="message" />
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index b947f5e01..e85aa2c74 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -37,7 +37,7 @@ export class CurrentUserUtils {
         doc.title = this.email;
         doc.data = new List<Doc>();
         doc.excludeFromLibrary = true;
-        doc.optionalRightCollection = Docs.SchemaDocument(["title"], [], { title: "Pending documents" });
+        doc.optionalRightCollection = Docs.StackingDocument([], { title: "New mobile uploads" });
         // doc.library = Docs.TreeDocument([doc], { title: `Library: ${CurrentUserUtils.email}` });
         // (doc.library as Doc).excludeFromLibrary = true;
         return doc;
-- 
cgit v1.2.3-70-g09d2


From 422119419afb3dda7c7b9992bdf8a910821c312f Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:08:18 -0400
Subject: Made image upload hopefully work on mobile

---
 src/mobile/ImageUpload.scss | 14 +++++++++-----
 src/mobile/ImageUpload.tsx  | 11 ++++++-----
 2 files changed, 15 insertions(+), 10 deletions(-)

(limited to 'src/mobile/ImageUpload.tsx')

diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index 65305dd04..eea69b81c 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -17,14 +17,18 @@
         font-size: 3em;
     }
 
-    .upload_label {
-        width: 80vw;
-        height: 40vh;
+    .input_file {
+        display: none;
+    }
+
+    .upload_label,
+    .upload_button {
         background: $dark-color;
-        font-size: 10vw;
+        font-size: 500%;
         font-family: $sans-serif;
         text-align: center;
-        padding-top: 20vh;
+        padding: 5vh;
+        margin-bottom: 20px;
         color: white;
     }
 }
\ No newline at end of file
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 84bbfeb14..7776cf5d4 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -19,13 +19,13 @@ import { List } from '../new_fields/List';
 //         imgInput.click();
 //     }
 // }
+const inputRef = React.createRef<HTMLInputElement>();
 
-const onFileLoad = async (file: React.ChangeEvent<HTMLInputElement>) => {
-    file.persist();
+const onClick = async () => {
     await Docs.initProtos();
     let imgPrev = document.getElementById("img_preview");
     if (imgPrev) {
-        let files: FileList | null = file.target.files;
+        let files: FileList | null = inputRef.current!.files;
         if (files && files.length !== 0) {
             console.log(files[0]);
             const name = files[0].name;
@@ -71,8 +71,9 @@ const onFileLoad = async (file: React.ChangeEvent<HTMLInputElement>) => {
 ReactDOM.render((
     <div className="imgupload_cont">
         {/* <button className = "button_file"  = {onPointerDown}> Open Image </button> */}
-        <label htmlFor="input_image_file" className="upload_label">Upload an Image</label>
-        <input type="file" accept="image/*" onChange={onFileLoad} className="input_file" id="input_image_file"></input>
+        <label htmlFor="input_image_file" className="upload_label">Choose an Image</label>
+        <input type="file" accept="image/*" className="input_file" id="input_image_file" ref={inputRef}></input>
+        <button onClick={onClick} className="upload_button">Upload</button>
         <img id="img_preview" src=""></img>
         <div id="message" />
     </div>),
-- 
cgit v1.2.3-70-g09d2


From adbe3e98e67e92d7f4e03e9c0beb54ad7b617fb6 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:16:15 -0400
Subject: More image upload changes

---
 src/mobile/ImageUpload.tsx | 122 +++++++++++++++++++++++++++------------------
 1 file changed, 74 insertions(+), 48 deletions(-)

(limited to 'src/mobile/ImageUpload.tsx')

diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 7776cf5d4..91a8858d8 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -9,6 +9,8 @@ import { Opt, Doc } from '../new_fields/Doc';
 import { Cast } from '../new_fields/Types';
 import { listSpec } from '../new_fields/Schema';
 import { List } from '../new_fields/List';
+import { observer } from 'mobx-react';
+import { observable } from 'mobx';
 
 
 
@@ -21,61 +23,85 @@ import { List } from '../new_fields/List';
 // }
 const inputRef = React.createRef<HTMLInputElement>();
 
-const onClick = async () => {
-    await Docs.initProtos();
-    let imgPrev = document.getElementById("img_preview");
-    if (imgPrev) {
-        let files: FileList | null = inputRef.current!.files;
-        if (files && files.length !== 0) {
-            console.log(files[0]);
-            const name = files[0].name;
-            let formData = new FormData();
-            formData.append("file", files[0]);
+@observer
+class Uploader extends React.Component {
+    @observable
+    error: string = "";
 
-            const upload = window.location.origin + "/upload";
-            const res = await fetch(upload, {
-                method: 'POST',
-                body: formData
-            });
-            const json = await res.json();
-            json.map(async (file: any) => {
-                let path = window.location.origin + file;
-                var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200, title: name });
+    onClick = async () => {
+        try {
+            this.error = "initializing protos";
+            await Docs.initProtos();
+            let imgPrev = document.getElementById("img_preview");
+            if (imgPrev) {
+                let files: FileList | null = inputRef.current!.files;
+                if (files && files.length !== 0) {
+                    console.log(files[0]);
+                    const name = files[0].name;
+                    let formData = new FormData();
+                    formData.append("file", files[0]);
 
-                const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId));
-                if (!res) {
-                    throw new Error("No user id returned");
-                }
-                const field = await DocServer.GetRefField(res);
-                let pending: Opt<Doc>;
-                if (field instanceof Doc) {
-                    pending = await Cast(field.optionalRightCollection, Doc);
-                }
-                if (pending) {
-                    const data = await Cast(pending.data, listSpec(Doc));
-                    if (data) {
-                        data.push(doc);
-                    } else {
-                        pending.data = new List([doc]);
-                    }
-                }
-            });
+                    const upload = window.location.origin + "/upload";
+                    this.error = "uploading image";
+                    const res = await fetch(upload, {
+                        method: 'POST',
+                        body: formData
+                    });
+                    const json = await res.json();
+                    json.map(async (file: any) => {
+                        let path = window.location.origin + file;
+                        var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200, title: name });
+
+                        this.error = "getting user document";
+
+                        const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId));
+                        if (!res) {
+                            throw new Error("No user id returned");
+                        }
+                        const field = await DocServer.GetRefField(res);
+                        let pending: Opt<Doc>;
+                        if (field instanceof Doc) {
+                            pending = await Cast(field.optionalRightCollection, Doc);
+                        }
+                        if (pending) {
+                            this.error = "has pending docs";
+                            const data = await Cast(pending.data, listSpec(Doc));
+                            if (data) {
+                                data.push(doc);
+                            } else {
+                                pending.data = new List([doc]);
+                            }
+                            this.error = "finished";
+                        }
+                    });
 
-            // console.log(window.location.origin + file[0])
+                    // console.log(window.location.origin + file[0])
 
-            //imgPrev.setAttribute("src", window.location.origin + files[0].name)
+                    //imgPrev.setAttribute("src", window.location.origin + files[0].name)
+                }
+            }
+        } catch (error) {
+            this.error = JSON.stringify(error);
         }
     }
-};
+
+    render() {
+        return (
+            <div className="imgupload_cont">
+                <label htmlFor="input_image_file" className="upload_label">Choose an Image</label>
+                <input type="file" accept="image/*" className="input_file" id="input_image_file" ref={inputRef}></input>
+                <button onClick={this.onClick} className="upload_button">Upload</button>
+                <img id="img_preview" src=""></img>
+                <p>{this.error}</p>
+            </div>
+        );
+    }
+
+}
+
 
 ReactDOM.render((
-    <div className="imgupload_cont">
-        {/* <button className = "button_file"  = {onPointerDown}> Open Image </button> */}
-        <label htmlFor="input_image_file" className="upload_label">Choose an Image</label>
-        <input type="file" accept="image/*" className="input_file" id="input_image_file" ref={inputRef}></input>
-        <button onClick={onClick} className="upload_button">Upload</button>
-        <img id="img_preview" src=""></img>
-        <div id="message" />
-    </div>),
+    <Uploader />
+),
     document.getElementById('root')
 );
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 517816327526520b99e439345b48549ebc79db6b Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:24:15 -0400
Subject: More image upload changes

---
 src/mobile/ImageUpload.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

(limited to 'src/mobile/ImageUpload.tsx')

diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 91a8858d8..bfc1738fc 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -27,10 +27,12 @@ const inputRef = React.createRef<HTMLInputElement>();
 class Uploader extends React.Component {
     @observable
     error: string = "";
+    @observable
+    status: string = "";
 
     onClick = async () => {
         try {
-            this.error = "initializing protos";
+            this.status = "initializing protos";
             await Docs.initProtos();
             let imgPrev = document.getElementById("img_preview");
             if (imgPrev) {
@@ -42,17 +44,18 @@ class Uploader extends React.Component {
                     formData.append("file", files[0]);
 
                     const upload = window.location.origin + "/upload";
-                    this.error = "uploading image";
+                    this.status = "uploading image";
                     const res = await fetch(upload, {
                         method: 'POST',
                         body: formData
                     });
+                    this.status = "upload image, getting json";
                     const json = await res.json();
                     json.map(async (file: any) => {
                         let path = window.location.origin + file;
                         var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200, title: name });
 
-                        this.error = "getting user document";
+                        this.status = "getting user document";
 
                         const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId));
                         if (!res) {
@@ -64,14 +67,14 @@ class Uploader extends React.Component {
                             pending = await Cast(field.optionalRightCollection, Doc);
                         }
                         if (pending) {
-                            this.error = "has pending docs";
+                            this.status = "has pending docs";
                             const data = await Cast(pending.data, listSpec(Doc));
                             if (data) {
                                 data.push(doc);
                             } else {
                                 pending.data = new List([doc]);
                             }
-                            this.error = "finished";
+                            this.status = "finished";
                         }
                     });
 
@@ -92,6 +95,7 @@ class Uploader extends React.Component {
                 <input type="file" accept="image/*" className="input_file" id="input_image_file" ref={inputRef}></input>
                 <button onClick={this.onClick} className="upload_button">Upload</button>
                 <img id="img_preview" src=""></img>
+                <p>{this.status}</p>
                 <p>{this.error}</p>
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From b286d5a80b0c4cf56aa8ab1e6940bf711402ed59 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:27:59 -0400
Subject: More image upload changes

---
 src/mobile/ImageUpload.tsx | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/mobile/ImageUpload.tsx')

diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index bfc1738fc..6ca3a6f23 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -50,6 +50,8 @@ class Uploader extends React.Component {
                         body: formData
                     });
                     this.status = "upload image, getting json";
+                    this.status = await res.text();
+                    return;
                     const json = await res.json();
                     json.map(async (file: any) => {
                         let path = window.location.origin + file;
-- 
cgit v1.2.3-70-g09d2


From a2faa344dc76407e8120ffb83d7431b851d01cb8 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:34:46 -0400
Subject: final image upload change?

---
 src/mobile/ImageUpload.tsx | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src/mobile/ImageUpload.tsx')

diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 6ca3a6f23..bfc1738fc 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -50,8 +50,6 @@ class Uploader extends React.Component {
                         body: formData
                     });
                     this.status = "upload image, getting json";
-                    this.status = await res.text();
-                    return;
                     const json = await res.json();
                     json.map(async (file: any) => {
                         let path = window.location.origin + file;
-- 
cgit v1.2.3-70-g09d2

