Creating Lecture Slice

[00:00 - 00:05] We have finished working on the lectures backend. Let's start working with the lecture model.

[00:06 - 00:13] So we can open our client project inside SRC, inside models. Let's create another one for our lecture.

[00:14 - 00:22] So let's write lecture.ps. Let's export our interface.

[00:23 - 00:31] And let's write the lecture. The lecture that we are returning from our backend has a cost name of type string.

[00:32 - 00:42] It has sections, which will be an array of section DTO. So let's write section DTO and we will create it right now.

[00:43 - 00:54] And also it's returning current lecture. So let's write current lecture, which has type number.

[00:55 - 00:59] Now we can write the section DTO. So again, export interface.

[01:00 - 01:09] Let's write section DTO. And this will have the section name of type string.

[01:10 - 01:20] And it will have list of lectures. So we can make it lecture DTO and make it a list.

[01:21 - 01:45] Now in the bottom, we can write our lecture DTO interface. And this will have ID of type number, title of type string and URL of type string.

[01:46 - 01:56] We can now use this model inside our lecture slice. So if we go to Redux and inside slice, we can create a new slice.

[01:57 - 02:05] Let's call it lecture slice. And first of all, we will need lectures adapter.

[02:06 - 02:18] So let's write const lectures adapter. This will be equal to create entity adapter.

[02:19 - 02:29] And this will have a type lecture, the model that we just created. So let's also import lecture.

[02:30 - 02:38] And on top, we can write a lecture state as well since we are here. So let's write interface lecture state.

[02:39 - 02:46] So our lecture state will have lecture with type lecture. And it can also be null.

[02:47 - 02:53] So we can use a pipe followed by null. Our lecture state will also have a current lecture.

[02:54 - 03:03] So let's write current lecture and this will have a type number. This will have a current video.

[03:04 - 03:20] So let's write current video of type string because it's going to be a URL. And finally lecture loaded property, which will tell us if the lectures are loaded or not and this will have type Boolean.

[03:21 - 03:34] And now let's create lecture slice. So here, let's write export const lecture slice, which will be equal to create slice.

[03:35 - 03:48] So create slice. And as you know, it takes a name, which will be simply lecture.

[03:49 - 04:04] It will have an initial state. So here we can write initial state, which can be lecture adapter dot get initial state and we will give it a type lecture state, which we just created.

[04:05 - 04:16] And inside, let's write our default properties. So the lecture will be null by default lecture loaded property will be false.

[04:17 - 04:35] Current lecture will be zero because it's a number and current video will be an empty string. And now we can write our reducers and inside the reducers, we need set current lecture function and set current video function.

[04:36 - 04:56] So let's start with set current lecture and this will have state and the action . And this will simply make state dot current lecture to be action dot payload.

[04:57 - 05:11] And the same way we can write our set current video function. So let's simply copy it and below this, we can replace that current lecture with set current video.

[05:12 - 05:26] And now we can write our async tongue functions, the functions which will be responsible for fetching the data from our backend. So let's start with get lectures async function, which will make the API call to get the lectures.

[05:27 - 05:49] So let's write export, const, get lectures async and this will be equal to create async tongue. From this function, we will either return lecture or undefined.

[05:50 - 06:10] And as a parameter, we will pass the course ID so we can write course ID, which will have a type string. Let's give it a name lecture slash get lectures async.

[06:11 - 06:16] And now we can write our async function. So let's write async.

[06:17 - 06:28] And here we are passing course ID as the body. And we also need thunk API.

[06:29 - 06:36] And here we don't want it to end. We can write it here and inside we can write the try catch blocks.

[06:37 - 06:59] Let me write try and catch. We will have error type any and inside the catch block, we can return thunk API dot reject with value where the error will be error.

[07:00 - 07:03] And inside the try block, you want to return await. We need agent.

[07:04 - 07:13] So let's make sure that it's available and yes, it is. And from the agent, we don't see lectures because we forgot to add it.

