All language subtitles for 021 Working with Query Parameters_en

Lots of features were added already.

Now I wanna dive into query parameters.

Query parameters are special parameters

which you find on some URLs

at the end of the URLs.

On some URLs,

you have a question mark.

And then, thereafter you have parameter pairs,

which basically pass extra data

into the page that was loaded.

The difference compared to regular route parameters,

like our quoteId parameter,

is that the regular parameters,

like quoteId, are mandatory.

So, this QuoteDetail page is only loaded

if we have an ID,

if we have this segment.

Whereas query parameters are optional.

The question mark thing here

does not change the route matching.

It has no impact on which route is matched.

But whichever route is matched

then has access to that query parameter data

to, for example, change the behavior of the page

that was loaded.

And what could be a changed behavior?

Well, for example,

here on this quote list page here,

we might wanna implement sorting.

So that our quotes are sorted in ascending

or descending order by ID

and therefore by age, for example.

For this, I'll first of all

add such a sorting functionality.

So, some logic to sort the components.

And then as a second step,

I wanna set and use query parameters

to save the current sorting.

So that we could share a link like this

which has some query parameters.

And if another user uses that link,

the quotes would automatically be sorted as we sorted them.

So that we can save that extra bit of information

on how the quotes should be sorted in ascending

or descending order

that we can save this piece of information in the URL.

And we do sort them accordingly

if someone uses this URL.

And if we use this URL

without the query parameters,

we get the default sorting.

That's what I wanna implement now.

Now for this, I'll start here in this JSX code,

in this fragment.

Here I wanna add a new div

with a class name of classes.sorting.

That's simply one of the predefined CSS classes

you find in that CSS file,

which was part of the starting project.

And in that div,

I just wanna add a button,

which should say Sort.

And then actually it will say Sort Ascending for now,

but later this will be dynamic,

so that if we are currently sorting in ascending order,

this button says Sort Descending

because we would be switching

to sorting in descending order

and vice versa.

But for the moment, I'll hard-code it.

Then we wanna add a click listener

and fire a function when this button is clicked.

For example, the changeSortingHandler function

could be a function we define here.

And then we point that to this function here.

And now the goal here is to change

how we sort our quotes.

Now for this, we could use a state

and then execute some code

that sorts our quotes.

And update this state then

and output our state quotes.

So the sorted quotes down there,

but I'll not do it like this.

Instead I wanna work with query parameters.

And one of the things I wanna do here

in this changeSortingHandler,

is I wanna update the query parameters

in the URL.

So, for the moment,

I'll not sort yet,

but I'll just update the URL

so that we update this shareable URL.

And for this,

we can again import a hook from React Router.

So, from React Router DOM, I'll import a hook.

And the hook I'll import is again

the useHistory hook,

because you'll learnt that this hook allows us

to change the page history.

It allows us to change the URL therefore.

And we can use this hook

and the history object it returns

to add query parameters

to the currently loaded page.

For this, I'll just execute useHistory,

and I'll get this history object.

And now in the changeSortingHandler,

we can call history push.

Push or replace,

and I'll go for a push

so that we could use the back button to go back

to the last sorting,

to the URL before we changed it.

And then here, we can set our new path

and there, I wanna set it to '/quotes'

because that's the page in which we are.

And then I wanna add a query parameter

with a question mark,

and then sort,

and set this equal to some value.

Now this key name is up to you by the way.

It doesn't have to be sort.

but I will use sort as a key

which holds my sorting information.

And then I'll set a dynamic value here,

which I derive on our current state.

So, if we're currently sorting in ascending

or descending order.

And we will later make this truly dynamic.

For the moment, I'll always add ascending here.

And therefore, of course, for the moment,

we could also just use one hard-coded string.

But soon this will be dynamic

and it will not always be ascending.

Now, if we save this code like this,

you will now see this button.

And if I click this button,

you see the URL changes

and this query parameter is added.

Now that's step number one.

Step number two is that we wanna read

that query parameter value

and act accordingly.

And then change the sorting,

change the button label

and so on.

Now, reading query parameter values

is also relatively straightforward,

but we need to use yet another hook

provided by React Router DOM,

the useLocation hook.

Where useHistory gives us access

to the history object,

an object that allows us to change

and manage the URL,

useLocation gives us access to a location object

which has information about the currently loaded page,

about the currently loaded URL.

So here we can call useLocation

and we get such a location object.

And then for the moment,

I'll just log location here

directly in the component function.

