# Implementing mentor selection UI

**URL:** <https://sef.discourse.group/t/implementing-mentor-selection-ui/223>\
**Category:** ScholarX\
**Created:** [December 17, 2020, 2:27pm UTC](https://sef.discourse.group/t/implementing-mentor-selection-ui/223 "2020-12-17T14:27:23Z")\
**Posts on this page:** 7\
**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:** [December 17, 2020, 2:27pm UTC](https://sef.discourse.group/t/implementing-mentor-selection-ui/223/1 "2020-12-17T14:27:23Z")

</div>

When a given program reaches the `MENTOR_CONFIRMATION` state the user can select a mentor if the user has been accepted by multiple mentors. From that list of mentors, the user can select a mentor and become a mentee. If the user has accepted by only one mentor this page will show that mentor.

- Basic UI with mentor listing
  - List mentors
  - Create sub view for the users who don’t have access

- Actions

---

<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:** [December 19, 2020, 5:51am UTC](https://sef.discourse.group/t/implementing-mentor-selection-ui/223/2 "2020-12-19T05:51:08Z")

</div>

These are the wireframes I created for the selection UI

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

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

Here’s the issue for above task:

> <https://github.com/sef-global/scholarx-frontend/issues/61>
>
> Is your feature request related to a problem? Please describe.
> Since we are planning to introduce a new program state for mentees...

Here’s the draft PR for the task:

> <https://github.com/sef-global/scholarx-frontend/pull/63>

---

<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:** [December 19, 2020, 4:59pm UTC](https://sef.discourse.group/t/implementing-mentor-selection-ui/223/3 "2020-12-19T16:59:37Z")

</div>

@anjisvj instead of providing an approve button for each mentor, we can just display them radio buttons or something. Since the user already knows about the mentor, having a very simple UI is enough. Just let them pick their mentor and click on a button to confirm.

1. Mentees who has one mentor don’t need a UI. Just display a friendly message on the UI that states this UI is not available because you don’t have permission to view it or you already confirmed your mentor.

Also, Don’t start coding without verifying your design as instructed.

---

<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:** [December 20, 2020, 3:41am UTC](https://sef.discourse.group/t/implementing-mentor-selection-ui/223/4 "2020-12-20T03:41:57Z")

</div>

In yesterday meeting, We discussed to show the mentor if there’s only one mentor. If there’s more than one there will be list of mentors. Otherwise how can I know my mentor? In this case anyone can access that UI. @jaye

---

<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:** [December 20, 2020, 6:07am UTC](https://sef.discourse.group/t/implementing-mentor-selection-ui/223/5 "2020-12-20T06:07:14Z")

</div>

**User who has been selected by multiple mentors**

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

**User who has been selected by one mentor**

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

**User who haven’t accepted by a mentor**

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

**User who haven’t applied as a mentee**

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

---

<div class="post-metadata">

**Author:** ![Gravewalker](https://yyz2.discourse-cdn.com/free1/user_avatar/sef.discourse.group/gravewalker/32/12_2.png) [@Gravewalker](https://sef.discourse.group/u/Gravewalker)\
**Post date:** [December 20, 2020, 6:25am UTC](https://sef.discourse.group/t/implementing-mentor-selection-ui/223/6 "2020-12-20T06:25:06Z")

</div>

In third view let’s replace the text with something along the lines of “Unfortunately, you were not selected as mentee for this program”

---

<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:** [December 20, 2020, 7:28am UTC](https://sef.discourse.group/t/implementing-mentor-selection-ui/223/7 "2020-12-20T07:28:14Z")

</div>

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

 ![2](https://global.discourse-cdn.com/free1/uploads/sef/original/1X/4af3bc0c0ca1567168c390da90a726408f70acb6.gif)
