diff --git a/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownItems.tsx b/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownItems.tsx index 95e3615d7b4..bb505e16ae0 100644 --- a/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownItems.tsx +++ b/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownItems.tsx @@ -11,6 +11,7 @@ import { } from '@material-ui/core'; import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; +import { useQuery } from '@apollo/client'; import config from '../../../config'; import { ProjectsCallBackType } from '../../../models/header'; import useActions from '../../../redux/actions'; @@ -20,6 +21,11 @@ import ProjectListItem from './ProjectListItem'; import useStyles from './styles'; import { Member, Project } from '../../../models/project'; import userAvatar from '../../../utils/user'; +import { + CurrentUserDedtailsVars, + CurrentUserDetails, +} from '../../../models/user'; +import { GET_USER } from '../../../graphql'; interface ProfileInfoDropdownItemProps { anchorEl: HTMLElement; @@ -28,7 +34,6 @@ interface ProfileInfoDropdownItemProps { name: string; email: string; username: string; - projects: Project[]; selectedProjectID: string; CallbackToSetSelectedProjectIDOnProfileDropdown: ProjectsCallBackType; } @@ -40,7 +45,6 @@ const ProfileInfoDropdownItems: React.FC = ({ name, email, username, - projects, selectedProjectID, CallbackToSetSelectedProjectIDOnProfileDropdown, }) => { @@ -51,6 +55,12 @@ const ProfileInfoDropdownItems: React.FC = ({ const initials = nameSplit[1] ? userAvatar(name, false) : userAvatar(name, true); + // Query to get user details + const { data } = useQuery( + GET_USER, + { variables: { username } } + ); + const projects = data?.getUser.projects ?? []; const [switchableProjects, setSwitchableProjects] = useState( projects ); @@ -96,6 +106,10 @@ const ProfileInfoDropdownItems: React.FC = ({ setSwitchableProjects(projectsAvailableForSwitching); }, []); + useEffect(() => { + setSwitchableProjects(projects); + }, [data]); + return (
= ({ name, email, username, - projects, selectedProjectID, CallbackToSetSelectedProjectID, selectedProjectName, @@ -84,7 +81,6 @@ const ProfileDropdownSection: React.FC = ({ name={name} username={username} email={email} - projects={projects} selectedProjectID={selectedProjectID} CallbackToSetSelectedProjectIDOnProfileDropdown={ sendSelectedProjectIDToHeader diff --git a/litmus-portal/frontend/src/containers/layouts/Header/index.tsx b/litmus-portal/frontend/src/containers/layouts/Header/index.tsx index abcc09eb80e..168939e76e8 100644 --- a/litmus-portal/frontend/src/containers/layouts/Header/index.tsx +++ b/litmus-portal/frontend/src/containers/layouts/Header/index.tsx @@ -55,6 +55,11 @@ const Header: React.FC = () => { const memberList: Member[] = project.members; memberList.forEach((member) => { if (member.user_name === data?.getUser.username) { + user.updateUserDetails({ + selectedProjectID, + userRole: project.name, + selectedProjectName: member.role, + }); setSelectedProjectDetails({ selectedProjectID, selectedProjectName: project.name, @@ -64,11 +69,6 @@ const Header: React.FC = () => { }); } }); - user.updateUserDetails({ - selectedProjectID: selectedProjectDetails.selectedProjectID, - userRole: selectedProjectDetails.selectedUserRole, - selectedProjectName: selectedProjectDetails.selectedProjectName, - }); }; // Fetch and Set Notifications from backend. @@ -172,7 +172,6 @@ const Header: React.FC = () => { name={name} email={email} username={username} - projects={projects} selectedProjectID={selectedProjectDetails.selectedProjectID} CallbackToSetSelectedProjectID={setSelectedProjectID} selectedProjectName={