Original subtitles

Our application is looking pretty good.

And in this video I would like to start to add in a new feature.

Let's first discuss exactly what this feature is going to be here's so we're going to try to do.

I want to add in the idea of comment moderation.

So in other words I want to take a look at the content of every comment that gets submitted and depending

upon whether or not it has some very specific word we're going to flag that comment in some way and

say hey this thing is not permitted or something like that.

We're going to flag comments that contain the word orange.

So it's going to be a very simple filter.

We're going to literally say does the comment contain the word orange.

If it does there's something wrong with this comment.

We want to flag it in some way.

Let me give you a little bit more detail on this feature.

Just to clarify a couple of different things.

So first off if we were doing some simple filtering like this and just trying to say whether or not

a company had orange it would make a lot of sense to implement it.

Justin the react application but let's just pretend for a second that maybe the filter laced list changes

very frequently.

In other words that word orange maybe in five minutes we need to change it to banana or something like

that if that was the case we would not want to hard code any filtering logic directly inside the react

up because then every single time we wanted to change that filter key word we would have to redeploy

the react application.

The next thing that we're going to assume here is that although it would be super easy to implement

this in the existing comment service we already have.

We're going to say that for some reason who knows what it is.

We want to create a new service.

So we are going to make a new service to implement this kind of filtering or moderation logic.

The third little assumption we're going to make here is that in some scenarios you'll see a Y and a

little bit.

We're going to assume that it may might take a very long time for the new service to actually moderate

a comment.

So at the end of the day we are really just checking to see if a string contains orange.

But we are going to assume that maybe that is going to take minutes or even hours to actually complete

OK.

So let me show you a mockup of what I want this app to eventually look like after you make this change.

So we will imagine that we've got three posts right here in each of them has one comment.

So each of these comments can be in one of three different states.

The comment can be successfully moderated.

So as you see right you're in the middle one this string does not contain the word orange or anything

like that.

So we show that come into the user the other state.

A comment can be N is awaiting moderation.

So this is the scenario in which maybe it takes five minutes or an hour to actually run that moderation

logic.

Again it's really just a simple string comparison but you'll see why we kind of have to make this assumption

from the get go if we are waiting moderation then we should display something like this to the user

something and says this comment is awaiting moderation.

And then finally the third possible state is the case in which the comment contained the string orange.

So in that scenario we want to display it to the user.

This comment was rejected and let them know that there was a comment there.

But for some reason we are filtering it so from the get go.

I want to point out that there's kind of one assumption we can probably make here very easily without

a doubt based on the mockups you're just looking at we know 100 percent that the react application needs

to yield and tell whether a comment is awaiting moderation rejected or approved.

Right now the react application thinks that a comment has this structure you see right here react out

thinks that comments just have an I.D. and content and that's it.

So to really tell the react app whether a comment is moderated rejected or approved we're going to add

in an additional little flag to every comment.

And that flag will be a string of approved rejected or pending as you could guests approved means that

we've filtered this comment.

We've made sure that it doesn't contain the string orange or whatever else.

Rejected again as you can probably guess means that well for some reason we don't want this comment

displayed to the user.

So if the status is rejected we want to show that right there.

And then finally if the comment is pending that means that we're still trying to do that filtering logic.

And in that scenario we should display this coming as a waiting pending me awaiting moderation over

here.

All right.

So in this video I've now spent about four minutes telling you about what appears to be a very simple

and straightforward feature and I cannot stress that enough this feature looks crazy simple at first

glance.

But as we start to implement this you're going to see that there is some incredible hidden complexity

here.

There is way more going on than you would ever expect and implementing stuff like this turns out is

a little bit more challenging than if we were in a very simple model style world.

OK.

So let's take a pause right here and come back next video.

We're going to take a look at the current design of application and talk about how we can change it

to implement this feature.

And we're going to see some issues start to arise along the way the quick pause continue.

Just a minute.