feat(breadcrumb): add a breadcrumb underneath the page header #1815

oliv37 · 2020-02-09T18:51:50Z

Fixes #1770.

Changes proposed in this pull request:

Add a breadcrumb underneath the page header
The breadcrumb is updated when the user navigates between pages

Let me know if the breadcrumb created in this PR is what you are expecting, then I will finish all the unit tests

fix #1770

jsf-clabot · 2020-02-09T18:51:52Z

All committers have signed the CLA.

vercel · 2020-02-09T18:51:55Z

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/hospitalrun/hospitalrun-frontend/igmc0ngcr
✅ Preview: https://hospitalrun-frontend-git-fork-oliv37-breadcrumbs.hospitalrun.now.sh

…rontend into breadcrumbs

fix #1770

jackcmeyer · 2020-02-10T05:01:58Z

UI Style Feedback: I think that the breadcrumbs should go directly below the page break line, rather than right below the Navbar.

jackcmeyer · 2020-02-10T05:20:14Z

src/components/breadcrumb/Breadcrumb.tsx

+const Breadcrumb = () => (
+  <Switch>
+    <Route exact path={['/patients/new', '/appointments/new']} component={DefaultBreadcrumb} />
+    <Route path="/patients/:id" component={PatientBreadcrumb} />
+    <Route path="/appointments/:id" component={AppointmentBreadcrumb} />
+    <Route path="*" component={DefaultBreadcrumb} />
+  </Switch>
+)


I'm wondering if we can combine all of the breadcrumbs into one component.

This breadcrumb component would read from a Provider (defined using the React Context API) or a Redux Slice.

The state of the Provider or Slice would be an array of objects that have two properties: text and location.

The Provider or Slice would have three functions exposed, one to add a breadcrumb, one to remove a breadcrumb, and one to set the breadcrumbs (basically a function to just set the state exactly to what the user passed in).

Each Route Handler (e.g. Patients, ViewPatient, NewPatient) would then add a breadcrumb to the state, and would remove it during the cleanup phase of the useEffect.

This would ensure we don't have any duplicate code, the breadcrumb can be a single component, and we don't have any additional work each time a new route or module is added.

Feel free to ping me on slack with any questions.

For an example of how this might work, checkout https://github.com/HospitalRun/hospitalrun-frontend/pull/1817/files. I'm working through doing something similar but with a button toolbar.

Ok, if my understanding is correct, each Route Component will declare an effect to update the breadcrumb array in the state ?

I think that you have the correct understanding!

