breadcrumbs for docs

.gitignore

@@ -8,3 +8,4 @@ ormconfig.json
 ormconfig.test.json
 .env
 .directory
+.history

frontend/.gitignore

@@ -9,3 +9,4 @@ ormconfig.test.json
 .env
 .cache
 .directory
+.history

frontend/src/App.tsx

@@ -28,7 +28,7 @@ export function AppComponent(props: IAppComponentProps) {
                     component={() => (loggedIn ? <Home /> : <Landing />)}
                 />
                 <Route
-                    path="/files"
+                    path="/docs/:id"
                     component={() =>
                         loggedIn ? <Home /> : <Redirect to="/login" />
                     }

frontend/src/Documents/DocumentCard.tsx

@@ -1,12 +1,23 @@
 import { Card, H4 } from "@blueprintjs/core";
 import * as React from "react";
+import { RouteChildrenProps, withRouter } from "react-router";
 import { IDocumentJSON } from "~../../src/entity/Document";
 
-export function DocumentCard({ doc }: { doc: IDocumentJSON }) {
+export interface IDocumentCardComponentProps extends RouteChildrenProps {
+    doc: IDocumentJSON;
+}
+
+export function DocumentCardComponent(props: IDocumentCardComponentProps) {
     return (
-        <Card className="card" interactive={true}>
+        <Card
-            <H4>{doc.name}</H4>
+            className="card"
-            <div className="textPreview">{doc.content}</div>
+            interactive={true}
+            onClick={() => props.history.push(`/docs/${props.doc.id}`)}
+        >
+            <H4>{props.doc.name}</H4>
+            <div className="textPreview">{props.doc.content}</div>
         </Card>
     );
 }
+
+export const DocumentCard = withRouter(DocumentCardComponent);

frontend/src/Documents/Overview.tsx

@@ -12,7 +12,7 @@ import { IAppState } from "~redux/reducers";
 import { DocsList } from "./DocsList";
 
 export interface IOverviewComponentProps {
-    all: { [key: number]: IDocumentJSON };
+    allDocs: { [key: number]: IDocumentJSON };
     fetching: boolean;
     spinner: boolean;
 
@@ -28,14 +28,14 @@ export class OverviewComponent extends React.PureComponent<
     }
 
     public componentDidMount() {
-        if (!this.props.all) {
+        if (!this.props.allDocs) {
             this.props.fetchDocs();
         }
     }
 
     public render() {
-        if (this.props.all) {
+        if (this.props.allDocs) {
-            const docs = Object.values(this.props.all);
+            const docs = Object.values(this.props.allDocs);
             const recent = [...docs];
             recent.sort((a, b) => b.editedAt - a.editedAt);
             const recentCut = recent.splice(0, 4);
@@ -60,7 +60,7 @@ export class OverviewComponent extends React.PureComponent<
 
 function mapStateToProps(state: IAppState) {
     return {
-        all: state.docs.all,
+        allDocs: state.docs.all,
         fetching: state.docs.fetching,
         spinner: state.docs.spinner,
     };

frontend/src/Home/Home.tsx

@@ -1,7 +1,8 @@
 import {
     Alignment,
+    Breadcrumbs,
     Button,
-    Classes,
+    IBreadcrumbProps,
     Menu,
     Navbar,
     Popover,
@@ -10,12 +11,14 @@ import * as React from "react";
 import { connect } from "react-redux";
 import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
 import { Dispatch } from "redux";
+import { IDocumentJSON } from "~../../src/entity/Document";
 import { IUserJSON } from "~../../src/entity/User";
 import { Overview } from "~Documents/Overview";
 import { IAppState } from "~redux/reducers";
 import { logoutUser } from "~redux/user/actions";
 
 interface IHomeProps extends RouteComponentProps {
+    allDocs: { [key: number]: IDocumentJSON };
     user: IUserJSON | null;
     logout: () => void;
 }
@@ -26,6 +29,23 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
     }
 
     public render() {
+        const breadcrumbs: IBreadcrumbProps[] = [
+            {
+                icon: "home",
+                text: "Home",
+                onClick: () => this.props.history.push("/"),
+            },
+        ];
+
+        if ((this.props.match.params as any).id && this.props.allDocs) {
+            const { id } = this.props.match.params as any;
+            breadcrumbs.push({
+                icon: "document",
+                text: this.props.allDocs[id].name,
+                onClick: () => this.props.history.push(`/docs/${id}`),
+            });
+        }
+
         return (
             this.props.user && (
                 <>
@@ -33,24 +53,7 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
                         <Navbar.Group align={Alignment.LEFT}>
                             <Navbar.Heading>Writer</Navbar.Heading>
                             <Navbar.Divider />
-                            <Button
+                            <Breadcrumbs items={breadcrumbs} />
-                                className={Classes.MINIMAL}
-                                icon="home"
-                                text="Home"
-                                active={this.props.location.pathname === "/"}
-                                onClick={() => this.props.history.push("/")}
-                            />
-                            <Button
-                                className={Classes.MINIMAL}
-                                icon="document"
-                                text="Files"
-                                active={
-                                    this.props.location.pathname === "/files"
-                                }
-                                onClick={() =>
-                                    this.props.history.push("/files")
-                                }
-                            />
                         </Navbar.Group>
                         <Navbar.Group align={Alignment.RIGHT}>
                             <Popover
@@ -74,6 +77,7 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
                     <div id="MainScreen">
                         <Switch>
                             <Route exact={true} path="/" component={Overview} />
+                            <Route path="/docs/:id" component={Overview} />
                         </Switch>
                     </div>
                 </>
@@ -83,7 +87,7 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
 }
 
 function mapStateToProps(state: IAppState) {
-    return { user: state.user.user };
+    return { allDocs: state.docs.all, user: state.user.user };
 }
 
 function mapDispatchToProps(dispatch: Dispatch) {