right click document card menu (implements #12)

frontend/src/Documents/DocumentCard.tsx

@@ -1,27 +1,92 @@
-import { Card, H4 } from "@blueprintjs/core";
+import { Card, ContextMenuTarget, H4, Menu, MenuItem } 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 { AppToaster } from "~AppToaster";
+import { deleteDocCancel, deleteDocStart } from "~redux/docs/actions";
 
 export interface IDocumentCardComponentProps extends RouteComponentProps {
     doc: IDocumentJSON;
+
+    deleteDoc: (id: number) => void;
+    cancelDelete: () => void;
 }
 
-export function DocumentCardComponent(props: IDocumentCardComponentProps) {
-    const previewString = props.doc.content.substring(0, 1000);
-    return (
-        <Card
-            className="card"
-            interactive={true}
-            onClick={() => props.history.push(`/docs/${props.doc.id}`)}
-        >
-            <H4>{props.doc.name}</H4>
-            <div className="textPreview">
-                <Markdown source={previewString} />
-            </div>
-        </Card>
-    );
+@ContextMenuTarget
+export class DocumentCardComponent extends React.PureComponent<
+    IDocumentCardComponentProps,
+    null
+> {
+    constructor(props: IDocumentCardComponentProps) {
+        super(props);
+
+        this.handleDelete = this.handleDelete.bind(this);
+        this.handleEdit = this.handleEdit.bind(this);
+    }
+
+    public handleDelete() {
+        AppToaster.show({
+            message: "Document deleted!",
+            intent: "danger",
+            timeout: 2900,
+            action: {
+                text: "Undo",
+                onClick: () => this.props.cancelDelete(),
+            },
+        });
+        this.props.deleteDoc(this.props.doc.id);
+    }
+
+    public handleEdit() {
+        this.props.history.push(`/docs/${this.props.doc.id}/edit`);
+    }
+
+    public render() {
+        const previewString = this.props.doc.content.substring(0, 1000);
+        return (
+            <Card
+                className="card"
+                interactive={true}
+                onClick={() =>
+                    this.props.history.push(`/docs/${this.props.doc.id}`)
+                }
+            >
+                <H4>{this.props.doc.name}</H4>
+                <div className="textPreview">
+                    <Markdown source={previewString} />
+                </div>
+            </Card>
+        );
+    }
+
+    public renderContextMenu() {
+        return (
+            <Menu>
+                <MenuItem onClick={this.handleEdit} icon="edit" text="Edit" />
+                <MenuItem
+                    onClick={this.handleDelete}
+                    intent="danger"
+                    icon="trash"
+                    text="Delete"
+                />
+            </Menu>
+        );
+    }
 }
 
-export const DocumentCard = withRouter(DocumentCardComponent);
+function mapDispatchToProps(dispatch: Dispatch) {
+    return {
+        deleteDoc: (id: number) => dispatch(deleteDocStart(id)),
+        cancelDelete: () => dispatch(deleteDocCancel()),
+    };
+}
+
+export const DocumentCard = withRouter(
+    connect(
+        null,
+        mapDispatchToProps,
+    )(DocumentCardComponent),
+);

frontend/src/Documents/DocumentEdit.tsx

@@ -77,7 +77,7 @@ export class DocumentEditComponent extends React.PureComponent<
                                     AppToaster.show({
                                         message: "Document deleted!",
                                         intent: "danger",
-                                        timeout: 1900,
+                                        timeout: 2900,
                                         action: {
                                             text: "Undo",
                                             onClick: () =>

frontend/src/redux/docs/sagas.ts

@@ -100,7 +100,7 @@ function* docNewStart(action: IDocNewStartAction) {
 function* docDeleteStart(action: IDocDeleteStartAction) {
     try {
         const { cancelled } = yield race({
-            timeout: delay(2000),
+            timeout: delay(3000),
             cancelled: take(DocsTypes.DOC_DELETE_CANCEL),
         });