DocumentEdit page

frontend/src/Documents/Docs.scss

@@ -37,6 +37,36 @@
     }
 }
 
+.document {
+    height: 100%;
+    margin-bottom: 0;
+    .documentHeader {
+        display: flex;
+        align-content: baseline;
+        h1 {
+            margin-left: 0;
+            margin-right: auto;
+        }
+        button {
+            width: 1rem;
+            height: 1rem;
+            margin-left: auto;
+            margin-right: 0;
+        }
+    }
+    textarea {
+        overflow: auto;
+        margin: 0;
+        margin-bottom: 0;
+        min-height: 100%;
+        min-width: 100%;
+        resize: none;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+}
+
 .bp3-dark {
     #overview {
         .separator {

frontend/src/Documents/DocumentEdit.tsx

@@ -0,0 +1,70 @@
+import "./Docs.scss";
+
+import { Button, H1, TextArea } from "@blueprintjs/core";
+import * as React from "react";
+import { connect } from "react-redux";
+import { RouteComponentProps, withRouter } from "react-router";
+import { Dispatch } from "redux";
+import { IDocumentJSON } from "~../../src/entity/Document";
+import { LoadingStub } from "~LoadingStub";
+import { fetchDocsStart } from "~redux/docs/actions";
+import { IAppState } from "~redux/reducers";
+
+export interface IDocumentEditComponentProps extends RouteComponentProps {
+    allDocs: IDocumentJSON[];
+
+    fetching: boolean;
+    spinner: boolean;
+    fetchDocs: () => void;
+}
+
+export class DocumentEditComponent extends React.PureComponent<
+    IDocumentEditComponentProps,
+    null
+> {
+    public render() {
+        const { id } = this.props.match.params as any;
+        if (this.props.allDocs && this.props.allDocs[id]) {
+            const doc = this.props.allDocs[id];
+            return (
+                <div className="document">
+                    <div className="documentHeader">
+                        <H1 contentEditable={true}>{doc.name}</H1>
+                        <Button
+                            icon="tick"
+                            minimal={true}
+                            onClick={() =>
+                                this.props.history.push(`/docs/${id}`)
+                            }
+                        />
+                    </div>
+                    <TextArea>{doc.content}</TextArea>
+                </div>
+            );
+        } else {
+            this.props.fetchDocs();
+            return this.props.spinner && <LoadingStub />;
+        }
+    }
+}
+
+function mapStateToProps(state: IAppState) {
+    return {
+        allDocs: state.docs.all,
+        fetching: state.docs.fetching,
+        spinner: state.docs.spinner,
+    };
+}
+
+function mapDispatchToProps(dispatch: Dispatch) {
+    return {
+        fetchDocs: () => dispatch(fetchDocsStart()),
+    };
+}
+
+export const DocumentEdit = withRouter(
+    connect(
+        mapStateToProps,
+        mapDispatchToProps,
+    )(DocumentEditComponent),
+);

frontend/src/Documents/DocumentView.tsx

@@ -0,0 +1,70 @@
+import "./Docs.scss";
+
+import { Button, H1, Text } from "@blueprintjs/core";
+import * as React from "react";
+import { connect } from "react-redux";
+import { RouteComponentProps, withRouter } from "react-router";
+import { Dispatch } from "redux";
+import { IDocumentJSON } from "~../../src/entity/Document";
+import { LoadingStub } from "~LoadingStub";
+import { fetchDocsStart } from "~redux/docs/actions";
+import { IAppState } from "~redux/reducers";
+
+export interface IDocumentViewComponentProps extends RouteComponentProps {
+    allDocs: IDocumentJSON[];
+
+    fetching: boolean;
+    spinner: boolean;
+    fetchDocs: () => void;
+}
+
+export class DocumentViewComponent extends React.PureComponent<
+    IDocumentViewComponentProps,
+    null
+> {
+    public render() {
+        const { id } = this.props.match.params as any;
+        if (this.props.allDocs && this.props.allDocs[id]) {
+            const doc = this.props.allDocs[id];
+            return (
+                <div className="document">
+                    <div className="documentHeader">
+                        <H1>{doc.name}</H1>
+                        <Button
+                            icon="edit"
+                            minimal={true}
+                            onClick={() =>
+                                this.props.history.push(`/docs/${id}/edit`)
+                            }
+                        />
+                    </div>
+                    <Text>{doc.content}</Text>
+                </div>
+            );
+        } else {
+            this.props.fetchDocs();
+            return this.props.spinner && <LoadingStub />;
+        }
+    }
+}
+
+function mapStateToProps(state: IAppState) {
+    return {
+        allDocs: state.docs.all,
+        fetching: state.docs.fetching,
+        spinner: state.docs.spinner,
+    };
+}
+
+function mapDispatchToProps(dispatch: Dispatch) {
+    return {
+        fetchDocs: () => dispatch(fetchDocsStart()),
+    };
+}
+
+export const DocumentView = withRouter(
+    connect(
+        mapStateToProps,
+        mapDispatchToProps,
+    )(DocumentViewComponent),
+);

frontend/src/Documents/EditDoc.tsx

@@ -1,26 +0,0 @@
-import * as React from "react";
-import { connect } from "react-redux";
-import { RouteComponentProps, withRouter } from "react-router";
-import { IDocumentJSON } from "~../../src/entity/Document";
-import { IAppState } from "~redux/reducers";
-
-export interface IEditDocComponent extends RouteComponentProps {
-    allDocs: IDocumentJSON[];
-    doc: number;
-}
-
-export function EditDocComponent(props: IEditDocComponent) {
-    if (props.allDocs) {
-        const { id } = props.match.params as any;
-        const doc = props.allDocs[id];
-        return <div>{doc.name}</div>;
-    } else {
-        return <div />;
-    }
-}
-
-function mapStateToProps(state: IAppState) {
-    return { allDocs: state.docs.all };
-}
-
-export const EditDoc = withRouter(connect(mapStateToProps)(EditDocComponent));

frontend/src/Home/Home.scss

@@ -1,17 +1,15 @@
 @import "~@blueprintjs/core/lib/scss/variables";
-#MainScreen {
-    margin-top: $pt-navbar-height;
-}
-
 .viewComponent {
     position: absolute;
     max-width: 100%;
     width: 50rem;
     left: 0;
     right: 0;
+    top: -$pt-navbar-height;
+    bottom: 0;
     margin-left: auto;
     margin-right: auto;
-    margin-top: 3rem;
+    padding-top: 2*$pt-navbar-height + 20px;
     max-height: 100%;
 }
 

frontend/src/Home/Home.tsx

@@ -17,7 +17,8 @@ import { Transition } from "react-spring/renderprops";
 import { Dispatch } from "redux";
 import { IDocumentJSON } from "~../../src/entity/Document";
 import { IUserJSON } from "~../../src/entity/User";
-import { EditDoc } from "~Documents/EditDoc";
+import { DocumentEdit } from "~Documents/DocumentEdit";
+import { DocumentView } from "~Documents/DocumentView";
 import { Overview } from "~Documents/Overview";
 import { toggleDarkMode } from "~redux/localSettings/actions";
 import { IAppState } from "~redux/reducers";
@@ -60,7 +61,10 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
 
         return (
             this.props.user && (
-                <div id="mainContainer" className={this.props.darkMode && Classes.DARK}>
+                <div
+                    id="mainContainer"
+                    className={this.props.darkMode && Classes.DARK}
+                >
                     <Navbar fixedToTop={true}>
                         <Navbar.Group align={Alignment.LEFT}>
                             <Navbar.Heading>Writer</Navbar.Heading>
@@ -125,9 +129,13 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
                             {(_location: any) => (style: any) => (
                                 <div style={style} className="viewComponent">
                                     <Switch location={_location}>
+                                        <Route
+                                            path="/docs/:id/edit"
+                                            component={DocumentEdit}
+                                        />
                                         <Route
                                             path="/docs/:id"
-                                            component={EditDoc}
+                                            component={DocumentView}
                                         />
                                         <Route path="/" component={Overview} />
                                     </Switch>