In this video we're going to start talking about the edits stream page.
So I bet you can guess what this page is going to do.
And any time a user comes to the stream page we're going to allow them the opportunity to edit the title
or the description of a already created Stream.
Now in this video in particular we're going to talk about how a user can get to this page and how we're
going to figure out what stream a user is trying to edit.
Now when I say that it doesn't make a lot of sense.
So let me lay out a little scenario here for you.
If you recall when we show the index page we're going to show that delete an edit button next to any
stream that a user has created.
And so at some point in time a user is going to click on this edit button right here when the user clicks
on edit.
They're going to be navigated over to the edit stream page.
And so when we come over to this page we need to know what stream a user is attempting to edit.
In other words we need to kind of communicate which edit button the user clicked on over here to this
component.
This component needs to know what string the user is trying to edit.
Now in order to do this there's two different approaches we can use.
One approach we've seen earlier on inside discourse and another approach we're going to be able to use
only because we are now making use of re-act router Dom.
So let's talk about these two different approaches that we can use to communicate the stream that the
user is trying to edit from clicking on this button over to the edit stream component.
OK.
So option number one would be to use something like a selection reducer and we've already made use of
a selection reducer before we used it.
Inside the first redux app we put together inside this course if you recall we are that song's application
where a user could click on a song and then we had a selection reducer that recorded which song These
are had clicked on.
So as soon as user clicked on a song we updated the data being returned from that reducer.
And that was then shown on the screen to the user so we can make use of a selection we do at this time
around as well.
We could say that as soon as a user clicks on this edit button we would dispatch an action that says
that a user is trying to select or trying to edit this stream right here.
And then we can make sure that we communicated that information to the edit stream page.
So again that is one approach we could use.
Now the second approach we can use is only going to be available because we are now making use of re-act
router Dom.
So the second approach would be called you l based selection.
With this approach were going to essentially make sure that whenever a user clicks on this link right
here as opposed to just throwing them over to some path like streams slash at it they will instead go
to some address or some path that has the ID of the stream that they are trying to edit inside of the
address bar.
So in other words with you are l base selection were going to put the idea of a stream that is being
edited inside the you or l.
Now that's a bit challenging to understand so let's take a look at a quick diagram to help you understand
what I mean by that.
All right so we looked at this diagram a while ago we looked at this when we were talking about navigation
inside of application and we had said that we had a collection of different paths that would route our
user to a bunch of different components.
So I told you that we would use streams flash at it for stream edit stream flashily stream delete and
streams slash show for streams show.
But if we want to use Eurail based selection then we're going to change these paths right here just
a little bit.
Let me show you how these would change if we want to use your L based selection.
And as a quick reminder here the entire idea is that we're trying to communicate what streamlet user
is trying to edit down into this component.
All right so here's how we would change things if we wanted to use you or L base selection.
So notice how we now have streams slash at it slash ID.
We have streams to ID and streams ID as well.
So the common theme between stream added streams show and stream delete is that each of them are operating
on a very single stream with stream as it were trying to edit a very specific stream with stream delete.
We're going to try to delete a very specific stream and with streams show we're trying to show the user
a very specific stream as well.
So because these are all working with very specific records we could use you are l based selection with
each one.
So you'll notice that they all have their pads changed just a little bit.
Each one of them has a final slash and then a colon ID.
Now Culin idea right here specifically with the colon means that ID or that part of the your L is essentially
a variable.
So rather than having like colon ID we are essentially saying that if a user goes to stream's at it
slash anything a user will be going to stream at it.
So we could have a URL like streams edit slash 50.
And that would indicate that the user is trying to edit the stream with the idea of 50.
If a user went to streams at a 5 that would mean that we should show the stream edit component and that
the user is trying to edit the ID or the record with the idea of 85.
Its the same thing with the other Patsi here as well.
If a user goes to stream's slash 92 it means that we should show streams show and the user is trying
to view the record with an ID of 92.
So again any time that you see colon and then some label inside the path that essentially means it has
a variable so because we can put the idea of the record that the user is trying to edit inside the OR
L we can make use of re-act router Dohm to look at the URL and pull off just that portion of the rail
like just that little variable right there.
And so again if it's something like say 17 then we can take that 17 and pass it as a prop into the stream
edit component.
And so then the stream at a component will know that it needs to show the stream 17 and allow a user
to edit specifically the stream with ID 17.
All right.
So that's pretty much the idea.
Again we had two options here.
We could either use a selection reducer or Eurail based selection wherever possible.
We prefer to use your cell based selection because there are a couple of other benefits around it that
are only going to make sense once we start putting the solution together.
So we are going to come back to this topic once we start working on it a little bit more.
And I'm going to point out some other big benefits around using your L based selection.
All right so enough of the high level concepts here.
Let's take a quick pause right here.
When we come back the next section we're going to start updating our routing configuration to make use
of these kind of variables inside of our you are l and we'll figure out how we can access that piece
of information inside of our stream edit component.
So quick pause and I'll see you in just a moment.