Check out a free preview of the full Introduction to Elm, v2 course

The "Maybe & Pipelines Exercise" Lesson is part of the full, Introduction to Elm, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Students use Maybe to fix a bug related to users' avatars, and use pipelines on the Edit Article page.

Preview
Close

Transcript from the "Maybe & Pipelines Exercise" Lesson

[00:00:00]
>> Richard Feldman: That's bring us to the Exercise for Part 6, this is going to be about editing articles. So we've got our whole big application once again like before. We're gonna be building it the same way as before, same command. The only difference is that this time we're going to be working on to-dos across two different files.

[00:00:19]
So one is source/avatar.elm, the other is page article editor. We're recommended to start with the avatar one, so let's take a look at that. So to see the symptoms of what's going on here, we're going to build this, okay.
>> Richard Feldman: And when I refresh the page we're gonna see the results of having built this with Part Six instead of Part Five.

[00:00:49]
So in Part five everything looks all nice on this field, we've got this little thumbs up Emoji person going on here. In Part six though these are broken image links, uh-oh, so the reason for that is that we have a bug that we are going to fix. So resolveavatarUrl.

[00:01:07]
This is a function that takes a Maybe String and then converts into a String. So essentially, some users have specified a custom avatar image for their profile. They've uploaded a photo, or they have links to a photo, but quite a lot of users haven't, they're just working on the default photo.

[00:01:26]
So the purpose of this function is to resolve that, it's to say, either we want to use the photo that you specified, or if you didn't specify a photo, we're gonna fall back on a default one. Which the real world example app calls smiley-cyrus which looks like this.

[00:01:40]
So this is our default avatar which we're gonna use as our fallback and that link is right here in the comment. And we're only going to use that if they didn't provide one in the maybe. So this maybe is going to have either just, in which case it's going to give us here's the photo to use, gonna return that URL.

[00:01:59]
Or if it was nothing, we're gonna fall back on our good friend smiley-cyrus here. Okay, so that's the first issue we need to resolve. The second one, if we go back to readme said, src/Page/Article/ Editor.
>> Richard Feldman: Now inside of here, we're going to have a to do, which talks about pipelines.

[00:02:20]
So essentially this is a bug where when we are editing an article. It's a pretty wierd edge case, which is that when we are putting the tags into the article. Sometimes they don't work if they have multiple spaces between them. So if I put in tag1 tag2 tag3, that'll work.

[00:02:40]
But if I put too many spaces in between them, it doesn't work, it no longer edits the tags properly, we get an error. So, we are gonna fix this bug by essentially normalizing these tags and stripping out this extra white space. Because really that shouldn't be an error, that's just somebody put in an extra space.

[00:02:58]
It's pretty clear what they meant, we're just going to fix that for them. So, to do this, we need to use list dot filter and add that on top of this very small pipeline that we already have going on here. So, we're gonna add an extra thing down here.

[00:03:10]
That's going to do some filtering on top of the trimming that we've already done. So the first thing we do is we split the string around spaces, then we trim each of the elements inside that. And now finally we're going to use the filter to strip out the empty ones and drop them from the tag list.

[00:03:25]
And now we fix the bug.

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