Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix User Role in People Section #2459

Closed
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 29 additions & 5 deletions src/screens/UserPortal/People/People.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
const [rowsPerPage, setRowsPerPage] = useState<number>(5);
const [members, setMembers] = useState([]);
const [mode, setMode] = useState<number>(0);
const [updatedMembers, setUpdatedMembers] = useState([]);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add type safety to the state variable

The new state variable should be properly typed to match the member interface.

- const [updatedMembers, setUpdatedMembers] = useState([]);
+ const [updatedMembers, setUpdatedMembers] = useState<InterfaceMember[]>([]);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const [updatedMembers, setUpdatedMembers] = useState([]);
const [updatedMembers, setUpdatedMembers] = useState<InterfaceMember[]>([]);


// Extracting organization ID from URL parameters
const { orgId: organizationId } = useParams();
Expand Down Expand Up @@ -135,10 +136,27 @@
};

useEffect(() => {
if (data) {
setMembers(data.organizationsMemberConnection.edges);
if (data && data2) {
interface Admin {

Check failure on line 140 in src/screens/UserPortal/People/People.tsx

View workflow job for this annotation

GitHub Actions / Performs linting, formatting, type-checking, checking for different source and target branch

Interface name `Admin` must have one of the following prefixes: Interface, TestInterface
_id: string;
}
const adminIds = data2.organizations[0].admins.map(
(admin: Admin) => admin._id,
);

const updatedMembers = data.organizationsMemberConnection.edges.map(
(member: InterfaceMember) => {
const isAdmin = adminIds.includes(member._id);
return {
...member,
userType: isAdmin ? 'Admin' : 'User',
};
},
);
setUpdatedMembers(updatedMembers);
setMembers(updatedMembers);
}
}, [data]);
}, [data, data2]);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add error handling and null checks

The current implementation needs additional safeguards:

  1. Add null check for organizations[0] access
  2. Handle potential race conditions between data updates
  3. Add error logging for edge cases

Apply this diff to improve error handling:

  useEffect(() => {
    if (data && data2) {
+     // Ensure organization exists
+     const organization = data2.organizations?.[0];
+     if (!organization) {
+       console.error('Failed to load organization data');
+       return;
+     }
+     
      interface Admin {
        _id: string;
      }
-     const adminIds = data2.organizations[0].admins.map(
+     const adminIds = organization.admins.map(
        (admin: Admin) => admin._id,
      );

+     try {
        const updatedMembers = data.organizationsMemberConnection.edges.map(
          (member: InterfaceMember) => {
            const isAdmin = adminIds.includes(member._id);
            return {
              ...member,
              userType: isAdmin ? 'Admin' : 'User',
            };
          },
        );
        setUpdatedMembers(updatedMembers);
        setMembers(updatedMembers);
+     } catch (error) {
+       console.error('Failed to process member data:', error);
+     }
    }
  }, [data, data2]);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
if (data && data2) {
interface Admin {
_id: string;
}
const adminIds = data2.organizations[0].admins.map(
(admin: Admin) => admin._id,
);
const updatedMembers = data.organizationsMemberConnection.edges.map(
(member: InterfaceMember) => {
const isAdmin = adminIds.includes(member._id);
return {
...member,
userType: isAdmin ? 'Admin' : 'User',
};
},
);
setUpdatedMembers(updatedMembers);
setMembers(updatedMembers);
}
}, [data]);
}, [data, data2]);
if (data && data2) {
// Ensure organization exists
const organization = data2.organizations?.[0];
if (!organization) {
console.error('Failed to load organization data');
return;
}
interface Admin {
_id: string;
}
const adminIds = organization.admins.map(
(admin: Admin) => admin._id,
);
try {
const updatedMembers = data.organizationsMemberConnection.edges.map(
(member: InterfaceMember) => {
const isAdmin = adminIds.includes(member._id);
return {
...member,
userType: isAdmin ? 'Admin' : 'User',
};
},
);
setUpdatedMembers(updatedMembers);
setMembers(updatedMembers);
} catch (error) {
console.error('Failed to process member data:', error);
}
}
}, [data, data2]);


/**
* Updates the list of members based on the selected filter mode.
Expand All @@ -147,11 +165,17 @@
useEffect(() => {
if (mode == 0) {
if (data) {
setMembers(data.organizationsMemberConnection.edges);
setMembers(updatedMembers);
}
} else if (mode == 1) {
if (data2) {
setMembers(data2.organizations[0].admins);
const admins = data2.organizations[0].admins.map(
(admin: InterfaceMember) => ({
...admin,
userType: 'Admin' as const,
}),
);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix inconsistent organization access

There's an inconsistency in how the organization data is accessed. After checking for the organization's existence, the code still directly accesses data2.organizations[0] instead of using the validated organization variable.

Apply this fix:

-        const admins = data2.organizations[0].admins.map(
+        const admins = organization.admins.map(
           (admin: InterfaceMember) => ({
             ...admin,
             userType: 'Admin' as const,
           }),
         );
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const admins = data2.organizations[0].admins.map(
(admin: InterfaceMember) => ({
...admin,
userType: 'Admin' as const,
}),
);
const admins = organization.admins.map(
(admin: InterfaceMember) => ({
...admin,
userType: 'Admin' as const,
}),
);

setMembers(admins);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve code quality and type safety in filtering logic

Several improvements needed:

  1. Use strict equality (===) for mode comparison
  2. Replace magic numbers with constants
  3. Add null checks for organization access

Apply this diff to improve the code:

+ const FILTER_MODES = {
+   ALL_MEMBERS: 0,
+   ADMINS: 1
+ } as const;

  useEffect(() => {
-   if (mode == 0) {
+   if (mode === FILTER_MODES.ALL_MEMBERS) {
      if (data) {
        setMembers(updatedMembers);
      }
-   } else if (mode == 1) {
+   } else if (mode === FILTER_MODES.ADMINS) {
      if (data2) {
+       const organization = data2.organizations?.[0];
+       if (!organization) {
+         console.error('Failed to load organization data');
+         return;
+       }
-       const admins = data2.organizations[0].admins.map(
+       const admins = organization.admins.map(
          (admin: InterfaceMember) => ({
            ...admin,
            userType: 'Admin' as const,
          }),
        );
        setMembers(admins);
      }
    }
  }, [mode]);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
setMembers(updatedMembers);
}
} else if (mode == 1) {
if (data2) {
setMembers(data2.organizations[0].admins);
const admins = data2.organizations[0].admins.map(
(admin: InterfaceMember) => ({
...admin,
userType: 'Admin' as const,
}),
);
setMembers(admins);
const FILTER_MODES = {
ALL_MEMBERS: 0,
ADMINS: 1
} as const;
setMembers(updatedMembers);
}
} else if (mode === FILTER_MODES.ADMINS) {
if (data2) {
const organization = data2.organizations?.[0];
if (!organization) {
console.error('Failed to load organization data');
return;
}
const admins = organization.admins.map(
(admin: InterfaceMember) => ({
...admin,
userType: 'Admin' as const,
}),
);
setMembers(admins);

}
}
}, [mode]);
Expand Down
Loading