fix: loader and types

raystack · Oct 1, 2024 · dc23d44 · dc23d44
1 parent 7af7076
commit dc23d44
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 41 deletions.
diff --git a/sdks/js/packages/core/react/components/organization/members/MemberRemoveConfirm.tsx b/sdks/js/packages/core/react/components/organization/members/MemberRemoveConfirm.tsx
@@ -13,9 +13,10 @@ import { useState } from 'react';
 import { toast } from 'sonner';
 
 const MemberRemoveConfirm = () => {
-  const navigate = useNavigate({ from: '/members/remove-member/$memberId/$organizationId/$invited' });
-  const { memberId, organizationId, invited } = useParams({ from: '/members/remove-member/$memberId/$organizationId/$invited' });
-  const { client } = useFrontier();
+  const navigate = useNavigate({ from: '/members/remove-member/$memberId/$invited' });
+  const { memberId, invited } = useParams({ from: '/members/remove-member/$memberId/$invited' });
+  const { client, activeOrganization } = useFrontier();
+  const organizationId = activeOrganization?.id ?? ''
   const [isLoading, setIsLoading] = useState(false);
 
   const deleteMember = async () => {

diff --git a/sdks/js/packages/core/react/components/organization/members/index.tsx b/sdks/js/packages/core/react/components/organization/members/index.tsx
@@ -151,6 +151,7 @@ const MembersTable = ({
         emptyState={noDataChildren}
         parentStyle={{ height: 'calc(100vh - 222px)' }}
         style={tableStyle}
+
       >
         <DataTable.Toolbar
           style={{ padding: 0, border: 0, marginBottom: 'var(--pd-16)' }}
@@ -180,6 +181,7 @@ const MembersTable = ({
                     })
                   }
                   disabled={!canCreateInvite}
+                  data-test-id="frontier-sdk-remove-member-link"
                 >
                   Invite people
                 </Button>

diff --git a/sdks/js/packages/core/react/components/organization/members/member.columns.tsx b/sdks/js/packages/core/react/components/organization/members/member.columns.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import {
   DotsHorizontalIcon,
   TrashIcon,
@@ -16,25 +15,22 @@ import { useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { useFrontier } from '~/react/contexts/FrontierContext';
 import {
-  V1Beta1Invitation,
   V1Beta1Policy,
   V1Beta1Role,
-  V1Beta1User
 } from '~/src';
-import { Role } from '~/src/types';
 import { differenceWith, getInitials, isEqualById } from '~/utils';
-import MemberRemoveConfirm from './MemberRemoveConfirm';
 import styles from '../organization.module.css';
+import { MemberWithInvite } from '~/react/hooks/useOrganizationMembers';
+
+
 
 export const getColumns = (
   organizationId: string,
-  memberRoles: Record<string, Role[]> = {},
-  roles: Role[] = [],
+  memberRoles: Record<string, V1Beta1Role[]> = {},
+  roles: V1Beta1Role[] = [],
   canDeleteUser = false,
-  refetch = () => null
-): ApsaraColumnDef<
-  V1Beta1User & V1Beta1Invitation & { invited?: boolean }
->[] => [
+  refetch = () => {},
+): ApsaraColumnDef<MemberWithInvite>[] => [
   {
     header: '',
     accessorKey: 'avatar',
@@ -107,7 +103,7 @@ export const getColumns = (
     cell: ({ row }) => (
       <MembersActions
         refetch={refetch}
-        member={row.original as V1Beta1User}
+        member={row.original}
         organizationId={organizationId}
         canUpdateGroup={canDeleteUser}
         excludedRoles={differenceWith<V1Beta1Role>(
@@ -129,7 +125,7 @@ const MembersActions = ({
   excludedRoles = [],
   refetch = () => null
 }: {
-  member: V1Beta1User;
+  member: MemberWithInvite;
   canUpdateGroup?: boolean;
   organizationId: string;
   excludedRoles: V1Beta1Role[];
@@ -192,7 +188,11 @@ const MembersActions = ({
 
             <DropdownMenu.Item style={{ padding: 0 }}>
               <div
-                onClick={() => navigate({ to: `/members/remove-member/${member.id}/${organizationId}/${member?.invited}` })}
+                onClick={() => navigate({ to: `/members/remove-member/$memberId/$invited`, params: {
+                  memberId: member?.id || "",
+                  invited: (member?.invited || false).toString()
+                } 
+              })}
                 className={styles.dropdownActionItem}
                 data-test-id="remove-member-dropdown-item"
               >

diff --git a/sdks/js/packages/core/react/components/organization/members/member.types.tsx b/sdks/js/packages/core/react/components/organization/members/member.types.tsx
@@ -1,7 +1,8 @@
-import { Role, User } from '~/src/types';
+import { MemberWithInvite } from '~/react/hooks/useOrganizationMembers';
+import {  V1Beta1User, V1Beta1Role } from '~/src';
 
 export type MembersType = {
-  users: User[];
+  users: V1Beta1User[];
 };
 
 export enum MemberActionmethods {
@@ -10,11 +11,11 @@ export enum MemberActionmethods {
 
 export type MembersTableType = {
   isLoading?: boolean;
-  users: User[];
+  users: MemberWithInvite[];
   organizationId: string;
   canCreateInvite?: boolean;
   canDeleteUser?: boolean;
-  memberRoles: Record<string, Role[]>;
-  roles: Role[];
+  memberRoles: Record<string, V1Beta1Role[]>;
+  roles: V1Beta1Role[];
   refetch?: () => void;
 };
diff --git a/sdks/js/packages/core/react/components/organization/profile.tsx b/sdks/js/packages/core/react/components/organization/profile.tsx
@@ -144,7 +144,7 @@ const inviteMemberRoute = new Route({
 
 const removeMemberRoute = new Route({
   getParentRoute: () => membersRoute,
-  path: '/remove-member/$memberId/$organizationId/$invited',
+  path: '/remove-member/$memberId/$invited',
   component: MemberRemoveConfirm
 });
 

diff --git a/sdks/js/packages/core/react/hooks/useOrganizationMembers.ts b/sdks/js/packages/core/react/hooks/useOrganizationMembers.ts
@@ -1,18 +1,22 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { V1Beta1User } from '~/src';
-import { Role } from '~/src/types';
+import { useCallback, useEffect, useState } from 'react';
+import { V1Beta1User, V1Beta1Role, V1Beta1Invitation } from '~/src';
 import { PERMISSIONS } from '~/utils';
 import { useFrontier } from '../contexts/FrontierContext';
 
+
+export type MemberWithInvite = V1Beta1User & V1Beta1Invitation & {invited?: boolean}
+
+
+
 export const useOrganizationMembers = ({ showInvitations = false }) => {
-  const [users, setUsers] = useState([]);
-  const [roles, setRoles] = useState([]);
-  const [invitations, setInvitations] = useState([]);
+  const [users, setUsers] = useState<V1Beta1User[]>([]);
+  const [roles, setRoles] = useState<V1Beta1Role[]>([]);
+  const [invitations, setInvitations] = useState<MemberWithInvite[]>([]);
 
   const [isUsersLoading, setIsUsersLoading] = useState(false);
   const [isRolesLoading, setIsRolesLoading] = useState(false);
   const [isInvitationsLoading, setIsInvitationsLoading] = useState(false);
-  const [memberRoles, setMemberRoles] = useState<Record<string, Role[]>>({});
+  const [memberRoles, setMemberRoles] = useState<Record<string, V1Beta1Role[]>>({});
 
   const { client, activeOrganization: organization } = useFrontier();
 
@@ -24,7 +28,7 @@ export const useOrganizationMembers = ({ showInvitations = false }) => {
         // @ts-ignore
         data: { users, role_pairs }
       } = await client?.frontierServiceListOrganizationUsers(organization?.id, {
-        withRoles: true
+        with_roles: true
       });
       setUsers(users);
       setMemberRoles(
@@ -69,7 +73,7 @@ export const useOrganizationMembers = ({ showInvitations = false }) => {
       } = await client?.frontierServiceListOrganizationInvitations(
         organization?.id
       );
-      const invitedUsers = invitations.map((user: V1Beta1User) => ({
+      const invitedUsers : MemberWithInvite[] = invitations.map((user: V1Beta1User) => ({
         ...user,
         invited: true
       }));
@@ -95,16 +99,10 @@ export const useOrganizationMembers = ({ showInvitations = false }) => {
     }
   }, [showInvitations, fetchInvitations]);
 
-  const isFetching = isUsersLoading || isInvitationsLoading;
+  const isFetching = isUsersLoading || isInvitationsLoading || isRolesLoading;
+
 
-  const updatedUsers = useMemo(() => {
-    const totalUsers = [...users, ...invitations];
-    return isFetching
-      ? ([{ id: 1 }, { id: 2 }, { id: 3 }] as any)
-      : totalUsers.length
-      ? totalUsers
-      : [];
-  }, [invitations, isFetching, users]);
+  const updatedUsers = [...users, ...invitations];
 
   const refetch = useCallback(() => {
     fetchOrganizationUser();