Check out a free preview of the full Advanced Elm course

The "Caching Exercise" Lesson is part of the full, Advanced Elm course featured in this preview video. Here's what you'd learn in this lesson:

Students are tasked with creating a single source of truth within the tab functionality in the application.

Preview
Close

Transcript from the "Caching Exercise" Lesson

[00:00:00]
>> Richard Feldman: Let’s move onto the exercises for Part 6.
>> Richard Feldman: Okay, inside our README, we have one page that we’re editing here. It is the home page, once again. All right, so this has to do with the very first thing that we talked about there, the making impossible states impossible situation.

[00:00:23]
So this one is talking about how we're going to render these tabs. So we want to change it so that there is a single source of truth for which tab is active. I've copied out sort of a description of the specification for how these tabs work in here so there is a business logic.

[00:00:36]
If the user is logged in, you should always render yourFeed as the first tab. So, for example, you might have Your Feed followed by Global Feed or Your Feed followed by Global Feed followed by the #dragons tag feed. If the user is not logged in, do not render yourFeed at all.

[00:00:52]
So, for example, we would have just Global Feed if we're visiting the page for the first time without logging in, or we might have Global Feed followed by the tag's specific feed. If the active tab is a TagFeed, render that tab last. Show the tag it contains with a hashtag in front.

[00:01:12]
So Global Feed #dragons, or Your Feed, Global Feed, #dragons. And finally, if the active tab is not a TagFeed, then do not render a tag tab at all. So this would be Your Feed, Global Feed, or just Global Feed. Okay so that's the business logic. And essentially what we're going to do is, we're going to re-factor this, such that it is actually using that single source of truth.

[00:01:36]
We've already gone sort of part of the way there, where we've already got the types modeled out like we had on the slide. So YourFeed, GlobalFeed, and TagFeed. And essentially all we have to do at this point is implement that logic such that it ends up being this effective source of truth.

[00:01:52]
So this is a case where in order to see it actually working, we're going to bring up the browser. So if we look at how it looks right now, we can see that we have no tabs, whatsoever. There should be some tabs up here but currently there are not.

[00:02:09]
When we're done successfully implementing this, we should see two tabs here. Sorry, first we should see only one tab which is Global Feed. If we log in, we should see two which is Your Feed and Global Feed. And then we should be able to click on some tags to see that the TagFeed has been selected.

[00:02:26]
Right now all we're getting is we're actually seeing the tags doing the filtering, but we're not actually seeing the corresponding tabs.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now