Skip to main content

[PART 5] NuTracker ReactJS app - Add Login & Profile using Router



In the previous part we finished the dashboard read functionality, now we want to add the skeleton for other pages:

- Login
  In this page the user will be able to login to their account and the dashboard won't show unless the user is logged in.

- Profile
In this page the user will be able to update their daily nutrition goals that they can track in the dashboard.

to be able to have multiple 'pages' in react and navigate from one to one, we need something that can switch the rendered content based on what we want, we can do that with if statements in the App components and store some location state, but why invent the wheel.

React Router


every major single page app web framework has the routing concept and functionality to interact with the usual browser urls and switch the content based what user should see.

for example on the profile page I want the url path to be /profile, and for login to be /login and so on.
in more advanced cases you want the users to be able to bookmark a page and be able to get back to that page with state they left it on and that is tricky in single page apps because as in our case we deal with state which doesn't read anything from url and everything is just stored in browser memory.


for this PR I only added the navigation and authentication protection of dashboard & profile using react router, in future we can try to do something like making the date be a url parameter so users can bookmark specific dates in their dashboard.

here is the core lines that hold the routing logic (see routes.js)


everything added to enable router is in this PR, and I commented on the PR changes to explain each change.

Things to note


1- React Router manages its own state, it's not managed by redux

Yes things can get a bit messy because now we have two different sources of state and this means if we want a button to udpate the url and pass filters for examples (like the date navigation) then we need to let our components to read that from router state and not from the redux stored state.

there is a library that synchronizes redux and router called connected-react-router

more about this here:
- https://reacttraining.com/react-router/core/guides/redux-integration
- https://redux.js.org/advanced/usagewithreactrouter


2- we can check authentication and decide to either redirect to login or allow and render the component by adding custom PrivateRoute component (see routes.js), see also how the login page will redirect back to the referrer (the page the user tried to access before they were redirected to login)



how the app looks right now:

the dummy login page:

 

our lovely dashboard:





and our dummy profile page:





In the next part I'll be covering PropTypes and how to write unit tests for components then we can add our first form to allow the user to add entries to their day.

Comments

Popular posts from this blog

Android RecyclerView - Adding Empty View

So RecyclerView was introduced to replace List view and it's optimized to reuse existing views and so it's faster and more efficient as stated in the documentation:

https://developer.android.com/training/material/lists-cards.html

While using it, I faced the issue of missing a useful functionality that is implemented in ListView.
that feature is setting an empty view in case there was no records.

In ListView it was as simple as this

View emptyView = findViewById(R.id.mylist_empty_view);
ListView  myList = ....
myList.setEmptyView(emptyView);

but this method doesn't exist for recycler view so we need a work around until android team fixes this.


and here are the screen shots of both list view and recycler view fix

List view :

Recycler view :



here is how I fixed it:



here is the content of empty_view, it can be anything.



Enjoy.

Android - Multiple themes for one application

Sometimes you want to have multiple themes for your app
one strong example is having the ability to switch between dark and light themes because during night, a white bright screen can really be annoying for users eyes

Android will do most of the work for you but it may be required to change icons between themes to fit colors
In this blog I'll show a simple app with both dark and light themes and how to change icons without having to do that from code and keep things clean and centralized.
first of all let's create our activity, it will look something like this :


In /rest/values/styles.xml, we inherit Theme.AppCompat
 <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="Theme.AppCompat">
        <!--
            Theme customizations available in newer API levels can go in
            res/values…

Microservices 101, Docker & spring boot sample [Windows 10, home]

This is a very simplistic article :) if you are looking for a deep dive in microservices, see my state-of-the-art microservices full archeticture here:http://dev.basharallabadi.com/2019/03/part-1-spring-state-of-art.html What are micro services? It's an architectural model for web services that basically requires each service** to be completely independent and loosely coupled from other consumer services, or services that it depends on. and it's not a new idea but it's catching pace in today large scale web applications.


**(by service we mean a component that controls and implements the business logic in a self contained manner, like orders service, products catalog service, accounts management service, all of these have their domain and can be clearly separated) 

 Why micro services emerged ?
1- Easy to scale services: if you have a single application and all the services share the same code base and war (package) then if you receive high demand on one of the services…