# Creating a student ambassador view for multiverse

**URL:** <https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74>\
**Category:** Multiverse\
**Created:** [May 13, 2020, 7:28am UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74 "2020-05-13T07:28:02Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![anjisvj](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/anjisvj/32/9_2.png) [@anjisvj](https://sef.discourse.group/u/anjisvj)\
**Post date:** [May 13, 2020, 7:28am UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/1 "2020-05-13T07:28:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![anjisvj](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/anjisvj/32/9_2.png) [@anjisvj](https://sef.discourse.group/u/anjisvj)\
**Post date:** [May 14, 2020, 4:02am UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/2 "2020-05-14T04:02:52Z")

</div>

I created a view just like university view.

> <https://github.com/sef-global/sef-core/pull/28>

  
 ![image](https://global.discourse-cdn.com/free1/uploads/sef/original/1X/6f62ebf02cfde54796caef82b607be1b742c2672.png)

---

<div class="post-metadata">

**Author:** ![jaye](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/jaye/32/810_2.png) [@jaye](https://sef.discourse.group/u/jaye)\
**Post date:** [May 14, 2020, 12:49pm UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/3 "2020-05-14T12:49:19Z")

</div>

Awesome @anjisvj! 🥳

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

---

<div class="post-metadata">

**Author:** ![anjisvj](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/anjisvj/32/9_2.png) [@anjisvj](https://sef.discourse.group/u/anjisvj)\
**Post date:** [May 14, 2020, 1:10pm UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/4 "2020-05-14T13:10:27Z")

</div>

Cool. I will work on that.

---

<div class="post-metadata">

**Author:** ![jaye](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/jaye/32/810_2.png) [@jaye](https://sef.discourse.group/u/jaye)\
**Post date:** [May 23, 2020, 5:12am UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/5 "2020-05-23T05:12:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![anjisvj](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/anjisvj/32/9_2.png) [@anjisvj](https://sef.discourse.group/u/anjisvj)\
**Post date:** [May 23, 2020, 7:20am UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/6 "2020-05-23T07:20:12Z")

</div>

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.

> <https://github.com/sef-global/sef-core/pull/32>

---

<div class="post-metadata">

**Author:** ![jaye](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/jaye/32/810_2.png) [@jaye](https://sef.discourse.group/u/jaye)\
**Post date:** [May 23, 2020, 7:57am UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/7 "2020-05-23T07:57:25Z")

</div>

Thanks for the update @anjisvj! 😊

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

---

<div class="post-metadata">

**Author:** ![anjisvj](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/anjisvj/32/9_2.png) [@anjisvj](https://sef.discourse.group/u/anjisvj)\
**Post date:** [May 24, 2020, 3:54am UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/8 "2020-05-24T03:54:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jaye](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/jaye/32/810_2.png) [@jaye](https://sef.discourse.group/u/jaye)\
**Post date:** [May 24, 2020, 6:56am UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/9 "2020-05-24T06:56:17Z")

</div>

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 :

> **[Using Axios with React | DigitalOcean](https://alligator.io/react/axios-react/)**
>
> Axios is an easy to use HTTP client. Learn how to use it within your React applications.

To paginate this table you should follow this:  
[https://ant.design/components/table/#components-table-demo-ajax](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)

```auto
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:

```auto
<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:

```auto
{
        current: 10,
        pageSize: 10,
        total: 100,
}, 

```

example onChange handler:

```auto
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](https://ant.design/components/pagination/).

Thanks for working on this @anjisvj, Feel free to update this thread if you have any doubts 🤗

---

<div class="post-metadata">

**Author:** ![anjisvj](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/anjisvj/32/9_2.png) [@anjisvj](https://sef.discourse.group/u/anjisvj)\
**Post date:** [May 24, 2020, 3:23pm UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/10 "2020-05-24T15:23:29Z")

</div>

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

> <https://github.com/sef-global/sef-core/pull/34>

  
 ![ezgif.com-video-to-gif](https://global.discourse-cdn.com/free1/uploads/sef/original/1X/f42dec4cc39e1b3cb0af751c8d06cbc9058cb881.gif)

---

<div class="post-metadata">

**Author:** ![anjisvj](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/anjisvj/32/9_2.png) [@anjisvj](https://sef.discourse.group/u/anjisvj)\
**Post date:** [May 24, 2020, 4:55pm UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/11 "2020-05-24T16:55:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jaye](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/jaye/32/810_2.png) [@jaye](https://sef.discourse.group/u/jaye)\
**Post date:** [May 26, 2020, 4:03am UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/12 "2020-05-26T04:03:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![anjisvj](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/anjisvj/32/9_2.png) [@anjisvj](https://sef.discourse.group/u/anjisvj)\
**Post date:** [May 26, 2020, 4:04am UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/13 "2020-05-26T04:04:50Z")

</div>

We need to add academix to the dashboard right?

---

<div class="post-metadata">

**Author:** ![jaye](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/jaye/32/810_2.png) [@jaye](https://sef.discourse.group/u/jaye)\
**Post date:** [May 28, 2020, 4:51am UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/14 "2020-05-28T04:51:15Z")

</div>

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` ?

---

<div class="post-metadata">

**Author:** ![Gimhan\_minion](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/gimhan_minion/32/109_2.png) [@Gimhan\_minion](https://sef.discourse.group/u/Gimhan_minion)\
**Post date:** [May 28, 2020, 5:12am UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/15 "2020-05-28T05:12:06Z")

</div>

Yeah sure I’ll do that @jaye

---

<div class="post-metadata">

**Author:** ![Gimhan\_minion](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/gimhan_minion/32/109_2.png) [@Gimhan\_minion](https://sef.discourse.group/u/Gimhan_minion)\
**Post date:** [May 28, 2020, 7:32am UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/16 "2020-05-28T07:32:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jaye](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/jaye/32/810_2.png) [@jaye](https://sef.discourse.group/u/jaye)\
**Post date:** [May 28, 2020, 7:34am UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/17 "2020-05-28T07:34:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Gimhan\_minion](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/gimhan_minion/32/109_2.png) [@Gimhan\_minion](https://sef.discourse.group/u/Gimhan_minion)\
**Post date:** [May 28, 2020, 7:53am UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/18 "2020-05-28T07:53:22Z")

</div>

> <https://github.com/sef-global/sef-core/pull/41>

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!

---

<div class="post-metadata">

**Author:** ![anjisvj](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/anjisvj/32/9_2.png) [@anjisvj](https://sef.discourse.group/u/anjisvj)\
**Post date:** [May 28, 2020, 4:08pm UTC](https://sef.discourse.group/t/creating-a-student-ambassador-view-for-multiverse/74/19 "2020-05-28T16:08:23Z")

</div>

We had a code review on "Listing academix categories " and [Create data retrieval API](https://github.com/sef-global/sef-core/pull/39).

**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.