With this, if I opened the dev tools,

if I reload, we see this object,

that's our location object.

And here we see a bit of information.

We see the path name, for example,

of the page which was loaded.

And we see this search property,

which holds our query parameter data.

And that's very interesting.

Also interesting is that if I click Sort Ascending,

we see that this location object

gets logged over and over again.

So, that means that pushing this page here

actually rerenders this component.

And that actually makes sense

because when we push a page,

even if it's the page we're currently on,

then this page component is re-evaluated,

because React Router sees that we changed the history

and it therefore rerenders the page

which should be shown to us,

even if it's the page we're currently on.

And that's a useful mechanism

which we will actually use to our advantage

in a couple of minutes.

So, we got this location object

which has this search property

with the query parameter data.

Now we can translate this

into a JavaScript object,

which is a bit easier to use for us

than this plain string here,

by instantiating a new URLSearchParams object.

And that's a built-in constructor function

built into the browser.

So this is not coming from React Router,

not coming from React.

This is a default JavaScript constructor function,

a default JavaScript class so to say,

which we can use in the browser.

Now to this constructor,

we can pass location.search.

So, this string here,

including the question mark,

this is now passed to that constructor.

And that will then give us

a nice queryParams object.

Our object where we can then extract

our query parameters by key.

So here, for example, I have the sort key

with a value of asc

and because I'm using URLSearchParams,

this queryParams object will now have a sort key,

which will hold this asc value.

And that's simply a more convenient way

of extracting data from the query parameters.

So now, we can create a new helper constant,

and we could name it isSortingAscending.

And here we can now use queryParams

and there we can call a get method.

And get one of our queryParams keys,

in this case sort.

Sort, because we have sort as a key here

in our queryParams.

This will then give us the value stored

for that key in the queryParams.

So in this case, A-S-C, asc.

And now we can check if that

is then equal to asc here.

And if that is equal,

we know we are sorting in ascending mode

because the query parameter has a value of asc.

If the query parameter has a value different from asc,

then this will be false

because then we're not sorting in ascending mode.

And now we can use isSortingAscending

to, for example, make this button more dynamic.

It should not always say Sort Ascending,

instead, depending on if we're currently

sorting in ascending mode or not,

it should say Sort Descending

if we are sorting in ascending mode,

because then clicking the button

should switch to descending sorting.

And only if we are currently sorting

in descending order,

clicking the button should switch to ascending order.

So, then it should say Sort Ascending.

And I also wanna make this dynamic now,

how we change our URL.

I don't always wanna set the value

of sort to asc.

Instead here, I wanna check if sort ascending,

if sorting ascending,

if that is true,

which means we're currently sorting

in ascending mode.

And if it is true,

I wanna switch to descending mode.

And only if it's false,

so if we're not yet sorting in ascending mode,

I wanna switch to ascending mode.

And with those changes made,

if we save this,

we see that if I now click this button,

the URL changes

and the button text also changes.

The list does not yet change,

but we are changing the query parameters.

And now we can also use that

to sort the list.

Now, for this attached you find a sorting JS file,

which contains a sortQuotes function.

You can simply add this function

in your QuoteList component file

before you define that QuoteList component function.

So, right after the imports,

before I have my component function,

I insert sortQuotes.

Now that's a little helper function

which will simply sort an array of quotes by ID.

And then depending on whether we're sorting in ascending

or descending order,

the bigger or smaller IDs will be prioritized.

And we can now call sortQuotes

to derive our, well, sorted quotes.

For this here in this component function,

we can get our sortedQuotes by calling sortQuotes

whenever this component rerenders.

And here we then pass in props.quotes.

So, the quotes we get through props.

And as a second argument,

sortQuotes wants to know the order.

It wants to know whether we wanna sort

in ascending or descending order,

and it wants a boolean here.

And here, I'll therefore pass in isSortingAscending.

And then sortedQuotes can be used

to actually output the quote items.

So, here I'll use sortedQuotes

instead of prop quotes.

And since this component function will be re-executed

whenever we change the query parameters,

we will get new sorted quotes

whenever the query parameters change.

So with this, now, if I reload,

if I click Sort Descending,

you see the order of my list items also changes.

So now, here we can sort,

and now we got this reusable URL.

And if I grab that URL,

for example in descending mode,

and I share it with someone,

that person also starts in descending mode.

If I grab the URL

and share it in ascending mode,

that person also starts in ascending mode.

So, that's an example for using query parameters.

And that's how we can work with them

with React Router.