Feature add/edit team members

[Formasitchijoh]

Summary

This pull request addresses the feature of adding, deleting, and updating members within a specific team in the Zubhubs project. The addition of this functionality allows for better management of team members, enabling the ability to add new members, remove inactive ones, and update member roles.

Context

Issue #734 highlighted the need to implement the functionality of adding, deleting, and updating team members in the Zubhubs project. This feature is essential as it allows for the addition of members to a team after its creation. Additionally, it provides the capability to remove members who are no longer active or wish to be removed. Furthermore, verified admins can update member roles, transitioning them between member and admin positions. This pull request aims to implement this feature and enhance the overall management of team members.

Details

Most of the required APIs for this feature were already in place, but some modifications were necessary to resolve encountered errors. A new folder called "add_team_member" was created, which contains the following files: "AddTeamMember.jsx" for updating the UI, "addTeamMemberScript" for handling HTTP requests and actions from the UserAction in the Redux store, and an updated "userFollower.css" file. Currently, efforts are focused on improving the user experience of this new feature and writing test cases.

Changes

1. Updated the "TeamMembers.jsx" file and improved the styling of the cards.
   

2. Created a new folder called "add_team_member" in the "view" folder, which includes the "AddTeamMembers.jsx" file and "addTeamMembersScript" for implementing the add, edit, and delete functionality.

Screenshots

Below is a video showcasing the implemented functionality.

https://github.com/unstructuredstudio/zubhub/assets/76694292/59be58f6-5b9f-4d8c-b7a4-6100c024bf29

@iamhks @tuxology @srish please kindly review this pull request when you are chanced.

[iamhks]

Okay. Few questions:

1. Why was delete account code needed here?
2. Did you try to use existing api's? The editCreatorGroup api already updates the role for the same user if it was required you could make changes to that api.
3. Please remove the commented code. (Not the comments but the code snippets which are commented and no longer required)

[Formasitchijoh]

Okay. Few questions:

1. Why was delete account code needed here?
2. Did you try to use existing api's? The editCreatorGroup api already updates the role for the same user if it was required you could make changes to that api.
3. Please remove the commented code. (Not the comments but the code snippets which are commented and no longer required)

@iamhks i am not quite sure of the delete account code you are refering to, could you maybe comment on it in the code and yes i reused all the api's you wrote though i had to make some modifications on them, especially the addTeamMember and the removeTeamMember api

I will comment outthe code as you suggested, If there is anyOther thing i should change please let me know

[tuxology]

Hi @Formasitchijoh thanks for attempting this - and for a very visual video explainig the additions you did. 🎉 A few observations before I begin reviewing code:

• I see that this only adds the adding a user page and not editing of the team. This is fine for now.
• Can we have the design similar to what is in the UX mockup here? https://www.figma.com/file/hidnBfP4kNWl7RDxy3aUZI/ZubHub?type=design&node-id=0-1&mode=design Let me paste some screenshots here (of course without the secondary nav bar now):

• Here specifically, the first Invite Team Members card needs a bit of padding in the text
• The fonts in the card for Admin, Member, Remove should be same as site-wide fonts (including weights)
• In addition, please ensure the form works on mobile orientation

Once these are done, I will review code and test this on staging. Then we can merge. Thanks again for working on this!

[Formasitchijoh]

Hi @Formasitchijoh thanks for attempting this - and for a very visual video explainig the additions you did. 🎉 A few observations before I begin reviewing code:

• I see that this only adds the adding a user page and not editing of the team. This is fine for now.

Hello @tuxology with respect to the first point of only adding a page for add i had a discussion with @iamhks https://github.com/unstructuredstudio/zubhub/issues/734 and he suggested the reuse of the code for the Step2 of team creation , the discussion on this is here

Question:

when we talk of editing a meber are we editing his/her details or just their roles/memberships, if we are editing their role, that is why the implementation of editing a member is by toggling the member role on the UI since i dont see why an admin would want to edit anything else about a user in a team apart from his status in the team, hope to improve this if given other suggesstions

• Can we have the design similar to what is in the UX mockup here? https://www.figma.com/file/hidnBfP4kNWl7RDxy3aUZI/ZubHub?type=design&node-id=0-1&mode=design Let me paste some screenshots here (of course without the secondary nav bar now):

