Skip to main content

[PART 4] NuTracker, ReactJS application - Finish Dashboard Read functionality

In the previous part we added the first call to the async api to do search, now we will build on that to call more apis, and to add more components on the page to finish up the Display flows (i.e. what doesn't require writes / forms) :
  • search
    • this allows the user to find a specific food and choose to add an entry for it to their day to record that they consumed a specific portion of that food.
  • show entries
    • This feature is to allow users to see what they recorded as a list of entries, each entry represents a food the user added on a specific date.
  • show progress bars
    • The user will be able to set goals like how many calories, proteins, fats they want to consume daily and these bars will calculate from the entries they added how close they are to their daily goals
  • reload entries & progress metrics when date change 
    • This is to provide the ability for the users to go back in history and see their entries.

all this is in general similar to the steps I did before:
- add presentation component
- add add actions (api calls or anything else) & reducers ( store the responses in the state and calculate new state if the date changed for example )
- add container component to pass the props to the presentation


all the code for this day is in this pull request ( so you can check exactly what was added and changed), I have also added comments on some files there to explain a little bit.
It's easier to see and navigate files in the "Files Changed" tab in Github PR page


Things Worth noting


 Components Interaction


Up to this point the dashboard didn't have any interaction across components
but in this PR I added the Date navigator which when a user navigates in one direction should load the Entries they created for that new Date they are on, I addition the progress metrics should update according to the new entries.
the way I did this was :
1- when dashboard first loads it just loads the current day information, so the entries list component will  (in componentDidMount) and fetch today's entries).
2- if the user go back in date navigator that triggers a redux action (PERIOD_CHANGED, see dateNavActions.js)
3- the period reducer will update the state with the new start/end dates
4- Our DayEntries component uses state.period as props, so when the state changed because of the date navigation action above, our component will be rerendered.
5- since this is a rerender and not mounting, we have to use the componentWillReceiveProps life cycle method to trigger a new redux action to fetch the entries for the new date period.


 Introducing RequestBuilder

this class is a helper to be used by the repos to inject headers and parse reposne as json, this saves us from repeating this logic everywhere.

Adding User info to state

Since we now want to show progress bars about user goals, I added an api call through userRepo to get the user profile from backend (see Dashboard component), there was no login needed because I hardcoded the user token in the request builder, this way we have real user information without being blocked on login being ready to do this work but in the same time we deal with real data model of the user.


In the next part I plan to :
1- create a dummy login page
2- use react-router to have multiple pages in our app (login, dashboard, profile) each with it's own url


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…