Continue ST V3 roles

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTabSection.tsx

@@ -6,14 +6,8 @@ import { TRole } from "@app/hooks/api/roles/types";
 import { OrgRoleModifySection } from "./OrgRoleModifySection";
 import { OrgRoleTable } from "./OrgRoleTable";
 
-type Props = {
-  roles?: TRole<undefined>[];
-  isRolesLoading?: boolean;
-};
-
-export const OrgRoleTabSection = ({ roles = [], isRolesLoading }: Props) => {
+export const OrgRoleTabSection = () => {
   const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["editRole"] as const);
-
   return popUp.editRole.isOpen ? (
     <motion.div
       key="role-modify"
@@ -35,11 +29,7 @@ export const OrgRoleTabSection = ({ roles = [], isRolesLoading }: Props) => {
       animate={{ opacity: 1, translateX: 0 }}
       exit={{ opacity: 0, translateX: -30 }}
     >
-      <OrgRoleTable
-        roles={roles}
-        isRolesLoading={isRolesLoading}
-        onSelectRole={(role) => handlePopUpOpen("editRole", role)}
-      />
+      <OrgRoleTable onSelectRole={(role) => handlePopUpOpen("editRole", role)} />
     </motion.div>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx

@@ -20,22 +20,26 @@ import {
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { usePopUp } from "@app/hooks";
-import { useDeleteRole } from "@app/hooks/api";
+import { useDeleteRole, useGetRoles } from "@app/hooks/api";
 import { TRole } from "@app/hooks/api/roles/types";
 
 type Props = {
-  isRolesLoading?: boolean;
-  roles?: TRole<undefined>[];
   onSelectRole: (role?: TRole<undefined>) => void;
 };
 
-export const OrgRoleTable = ({ isRolesLoading, roles = [], onSelectRole }: Props) => {
+export const OrgRoleTable = ({ 
+  onSelectRole 
+}: Props) => {
   const [searchRoles, setSearchRoles] = useState("");
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?._id || "";
   const { createNotification } = useNotificationContext();
   const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
 
+  const { data: roles, isLoading: isRolesLoading } = useGetRoles({
+    orgId
+  });
+
   const { mutateAsync: deleteRole } = useDeleteRole();
 
   const handleRoleDelete = async () => {
@@ -88,7 +92,7 @@ export const OrgRoleTable = ({ isRolesLoading, roles = [], onSelectRole }: Props
             </THead>
             <TBody>
               {isRolesLoading && <TableSkeleton columns={4} innerKey="org-roles" />}
-              {roles?.map((role) => {
+              {(roles as TRole<undefined>[])?.map((role) => {
                 const { _id: id, name, slug } = role;
                 const isNonMutatable = ["owner", "admin", "member"].includes(slug);