redirect to the new document

frontend/src/Documents/DocumentCard.tsx

@@ -1,9 +1,9 @@
 import { Card, H4 } from "@blueprintjs/core";
 import * as React from "react";
-import { RouteChildrenProps, withRouter } from "react-router";
+import { RouteComponentProps, withRouter } from "react-router";
 import { IDocumentJSON } from "~../../src/entity/Document";
 
-export interface IDocumentCardComponentProps extends RouteChildrenProps {
+export interface IDocumentCardComponentProps extends RouteComponentProps {
     doc: IDocumentJSON;
 }
 

frontend/src/Documents/NewDocumentCard.tsx

@@ -1,35 +1,52 @@
 import { Card, Icon } from "@blueprintjs/core";
 import * as React from "react";
 import { connect } from "react-redux";
-import { RouteChildrenProps, withRouter } from "react-router";
+import { RouteComponentProps, withRouter } from "react-router";
 import { Dispatch } from "redux";
-import { newDocStart } from "~redux/docs/actions";
+import { newDocReset, newDocStart } from "~redux/docs/actions";
+import { IAppState } from "~redux/reducers";
 
-export interface INewDocumentCardComponentProps extends RouteChildrenProps {
+export interface INewDocumentCardComponentProps extends RouteComponentProps {
     createNewDoc: () => void;
+    reset: () => void;
+
+    newDocumentID: number | null;
 }
 
 export function NewDocumentCardComponent(
     props: INewDocumentCardComponentProps,
 ) {
-    return (
-        <Card
-            className="card newDocumentCard"
-            interactive={true}
-            onClick={() => props.createNewDoc()}
-        >
-            <Icon icon="add" iconSize={40} className="newDocumentIcon" />
-        </Card>
-    );
+    if (!props.newDocumentID) {
+        return (
+            <Card
+                className="card newDocumentCard"
+                interactive={true}
+                onClick={() => props.createNewDoc()}
+            >
+                <Icon icon="add" iconSize={40} className="newDocumentIcon" />
+            </Card>
+        );
+    } else {
+        props.reset();
+        props.history.push(`/docs/${props.newDocumentID}/edit`);
+        return null;
+    }
+}
+
+function mapStateToProps(state: IAppState) {
+    return { newDocumentID: state.docs.newDocumentID };
 }
 
 function mapDispatchToProps(dispatch: Dispatch) {
-    return { createNewDoc: () => dispatch(newDocStart()) };
+    return {
+        createNewDoc: () => dispatch(newDocStart()),
+        reset: () => dispatch(newDocReset()),
+    };
 }
 
 export const NewDocumentCard = withRouter(
     connect(
-        null,
+        mapStateToProps,
         mapDispatchToProps,
     )(NewDocumentCardComponent),
 );

frontend/src/redux/docs/actions.ts

@@ -9,6 +9,7 @@ export enum DocsTypes {
     DOC_NEW_START = "DOC_NEW_START",
     DOC_NEW_FAIL = "DOC_NEW_FAIL",
     DOC_NEW_SUCCESS = "DOC_NEW_SUCCESS",
+    DOC_NEW_RESET = "DOC_NEW_RESET",
 
     DOCS_SHOW_SPINNER = "DOCS_SHOW_SPINNER",
 }
@@ -71,6 +72,10 @@ export interface IDocNewSuccessAction extends Action {
     };
 }
 
+export interface IDocNewResetAction extends Action {
+    type: DocsTypes.DOC_NEW_RESET;
+}
+
 export function newDocStart(): IDocNewStartAction {
     return { type: DocsTypes.DOC_NEW_START };
 }
@@ -83,6 +88,10 @@ export function newDocSuccess(doc: IDocumentJSON): IDocNewSuccessAction {
     return { type: DocsTypes.DOC_NEW_SUCCESS, payload: { doc } };
 }
 
+export function newDocReset(): IDocNewResetAction {
+    return { type: DocsTypes.DOC_NEW_RESET };
+}
+
 export type DocsAction =
     | IDocsFetchStartAction
     | IDocsFetchFailAction
@@ -90,4 +99,4 @@ export type DocsAction =
     | IDocsShowSpinnerAction
     | IDocNewFailAction
     | IDocNewStartAction
-    | IDocNewSuccessAction;
+    | IDocNewSuccessAction | IDocNewResetAction;

frontend/src/redux/docs/reducer.ts

@@ -8,6 +8,8 @@ export interface IDocsState {
     fetching: boolean;
     error: string | null;
     spinner: boolean;
+
+    newDocumentID: number | null;
 }
 
 const defaultDocsState: IDocsState = {
@@ -15,6 +17,7 @@ const defaultDocsState: IDocsState = {
     fetching: false,
     error: null,
     spinner: false,
+    newDocumentID: null,
 };
 
 export const docsReducer: Reducer<IDocsState, DocsAction> = (
@@ -37,7 +40,10 @@ export const docsReducer: Reducer<IDocsState, DocsAction> = (
             const all = { ...state.all };
             const doc = action.payload.doc;
             all[doc.id] = doc;
-            return { ...state, all };
+            return { ...state, all, newDocumentID: doc.id };
+        }
+        case DocsTypes.DOC_NEW_RESET: {
+            return { ...state, newDocumentID: null };
         }
         case DocsTypes.DOCS_FETCH_FAIL:
             return { ...defaultDocsState, ...action.payload };