Refactored some things to get Debug viewer working again

1 files changed, 183 insertions, 181 deletions

diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx
index 4cac09dee..d9b07aac6 100644
--- a/src/debug/Viewer.tsx
+++ b/src/debug/Viewer.tsx
@@ -3,184 +3,186 @@ import "normalize.css";
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { observer } from 'mobx-react';
-
-// configure({
-//     enforceActions: "observed"
-// });
-
-// @observer
-// class FieldViewer extends React.Component<{ field: BasicField<any> }> {
-//     render() {
-//         return <span>{JSON.stringify(this.props.field.Data)} ({this.props.field.Id})</span>;
-//     }
-// }
-
-// @observer
-// class KeyViewer extends React.Component<{ field: Key }> {
-//     render() {
-//         return this.props.field.Name;
-//     }
-// }
-
-// @observer
-// class ListViewer extends React.Component<{ field: ListField<Field> }>{
-//     @observable
-//     expanded = false;
-
-//     render() {
-//         let content;
-//         if (this.expanded) {
-//             content = (
-//                 <div>
-//                     {this.props.field.Data.map(field => <DebugViewer fieldId={field.Id} key={field.Id} />)}
-//                 </div>
-//             );
-//         } else {
-//             content = <>[...] ({this.props.field.Id})</>;
-//         }
-//         return (
-//             <div>
-//                 <button onClick={action(() => this.expanded = !this.expanded)}>Toggle</button>
-//                 {content}
-//             </div >
-//         );
-//     }
-// }
-
-// @observer
-// class DocumentViewer extends React.Component<{ field: Document }> {
-//     private keyMap: ObservableMap<string, Key> = new ObservableMap;
-
-//     private disposer?: Lambda;
-
-//     componentDidMount() {
-//         let f = () => {
-//             Array.from(this.props.field._proxies.keys()).forEach(id => {
-//                 if (!this.keyMap.has(id)) {
-//                     Server.GetField(id, (field) => {
-//                         if (field && field instanceof Key) {
-//                             this.keyMap.set(id, field);
-//                         }
-//                     });
-//                 }
-//             });
-//         };
-//         this.disposer = this.props.field._proxies.observe(f);
-//         f();
-//     }
-
-//     componentWillUnmount() {
-//         if (this.disposer) {
-//             this.disposer();
-//         }
-//     }
-
-//     render() {
-//         let fields = Array.from(this.props.field._proxies.entries()).map(kv => {
-//             let key = this.keyMap.get(kv[0]);
-//             return (
-//                 <div key={kv[0]}>
-//                     <b>({key ? key.Name : kv[0]}): </b>
-//                     <DebugViewer fieldId={kv[1]}></DebugViewer>
-//                 </div>
-//             );
-//         });
-//         return (
-//             <div>
-//                 Document ({this.props.field.Id})
-//                 <div style={{ paddingLeft: "25px" }}>
-//                     {fields}
-//                 </div>
-//             </div>
-//         );
-//     }
-// }
-
-// @observer
-// class DebugViewer extends React.Component<{ fieldId: string }> {
-//     @observable
-//     private field?: Field;
-
-//     @observable
-//     private error?: string;
-
-//     constructor(props: { fieldId: string }) {
-//         super(props);
-//         this.update();
-//     }
-
-//     update() {
-//         Server.GetField(this.props.fieldId, action((field: Opt<Field>) => {
-//             this.field = field;
-//             if (!field) {
-//                 this.error = `Field with id ${this.props.fieldId} not found`;
-//             }
-//         }));
-
-//     }
-
-//     render() {
-//         let content;
-//         if (this.field) {
-//             // content = this.field.ToJson();
-//             if (this.field instanceof ListField) {
-//                 content = (<ListViewer field={this.field} />);
-//             } else if (this.field instanceof Document) {
-//                 content = (<DocumentViewer field={this.field} />);
-//             } else if (this.field instanceof BasicField) {
-//                 content = (<FieldViewer field={this.field} />);
-//             } else if (this.field instanceof Key) {
-//                 content = (<KeyViewer field={this.field} />);
-//             } else {
-//                 content = (<span>Unrecognized field type</span>);
-//             }
-//         } else if (this.error) {
-//             content = <span>Field <b>{this.props.fieldId}</b> not found <button onClick={() => this.update()}>Refresh</button></span>;
-//         } else {
-//             content = <span>Field loading: {this.props.fieldId}</span>;
-//         }
-//         return content;
-//     }
-// }
-
-// @observer
-// class Viewer extends React.Component {
-//     @observable
-//     private idToAdd: string = '';
-
-//     @observable
-//     private ids: string[] = [];
-
-//     @action
-//     inputOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-//         this.idToAdd = e.target.value;
-//     }
-
-//     @action
-//     onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
-//         if (e.key === "Enter") {
-//             this.ids.push(this.idToAdd);
-//             this.idToAdd = "";
-//         }
-//     }
-
-//     render() {
-//         return (
-//             <>
-//                 <input value={this.idToAdd}
-//                     onChange={this.inputOnChange}
-//                     onKeyDown={this.onKeyPress} />
-//                 <div>
-//                     {this.ids.map(id => <DebugViewer fieldId={id} key={id}></DebugViewer>)}
-//                 </div>
-//             </>
-//         );
-//     }
-// }
-
-// ReactDOM.render((
-//     <div style={{ position: "absolute", width: "100%", height: "100%" }}>
-//         <Viewer />
-//     </div>),
-//     document.getElementById('root')
-// );
\ No newline at end of file
+import { CurrentUserUtils } from '../server/authentication/models/current_user_utils';
+import { RouteStore } from '../server/RouteStore';
+import { emptyFunction } from '../Utils';
+import { Docs } from '../client/documents/Documents';
+import { SetupDrag } from '../client/util/DragManager';
+import { Transform } from '../client/util/Transform';
+import { UndoManager } from '../client/util/UndoManager';
+import { PresentationView } from '../client/views/PresentationView';
+import { CollectionDockingView } from '../client/views/collections/CollectionDockingView';
+import { ContextMenu } from '../client/views/ContextMenu';
+import { DocumentDecorations } from '../client/views/DocumentDecorations';
+import { InkingControl } from '../client/views/InkingControl';
+import { MainOverlayTextBox } from '../client/views/MainOverlayTextBox';
+import { DocumentView } from '../client/views/nodes/DocumentView';
+import { PreviewCursor } from '../client/views/PreviewCursor';
+import { SearchBox } from '../client/views/SearchBox';
+import { SelectionManager } from '../client/util/SelectionManager';
+import { Doc, Field, FieldResult } from '../new_fields/Doc';
+import { Cast } from '../new_fields/Types';
+import { DocServer } from '../client/DocServer';
+import { listSpec } from '../new_fields/Schema';
+import { Id } from '../new_fields/RefField';
+import { HistoryUtil } from '../client/util/History';
+import { List } from '../new_fields/List';
+import { URLField } from '../new_fields/URLField';
+
+CurrentUserUtils;
+RouteStore;
+emptyFunction;
+Docs;
+SetupDrag;
+Transform;
+UndoManager;
+PresentationView;
+CollectionDockingView;
+ContextMenu;
+DocumentDecorations;
+InkingControl;
+MainOverlayTextBox;
+DocumentView;
+PreviewCursor;
+SearchBox;
+SelectionManager;
+Doc;
+Cast;
+DocServer;
+listSpec;
+Id;
+HistoryUtil;
+
+configure({
+    enforceActions: "observed"
+});
+
+@observer
+class ListViewer extends React.Component<{ field: List<Field> }>{
+    @observable
+    expanded = false;
+
+    render() {
+        let content;
+        if (this.expanded) {
+            content = (
+                <div>
+                    {this.props.field.map((field, index) => <DebugViewer field={field} key={index} />)}
+                </div>
+            );
+        } else {
+            content = <>[...]</>;
+        }
+        return (
+            <div>
+                <button onClick={action(() => this.expanded = !this.expanded)}>Toggle</button>
+                {content}
+            </div >
+        );
+    }
+}
+
+@observer
+class DocumentViewer extends React.Component<{ field: Doc }> {
+    @observable
+    expanded = false;
+    render() {
+        let content;
+        if (this.expanded) {
+            const keys = Object.keys(this.props.field);
+            let fields = keys.map(key => {
+                return (
+                    <div key={key}>
+                        <b>({key}): </b>
+                        <DebugViewer field={this.props.field[key]}></DebugViewer>
+                    </div>
+                );
+            });
+            content = (
+                <div>
+                    Document ({this.props.field[Id]})
+                <div style={{ paddingLeft: "25px" }}>
+                        {fields}
+                    </div>
+                </div>
+            );
+        } else {
+            content = <>[...] ({this.props.field[Id]})</>;
+        }
+        return (
+            <div>
+                <button onClick={action(() => this.expanded = !this.expanded)}>Toggle</button>
+                {content}
+            </div >
+        );
+    }
+}
+
+@observer
+class DebugViewer extends React.Component<{ field: FieldResult }> {
+
+    render() {
+        let content;
+        const field = this.props.field;
+        if (field instanceof List) {
+            content = (<ListViewer field={field} />);
+        } else if (field instanceof Doc) {
+            content = (<DocumentViewer field={field} />);
+        } else if (typeof field === "string") {
+            content = <p>"{field}"</p>;
+        } else if (typeof field === "number" || typeof field === "boolean") {
+            content = <p>{field}</p>;
+        } else if (field instanceof URLField) {
+            content = <p>{field.url.href}</p>;
+        } else {
+            content = <p>Unrecognized field type</p>;
+        }
+        return content;
+    }
+}
+
+@observer
+class Viewer extends React.Component {
+    @observable
+    private idToAdd: string = '';
+
+    @observable
+    private fields: Field[] = [];
+
+    @action
+    inputOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.idToAdd = e.target.value;
+    }
+
+    @action
+    onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === "Enter") {
+            DocServer.GetRefField(this.idToAdd).then(action((field: any) => {
+                if (field !== undefined) {
+                    this.fields.push(field);
+                }
+            }));
+            this.idToAdd = "";
+        }
+    }
+
+    render() {
+        return (
+            <>
+                <input value={this.idToAdd}
+                    onChange={this.inputOnChange}
+                    onKeyDown={this.onKeyPress} />
+                <div>
+                    {this.fields.map((field, index) => <DebugViewer field={field} key={index}></DebugViewer>)}
+                </div>
+            </>
+        );
+    }
+}
+
+ReactDOM.render((
+    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+        <Viewer />
+    </div>),
+    document.getElementById('root')
+);
\ No newline at end of file