zubhub
zubhub copied to clipboard
unstructuredstudio
Add the option to add/edit projects for a team in ZubHub
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 projects. Navigate to the projects section. Uncomment the Add Project button in Team.jsx line: 342 Redirect that button to a new page where we can add/remove projects.
Learning objectives
Understand the backend api's present in zubhub_backend/zubhub/creators/views: EditCreatorGroupAPIView (Make changes if required)
Todo
Add the option to add/edit projects for a team in ZubHub
Designs
Take reference of the code from the 3rd page of team creation and use the same design.
hi @srish, I would love to work on this issue. since it hasn't been assigned to anyone can you kindly assign it to me? @iamhks has already provided enough information to fix the problem
Hi @iykat Since this is a high priority issue, it would be nice if you could show us some proof of work like @Formasitchijoh did in #734. We would be happy to assign the issue to you.
Thanks @iamhks. So following up on this, whenever I tried to my profile page/profile, I was receiving a blank page. Checking the console, I noticed that we were iterating through the newTeams object yet at some point it is null. Check the screencast attached. Fix in draft PR here
Screencast from 2023-10-02 15-48-56.webm
The one blocker am still facing here @iamhks is that the page continues to load. Even when I've updated the TEAM_ENABLED boolean to true
Let me see if I can figure it out
Figured 🚩
We were returning a loading component when loading is true and we set it to true initially: Check HERE
I think it would be best to ignore this property for now and return the ErrorComponet straight up once there is an error. This current implementation actually keeps the loading spinner loading once the request is not successful in any way
Now am getting the ErrorComponent😂 Propably some error handling. Then am good to go.
So far what I see is that I have to first get the profile page up, then see the way forward, right @iamhks? If so please assign me this issue. I think I can handle it
Continuing on this @iamhks. According to the api documentation, to access the user profile object, we need the username of the signed in user which we tried to get here
Logging the props object to the console, I noticed that the username property is not available params object, and neither is it in auth object. Check screenshot attached below
This makes the username to be null, hence having this failing request in the network tab
To confirm if the endpoint works very fine, I tried with my username and got the response as shown below
@coderatomy Can you tell me whether this issue exists even after taking latest pull from master branch? And fresh install/setup
It returns a loading state, but I know how to fix that. Atleast now it can pick my username. It's no longer giving null. Thanks @iamhks
Continuing on this @iamhks. According to the api documentation, to access the
user profileobject, we need theusernameof the signed in user which we tried to get here Logging thepropsobject to the console, I noticed that the username property is not availableparamsobject, and neither is it inauthobject. Check screenshot attached below
This makes the
usernameto be null, hence having this failing request in the network tab
To confirm if the endpoint works very fine, I tried with my username and got the response as shown below
Hi @coderatomy with regards to the users objects, i think you should look and understand how the redux store manages the, authenticated user equally the authReducers and the UserActions. It'll give you an understanding of how and when to access the state from the store
Thanks @iamhks and @Formasitchijoh for your help. I had to rebuild the docker images with sudo make init, this is what I was missing. Now the page loads up successfully ,with the updated theme. Thanks alot guys
CONTINUING... I have successfully seen the pages as you directed @iamhks. Just a few breakings in the UI. Check the screencast attached
- Edit profile button text is not visible
- Create team button text is also not visible
- Once you reach the create-team page, and input the Team name and about, there is actually no way to go the next page and finish up the
Team creation.
Screencast from 2023-10-03 10-09-47.webm
Another note on this @iamhks , the UIs for creating a Project and a Teamare the same. Note the highlighted urls at the top
@coderatomy I feel there is some issue with your local repo. Can you check you App.js file where it /create-team pointing to? It should point to CreateTeam.jsx
Yes it does point to the CreateTeam component @iamhks. It's just that the code is similar inside the two components. Maybe was copy-pasted for later update. Check createTeam.jsx and createProject.jsx
hi @coderatomy do you need any help with the designs if so can we work on it together?
Surely @Marhiposa. Am sure we need mock-ups for this Team Project feature. I will be happy to work with you.
@iamhks, is there anyway @Marhiposa can help on this interms of designs?
For this issue it's already mentioned to use the designs from Step3 of Create Team.
Successfully created a Team @iamhks. I was having outdated backend. I pruned all images and started again. Thanks
So I should make a change such that the Add Project button doesn't route to /create-team but instead to a new page where I will add the logic and UI, right @iamhks?
One more thing @iamhks. Can you direct me where you meant with the 3rd page of team creation. Am failing to locate that in the UI
I have added and extensional route /add to the /teams/:groupname that will be responsible to load up the Add project page. I think the same should be done for the edit team projects @iamhks
@coderatomy It's upto you but if possible we can keep just one page for edit/add projects wherein if the page loads it shows the projects already selected and other projects too. User can do their action and click on save and we should do all the processing whether user added/edited/removed.
@coderatomy It's upto you but if possible we can keep just one page for edit/add projects wherein if the page loads it shows the projects already selected and other projects too. User can do their action and click on save and we should do all the processing whether user added/edited/removed.
This is actually a better solution @iamhks. Thanks. Have you also thought about privileges or it will be a later thing?