Add breadcrumbs to edit events and stakeholders makign navigation a little easier.

package.json

@@ -67,7 +67,6 @@
     "react-redux": "^5.0.1",
     "react-router": "^3.0.0",
     "react-router-redux": "^4.0.7",
-    "recompose": "^0.21.2",
     "redux": "^3.6.0",
     "redux-form": "^6.4.3",
     "redux-promise-middleware": "^4.2.0",
@@ -78,20 +77,25 @@
     "superagent": "^3.3.1",
     "superagent-as-promised": "^4.0.0",
     "url-loader": "^0.5.7",
-    "webpack": "^1.14.0",
+    "webpack": "^2.2.1",
     "webpack-dev-middleware": "^1.9.0"
   },
   "devDependencies": {
     "chai": "^3.5.0",
     "chai-as-promised": "^6.0.0",
+    "chai-enzyme": "^0.6.1",
     "coveralls": "^2.11.16",
     "dirty-chai": "^1.2.2",
+    "enzyme": "latest",
     "istanbul": "^0.4.5",
+    "jsdom": "^9.11.0",
     "mocha": "^3.2.0",
     "nock": "^9.0.6",
     "nodemon": "^1.11.0",
     "nyc": "^10.1.2",
     "proxyquire": "^1.7.11",
+    "react-addons-test-utils": "^15.4.2",
+    "recompose": "^0.22.0",
     "sinon": "^1.15.4",
     "sinon-chai": "^2.8.0"
   }

src/client/court-case/CourtCaseBreadcrumbs.js

@@ -0,0 +1,29 @@
+import React from "react";
+import {connect} from "react-redux";
+import {Breadcrumb, BreadcrumbItem} from "react-bootstrap";
+import {navigateHome, navigateViewCourtCase} from "../store/actions/NavigationActions";
+
+const EditCourtCaseEvents = ({caseNumber, party, navigateHome, navigateViewCourtCase, activeBreadcrumbText}) =>
+    <Breadcrumb>
+        <BreadcrumbItem id="breadcrumb-home" onClick={navigateHome}>Home</BreadcrumbItem>
+        <BreadcrumbItem id="breadcrumb-case" onClick={navigateViewCourtCase}><span>Case Number {caseNumber} ({party})</span></BreadcrumbItem>
+        <BreadcrumbItem id="breadcrumb-active" active><span>{activeBreadcrumbText}</span></BreadcrumbItem>
+    </Breadcrumb>;
+
+EditCourtCaseEvents.displayName = "EditCourtCaseEvents";
+
+EditCourtCaseEvents.propTypes = {
+    caseId: React.PropTypes.string.isRequired,
+    caseNumber: React.PropTypes.string.isRequired,
+    party: React.PropTypes.string.isRequired,
+    navigateHome: React.PropTypes.func.isRequired,
+    navigateViewCourtCase: React.PropTypes.func.isRequired,
+    activeBreadcrumbText: React.PropTypes.string.isRequired
+};
+
+const mapDispatchToProps = (dispatch, {caseId}) => ({
+    navigateHome: () => dispatch(navigateHome()),
+    navigateViewCourtCase: () => dispatch(navigateViewCourtCase(caseId))
+});
+
+export default connect(undefined, mapDispatchToProps)(EditCourtCaseEvents);

src/client/court-case/CourtCaseHeader.js

@@ -1,13 +1,15 @@
 import React from "react";
-import {PageHeader} from "react-bootstrap";
+import {PageHeader, Breadcrumb, BreadcrumbItem} from "react-bootstrap";
 
 export const CourtCaseHeader = ({caseNumber, party, children}) =>
-    <PageHeader>Case {caseNumber}{' '}
-        <small>Party: {party}</small>
-        <div className="pull-right">
-            {children}
-        </div>
-    </PageHeader>;
+    <div>
+        <PageHeader>Case {caseNumber}{' '}
+            <small>Party: {party}</small>
+            <div className="pull-right">
+                {children}
+            </div>
+        </PageHeader>
+    </div>;
 
 CourtCaseHeader.displayName = "CourtCaseHeader";
 

