@workos-inc/widgets 0.0.0-pre.0

package/src/lib/users-management-context.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import * as React from "react";
+import type { PaginationData } from "./api/user";
+import {
+  UsersManagementAction,
+  UsersManagementState,
+} from "./users-management-state";
+
+export interface UsersManagementContextType {
+  authToken: string | null;
+  state: UsersManagementState;
+  dispatch: React.Dispatch<UsersManagementAction>;
+}
+
+const UsersManagementContext = React.createContext<
+  UsersManagementContextType | undefined
+>(undefined);
+UsersManagementContext.displayName = "UsersManagementContext";
+
+export const UsersManagementContextProvider: React.FC<{
+  children?: React.ReactNode;
+  value: UsersManagementContextType;
+}> = ({ children, value }) => {
+  return (
+    <UsersManagementContext.Provider value={value}>
+      {children}
+    </UsersManagementContext.Provider>
+  );
+};
+
+const NOOP = () => void 0;
+const EMPTY_PAGINATION: PaginationData = {};
+
+/**
+ * The context may be provided if it is instantiated in the tree above the user.
+ */
+export function useUsersManagementContext(
+  initialContext?: UsersManagementContextType | null,
+): UsersManagementContextType {
+  const context = React.useContext(UsersManagementContext);
+  const providedToken = initialContext?.authToken ?? null;
+  const hasContext = !!context;
+  React.useEffect(() => {
+    if (!providedToken && !hasContext) {
+      console.error(
+        "useUsersManagementContext was called from a component outside of the UsersManagementContext provider without providing an authToken directly. Resulting queries may not run as expected.",
+      );
+    }
+  }, [providedToken, hasContext]);
+
+  if (context) {
+    return context;
+  }
+
+  if (initialContext) {
+    return initialContext;
+  }
+
+  return {
+    authToken: null,
+    dispatch: NOOP,
+    state: {
+      pagination: EMPTY_PAGINATION,
+      role: null,
+      searchQuery: null,
+    },
+  };
+}
+
+/**
+ * The auth token may be provided if it is instantiated in the tree above the
+ * user management context. Otherwise we'll use the context value if it exists.
+ */
+export function useUsersManagementPagniatoin(
+  args: { authToken?: string | null } | undefined | null,
+) {
+  const context = React.useContext(UsersManagementContext);
+  const providedToken = args?.authToken;
+  const hasContext = !!context;
+  React.useEffect(() => {
+    if (!providedToken && !hasContext) {
+      console.error(
+        "useUsersManagementAuthToken was called from a component outside of the UsersManagementContext provider without providing an authToken directly. Resulting queries may not run as expected.",
+      );
+    }
+  }, [providedToken, hasContext]);
+  return providedToken || context?.authToken || null;
+}

package/src/lib/users-management-state.ts

@@ -0,0 +1,165 @@
+import * as React from "react";
+import type { PaginationData } from "./api/user";
+import { canUseDOM } from "./utils";
+
+export function useUsersManagementState(initialState: UsersManagementState) {
+  const [[state, effects], dispatch] = React.useReducer(reducer, [
+    initialState,
+    [],
+  ]);
+
+  React.useEffect(() => {
+    if (window !== window.top) {
+      // do not use query params if widget is rendered in an iframe
+      return;
+    }
+    const params = new URLSearchParams(window.location.search);
+    dispatch({ type: "INIT", params });
+  }, []);
+
+  React.useEffect(() => {
+    for (const effect of effects) {
+      effect();
+    }
+  }, [effects]);
+
+  return [state, dispatch] as const;
+}
+
+function reducer(
+  current: StateWithEffects<UsersManagementState>,
+  action: UsersManagementAction,
+): StateWithEffects<UsersManagementState> {
+  const effects: EffectFn[] = [];
+  const exec = (fn: () => void) => {
+    const effect = () => {
+      if (!effect.disposed) {
+        effect.disposed = true;
+        fn();
+      }
+    };
+    effect.disposed = false;
+    effects.push(effect);
+  };
+
+  const [currentState] = current;
+  switch (action.type) {
+    case "INIT": {
+      const { params } = action;
+      let role, searchQuery;
+      if ((role = params.get("ak_role"))) {
+        return [{ ...currentState, searchQuery: null, role }, effects];
+      }
+      if ((searchQuery = params.get("ak_q"))) {
+        return [{ ...currentState, searchQuery, role: null }, effects];
+      }
+      return current;
+    }
+    case "SET_PAGINATION": {
+      const { pagination } = action;
+      if (
+        (pagination.after &&
+          pagination.after === currentState.pagination?.after) ||
+        (pagination.before &&
+          pagination.before === currentState.pagination?.before)
+      ) {
+        return current;
+      }
+
+      return [{ ...currentState, pagination }, effects];
+    }
+    case "FILTER_BY_ROLE": {
+      if (action.role === currentState.role) {
+        return current;
+      }
+      const { role } = action;
+      exec(() =>
+        updateQueryParams(
+          { ak_role: role, ak_q: null },
+          { replaceState: true },
+        ),
+      );
+      return [
+        { ...currentState, pagination: null, role, searchQuery: null },
+        effects,
+      ];
+    }
+    case "FILTER_BY_SEARCH": {
+      if (action.searchQuery === currentState.searchQuery) {
+        return current;
+      }
+      const { searchQuery } = action;
+      exec(() =>
+        updateQueryParams(
+          { ak_role: null, ak_q: searchQuery },
+          { replaceState: true },
+        ),
+      );
+      return [
+        { ...currentState, pagination: null, role: null, searchQuery },
+        effects,
+      ];
+      //
+      break;
+    }
+    default:
+      return current;
+  }
+}
+
+export interface UsersManagementState {
+  searchQuery: string | null;
+  role: string | null;
+  pagination: PaginationData | null;
+}
+
+export type UsersManagementAction =
+  | { type: "INIT"; params: URLSearchParams }
+  | { type: "FILTER_BY_SEARCH"; searchQuery: string | null }
+  | { type: "FILTER_BY_ROLE"; role: string | null }
+  | { type: "SET_PAGINATION"; pagination: PaginationData };
+
+type EffectFn = {
+  (): void;
+  disposed: boolean;
+};
+
+type StateWithEffects<State> = [State, EffectFn[]];
+
+function updateQueryParams(
+  newParams: { [key: string]: { toString(): string } | null },
+  args: { replaceState?: boolean } = {},
+) {
+  if (!canUseDOM) {
+    throw new Error("Cannot update query params on the server");
+  }
+
+  if (window !== window.top) {
+    // do not update query params if widget is rendered in an iframe
+    return;
+  }
+
+  const initialSearch = window.location.search;
+  const params = new URLSearchParams(initialSearch);
+  Object.entries(newParams).forEach(([key, value]) => {
+    if (value != null && value !== "") {
+      params.set(key, String(value));
+    } else {
+      params.delete(key);
+    }
+  });
+
+  if (initialSearch === `?${params.toString()}`) {
+    return;
+  }
+
+  const newUrl = params.toString()
+    ? `${window.location.pathname}?${params}`
+    : window.location.pathname;
+
+  if (args.replaceState) {
+    window.history.replaceState({}, "", newUrl);
+  } else {
+    window.history.pushState({}, "", newUrl);
+  }
+}