simple public document viewer

frontend/src/App.tsx

@@ -8,6 +8,7 @@ import {
     withRouter,
 } from "react-router";
 import { AuthScreen } from "~Auth/AuthScreen";
+import { SharedView } from "~Documents/SharedView";
 import { Home } from "~Home/Home";
 import { Landing } from "~Landing/Landing";
 import { IAppState } from "~redux/reducers";
@@ -23,12 +24,14 @@ export function AppComponent(props: IAppComponentProps) {
             <Route path="/signup" component={AuthScreen} />,
             <Route path="/login" component={AuthScreen} />,
             <Route path="/docs/:id" component={Home} />,
+            <Route path="/shared/:username/:id" component={SharedView} />,
             <Route path="/" component={Home} />,
         </Switch>
     ) : (
         <Switch>
             <Route path="/signup" component={AuthScreen} />
             <Route path="/login" component={AuthScreen} />
+            <Route path="/shared/:username/:id" component={SharedView} />,
             <Route exact={true} path="/" component={Landing} />
             <Route path="/" component={() => <Redirect to="/login" />} />
         </Switch>

frontend/src/Documents/Shared.scss

@@ -0,0 +1,13 @@
+.viewComponent {
+    position: absolute;
+    max-width: 100%;
+    width: 50rem;
+    left: 0;
+    right: 0;
+    top: -$pt-navbar-height;
+    bottom: 0;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 2 * $pt-navbar-height + 20px;
+    max-height: 100%;
+}

frontend/src/Documents/SharedView.tsx

@@ -0,0 +1,95 @@
+import "./Docs.scss";
+
+import { Button, H1 } from "@blueprintjs/core";
+import * as React from "react";
+import Markdown from "react-markdown";
+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 { NotFound } from "~NotFound";
+import { fetchSharedDoc } from "~redux/api/docs";
+import { fetchDocsStart } from "~redux/docs/actions";
+import { IAppState } from "~redux/reducers";
+import { CodeBlock } from "./CodeBlock";
+
+export interface ISharedViewComponentProps extends RouteComponentProps {
+    loggedIn: boolean;
+    username: string | undefined;
+}
+
+export interface ISharedViewComponentState {
+    loaded: boolean;
+    doc: IDocumentJSON | null;
+    error: string | null;
+}
+
+const defaultState: ISharedViewComponentState = {
+    loaded: false,
+    doc: null,
+    error: null,
+};
+
+export class SharedViewComponent extends React.PureComponent<
+    ISharedViewComponentProps,
+    ISharedViewComponentState
+> {
+    constructor(props: ISharedViewComponentProps) {
+        super(props);
+        this.state = defaultState;
+
+        return;
+    }
+
+    public render() {
+        if (this.state.loaded) {
+            if (this.state.error) {
+                return (
+                    <div className="viewComponent">
+                        <div>{this.state.error}</div>
+                    </div>
+                );
+            }
+            const { doc } = this.state;
+            return (
+                <div className="viewComponent">
+                    <div className="document">
+                        <div className="documentHeader">
+                            <H1>{doc.name}</H1>
+                        </div>
+                        <div className="documentContents">
+                            <Markdown
+                                source={doc.content}
+                                renderers={{
+                                    code: CodeBlock,
+                                }}
+                            />
+                        </div>
+                    </div>
+                </div>
+            );
+        } else {
+            return <LoadingStub />;
+        }
+    }
+
+    public async componentDidMount() {
+        const { username, id } = this.props.match.params as any;
+        const res = await fetchSharedDoc(username, id);
+        if (!res.error) {
+            this.setState({ loaded: true, doc: res.data });
+        } else {
+            this.setState({ loaded: true, error: res.error });
+        }
+    }
+}
+
+function mapStateToProps(state: IAppState) {
+    return {
+        loggedIn: state.user.user !== null,
+        username: state.user.user.username,
+    };
+}
+
+export const SharedView = SharedViewComponent;

frontend/src/redux/api/docs/index.ts

@@ -1,7 +1,7 @@
 import { IDocumentJSON } from "~../../src/entity/Document";
 import { IAPIResponse } from "~../../src/types";
 
-import { fetchJSONAuth } from "../utils";
+import { fetchJSONAuth, fetchJSON } from "../utils";
 
 export async function fetchRecentDocs(): Promise<
     IAPIResponse<IDocumentJSON[]>
@@ -19,6 +19,13 @@ export async function fetchDoc(
     return fetchJSONAuth(`/docs/byID/${id}`, "GET");
 }
 
+export async function fetchSharedDoc(
+    username: string,
+    id: number,
+): Promise<IAPIResponse<IDocumentJSON>> {
+    return fetchJSON(`/docs/shared/${username}/${id}`, "GET");
+}
+
 export async function patchDoc(
     id: number,
     name?: string,