Hello guys, welcome back to our series in creating our own little twitter clone. This is going to be our last tutorial around the My Profile page…finally!. Although we might make more changes to it later to support other features. Anyway this week we are going to:
– Make final CSS adjustments to make it look better
– Displaying our profile images in our tweets and navbar
– Display total amount of tweets
– When we navigate to /[username] it will show us that users profile page
– Display edit profile only if it’s the current logged in user homepage otherwise display follow button.
Let’s get started:
Making final CSS adjustments:
One of the main things I want to do is completely strip out any inline-CSS that I have or 99% of it. Having inline CSS is never a good thing and make future changes extremely hard. For time’s sake, I am not going to go into each change I made to strip out the CSS but I basically moved all the duplicate code into reuse CSS chunks. For example a CSS rule for a specific float: floatRight
Displaying our profile images in our tweets and navbar
In twitter, your profile image is displayed in each one of your tweets as well as your navbar. At the moment we just have placeholders that we added earlier, we can convert these placeholders img tags to use the profileImage that we are already using. Here is the code:
Display total amount of tweets
We want to display the total amount of tweets we have, later on we will display how many people the user is following and how many followers they have but they will all use the same way. Since we already have all our statues from mongo and we iterating through them to display each of them, displaying the total amount is extremely easy in Jade via:
Viewing user profiles via /[username]
When you use twitter you can see that when you visit a user profile by just navigating to their username e.g.: https://twitter.com/razor9116
At the moment we have no way of viewing other user profile pages simply because all the profile pages are /MyProfile and are generated dynamically for the user that is logged in. We are going to need to change quite a bit of logic to get it converted to using a username. We are going to write the new user route from scratch to avoid breaking the MyProfile part in the event we need to revert and so we can easily compare how both look.
We are getting the user for the username passed in if we find a user then we find all the statuses for that user and render the profile page with that user and statuses
These gave me quite a bit of trouble, the main problem I had was using User.find instead of User.findOne. This makes a huge difference using find will return an array of results whereas findOne return one result directly in JSON and if it is an array our profile jade code won’t work… We can use findOne because each username is unique. Another problem I noticed was using /:username can be very dangerous and any request that / can be directed to this route if you’re not careful with placement of the routes. I placed this route at the end of all the get requests so the only way it can get there is if no other route works.
Displaying edit profile button only on logged in users profile
Now we have the /username route working you may notice a bit of a problem we have an edit profile page on every single user page. This is a problem but also is completely useless as if you were trying to edit another user page it would actually update your page cause of the logic we have. Anyway, let’s disable displaying the ‘Edit Profile’ button on every page except our own. There are various ways to do this I am going to use a very simple way.
You can see we are checking if the page requested is the current logged in users page if it is we set isCurrentUser to true so our fields in jade can be displayed.
Right guys that’s the end of this tutorial and the end of messing with the MyProfile page at least for a while…I hope you enjoyed finishing it off and it gives you a sense of accomplishment like it did for me. Anyway, join me next week where we will make our home page actually look like a homepage then we will start on the page that the user sees as soon as they log in so join me next week!
p.s. all code is available here: https://github.com/TheDeployGuy/TwiiterClone