Add the option to add/edit team members in ZubHub (frontend)

[iamhks]

Description

Do a checkout to ZubHub in master branch, do local setup and create an account. Thereafter go to the profile page and click on Create Team. (You will need to change TEAM_ENABLED tag in the CreateTeam.jsx file to true for the page to load) Complete the steps and create a team. After it's successful you'll be redirected to the teams page. You will see there in no place to add/edit team members. Click on Members from the top of teams page and add another card which when clicked upon redirects to a new page where you can add/edit team members.

Learning objectives

Understand the backend api's present in zubhub_backend/zubhub/creators/views:
RemoveGroupMemberAPIView
AddGroupMembersAPIView

Todo

Add the feature to add/edit team members in the UI.

Designs

[Formasitchijoh]

Hello @iamhks, @srish, and @tuxology , with respect to this issue and following the instructions provided by @iamhks i have studied the backend APIs in zubhub_backend/zubhub/creators/views, specifically the RemoveGroupMemberAPIView and AddGroupMembersAPIView, I have gained a good understanding of the requirements

I noticed a few inconsistencies in the UI that I believe I can help resolve

• Firstly, some creator profile icons are breaking the UI

• Secondly when multiple projects are selected the are no spacings between the cards that contain the project resulting in a cluttered appearance

• Additionally i noticed that when a user is added as an admin and a member to a project at the same time the same project appears twice on his profile. To address this, I suggest to solve this

• Either restricting an admin from being added as an admin and a member simultaneously

• allowing a user to be added as both, but displaying their highest role on the profile. and the project appears just once

To contribute to resolving these issues, I have already started working on the UI by adding the Add member card and modifying the participant cards, as shown in the screenshot

I am genuinely excited about working on this issue and believe I can make a positive impact. If possible, I kindly request to be assigned to this task. I am available to provide any additional information or collaborate with the team to ensure a successful outcome.

[iamhks]

Super good effort @Formasitchijoh. Agree with your observations please proceed. I have assigned the issue to you! Keep us posted.

[Formasitchijoh]

Thank you @iamhks , I will

[Formasitchijoh]

Hello @iamhks @srish @tuxology
I wanted to provide you with an update on my progress regarding the ongoing issue. Currently, I have completed the UI for the add/edit member functionality. Each member's role is now correctly attributed to them and displayed as shown in the screenshot below

During the implementation, I encountered a challenge related to retrieving a user's membership for a particular team. The data served to the TeamMembers page using the getTeamMember and fetchpage APIs only included the member details without their membership information. To address this, I found a section in the getTeamMember code that was commented out. I uncommented and updated it, allowing me to retrieve the users' details along with their membership information.Currently, my focus is on adding users to a team. I came across an AddGroupMember view, which I assume is used for this purpose. However, when trying to access the page, I encountered the following error,as shown below which i am still figuring out
how to create a group ( as i thought a team is the same as a group from the creator model in the zubhub_backend)
I am currently investigating this issue and working on finding a solution

I would appreciate more details on the groups feature so that I can better understand its functionality. Also, please let me know if I need to create a new design for the add member page

I will continue my efforts in getting the groups and adding a member to a team. If you have any further guidance or suggestions, please let me know.Thank you

[iamhks]

@Formasitchijoh Teams and groups are the same thing. Can you share the url where you got this error? Usually teams/groups are created through /create-team/ and if you want to find a page to add group members you can use the addTeamMembers (Step2) page of team creation and create a new page.

[Formasitchijoh]

@iamhks Here it is

creators/group/add-members

i tested using the django admin panel and it worked and ,but when i used it on the client side it didn't.

Also i found an addTeamMembers api in the api.js file which used the used the url