[07:14 - 07:32] So let's go to agent dot T is file and below payments, let's create one for the lectures. Let's start with get lectures.

[07:33 - 07:42] And here we are passing course ID. So let's write course ID of type string.

[07:43 - 07:53] Since it's a get request, we will use request dot get. And the URL here is lectures slash the course ID.

[07:54 - 08:04] So we can use dollar and the curly brackets and inside we can pass course ID. And from this API call, we are expecting lecture.

[08:05 - 08:09] So let's import lecture. And the second request is set current lecture.

[08:10 - 08:17] So let's write that as well. Set current lecture.

[08:18 - 08:28] And here inside the values, we have course ID and the lecture ID. So let's start with lecture ID, which is type number.

[08:29 - 08:35] And course ID, which is type string. And now it's a put request.

[08:36 - 08:54] So we can write request dot put. And here it is lectures slash set current lecture.

[08:55 - 09:01] And since it's a put request, we are also passing the values. So let's write values, which are lecture ID and the course ID.

[09:02 - 09:17] Finally, we can export lectures as well. And now here we can write agent dot lectures dot get lectures and pass the course ID.

[09:18 - 09:30] And let's add semicolon here. And the curly brackets should come before our normal brackets.

[09:31 - 09:36] And now we can create a second function. This will be called set current lecture async.

[09:37 - 09:50] So below this, we can write export set current lecture async. This will be equal to create async tongue as well.

[09:51 - 10:00] We are not expecting anything from this function. So we can write void and as body, we are passing lecture ID.

[10:01 - 10:28] So let's write lecture ID of type number and course ID of type string. And now we can give it a prefix name, which can be lecture slash set current lecture async.

[10:29 - 10:41] And now we can write our async function. So let's write async and inside curly brackets, we can write lecture ID.

[10:42 - 10:46] And course ID. We also need tongue API.

[10:47 - 10:55] So let's write tongue API. And here as well, we need the try catch block.

[10:56 - 11:17] So let's be a little lazy, copy it from here, paste it here and replace this request with agent dot lectures dot set current lecture and pass lecture ID and cause ID. And it should be export const.

[11:18 - 11:21] So let's write that. And we're not returning it.

[11:22 - 11:31] So let's get rid of the return and this will resolve this error. And now that we have written our functions, we can start working on the extra reduces.

[11:32 - 11:41] So below our reduces, we can write extra reduces. And this will have builder.

[11:42 - 11:49] So here we can write our ad cases. So let's start with the ad case for pending state.

[11:50 - 11:58] So let's write get lectures async dot pending. And now we can write the function.

[11:59 - 12:10] We don't need action. And inside we can make state dot lecture loaded to be false because it's pending and not yet resolved.

[12:11 - 12:24] Now we can write it for the fulfill state. So let's copy it and replace pending with fulfilled and also write action.

[12:25 - 12:39] And now if we want to make state dot lecture loaded to be true, I want to set the lecture state dot lecture to be action dot payload. And since it can be null, I will write an exclamation mark.

[12:40 - 12:50] Also I want to set the current lecture. So state dot current lecture, this will be equal to action dot payload dot current lecture.

[12:51 - 12:56] And again, let's write exclamation because it can be null. Finally, let's write use case for the rejected state.

[12:57 - 13:16] So again, I will copy it from here, make pending rejected and make the lecture loaded to be true because now it's rejected and not yet loading. And we don't have to write any ad case for the set current lecture endpoint because anyways, Redux is storing the current lecture property.

[13:17 - 13:25] And when the user refreshes the page, we will anyways receive the latest current lecture property. Now finally, we can export our functions.

[13:26 - 13:44] So let's write export const and we can export set current lecture and set current video from lecture slice dot actions. Before ending this lecture, let's also register this inside configure store.

[13:45 - 13:57] So here we can write lecture to be lecture slice dot reducer. And now we can start writing the course page from the next lecture.