feat(breadcrumb): add a breadcrumb underneath the page header #1815
Conversation
|
|
|
This pull request is being automatically deployed with ZEIT Now (learn more). 🔍 Inspect: https://zeit.co/hospitalrun/hospitalrun-frontend/igmc0ngcr |
oliv37
changed the title
oliv37
changed the title
oliv37
changed the title
|
UI Style Feedback: I think that the breadcrumbs should go directly below the page break line, rather than right below the Navbar. |
jackcmeyer
added
the
🚀enhancement
| 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> | ||
| ) |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Ok, if my understanding is correct, each Route Component will declare an effect to update the breadcrumb array in the state ?
There was a problem hiding this comment.
I think that you have the correct understanding!
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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...
|
Yes, the "Dashboard" in the breadcrumbs should be linked. |
|
@oliv37 can you add this change? |
@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 ?
|
|
@lauggh what do you say? Another note... does it make sense to have breadcrumbs in the Dashboard? |
|
No breadcrumbs on the top level. Good catch |
|
Still no answer to my first question, Do I need to add "Dashboard" at the beginning of all breadcrumbs (/patients/** , /appointments/** ) ? |
|
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>
.
|
matteovivona
requested review from
jackcmeyer
and removed request for
lauggh
add the dashboard item for all the breacrumbs, don't display the breadcrumb for the Dashboard page
|
it might be ok now |
|
@oliv37 can you resolve conflicts? :) thx great job :) |
Fixes #1770.
Changes proposed in this pull request:
Let me know if the breadcrumb created in this PR is what you are expecting, then I will finish all the unit tests