creators/${groupname}/add-members/`

and i still got the same error

[iamhks]

@Formasitchijoh Correct. So what I see is you've added the option to remove the team member from the members page. Awesome!

As per this issue, we also need to add a new page taking reference from Step 2 of Create Team and use the same design. This page is what needs to be created to complete this issue.

[Formasitchijoh]

@iamhks That is the approach i am currently taking, because that was the closes page i could reuse for this issue, the challenge is displaying the single page ie the Step2 page,
Hers is the steps i used to try displaying the page ,

• I added a reference to it in the App.js file using the lazy loading and added a url path to it
• called the component in a new file passing it the formik prop from the create_team script

But i still can't display the page, is there something else i am supposed to do

[iamhks]

@Formasitchijoh See that Step 2 page from CreateTeam is a part of CreatTeam.jsx and without that it won't work. You need to first remove the linking between them. The new AddGroupMembers should be a standalone page. Now, once you load that page, you can fetch the team details from the groupname and then prepopulate the usernames in admin/members field. The user can then make required changes and click on save which will make the api call.

Another approach you can do is, since you have the remove functionality done already, you can simply keep the new page limited to adding a team member (i.e no need to populate anything in the input fields, just validate the username entered is already a part of the team or not and add them to the team) and for that too you already have the required api.

I think if you figure out a way to make the Step2 page as standalone without relying on CreateTeam formik props then you should be good to complete it.

[Formasitchijoh]

@Formasitchijoh See that Step 2 page from CreateTeam is a part of CreatTeam.jsx and without that it won't work. You need to first remove the linking between them. The new AddGroupMembers should be a standalone page. Now, once you load that page, you can fetch the team details from the groupname and then prepopulate the usernames in admin/members field. The user can then make required changes and click on save which will make the api call.

Another approach you can do is, since you have the remove functionality done already, you can simply keep the new page limited to adding a team member (i.e no need to populate anything in the input fields, just validate the username entered is already a part of the team or not and add them to the team) and for that too you already have the required api.

I think if you figure out a way to make the Step2 page as standalone without relying on CreateTeam formik props then you should be good to complete it.

Alright @iamhks , i think i will go with making the Step 2 of the createTeam a standalone page and populate it with the required data, This will help me understand the process better.
Thank you for the detailed clarification ,
I will get to working on it and I'll keep you updated on my progress.

[Formasitchijoh]

Hello @iamhks with respect to our previous discussion on making the Step Two of the createTeam page a standalone page and to populate it with the required data, i succeded to do that and also add a member to a given team, the video below show details of how it is currenly working

Record_2023_10_01_06_41_24_285.mp4

I have some glitches in the pop up that displays the status of the team, i intend to fix that and make a PR for you to review.

I have some questions i need clarifications on:

when we talk of editing a member are we refering to editing his role from admin to member and vice versa or actually editing a members details(which i dont understand how a user should edit another users details for any reason even if he is the admin of a team)
I will continue my efforts in the sections i have left . If you have any further guidance or suggestions, please let me know.Thank you

[iamhks]

Hi @Formasitchijoh, Awesome work!
Ideally editing a member means that we can change the role of that member in the group and this can be done only by admins.
No one can edit the details of any account (name/username/email etc) except that person themself.
Just one input that the card for the member and the invite new members card should be of same dimension so that it looks consistent.

[Formasitchijoh]

Alright noted, i will update that, thank you

[Formasitchijoh]

Hello @iamhks updates about my work so far, i solved the issue i had with the pop up and managed to complete all add, edit and delete operation on a members of a team, what i am lacking as of now is to improve on the user experience by introducing alerts, on delete or editing a members
I equally updated the addmember card as you indicated
below is a screen shot of editing a member, i wish to get your opinion on the design, because i decided that toggling the members role from admin to member and vice versa is a way of updating the member role, I will be glad to receive some suggestions on improving this feature as i an not yet sure on how to add an edit icon since the icon used to initiate the pop up is an edit icon

Before editing a members

After toggling the role

I will continue working on improving the User experience and make a PR when i am done, thank you

[iamhks]

@Formasitchijoh You can show a toast message as an alert and also use the notifications api to send a notification to the members. But as of now we can go ahead and review the code. Can you make a PR?

[Formasitchijoh]

Okay @iamhks , I'll just clean up out the comment and make a PR

[yokwejuste]

Okay @iamhks , I'll just clean up out the comment and make a PR

Hi @Formasitchijoh in case this is taking longer than expect and you have some bottlenecks, I'm willing and available to help on this.

[Formasitchijoh]

Okay @iamhks , I'll just clean up out the comment and make a PR

Hi @Formasitchijoh in case this is taking longer than expect and you have some bottlenecks, I'm willing and available to help on this.

Hello @yokwejuste , thank you for your help, and your right i was held up, but i have made a PR for the issue waiting for review,

[Formasitchijoh]

@iamhks i apologize for the delay , i just made a PR with some attached videos of the issue, Please kindly review it when you get the time

[kalio007]

@Formasitchijoh Hello are you still actively on this task? can i join it to complete it
cc. @srish