Adding Categories Bar
In this lesson, we're going to add Categories bar
Adding Categories bar#
We have spent a lot of time working on the categories. We have made a different controller and a different DbSet for this. I want to use this just below our navigation bar. I have seen a lot of e-learning applications using categories like that, so let's start working on that.
Let's go to our agent.ts file first. Like Courses, let's make another const model called category inside models folder. This will have an id of type number, name of type string and course which can either be array of Course, or an empty array or null.
client/src/models/category.ts
import { Course } from './course';
export interface Category {
id: number;
name: string;
course: Course[] | [] | null;
}
Now let's go back to the agent.ts file and create Categories like we have Courses. Inside, we will use the list again. This time, type will be an array of category and the endpoint wil be categories instead of courses.
We can now add it to the agent object.
client/src/actions/agent.ts
import axios, { AxiosResponse } from "axios";
import { Category } from "../models/category";
import { PaginatedCourse } from "../models/paginatedCourse";
axios.defaults.baseURL = "http://localhost:5000/api";
const responseBody = <T>(response: AxiosResponse<T>) => response.data;
const requests = {
get: <T>(url: string) => axios.get<T>(url).then(responseBody),
post: <T>(url: string, body: {}) =>
axios.post<T>(url, body).then(responseBody),
put: <T>(url: string, body: {}) => axios.put<T>(url, body).then(responseBody),
del: <T>(url: string) => axios.delete<T>(url).then(responseBody),
};
const Courses = {
list: () => requests.get<PaginatedCourse>("/courses"),
};
const Categories = {
list: () => requests.get<Category[]>("/categories"),
};
const agent = {
Courses, Categories,};
export default agent;
This page is a preview of The newline Guide to Fullstack ASP.NET Core and React