From 520200a2a63a4189d5c6cac2b2ff48f009bb6f72 Mon Sep 17 00:00:00 2001
From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com>
Date: Tue, 9 Jun 2020 00:21:50 -0700
Subject: cleaned code

---
 src/mobile/MobileInterface.tsx | 190 +++++++++++++----------------------------
 1 file changed, 61 insertions(+), 129 deletions(-)

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

diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index c51b5b654..e9d35096d 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -952,6 +952,7 @@ export class MobileInterface extends React.Component {
     @observable private renderView?: () => JSX.Element;
     @observable private audioState: any;
     @observable private activeToolbar: boolean = false;
+    @observable private sidebarActive: boolean = false;
 
     public _activeDoc: Doc = this.mainDoc;
     public _homeDoc: Doc = this.mainDoc;
@@ -986,8 +987,6 @@ export class MobileInterface extends React.Component {
         InkingControl.Instance.switchTool(InkTool.None);
         MobileInterface.Instance.drawingInk = false;
         InkingControl.Instance.updateSelectedColor("#FF0000");
-        console.log(this.userDoc.inkColor);
-        console.log(InkingControl.Instance.selectedColor);
         InkingControl.Instance.switchWidth("2");
         this.switchCurrentView((userDoc: Doc) => this._homeDoc);
     }
@@ -1027,34 +1026,37 @@ export class MobileInterface extends React.Component {
         });
     }
 