I updated my code using your recommendations (without doing the unit tests).
I only handled the / and /patients/** routes, let met know if it's ok for you, then I will finish the tests and handle the /appointments/** routes

I just finished to implement the whole feature (I still need to improve the code coverage).

It was not as easy as I expected because of the nested routes. I realized the effect of a child component is executed before the effect of its parent. As a result I couldn't rely on the order of the addBreadcrumb function calls to build a valid breadcrumbs array. So I decided to sort the breadcrumbs by their location property before the rendering.

I am also afraid that maintaining the breadcrumbs will be painful in the future, as the number of routes will increase. Each developers should remember to call the hook useAddBreadcrumbs when they add a new route, it can be really cumbersome...

fix #1770

jackcmeyer

This all looks really great 🔥

package.json

fix #1770

lauggh · 2020-02-19T15:58:54Z

Yes, the "Dashboard" in the breadcrumbs should be linked.

matteovivona · 2020-02-19T16:09:12Z

@oliv37 can you add this change?

fox1t

Seems good after changes proposed by @tehkapa

oliv37 · 2020-02-19T19:51:22Z

@lauggh would a functional UX require a "Dashboard" (sort of like a homepage) clickable before "Patients" item?

@tehkapa Do you want me to add the "Dashboard" breadcrumbItem for all the "Patients" routes ("/patients/**") ?

Do I also need to add the "Dashboard" (sort of link to the homepage) before "Appointments" items ?

matteovivona · 2020-02-19T20:26:42Z

@lauggh what do you say? Another note... does it make sense to have breadcrumbs in the Dashboard?

lauggh · 2020-02-19T20:56:53Z

No breadcrumbs on the top level. Good catch

#1815 (comment)

oliv37 · 2020-02-19T21:46:27Z

Still no answer to my first question, Do I need to add "Dashboard" at the beginning of all breadcrumbs (/patients/** , /appointments/** ) ?

lauggh · 2020-02-19T22:02:52Z

Yes add Dashboard on all breadcrumbs as a link except on the Dashboard page itself

…

On Wed, Feb 19, 2020, 1:46 PM oliv37 ***@***.***> wrote: Still no answer to my first question, Do I need to add "Dashboard" at the beginning of all breadcrumbs (/patients/*, /appointments/*) ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1815?email_source=notifications&email_token=AAETOFEWYMKKTYAWKTZGUGLRDWSDJA5CNFSM4KSDR4W2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEMJZZHY#issuecomment-588487839>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAETOFBEYK5GL7AEQBHQODTRDWSDJANCNFSM4KSDR4WQ> .

add the dashboard item for all the breacrumbs, don't display the breadcrumb for the Dashboard page

oliv37 · 2020-02-20T19:36:01Z

it might be ok now

matteovivona · 2020-02-20T20:27:30Z

@oliv37 can you resolve conflicts? :) thx

great job :)

…rontend into breadcrumbs

oliv37 added 2 commits February 8, 2020 16:28

feat(breadcrumb): add a breadcrumb underneath the page header

65b40ae

fix #1770

feat(breadcrumb): customize breadcrumbs for patients and appointments

a68ed7e

fix #1770

vercel bot deployed to Preview February 9, 2020 18:51 View deployment

oliv37 added 2 commits February 9, 2020 19:59

Merge branch 'master' of https://github.com/HospitalRun/hospitalrun-f…

3e43558

…rontend into breadcrumbs

feat(breadcrumb): add a patient to the store in HispitalRun.tests.tsx

63517e8

fix #1770

vercel bot deployed to Preview February 9, 2020 19:13 View deployment

oliv37 changed the title ~~feat(breadcrumb): add a breadcrumb underneath the page header~~ feat(breadcrumb): add a breadcrumb underneath the page header #1770 Feb 9, 2020

oliv37 changed the title ~~feat(breadcrumb): add a breadcrumb underneath the page header #1770~~ feat(breadcrumb): add a breadcrumb underneath the page header Feb 9, 2020

oliv37 changed the title ~~feat(breadcrumb): add a breadcrumb underneath the page header~~ [WIP] feat(breadcrumb): add a breadcrumb underneath the page header Feb 9, 2020

jackcmeyer requested review from jackcmeyer, fox1t and matteovivona February 10, 2020 05:02

jackcmeyer added this to the v2.0.0 milestone Feb 10, 2020

jackcmeyer added the 🚀enhancement an issue/pull request that adds a feature to the application label Feb 10, 2020

jackcmeyer suggested changes Feb 10, 2020

View reviewed changes

feat(breadcrumb): use a single component for Breadcrumbs

a4c1cfb

fix #1770

vercel bot deployed to Preview February 11, 2020 19:40 View deployment

vercel bot temporarily deployed to Preview February 11, 2020 19:40 Inactive

jackcmeyer suggested changes Feb 12, 2020

View reviewed changes

package.json Outdated Show resolved Hide resolved

feat(breadcrumb): display the breadcrumb in the appointment components

a6eaf2a

fix #1770

vercel bot deployed to Preview February 12, 2020 19:23 View deployment

Merge branch 'master' into breadcrumbs

7b510cd

vercel bot deployed to Preview February 12, 2020 20:38 View deployment

Merge branch 'master' into breadcrumbs

150247d

vercel bot deployed to Preview February 12, 2020 20:59 View deployment

Merge branch 'master' into breadcrumbs

1c5422c

Merge branch 'master' into breadcrumbs

e1bfa13

vercel bot deployed to Preview February 19, 2020 09:28 View deployment

Merge branch 'master' into breadcrumbs

10e902d

vercel bot deployed to Preview February 19, 2020 13:00 View deployment

HospitalRun deleted a comment from vercel bot Feb 19, 2020

fox1t reviewed Feb 19, 2020

View reviewed changes

matteovivona requested review from jackcmeyer and removed request for lauggh February 20, 2020 08:22

feat(breadcrumb): add the dashboard breadcrumb item

beffc1f

add the dashboard item for all the breacrumbs, don't display the breadcrumb for the Dashboard page

oliv37 dismissed jackcmeyer’s stale review via beffc1f February 20, 2020 19:33

vercel bot temporarily deployed to Preview February 20, 2020 19:33 Inactive

feat(breadcrumb): improve Breadcrumbs tests

03174ad

vercel bot deployed to Preview February 20, 2020 19:36 View deployment

Merge branch 'master' of https://github.com/HospitalRun/hospitalrun-f…

c71779a

…rontend into breadcrumbs

vercel bot deployed to Preview February 21, 2020 18:05 View deployment

Merge branch 'master' into breadcrumbs

478bad0

vercel bot deployed to Preview February 23, 2020 05:49 View deployment

matteovivona self-requested a review February 23, 2020 13:17

matteovivona approved these changes Feb 23, 2020

View reviewed changes

matteovivona merged commit 878684c into HospitalRun:master Feb 23, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(breadcrumb): add a breadcrumb underneath the page header #1815

feat(breadcrumb): add a breadcrumb underneath the page header #1815

oliv37 commented Feb 9, 2020 •

edited

Loading

jsf-clabot commented Feb 9, 2020 •

edited

Loading

vercel bot commented Feb 9, 2020 •

edited

Loading

jackcmeyer commented Feb 10, 2020

jackcmeyer Feb 10, 2020 •

edited

Loading

jackcmeyer Feb 10, 2020

oliv37 Feb 10, 2020

jackcmeyer Feb 11, 2020

oliv37 Feb 11, 2020

oliv37 Feb 15, 2020 •

edited

Loading

jackcmeyer left a comment

lauggh commented Feb 19, 2020

matteovivona commented Feb 19, 2020

fox1t left a comment

oliv37 commented Feb 19, 2020 •

edited

Loading

matteovivona commented Feb 19, 2020

lauggh commented Feb 19, 2020

oliv37 commented Feb 19, 2020 •

edited

Loading

lauggh commented Feb 19, 2020 via email

oliv37 commented Feb 20, 2020

matteovivona commented Feb 20, 2020 •

edited

Loading

feat(breadcrumb): add a breadcrumb underneath the page header #1815

feat(breadcrumb): add a breadcrumb underneath the page header #1815

Conversation

oliv37 commented Feb 9, 2020 • edited Loading

jsf-clabot commented Feb 9, 2020 • edited Loading

vercel bot commented Feb 9, 2020 • edited Loading

jackcmeyer commented Feb 10, 2020

jackcmeyer Feb 10, 2020 • edited Loading

Choose a reason for hiding this comment

jackcmeyer Feb 10, 2020

Choose a reason for hiding this comment

oliv37 Feb 10, 2020

Choose a reason for hiding this comment

jackcmeyer Feb 11, 2020

Choose a reason for hiding this comment

oliv37 Feb 11, 2020

Choose a reason for hiding this comment

oliv37 Feb 15, 2020 • edited Loading

Choose a reason for hiding this comment

jackcmeyer left a comment

Choose a reason for hiding this comment

lauggh commented Feb 19, 2020

matteovivona commented Feb 19, 2020

fox1t left a comment

Choose a reason for hiding this comment

oliv37 commented Feb 19, 2020 • edited Loading

matteovivona commented Feb 19, 2020

lauggh commented Feb 19, 2020

oliv37 commented Feb 19, 2020 • edited Loading

lauggh commented Feb 19, 2020 via email

oliv37 commented Feb 20, 2020

matteovivona commented Feb 20, 2020 • edited Loading

oliv37 commented Feb 9, 2020 •

edited

Loading

jsf-clabot commented Feb 9, 2020 •

edited

Loading

vercel bot commented Feb 9, 2020 •

edited

Loading

jackcmeyer Feb 10, 2020 •

edited

Loading

oliv37 Feb 15, 2020 •

edited

Loading

oliv37 commented Feb 19, 2020 •

edited

Loading

oliv37 commented Feb 19, 2020 •

edited

Loading

matteovivona commented Feb 20, 2020 •

edited

Loading