We need to create a view for student ambassadors and I’m working on this.
Awesome @anjisvj! 
The next step is to make the GET /ambassadors endpoint to send a paginated payload.
Cool. I will work on that.
I had some blockers but now there are no any blockers. So I wrote the code for pagination in the backend here is the draft pr. I will work on the frontend once this reviewed.
Thanks for the update @anjisvj! 
You can work on implementing the frontend while this is being reviewed.
There’s a small blocker I have. I’m working on implementing the frontend. but I can’t figure out it how to do it with axios.
Hi @anjisvj,
Yeah this is a little bit complex task. After you implement this, it will be great help for other developers.
This is a good start to axios :
To paginate this table you should follow this:
https://ant.design/components/table/#components-table-demo-ajax
(There are some irrelevant implementations such as filters, let us know if you get confused)
When implementing this, you need to add a handler and a pagination object for the table,
Keep the pagination object on the state.
Pagination object contains the current Page number (pageNo), Page size (limit), total (total ambassador count on the database; it’s on the payload)
this.state = {
pagination: {
current: 1,
pageSize: 10,
total: 100,
},
}
Whenever the user clicks on a page number, it will fire the function we provide as the onChange event.
(On this case it is this.handleTableChange)
Ex:
<Table
columns={columns}
dataSource={data}
pagination={this.state.pagination}
onChange={this.handleTableChange}
/>
The handle change function receives three params; pagination, filters, sorter
In this case, you only need the pagination, It will contain the page number user has clicked. ex: if the user clicked on the 10th page, the pagination parameter would be something like this:
{
current: 10,
pageSize: 10,
total: 100,
},
example onChange handler:
handleTableChange = (pagination) => {
console.log(pagination);
// your code goes here
// ex: this.loadAmbassadors(pagination.current)
};
To learn more options on pagination; reffer to full pagination document.
Thanks for working on this @anjisvj, Feel free to update this thread if you have any doubts 
1 Like
Really thankful for this @jaye. I tried this and it works. Here’s the pull request for completing pagination.
1 Like
Next we need to consider about
- creating a view to create events
- List events
- List links of an event
Let’s hold this a bit and focus on academix.
We need to add academix to the dashboard right?
Yes you are correct @anjisvj, let’s do it after the initial parse ends.
@Gimhan_minion currently we have written all the interfaces on the class itself could you please move them to separate sibling files named interfaces.ts ?
1 Like
Current front-end application had their interfaces in the index file itself. There would be a problem if are to delete one of them.
ex:- There are 3 categories under frontend
1. Ambassadors
2. Dashboard
3. Universities
Ambassadors class had University class imported. The problem is, if we are to delete University category there would be an issue in Ambassadors section too. To overcome this issue as @jaye suggested I created a separated file “interfaces.ts” to add interface files separately, So that deleting Universities won’t be an issue to Ambassadors.
I’ve add the approach in the PR itself. Thank you!
2 Likes
We had a code review on "Listing academix categories " and Create data retrieval API.
Attendees:
@jaye
@Gimhan_minion
@Gravewalker
@piumal1999
Notes:
Anjula
Problems
- Formatting issue.
- TypeScript data types.
- Issues in creating an interface of categories
Solutions
- Using eslint to fix formatting issues
- Introduction to typescript & explanation on data types
- Created an interface in the code review itself.
Next Steps:
Anjula
- Add CSS to the category component
- Add links to the categories
Heshan
- Create different controllers for each (category, sub-category, item & language)
- Create a package file and include the required data in it.
3 Likes