1
00:00:02,000 --> 00:00:05,000
So for the all events page

2
00:00:05,000 --> 00:00:08,000
the question is what we wanna to do there?

3
00:00:08,000 --> 00:00:11,000
And I would say that we probably still want

4
00:00:11,000 --> 00:00:14,000
to statically generate this page.

5
00:00:14,000 --> 00:00:17,000
So that we wanna fetch all the data in advance

6
00:00:17,000 --> 00:00:20,000
with get static props.

7
00:00:20,000 --> 00:00:23,000
Therefore, just us before on this page

8
00:00:23,000 --> 00:00:26,000
I'll export my async function,

9
00:00:26,000 --> 00:00:28,000
get static props

10
00:00:28,000 --> 00:00:31,000
and then in there we wanna get all the events

11
00:00:31,000 --> 00:00:34,000
and expose them full props

12
00:00:34,000 --> 00:00:36,000
to this all events page component.

13
00:00:37,000 --> 00:00:38,000
Now we do of course have

14
00:00:38,000 --> 00:00:43,000
this get all events function in API util.

15
00:00:43,000 --> 00:00:45,000
So we can utilize that

16
00:00:45,000 --> 00:00:50,000
and import get all events from not from dummy data,

17
00:00:50,000 --> 00:00:53,000
but from helpers API util

18
00:00:54,000 --> 00:00:56,000
and then go down there

19
00:00:56,000 --> 00:00:59,000
and get access to all events by awaiting

20
00:00:59,000 --> 00:01:02,000
the result of get all events.

21
00:01:02,000 --> 00:01:05,000
And then we return an object with a props key

22
00:01:05,000 --> 00:01:09,000
where I have my events which hold my events

23
00:01:09,000 --> 00:01:10,000
which I fetched here,

24
00:01:11,000 --> 00:01:13,000
simple like that.

25
00:01:14,000 --> 00:01:15,000
And now, since we exposed

26
00:01:15,000 --> 00:01:18,000
that full props We should expect props here.

27
00:01:18,000 --> 00:01:21,000
And now you use the events from the props.

28
00:01:22,000 --> 00:01:26,000
So here I'll set events equal to prop start events

29
00:01:26,000 --> 00:01:30,000
or alternatively we use object destructuring

30
00:01:30,000 --> 00:01:32,000
which is what I will do here.

31
00:01:33,000 --> 00:01:36,000
Now, we still need to use router hook here

32
00:01:36,000 --> 00:01:39,000
because here we're not using it to fetch some id

33
00:01:39,000 --> 00:01:43,000
or dynamic path segment value

34
00:01:43,000 --> 00:01:46,000
but instead we're using it for programmatic navigation

35
00:01:46,000 --> 00:01:48,000
which I still wanna enable here.

36
00:01:48,000 --> 00:01:50,000
So that stays the way it is.

37
00:01:51,000 --> 00:01:54,000
Now we can consider revalidating

38
00:01:54,000 --> 00:01:55,000
this page from time to time

39
00:01:55,000 --> 00:01:58,000
to make sure that we pick up new events.

40
00:01:58,000 --> 00:02:00,000
I think that makes a lot of sense

41
00:02:00,000 --> 00:02:02,000
so we should add revalidate here

42
00:02:02,000 --> 00:02:05,000
and then maybe set this to 60 seconds

43
00:02:05,000 --> 00:02:07,000
so that every minute

44
00:02:07,000 --> 00:02:09,000
if a new request is coming in,

45
00:02:09,000 --> 00:02:11,000
we regenerate this page.

46
00:02:12,000 --> 00:02:14,000
Now with that

47
00:02:14,000 --> 00:02:19,000
if I reload this again works just fine

48
00:02:20,000 --> 00:02:22,000
now, it's pregenerated though

49
00:02:22,000 --> 00:02:23,000
which is why in the page source

50
00:02:23,000 --> 00:02:26,000
we have all that event data.

51
00:02:28,000 --> 00:02:30,000
So that also works.

52
00:02:30,000 --> 00:02:32,000
Now,last but not least let's work

53
00:02:32,000 --> 00:02:35,000
on the slug on this slug page

54
00:02:35,000 --> 00:02:37,000
on this catch all page.

55
00:02:37,000 --> 00:02:39,000
That could be a bit more tricky

56
00:02:39,000 --> 00:02:41,000
because here we're catching

57
00:02:41,000 --> 00:02:45,000
multiple dynamic segments, multiple parameters.