src/client/court-case/events/EditCourtCaseEvents.js

@@ -1,29 +1,40 @@
 import _ from "lodash";
 import React from "react";
 import {connect} from "react-redux";
-import {Button, ButtonToolbar, Grid} from "react-bootstrap";
+import {Button, ButtonToolbar, Grid, PageHeader} from "react-bootstrap";
 import {reduxForm, FieldArray} from "redux-form";
 import EventsForm from "./EventsForm";
+import CourtCaseBreadcrumbs from "../CourtCaseBreadcrumbs";
 import {fetchAndSelectCourtCase} from "../../store/actions/CourtCaseActions";
 import {saveEvents} from "../../store/actions/EventActions";
 import {eventValidation} from "./eventValidation";
-import {CourtCaseHeader} from "../CourtCaseHeader";
 import {enhanceWithFetchCourtCase} from "../enhanceWithFetchCourtCase";
 
-const EditCourtCaseEvents = ({caseNumber, party, handleSubmit}) => (
-    <Grid fluid>
-        <div>
-            <CourtCaseHeader caseNumber={caseNumber} party={party}>
-                <ButtonToolbar>
-                    <Button id="create" bsStyle="primary" onClick={handleSubmit}>Save</Button>
-                </ButtonToolbar>
-            </CourtCaseHeader>
-        </div>
-        <FieldArray name="events" component={EventsForm}/>
-    </Grid>
-);
+const EditCourtCaseEvents = ({caseId, caseNumber, party, handleSubmit}) => {
+    if (caseNumber && party) {
+        return (
+            <Grid fluid>
+                <CourtCaseBreadcrumbs caseId={caseId} caseNumber={caseNumber} party={party} activeBreadcrumbText="Edit Events"/>
+                <PageHeader>Edit Events{' '}
+                    <small>Case {caseNumber} ({party})</small>
+                    <div className="pull-right">
+                        <ButtonToolbar>
+                            <Button id="create" bsStyle="primary" onClick={handleSubmit}>Save</Button>
+                        </ButtonToolbar>
+                    </div>
+                </PageHeader>
+                <FieldArray name="events" component={EventsForm}/>
+            </Grid>
+        );
+    } else {
+        return (
+            <div>Loading...</div>
+        );
+    }
+};
 
 const mapStateToProps = (state) => ({
+    caseId: state.selectedCase.courtCase.id,
     caseNumber: state.selectedCase.courtCase.caseNumber,
     party: state.selectedCase.courtCase.party,
     initialValues: {

src/client/court-case/stakeholders/EditStakeholders.js

@@ -1,27 +1,40 @@
 import _ from "lodash";
 import React from "react";
 import {connect} from "react-redux";
-import {Button, ButtonToolbar, Grid} from "react-bootstrap";
+import {Button, ButtonToolbar, Grid, PageHeader} from "react-bootstrap";
 import {reduxForm, FieldArray} from "redux-form";
 import StakeholdersForm from "./StakeholdersForm";
+import CourtCaseBreadcrumbs from "../CourtCaseBreadcrumbs";
 import {fetchAndSelectCourtCase} from "../../store/actions/CourtCaseActions";
 import {saveStakeholders} from "../../store/actions/StakeholderActions";
 import {stakeholderValidation} from "./stakeholderValidation";
 import {enhanceWithFetchCourtCase} from "../enhanceWithFetchCourtCase";
-import {CourtCaseHeader} from "../CourtCaseHeader";
 
-const EditCourtCaseStakeholders = ({fields, caseNumber, party, handleSubmit}) => (
-    <Grid fluid>
-        <CourtCaseHeader caseNumber={caseNumber} party={party}>
-            <ButtonToolbar>
-                <Button id="create" bsStyle="primary" onClick={handleSubmit}>Save</Button>
-            </ButtonToolbar>
-        </CourtCaseHeader>
-        <FieldArray name="stakeholders" component={StakeholdersForm}/>
-    </Grid>
-);
+const EditCourtCaseStakeholders = ({caseId, caseNumber, party, handleSubmit}) => {
+    if (caseNumber && party) {
+        return (
+            <Grid fluid>
+                <CourtCaseBreadcrumbs caseId={caseId} caseNumber={caseNumber} party={party} activeBreadcrumbText="Edit Stakeholders"/>
+                <PageHeader>Edit Stakeholders{' '}
+                    <small>Case {caseNumber} ({party})</small>
+                    <div className="pull-right">
+                        <ButtonToolbar>
+                            <Button id="create" bsStyle="primary" onClick={handleSubmit}>Save</Button>
+                        </ButtonToolbar>
+                    </div>
+                </PageHeader>
+                <FieldArray name="stakeholders" component={StakeholdersForm}/>
+            </Grid>
+        );
+    } else {
+        return (
+            <div>Loading...</div>
+        );
+    }
+};
 
 const mapStateToProps = (state) => ({
+    caseId: state.selectedCase.courtCase.id,
     caseNumber: state.selectedCase.courtCase.caseNumber,
     party: state.selectedCase.courtCase.party,
     initialValues: {

src/client/home/UpcomingEvent.js

@@ -0,0 +1,35 @@
+import React from "react";
+import {connect} from "react-redux";
+import {Glyphicon} from "react-bootstrap";
+import {navigateViewCourtCase} from "../store/actions/NavigationActions";
+import {toDatetime} from "../utils/formatDate";
+
+const UpcomingEvent = ({event, navigateViewCourtCase}) =>
+    <div>
+        <div>
+            <strong>Case {event.courtCase.caseNumber}</strong>
+            <Glyphicon id="view-case" className="pull-right link" glyph="edit" onClick={navigateViewCourtCase}/>
+        </div>
+        <div>Party: {event.courtCase.party}</div>
+        <div>Date: {toDatetime(event.date)}</div>
+        <div>Description: {event.description}</div>
+    </div>;
+
+UpcomingEvent.displayname = "UpcomingEvent";
+
+UpcomingEvent.propTypes = {
+    event: React.PropTypes.shape({
+        date: React.PropTypes.string.isRequired,
+        description: React.PropTypes.string.isRequired,
+        courtCase: React.PropTypes.shape({
+            caseNumber: React.PropTypes.string.isRequired,
+            party: React.PropTypes.string.isRequired
+        }).isRequired
+    }).isRequired
+};
+
+const mapDispatchToProps = (dispatch, {event: {courtCaseId}}) => ({
+    navigateViewCourtCase: () => dispatch(navigateViewCourtCase(courtCaseId))
+});
+
+export default connect(undefined, mapDispatchToProps)(UpcomingEvent);

src/client/home/UpcomingEventsList.js

@@ -1,22 +1,14 @@
 import React from "react";
 import {ListGroup, ListGroupItem} from "react-bootstrap";
-import {toDatetime} from "../utils/formatDate";
-
-const EventBody = ({event}) =>
-    <div>
-        <div><strong>Case {event.courtCase.caseNumber}</strong></div>
-        <div>Party: {event.courtCase.party}</div>
-        <div>Date: {toDatetime(event.date)}</div>
-        <div>Description: {event.description}</div>
-    </div>;
+import UpcomingEvent from "./UpcomingEvent";
 
 const UpcomingEventsList = ({events}) =>
     <div>
         <h2>Upcoming Events</h2>
         <ListGroup>
             {events.map(event =>
                 <ListGroupItem key={event.id}>
-                    <EventBody event={event}/>
+                    <UpcomingEvent event={event}/>
                 </ListGroupItem>)
             }
         </ListGroup>

src/client/style/styles.less

@@ -6,3 +6,7 @@
 .page-header {
   margin-top: 20px;
 }
+
+.link {
+  cursor: pointer;
+}

test/chanceMixin.js

@@ -7,22 +7,30 @@ export default {
         };
     },
 
-    stakeholder: function () {
+    stakeholder: function (courtCase=this.courtCase()) {
         return {
             id: this.integer(),
-            courtCaseId: this.integer(),
+            courtCaseId: courtCase.id,
             name: this.name(),
             contact: this.phone(),
-            contactType: this.pickone(["sms", "email", "phone call", "facebook", "twitter"])
+            contactType: this.pickone(["sms", "email", "phone call", "facebook", "twitter"]),
+            courtCase
         };
     },
 
-    event: function() {
+    event: function(courtCase=this.courtCase()) {
         return {
             id: this.integer(),
-            courtCaseId: this.integer(),
-            date: this.date().toString(),
-            description: this.sentence()
+            courtCaseId: courtCase.id,
+            date: this.date().toISOString(),
+            description: this.sentence(),
+            courtCase
+        }
+    },
+
+    reduxAction: function() {
+        return {
+            type: `TYPE_${this.word()}`.toUpperCase()
         }
     }
 };

test/client/court-case/CourtCaseBreadcrumbs.spec.js

@@ -0,0 +1,73 @@
+import React from "react";
+import {shallow} from "enzyme";
+import proxyquire from "proxyquire";
+import setup from "../../setup";
+
+describe("<CourtCaseBreadcrumbs/>", () => {
+    const {expect, chance, sandbox, reduxStore} = setup();
+
+    const navigateViewCourtCase = sandbox.stub();
+    const navigateHome = sandbox.stub();
+    const deps = {
+        "../store/actions/NavigationActions": {
+            navigateViewCourtCase,
+            navigateHome
+        }
+    };
+    const CourtCaseBreadcrumbs = proxyquire("../../../src/client/court-case/CourtCaseBreadcrumbs", deps).default;
+
+    const store = reduxStore();
+    const caseId = chance.integer() + "";
+    const caseNumber = chance.guid();
+    const party = chance.name();
+    const activeBreadcrumbText = `Edit ${chance.word()}`;
+
+    const render = () => shallow(<CourtCaseBreadcrumbs store={store} caseId={caseId} caseNumber={caseNumber}
+                                                       party={party} activeBreadcrumbText={activeBreadcrumbText}/>).shallow();
+
+    it("Should render home breadcrumb", () => {
+        const wrapper = render();
+
+        const breadcrumb = wrapper.find("#breadcrumb-home");
+        expect(breadcrumb.html()).to.contain("Home");
+    });
+
+    it("Should render case breadcrumb", () => {
+        const wrapper = render();
+
+        const breadcrumb = wrapper.find("#breadcrumb-case");
+        expect(breadcrumb.html()).to.contain(`Case Number ${caseNumber} (${party})`);
+    });
+
+    it("Should render active breadcrumb", () => {
+        const wrapper = render();
+
+        const breadcrumb = wrapper.find("#breadcrumb-active");
+        expect(breadcrumb.html()).to.contain(activeBreadcrumbText);
+        expect(breadcrumb).to.have.prop("active", true);
+    });
+
+    it("Click home breadcrumb navigates home", () => {
+        const action = chance.reduxAction();
+        navigateHome.returns(action);
+
+        const wrapper = render();
+
+        wrapper.find("#breadcrumb-home").simulate("click");
+
+        expect(navigateHome).to.have.been.called();
+        expect(store.dispatch).to.have.been.calledWith(action);
+    });
+
+    it("Click case number breadcrumb navigates view case", () => {
+        const action = chance.reduxAction();
+        navigateViewCourtCase.returns(action);
+
+        const wrapper = render();
+
+        wrapper.find("#breadcrumb-case").simulate("click");
+
+        expect(navigateViewCourtCase).to.have.been.calledWith(caseId);
+        expect(store.dispatch).to.have.been.calledWith(action);
+    });
+});