Definitely i will improve ths UI to match this

• Here specifically, the first Invite Team Members card needs a bit of padding in the text
• The fonts in the card for Admin, Member, Remove should be same as site-wide fonts (including weights)
• In addition, please ensure the form works on mobile orientation

Once these are done, I will review code and test this on staging. Then we can merge. Thanks again for working on this!

Thank you for your feedback i will make all the appropriate changes you have suggested and make a pull request,

[iamhks]

@tuxology EditTeam is already there. We can edit the team name and description in that page. Can you confirm @Formasitchijoh ?

[Formasitchijoh]

Yes there is @iamhks

[tuxology]

@Formasitchijoh Ok, since I did not test this on staging, I didn't know that Edit feature was there. Super nice! In that case, please go thorough the edit team UX in Figma as well to see how UI can be implemented.

[Formasitchijoh]

@Formasitchijoh Ok, since I did not test this on staging, I didn't know that Edit feature was there. Super nice! In that case, please go thorough the edit team UX in Figma as well to see how UI can be implemented.

Alright @tuxology i will do that and update you of my progress, than you

[tuxology]

@Formasitchijoh Any updates on this?

[Formasitchijoh]

@Formasitchijoh Any updates on this?

@tuxology i apologize for the delayance,i had some issues with my PC, i implemented the design for the add team member as found on the figma design and from my previous implemetation , both the fields for the admin and the member had to be filled for the form to be submitted i fixed that too, I can't show you the implementation because on trying to implement the breadcrums on the Ui i installed a NavigateNextIcon from '@mui/icons-material/NavigateNext'; which caused some issues in the node modules. Here is the error

• C:/Users/forma/Desktop/Outreachy_2024/zubhub/node_modules/@mui/styled-engine/index.js Module not found: Can't resolve '@emotion/styled' in 'C:\Users\forma\Desktop\Outreachy_2024\zubhub\node_modules@mui\styled-engine'

I have tried installing it back and restarting the server to know avail, my last resort is to delete and reinstall the node module, i wish to ask if it is allowed in the project setting,thank you

[Formasitchijoh]

@tuxology @iamhks this is an Updates on my progress so far.

Succeeded to.

• Implemented the design from the figma designs,
• improved on the feature of adding a member, currently a member and an admin can be added separately as compared to the previous implementation where both the admin and the member had to be added simultaneously
• The design is mobile responsive on all screen sizes to improve accessibility

Whats left

The breadcrums menu found at the top of the addTeammember page.

Challenges:

during the implementation of the breadcrumbs i installed a NavigateNextIcon from '@mui/icons-material/NavigateNext' which have some dependency with the @emotion/styled package , i am currently working on solving issue

Below is a video that shows how the feature currently works

https://github.com/unstructuredstudio/zubhub/assets/76694292/9e287281-719e-485d-9078-790730cafc93

[tuxology]

@Formasitchijoh Just wanted to know which breadcrumbs you are referring to Can you paste a screenshot? If its the secondary navigation breadcrumb bar, we don't need to show it anymore. We've removed it from the whole site since it was redundant after users could log in and choose activities/projects navigation: https://github.com/unstructuredstudio/zubhub/pull/720#issuecomment-1693434417

[Formasitchijoh]

hello @tuxology here is the breadcrumbs i am refering to

I think this is the same secondary navbar with breadcrums you suggested to be removed from the site in #720 (comment), if so should i stop the implementation and make a final pull request with the changes i have made so far

[tuxology]

I think this is the same secondary navbar with breadcrums you suggested to be removed from the site in #720 (comment), if so should i stop the implementation and make a final pull request with the changes i have made so far

Yes, we can stop implementing this and start finishing this PR now! Nice work so far @Formasitchijoh 👍

[Formasitchijoh]

I think this is the same secondary navbar with breadcrums you suggested to be removed from the site in #720 (comment), if so should i stop the implementation and make a final pull request with the changes i have made so far

Yes, we can stop implementing this and start finishing this PR now! Nice work so far @Formasitchijoh 👍

Alright @tuxology , thank you very much for your assistance

[Formasitchijoh]

Greeting @tuxology , @iamhks I realized you haven't gotten the chance to review the work i did here . if there is any changes you would like me to make i'd be glad to do that. Thank you