Project API integration bug fix. (#2024)

Signed-off-by: ishangupta-ds <[email protected]>
litmuschaos · Sep 9, 2020 · c86dfe9 · c86dfe9
1 parent 5fd794a
commit c86dfe9
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git 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<ProfileInfoDropdownItemProps> = ({
   name,
   email,
   username,
-  projects,
   selectedProjectID,
   CallbackToSetSelectedProjectIDOnProfileDropdown,
 }) => {
@@ -51,6 +55,12 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
   const initials = nameSplit[1]
     ? userAvatar(name, false)
     : userAvatar(name, true);
+  // Query to get user details
+  const { data } = useQuery<CurrentUserDetails, CurrentUserDedtailsVars>(
+    GET_USER,
+    { variables: { username } }
+  );
+  const projects = data?.getUser.projects ?? [];
   const [switchableProjects, setSwitchableProjects] = useState<Project[]>(
     projects
   );
@@ -96,6 +106,10 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
     setSwitchableProjects(projectsAvailableForSwitching);
   }, []);
 
+  useEffect(() => {
+    setSwitchableProjects(projects);
+  }, [data]);
+
   return (
     <div>
       <Popover

diff --git a/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownSection.tsx b/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownSection.tsx
@@ -3,18 +3,16 @@ import { Box, IconButton } from '@material-ui/core';
 import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreTwoToneIcon from '@material-ui/icons/ExpandMoreTwoTone';
-import React, { MutableRefObject, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { ProjectsCallBackType } from '../../../models/header';
 import userAvatar from '../../../utils/user';
 import ProfileInfoDropdownItems from './ProfileDropdownItems';
 import useStyles from './styles';
-import { Project } from '../../../models/project';
 
 interface ProfileInfoDropdownSectionProps {
   name: string;
   email: string;
   username: string;
-  projects: Project[];
   selectedProjectID: string;
   CallbackToSetSelectedProjectID: ProjectsCallBackType;
   userRole: string;
@@ -25,7 +23,6 @@ const ProfileDropdownSection: React.FC<ProfileInfoDropdownSectionProps> = ({
   name,
   email,
   username,
-  projects,
   selectedProjectID,
   CallbackToSetSelectedProjectID,
   selectedProjectName,
@@ -84,7 +81,6 @@ const ProfileDropdownSection: React.FC<ProfileInfoDropdownSectionProps> = ({
         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
@@ -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={