Create Sections Frontend

In this lesson, we're going to work on sections frontend

Create Sections frontend#

Now that our backend part is ready, we can start working on our frontend. Let's start with registering our endpoints inside agent.ts file. Inside Lectures, we can make a create endpoint; this will have data and it will be a post request which will return a string. The endpoint is going to be simply lectures and we will pass data. Data will have courseId of type string, sectionName of type string and lectures of type LectureDto array. Let's register publish endpoint now inside courses. As data, we will pass courseId of type string. This will be a post request as well which will return a string. Endpoint is courses/publish/courseId. We will also pass an empty body.

client/src/actions/agent.ts

Let's create a new page now called SectionPage and export it to start. Let's register it inside App.tsx file. The path will be /course/lectures. Course will be dynamic, so we can use colon before it. This form is going to be a bit complicated because one section can have multiple lectures. Let's start with state; we will have a class for sectionName with default value to be an empty string. Let's create another state for lectureForm. We can give it default type any and default value will be an empty array.

client/src/App.tsx

Like I told you before, this form is little complicated, so we will not use form from antd, which means we will have to do form validation by ourselves. So for validation, we can create a new function called prevIsValid because if we create a new lecture, we want to verify that the last lecture is not empty. So if it's the first lecture, which means if length of the form is zero, we can return true. Now let's create a variable someEmpty, which will check if any value inside itemForm is empty. We can use lectureForm dot some. Now we will check if item.Url or item.Title is empty. This will go through the entire lectureForm and will return true if any of the value is empty.

Now we can set the errors. For that, we will run a forEach loop on lectureForm. This will have item of type any and index of type number. Although we don't need the item, we need the index. Let's create a const allPrev which will be a copy of our lectureForm. Now we can check if lectureForm with index.title is an empty string; we can now set the error, so we can do it allPrev on index dot errors dot title. Error will be Title is required. Same will be applied for the Url, so we can copy it and replace title with url. We can now set lecture form to be allPrev. Finally, we can return opposite of someEmpty.

We will write another function which will be responsible for adding new lecture fields. Let's call it handleAddLink. We will get an event as a parameter; so we can start with event dot preventDefault. Now we can write the initial state of the form. Let's create inputState, with title and url being empty string. We also have errors, so we can create errors with title and url being null. Now before adding new lecture fields, we want to check if previous field is valid, so we can check if previIsValid function returns true. If it does, we can setLectureForm, with previous values and adding input state to it.

We can also give an option to delete the lecture field; so we can create another function called handleRemoveField. This will accept event and index. We will start with event dot preventDefault. After this, we can setLectureField. We will have previous values, and we can filter the previous values and remove the fields with this index.

Let's work on the handleChange function now; we will receive index and event as parameters. Now let's setLectureForm; we will get previous values, so we can map over them. If i is not equal to the index, we can simply return the item. Otherwise, we can return the item, and add event target name to be event target value. Now let's set the errors. Let's add the previous values first; we can write event target name. We will only show the error if there is no character inside the input field, so we can check if event.target.value.length is more than 0, then we will return null; otherwise, we will return "event target name is required".

 

Loading...

Start a new discussion. All notification go to the author.

Loading...