So to update what we see on the page,
I'll actually start by getting my selected year
by taking a look at the filter,
and I'll add a question mark here
so that we only continue if it's defined,
and otherwise, will just return undefined
and store that in selected year.
But if it's defined, we know it will be an array,
and we can then use this notation
to access the first stored value in that array.
And that, as you just saw before,
would be the selected year.
So that's what I'm trying to access with this notation
if filter is defined.
An alternative way of writing this would be
a ternary expression, where we check if filter is truthy,
so if it's not undefined,
in which case we want to access the first element.
Otherwise, we store undefined in selected here.
But of course, since that's a bit longer to write,
I'll go for this more concise notation.
Now we might not just have a selected year,
but also a selected month,
so therefore, I'll also try to access the second element
that might be stored in this filter array.
And if that doesn't exist,
we'll just store undefined in selected month instead.
Now, with that information gathered,
we can create a news variable, which is undefined initially,
but we can then check if selected year is truthy,
and selected month on the other hand is falsy,
which means we have some year but we don't have a month,
in which case, the news I wanna output should be the news
for a given year, which I can get with help
of that get news for a year utility function,
which is imported from the news file in the lib folder.
And we passed the selected year to get news for a year.
So therefore then we would have the news,
and now below the header here,
I wanna output the news list with those news.
Now, of course, news could be undefined,
therefore, I'll actually add another check here
and another variable first, which I'll name news content,
which initially is a fallback paragraph that says
no news found for the selected period
or something like this.
And then we can check if news is defined,
and just to be sure, if news is an array
with a length greater than zero,
so that we have at least one news item,
and in that case, I'll set news content equal to news list
using that news list component we worked on earlier,
and I'll set the news prop.
They are equal to the news we identified,
so equal to the value stored in our news variable,
and it's now that news content here that should be output
below the header.
So down there, we can output the news content.
And if it's undefined, we'll simply not show anything.
Of course, this won't work
since I now would have two root JSX elements here,
which is not allowed.
Therefore, we should wrap this with a fragment like this,
and we can get rid of this code.
Well, and with that, we should show some news
if we have a selected year.
Therefore, now if you save that
and you are on archive/2024,
you should see the news for that year,
but if you switch to a different year,
you should see the news for that year instead.
And if you go back to just archive without a year,
you see the fallback text instead.
And that's already a first improvement,
but now as a second step, I actually wanna make sure
that instead of showing the years, I show the months
for which we can select news
if we did already select a year.
So the links should be updated if a year was selected.
Therefore, I'll change my links here
from a constant to a variable,
and define it a bit earlier,
right here below the news maybe,
and by default, I'll try to get the available news years,
but then if we have a selected year
but not a selected month,
I want to update the links,
and instead of setting them to the available years,
I wanna set them to the available months
for the selected year, which we can get
with help of another utility function provided
in that news.js file I provided earlier.
We can call the get available news months function there,
and this function then wants the selected year as an input,
so we pass that to this function
and that will then give us some month identifiers.
Now, if we would leave it like this and save everything,
we therefore would get these month numbers.
And if we then click on a month, we see we get an error
because the rest of the code is not adjusted yet,
or we don't get an error but we see our fallback text
because actually, the URL changed to archive/3,
so we try to use 3 as an identifier for a year,
and indeed, we have no news for the year 3.
So it's not enough to just update the links here,
we also need to update the code down there
to render a different path for different links.
So I'll actually add curly braces here
and return my list item like this
so that we can add more code in front of that
inside of our map function,
because I now want to dynamically derive the value
for the ref prop on the link
by checking whether we have a selected year,
which means we're now showing the months,
in which case the full path to which I wanna navigate
is /archive/ the selected year,
but then / the link value,
so the identifier for the month.
And it's only if we don't have a selected year
that I want to show the standard links
where I wanna navigate to /archive/link,
where link will be a year,
and it's then this ref value that should be used as a value
for the ref prop down there.
With that, if you save that,
you now see that if you click on a month,
we are indeed on /archive/2024/1,
so at least the path is correct now,
but of course, we're now back to this navigation,
where we see the years
and we still only see the fallback content.
Now, we see the fallback content here
because we're never trying to load the news
for a year-month combination,
and we should of course do that,
so we should tweak the code in this page.js file
and check if we have a selected year
and we also have a selected month now.
So we have both because, in that case,
the news should be the news for year and month,
and this is a utility function defined in that news.js file,
which wants both a year and a month input,
so it needs both the selected year
and the selected month like this.
And with that now, we see the news
for the selected year-month combination.
Now, I just also wanna make sure
that this navigation here disappears
if we have such a year-month combination,
and I'll achieve this by also setting links
to an empty array here
after loading the news for a specific year and month.
With that, the navigation is gone here,
but if we go back, it reappears
depending on what we're currently filtering for.
And of course, we can click these news here
and we're taken to the news detail page,
so that also still works as it should.
And that's how we can use this catch all feature here
to define one page that will be active for different paths,
which in our case here,
allows us to show this filterable news list.
And by the way, if you would try to add more segments here
or unsupported segments, due to the way we built this,
you would always see this fallback content,
which I guess makes sense,
though you can also change this behavior,
and that's what we'll do next.