@workos-inc/widgets 1.0.0 → 1.1.0

package/src/lib/api/user.ts

@@ -1,502 +1,98 @@
 import {
-  keepPreviousData,
-  useMutation,
-  useQuery,
-  useQueryClient,
-} from "@tanstack/react-query";
+  getMembersQueryKey,
+  useInviteMember,
+  useMembers,
+  useRemoveMember,
+  useResendInvite,
+  useRevokeInvite,
+  useUpdateMember,
+} from "@repo/api";
+import { keepPreviousData, useQueryClient } from "@tanstack/react-query";
+import { USER_ROW_LIMIT } from "../constants";
 import {
   useUsersManagementContext,
   type UsersManagementContextType,
 } from "../users-management-context";
-import { parseErrorResponse } from "../utils";
-import { useWorkOsApiUrl } from "../widgets-context";
-import { API_ENDPOINTS } from "./config";
-import { USER_ROW_LIMIT, WIDGETS_API_VERSION } from "../constants";
-import { ApiError, FetchError, NoAuthTokenError } from "../errors";
-
-export interface PaginationData {
-  before?: string;
-  after?: string;
-}
-
-export type UserAction =
-  | "edit-role"
-  | "revoke-membership"
-  | "resend-invite"
-  | "revoke-invite";
-
-export type UserStatus =
-  | "Active"
-  | "Invited"
-  | "InviteExpired"
-  | "InviteRevoked";
-
-export interface UserRole {
-  slug: string;
-  name: string;
-}
-
-export interface User {
-  id: string;
-  email: string;
-  profilePictureUrl?: string | null;
-  firstName?: string | null;
-  lastName?: string | null;
-  emailVerified: boolean;
-  createdAt: string;
-  lastActivityAt?: string | null;
-  isLoggedInUser?: boolean;
-  roles: UserRole[];
-  actions: UserAction[];
-  status: UserStatus;
-}
-
-export type Paginated<T> = { data: T; pagination: PaginationData };
-
-type PaginatedUsers = Paginated<User[]>;
 
 export const useUsers = (context?: UsersManagementContextType) => {
   const {
-    authToken,
     state: { pagination, role, searchQuery },
   } = useUsersManagementContext(context);
-  const baseUrl = useWorkOsApiUrl();
   const limit = USER_ROW_LIMIT;
   const { before, after } = pagination || {};
 
-  return useQuery<PaginatedUsers>({
-    queryKey: [
-      "users",
-      { authToken, baseUrl, limit, before, after, role, searchQuery },
-    ],
-    queryFn: () =>
-      fetchUsers({
-        authToken,
-        baseUrl,
-        limit,
-        before,
-        after,
-        role,
-        searchQuery,
-      }),
-    enabled: !!authToken,
-    placeholderData: keepPreviousData,
-  });
-};
-
-export const useUser = (
-  userId: string,
-  initialContext?: UsersManagementContextType,
-) => {
-  const { authToken } = useUsersManagementContext(initialContext);
-  const baseUrl = useWorkOsApiUrl();
-  return useQuery<User>({
-    queryKey: ["user", userId],
-    queryFn: () => fetchUser(userId, { baseUrl, authToken }),
-    enabled: !!authToken,
-  });
-};
-
-export const useUpdateUserRole = (args?: {
-  onError?: (error: unknown) => void;
-}) => {
-  const { authToken } = useUsersManagementContext();
-  const queryClient = useQueryClient();
-  const baseUrl = useWorkOsApiUrl();
-  const { onError } = args || {};
-
-  return useMutation({
-    mutationFn: ({
-      id,
-      data: { roles },
-    }: {
-      id: string;
-      data: { roles: string[] };
-    }) => updateUserRole(id, { authToken, baseUrl, data: { roles } }),
-    onSuccess: (updatedUser) => {
-      queryClient.invalidateQueries({ queryKey: ["users"] });
-      queryClient.invalidateQueries({ queryKey: ["user", updatedUser.id] });
+  return useMembers(
+    {
+      after: after ?? undefined,
+      before: before ?? undefined,
+      limit: limit.toString(),
+      role: role ?? undefined,
+      search: searchQuery ?? undefined,
     },
-    onError,
-  });
-};
-
-export interface InviteUserPayload {
-  email: string;
-  role: string;
-}
-
-export const useInviteUser = (args?: {
-  onError?: (error: unknown) => void;
-}) => {
-  const { authToken } = useUsersManagementContext();
-  const queryClient = useQueryClient();
-  const baseUrl = useWorkOsApiUrl();
-  const { onError } = args || {};
-
-  return useMutation({
-    mutationFn: (data: InviteUserPayload) =>
-      inviteUser({ authToken, baseUrl, ...data }),
-    onSuccess: (_newUser) => {
-      queryClient.invalidateQueries({ queryKey: ["users"] });
+    {
+      query: {
+        placeholderData: keepPreviousData,
+      },
     },
-    onError,
-  });
+  );
 };
 
-export const useDeleteUser = (args?: {
-  onError?: (error: unknown) => void;
-}) => {
-  const { authToken } = useUsersManagementContext();
+export const useUpdateUserRole: typeof useUpdateMember = () => {
   const queryClient = useQueryClient();
-  const baseUrl = useWorkOsApiUrl();
-  const { onError } = args || {};
 
-  return useMutation({
-    mutationFn: (id: string) => deleteUser(id, { authToken, baseUrl }),
-    onSuccess: (_, userId) => {
-      queryClient.invalidateQueries({ queryKey: ["users"] });
-      queryClient.removeQueries({ queryKey: ["user", userId] });
+  return useUpdateMember({
+    mutation: {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: getMembersQueryKey() });
+      },
     },
-    onError,
   });
 };
 
-export const useRevokeUserInvite = (args?: {
-  onError?: (error: unknown) => void;
-}) => {
-  const { authToken } = useUsersManagementContext();
+export const useInviteUser: typeof useInviteMember = () => {
   const queryClient = useQueryClient();
-  const baseUrl = useWorkOsApiUrl();
-  const { onError } = args || {};
 
-  return useMutation({
-    mutationFn: (id: string) => revokeUserInvite(id, { authToken, baseUrl }),
-    onSuccess: (_, userId) => {
-      queryClient.invalidateQueries({ queryKey: ["users"] });
-      queryClient.removeQueries({ queryKey: ["user", userId] });
+  return useInviteMember({
+    mutation: {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: getMembersQueryKey() });
+      },
     },
-    onError,
   });
 };
 
-export const useResendUserInvite = (args?: {
-  onError?: (error: unknown) => void;
-}) => {
-  const { authToken } = useUsersManagementContext();
+export const useDeleteUser = () => {
   const queryClient = useQueryClient();
-  const baseUrl = useWorkOsApiUrl();
-  const { onError } = args || {};
 
-  return useMutation({
-    mutationFn: (id: string) => resendUserInvite(id, { authToken, baseUrl }),
-    onSuccess: (_, userId) => {
-      queryClient.invalidateQueries({ queryKey: ["users"] });
-      queryClient.removeQueries({ queryKey: ["user", userId] });
+  return useRemoveMember({
+    mutation: {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: getMembersQueryKey() });
+      },
     },
-    onError,
   });
 };
 
-type AuthToken = () => Promise<string>;
-
-/**
- * Fetch functions
- */
-async function fetchUsers({
-  baseUrl,
-  authToken,
-  limit,
-  role,
-  before,
-  after,
-  searchQuery,
-}: {
-  baseUrl: string;
-  authToken: AuthToken | null;
-  limit: number;
-  before: string | undefined;
-  after: string | undefined;
-  searchQuery: string | null;
-  role: string | null;
-}) {
-  if (!authToken) {
-    throw new NoAuthTokenError();
-  }
-  const url = new URL(`${baseUrl}/${API_ENDPOINTS.USERS}`);
-  url.searchParams.set("limit", limit.toString());
-  if (before) {
-    url.searchParams.set("before", before);
-  }
-  if (after) {
-    url.searchParams.set("after", after);
-  }
-  if (role) {
-    url.searchParams.set("role", role);
-  }
-  if (searchQuery) {
-    url.searchParams.set("search", searchQuery);
-  }
-  const response = await fetch(url, {
-    cache: "no-store",
-    headers: getAuthHeaders(await authToken()),
-  }).catch((error) => {
-    throw new FetchError({
-      message: "Failed to fetch users",
-      queryType: "query",
-      recordType: "users",
-      context: { error },
-    });
-  });
-
-  if (!response.ok) {
-    const { message, status } = await parseErrorResponse(response);
-    throw new ApiError({
-      message,
-      status,
-      queryType: "query",
-      recordType: "users",
-    });
-  }
-  // TODO validate the response
-  const json = await response.json();
-  const { data, listMetadata: pagination } = json as {
-    data: User[];
-    listMetadata: PaginationData;
-  };
-  return { data, pagination };
-}
-
-const fetchUser = async (
-  userId: string,
-  { authToken, baseUrl }: { authToken: AuthToken | null; baseUrl: string },
-) => {
-  if (!authToken) {
-    throw new NoAuthTokenError();
-  }
-  const response = await fetch(`${baseUrl}/${API_ENDPOINTS.USERS}/${userId}`, {
-    headers: getAuthHeaders(await authToken()),
-    cache: "no-store",
-  }).catch((error) => {
-    throw new FetchError({
-      message: "Failed to fetch user",
-      queryType: "query",
-      recordType: "users",
-      context: { error },
-    });
-  });
-
-  if (!response.ok) {
-    const { message, status } = await parseErrorResponse(response);
-    throw new ApiError({
-      message,
-      status,
-      queryType: "query",
-      recordType: "users",
-    });
-  }
-  // TODO validate the response
-  const json = await response.json();
-  return json.data as User;
-};
-
-const updateUserRole = async (
-  userId: string,
-  {
-    authToken,
-    baseUrl,
-    data,
-  }: {
-    authToken: AuthToken | null;
-    baseUrl: string;
-    data: { roles: string[] };
-  },
-) => {
-  if (!authToken) {
-    throw new NoAuthTokenError();
-  }
-
-  const response = await fetch(`${baseUrl}/${API_ENDPOINTS.USERS}/${userId}`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      ...getAuthHeaders(await authToken()),
-    },
-    body: JSON.stringify(data),
-  }).catch((error) => {
-    throw new FetchError({
-      message: "Failed to update user",
-      queryType: "mutation",
-      recordType: "users",
-      context: { error },
-    });
-  });
-
-  if (!response.ok) {
-    const { message, status } = await parseErrorResponse(response);
-    throw new ApiError({
-      message,
-      status,
-      queryType: "mutation",
-      recordType: "users",
-    });
-  }
-  // TODO validate the response
-  const json = await response.json();
-  return json as { id: string; success: boolean };
-};
+export const useRevokeUserInvite = () => {
+  const queryClient = useQueryClient();
 
-const inviteUser = async ({
-  authToken,
-  baseUrl,
-  email,
-  role,
-}: InviteUserPayload & { authToken: AuthToken | null; baseUrl: string }) => {
-  if (!authToken) {
-    throw new NoAuthTokenError();
-  }
-  const response = await fetch(`${baseUrl}/${API_ENDPOINTS.USER_INVITE}`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      ...getAuthHeaders(await authToken()),
+  return useRevokeInvite({
+    mutation: {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: getMembersQueryKey() });
+      },
     },
-    body: JSON.stringify({
-      email,
-      roles: [role],
-    }),
-  }).catch((error) => {
-    throw new FetchError({
-      message: "Failed to invite user",
-      queryType: "mutation",
-      recordType: "users",
-      context: { error },
-    });
-  });
-
-  if (!response.ok) {
-    const { message, status } = await parseErrorResponse(response);
-    throw new ApiError({
-      message,
-      status,
-      queryType: "mutation",
-      recordType: "users",
-    });
-  }
-  // TODO validate the response
-  const json = await response.json();
-  return json as unknown;
-};
-
-const deleteUser = async (
-  userId: string,
-  { authToken, baseUrl }: { authToken: AuthToken | null; baseUrl: string },
-) => {
-  if (!authToken) {
-    throw new NoAuthTokenError();
-  }
-
-  const response = await fetch(`${baseUrl}/${API_ENDPOINTS.USERS}/${userId}`, {
-    method: "DELETE",
-    headers: getAuthHeaders(await authToken()),
-  }).catch((error) => {
-    throw new FetchError({
-      message: "Failed to delete user. Please try again.",
-      queryType: "mutation",
-      recordType: "users",
-      context: { error },
-    });
   });
-
-  if (!response.ok) {
-    const { message, status } = await parseErrorResponse(response);
-    throw new ApiError({
-      message,
-      status,
-      queryType: "mutation",
-      recordType: "users",
-    });
-  }
-  // TODO validate the response
-  const json = await response.json();
-  return json as unknown;
 };
 
-const revokeUserInvite = async (
-  userId: string,
-  { authToken, baseUrl }: { authToken: AuthToken | null; baseUrl: string },
-) => {
-  if (!authToken) {
-    throw new NoAuthTokenError();
-  }
-  const response = await fetch(
-    `${baseUrl}/${API_ENDPOINTS.USER_INVITES}/${userId}`,
-    {
-      method: "DELETE",
-      headers: getAuthHeaders(await authToken()),
-    },
-  ).catch((error) => {
-    throw new FetchError({
-      message: "Failed to resend user invite. Please try again.",
-      queryType: "mutation",
-      recordType: "users",
-      context: { error },
-    });
-  });
-
-  if (!response.ok) {
-    const { message, status } = await parseErrorResponse(response);
-    throw new ApiError({
-      message,
-      status,
-      queryType: "mutation",
-      recordType: "users",
-    });
-  }
-  // TODO validate the response
-  const json = await response.json();
-  return json as unknown;
-};
+export const useResendUserInvite = () => {
+  const queryClient = useQueryClient();
 
-const resendUserInvite = async (
-  userId: string,
-  { authToken, baseUrl }: { authToken: AuthToken | null; baseUrl: string },
-) => {
-  if (!authToken) {
-    throw new NoAuthTokenError();
-  }
-  const response = await fetch(
-    `${baseUrl}/${API_ENDPOINTS.USER_INVITES_RESEND(userId)}`,
-    {
-      method: "POST",
-      headers: getAuthHeaders(await authToken()),
+  return useResendInvite({
+    mutation: {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: getMembersQueryKey() });
+      },
     },
-  ).catch((error) => {
-    throw new FetchError({
-      message: "Failed to resend user invite. Please try again.",
-      queryType: "mutation",
-      recordType: "users",
-      context: { error },
-    });
   });
-
-  if (!response.ok) {
-    const { message, status } = await parseErrorResponse(response);
-    throw new ApiError({
-      message,
-      status,
-      queryType: "mutation",
-      recordType: "users",
-    });
-  }
-  // TODO validate the response
-  const json = await response.json();
-  return json as unknown;
 };
-
-function getAuthHeaders(authToken: string): HeadersInit {
-  return {
-    Authorization: `Bearer ${authToken}`,
-    "WorkOS-Widgets-Version": WIDGETS_API_VERSION,
-  };
-}

package/src/lib/card-list.css

@@ -0,0 +1,3 @@
+.woswidgets-card-list-item:not(:first-child) {
+  border-top: 1px solid var(--gray-a6);
+}