Creating a student ambassador view for multiverse

Development Multiverse
1

We need to create a view for student ambassadors and I’m working on this.

2

I created a view just like university view.


image
image3342×1264 210 KB
1 Like
3

Awesome @anjisvj! :partying_face:

The next step is to make the GET /ambassadors endpoint to send a paginated payload.

4

Cool. I will work on that.

5

@anjisvj How are you going with this? any blockers? or any help you need?

6

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.

7

Thanks for the update @anjisvj! :blush:

You can work on implementing the frontend while this is being reviewed.

8

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.

9

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 :hugs:

1 Like
10

Really thankful for this @jaye. I tried this and it works. Here’s the pull request for completing pagination.


ezgif.com-video-to-gif
1 Like
11

@jaye So can you explain the next steps for this project :slightly_smiling_face:

1 Like
12

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.

13

We need to add academix to the dashboard right?

14

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
15

Yeah sure I’ll do that @jaye

16

I’ve submitted the PR. Thank you @jaye for the support and guidance. :smiling_face_with_three_hearts:

17

Nice job @Gimhan_minion!
Add the PR in this thread too… with a small description on what you did.

18

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
19

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