Building a Blog With Reactjs And Laravel Admin Finish

Building a Blog With Reactjs And Laravel Part10: Admin Finish

In this article of this series i will finish the missing pieces of the React admin panel, those include breadcrumb, user profile, and dashboard home page.

 

 

 

Breadcrumb

The first thing i will fix is the breadcrumbs, remember that in previous lessons in that series we added a component for breadcrumb but that component is not dynamic in terms it should display links depending on current page. You can also use a custom npm package for breadcrumbs but for simplicity i modified the breadcrumb component to be dynamic.

resources/js/admin/components/partials/Breadcrumb.js

resources/js/admin/components/partials/BreadcrumbItem.js

In the above code i added a function prepareLinks() to return the links for the current page starting from the root link which is the dashboard. The function splits pathname sub property in location property by / then we loop through the resulting array and push it through the main array then we display it using <BreadcrumbItem/> component.



Profile

To enable the user to view his profile and update i added another component but first let’s modify the UsersController.php add this method:

app/Http/Controllers/UsersController.php

Update routes/api.php

Update resources/js/admin/apis/User.js

Create a new directory profile/ inside of resources/js/admin/components/pages/ then add this component Profile.js

resources/js/admin/components/pages/profile/Profile.js



Add new route in resources/js/admin/Routes.js

Update resources/js/admin/components/partials/Header.js



Dashboard Home

I modified the dashboard component to include some links to other pages

resources/js/admin/components/pages/Dashboard.js

 

 

Continue to part11: Website Start

 

Share this: