6.1) App Screen 3 (UI + Backend integration)

So this week we had to develop the last screen of our application which for me was the home screen (Image feed section).

Imagefeed Screen:

So this page shows the images from all the people you are following,for every pic it shows the name of the person who uploaded it,the no. of likes the images has currently and also has a like button,for current user to like this image. So the main concern for this screen for me was to fetch all this data efficiently,instead of making multiple calls to different tables for data,i decided to make a single view as users_imagefeed which will hold the imagefeed data for all the users,so you can get the specific users imagefeed just by querying this table with that user’s userId. I made this(user_imagafeed) view by joining multiple tables(app_user,following,likes,photos).

Home Screen of user

Also for this page i also had to keep in mind that the images that the user already liked should show a Liked state of the button below the image,so instead of searching in my like table for every image(that the current user has liked this image or not) what i did was i looked which images has the user liked and then after the response of that query i looked is that image present in the imagefeed if yes then i marked it as liked, and passed this data to the view,so if the user already liked an image if would appear like this in his imagefeed:

Liked Image state

I explained the approach that i followed, if that did’nt make sense to you, I hope it will after i explain the code to you.

Imagefeed Snippet

In the pics above imagefeed_data,like_data are just arrays to store the reponses that we get from the data service. like_data_req and imagefeed_data request are the calls that will be made to the data service to fetch the required data (I used a npm library called request-promise to make network calls from express). like_data_request is to fetch the images user has liked and the other to fetch all the images posted by users who he is following.

Lines 55–87 will be executed if users has liked any images,then we’ll have to push the liked image data in the like_data array,after that i request for the current user’s image feed data,upon success i check for each of the image if that is present in user’s liked images,if yes then i set a liked property to true,also if an image has no likes it will have a null entry in the DB for that but i don’t want a null to appear instead of 0(zero) so that’s why i set image.no_likes to zero if it’s value is null and after that i push the imagedata to the imagefeed_data array. I did the same if the user hadn’t liked any images the only difference being i didn’t have to check if imagefeed data,that if an image is liked or not,below is the snippet for it,and now it must be self explanatory to you.

Just for reference below are some screenshots of the like and user_imagefeed view.

user_imagefeed view
Like Table

So this is it for this week’s blogpost. Now i’ll be collecting user feedback and their suggestions,and make changes if i find any. Next week i’ll talk about the changes i made according to the user feedback.

Link to my app: Click here