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.

Creating your own OAuth2 server and clients using spring security - part 1

In this series of posts, I'll try to put together a simple working example on how to create your own OAuth2 server.

if you want to know more on OAuth2 and when to use it as authentication and authorization protocol then you can search about it on google and i'll put some URLs later.

Now I assume you are familiar with java web applications using Spring and maven.

to get started we need to create the server side with all dependencies required and i'll list them here, i'll use maven 2 to ease downloading dependencies for us.


Steps:

1- Create new maven project with arch type webapp:



2- Add the required depenedencies for spring, spring security, spring-oauth2, hibernate & other libraries (required for this tutorial only you can use other libraries if you like)

https://gist.github.com/anonymous/d33a31ddc3ba84375cf3

3- I used hibernate to automate the creation of the schema required by spring OAuth2 to manage tokens (it's required to have schema created in db if you a…

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…