-    toggleSidebar = () => {
-        if (this._open === false) {
-            this._open = true;
-        } else {
-            this._open = false;
-        }
-        console.log("clicked");
-        let menuButton = document.getElementById("menuButton") as HTMLElement;
-        menuButton.classList.toggle('active');
+    @action
+    toggleSidebar = () => this.sidebarActive = !this.sidebarActive
 
-        let sidebar = document.getElementById("sidebar") as HTMLElement;
-        sidebar.classList.toggle('active');
+    // toggleSidebar = () => {
+    //     if (this._open === false) {
+    //         this._open = true;
+    //     } else {
+    //         this._open = false;
+    //     }
+    //     console.log("clicked");
+    //     let menuButton = document.getElementById("menuButton") as HTMLElement;
+    //     //menuButton.classList.toggle('active');
 
-        let header = document.getElementById("header") as HTMLElement;
+    //     let sidebar = document.getElementById("sidebar") as HTMLElement;
+    //     //sidebar.classList.toggle('active');
 
-        if (!sidebar.classList.contains('active')) {
-            header.textContent = String(this._activeDoc.title);
-        } else {
-            header.textContent = "library";
-        }
-    }
+    //     let header = document.getElementById("header") as HTMLElement;
+
+    //     if (!sidebar.classList.contains('active')) {
+    //         header.textContent = String(this._activeDoc.title);
+    //     } else {
+    //         header.textContent = "library";
+    //     }
+    // }
 
     switchToLibrary = () => {
         this._parents.push(this._activeDoc);
         this.switchCurrentView((userDoc: Doc) => this._library);
         this._activeDoc = this._library;
         this._homeMenu = false;
-        this.toggleSidebar();
+        this.sidebarActive = true;
     }
 
     back = () => {
@@ -1084,14 +1086,14 @@ export class MobileInterface extends React.Component {
     }
 
     returnHome = () => {
-        if (this._homeMenu === false || this._open === true) {
+        if (this._homeMenu === false || this.sidebarActive === true) {
             this._homeMenu = true;
             this._parents = [];
             this._activeDoc = this._homeDoc;
             this._child = null;
             this.switchCurrentView((userDoc: Doc) => this._homeDoc);
         }
-        if (this._open) {
+        if (this.sidebarActive) {
             this.toggleSidebar();
         }
     }
@@ -1207,32 +1209,9 @@ export class MobileInterface extends React.Component {
         // let titleArray = [];
         let docArray = [];
         this._parents.map((doc: Doc, index: any) => {
-            // if (doc === this.mainDoc) {
-            //     pathname = pathname;
-            // } else if (doc.type === "audio" || doc.type === "presentation") {
-            //     pathname = pathname;
-            // } else if (doc.type !== "collection") {
-            //     pathname = pathname;
-            // } else {
-            //     pathname = pathname + " > " + doc.title;
-            //     titleArray.push(doc.title);
-            //     docArray.push(doc);
-            // }
             docArray.push(doc);
         });
         docArray.push(this._activeDoc);
-        // if (this._activeDoc.title === "mobile audio") {
-        //     pathname = this._activeDoc.title;
-        // } else if (this._activeDoc.title === "Presentation") {
-        //     pathname = this._activeDoc.title;
-        // } else if (this._activeDoc === this.mainDoc) {
-        //     pathname = pathname;
-        // } else {
-        //     pathname = pathname + " > " + this._activeDoc.title;
-        //     docArray.push(this._activeDoc);
-        //     titleArray.push(this._activeDoc.title);
-        // }
-
         return docArray;
     }
 
@@ -1320,7 +1299,6 @@ export class MobileInterface extends React.Component {
         } else if (doc === this._homeDoc) {
             this.returnHome();
         } else {
-            console.log(index);
             this._activeDoc = doc;
             this._child = doc;
             this.switchCurrentView((userDoc: Doc) => doc);
@@ -1335,7 +1313,7 @@ export class MobileInterface extends React.Component {
                     <div
                         className="item"
                         key={index}
-                        onClick={() => doc.proto?.onClick}>{doc.title}
+                        onClick={() => doc.onClick}>{doc.title}
                     </div>);
             }
         });
@@ -1346,6 +1324,7 @@ export class MobileInterface extends React.Component {
                     <div className="navbar">
                         <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
                         <div className="header" id="header">{this._homeDoc.title}</div>
+                        <div className="cover" id="cover" onClick={(e) => this.stop(e)}></div>
                         <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
                             <span></span>
                             <span></span>
@@ -1361,7 +1340,12 @@ export class MobileInterface extends React.Component {
                 </div>
             );
         }
-        const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+
+        let workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+        if (this._child) {
+            workspaces = this._child
+        }
+
         let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => {
             if (doc.type !== "ink") {
                 return (
@@ -1375,88 +1359,39 @@ export class MobileInterface extends React.Component {
             }
         });
 
-        if (this._child) {
-            buttons = DocListCast(this._child.data).map((doc: Doc, index: any) => {
-                if (doc.type !== "ink") {
-                    return (
-                        <div
-                            className="item"
-                            key={index}
-                            onClick={() => this.handleClick(doc)}>{doc.title}
-                            <div className="type">{doc.type}</div>
-                            <FontAwesomeIcon className="right" icon="angle-right" size="lg" />
-                        </div>);
-                }
-            });
-        }
-
-        if (!this._child) {
-            return (
-                <div>
-                    <div className="navbar">
-                        <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
-                        <div className="header" id="header">{this._homeDoc.title}</div>
-                        <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                        </div>
-                    </div>
-                    {this.renderPathbar()}
-                    <div className="sidebar" id="sidebar">
-                        <div className="sidebarButtons">
-                            {buttons}
-                            {/* <div className="item" key="library" onClick={this.openLibrary}>
-                                Library
-                            </div> */}
-                            {/* <Uploader Document={workspaces} />
-                            <div className="item" key="audio" onClick={this.recordAudio}>
-                                Record Audio
-                            </div>
-                            <div className="item" key="presentation" onClick={this.openDefaultPresentation}>
-                                Presentation
-                            </div> */}
-                            {/* <div className="item" key="settings" onClick={() => SettingsManager.Instance.open()}>
-                                Settings
-                            </div> */}
-                            <div className="item" key="ink" id="ink" onClick={() => this.onSwitchInking()}>
-                                Ink On
-                            </div>
-                        </div>
+        return (
+            <div>
+                <div className="navbar">
+                    <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
+                    <div className="header" id="header">{this.sidebarActive ? "library" : this._activeDoc.title}</div>
+                    <div className={`toggle-btn ${this.sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}>
+                        <span></span>
+                        <span></span>
+                        <span></span>
                     </div>
-                    {/* <div>
-                        {this.renderView}
-                    </div> */}
                 </div>
-            );
-        }
-        else {
-            return (
-                <div>
-                    <div className="navbar">
-                        <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
-                        <div className="header" id="header">library</div>
-                        <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                        </div>
-                    </div>
-                    {this.renderPathbar()}
-                    <div className="sidebar" id="sidebar">
-                        <div className="sidebarButtons">
-                            {buttons}
-                            <div className="item" key="ink" id="ink" onClick={() => this.onSwitchInking()}>
-                                Ink On
-                            </div>
-                            <div className="item" key="home" onClick={this.returnMain}>
-                                Home
+                {this.renderPathbar()}
+                <div className={`sidebar ${this.sidebarActive ? "active" : ""}`}>
+                    <div className="sidebarButtons">
+                        {this._child ?
+                            <>
+                                {buttons}
+                                <div className="item" key="home" onClick={this.returnMain}>
+                                    Return to library
                             </div>
-                        </div>
+                            </> :
+                            <>
+                                {buttons}
+                            </>
+                        }
                     </div>
                 </div>
-            );
-        }
+            </div>
+        );
+    }
+
+    stop = (e: React.MouseEvent) => {
+        e.stopPropagation();
     }
 
     uploadAudioButton = () => {
@@ -1556,9 +1491,7 @@ export class MobileInterface extends React.Component {
             this._parents.push(this._activeDoc);
         }
         const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc;
-        console.log(audioDoc);
         if (audioDoc) {
-            console.log("audioClicked: " + audioDoc.title);
             this._activeDoc = audioDoc;
             this.switchCurrentView((userDoc: Doc) => audioDoc);
             this._homeMenu = false;
@@ -1579,7 +1512,6 @@ export class MobileInterface extends React.Component {
         const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
         const audioDoc = this._activeDoc;
         const data = Cast(audioRightSidebar.data, listSpec(Doc));
-        console.log(audioDoc.proto);
         if (data) {
             data.push(audioDoc);
         }
-- 
cgit v1.2.3-70-g09d2

