@fonderie/react-admin-screens 0.5.0 → 0.6.0

package/dist/index.js

@@ -443,20 +443,30 @@ function TokensScreen({ client }) {
 }
 
 // src/screens/UsersScreen.tsx
-import { useAdminLoginHistory, useAdminUser, useAdminUserSessions } from "@fonderie/react-admin";
+import {
+  useAdminLoginHistory,
+  useAdminUser,
+  useAdminUserSessions,
+  useAdminUsers
+} from "@fonderie/react-admin";
 import { useState as useState2 } from "react";
 import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-function UsersScreen({ client }) {
+function UsersScreen({ client, pageSize = 50 }) {
   const [input, setInput] = useState2("");
-  const [email, setEmail] = useState2(void 0);
+  const [selected, setSelected] = useState2(null);
+  const list = useAdminUsers(client, { limit: pageSize });
   const { user, isLoading, error, suspend, unsuspend, revokeSessions } = useAdminUser(
     client,
-    email ? { email } : {}
+    selected ?? {}
   );
   const userId = user?.id ?? null;
   const sessions = useAdminUserSessions(client, userId);
   const history = useAdminLoginHistory(client, userId, { limit: 20 });
   const yesNo = (v) => v ? /* @__PURE__ */ jsx8("span", { style: styles.ok, children: "yes" }) : /* @__PURE__ */ jsx8("span", { style: styles.muted, children: "no" });
+  const clear = () => {
+    setSelected(null);
+    setInput("");
+  };
   return /* @__PURE__ */ jsxs8("div", { style: styles.container, children: [
     /* @__PURE__ */ jsx8("h1", { style: styles.title, children: "Users" }),
     /* @__PURE__ */ jsxs8(
@@ -465,7 +475,8 @@ function UsersScreen({ client }) {
         style: styles.toolbar,
         onSubmit: (e) => {
           e.preventDefault();
-          setEmail(input.trim() || void 0);
+          const email = input.trim();
+          setSelected(email ? { email } : null);
         },
         children: [
           /* @__PURE__ */ jsx8(
@@ -479,11 +490,60 @@ function UsersScreen({ client }) {
               "aria-label": "Email"
             }
           ),
-          /* @__PURE__ */ jsx8("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Look up" })
+          /* @__PURE__ */ jsx8("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Look up" }),
+          selected ? /* @__PURE__ */ jsx8("button", { type: "button", style: styles.button, onClick: clear, children: "\u2190 All users" }) : /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => void list.refresh(),
+              disabled: list.isLoading,
+              children: "Refresh"
+            }
+          )
         ]
       }
     ),
     error ? /* @__PURE__ */ jsx8("p", { style: styles.error, role: "alert", children: error.status === 404 ? "No user with that email." : error.explanation }) : null,
+    !selected ? /* @__PURE__ */ jsxs8(Fragment5, { children: [
+      list.error ? /* @__PURE__ */ jsx8("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
+      list.users.length === 0 && !list.isLoading ? /* @__PURE__ */ jsx8("p", { style: styles.muted, children: "No users yet." }) : /* @__PURE__ */ jsxs8("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsxs8("tr", { children: [
+          /* @__PURE__ */ jsx8("th", { style: styles.th, children: "Email" }),
+          /* @__PURE__ */ jsx8("th", { style: styles.th, children: "Name" }),
+          /* @__PURE__ */ jsx8("th", { style: styles.th, children: "Created" }),
+          /* @__PURE__ */ jsx8("th", { style: styles.th, children: "Status" })
+        ] }) }),
+        /* @__PURE__ */ jsx8("tbody", { children: list.users.map((u) => /* @__PURE__ */ jsxs8("tr", { children: [
+          /* @__PURE__ */ jsx8("td", { style: styles.td, children: /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              style: { ...styles.navItem, padding: 0 },
+              onClick: () => setSelected({ id: u.id }),
+              children: u.email
+            }
+          ) }),
+          /* @__PURE__ */ jsx8("td", { style: styles.td, children: `${u.firstName ?? ""} ${u.lastName ?? ""}`.trim() || /* @__PURE__ */ jsx8("span", { style: styles.muted, children: "\u2014" }) }),
+          /* @__PURE__ */ jsx8("td", { style: styles.td, children: new Date(u.createdAt).toLocaleDateString() }),
+          /* @__PURE__ */ jsxs8("td", { style: styles.td, children: [
+            u.suspended ? /* @__PURE__ */ jsx8("span", { style: styles.badge, children: "suspended" }) : null,
+            u.deletedAt ? /* @__PURE__ */ jsx8("span", { style: styles.badge, children: "deleted" }) : null,
+            !u.suspended && !u.deletedAt ? /* @__PURE__ */ jsx8("span", { style: styles.muted, children: "active" }) : null
+          ] })
+        ] }, u.id)) })
+      ] }),
+      list.isLoading ? /* @__PURE__ */ jsx8("p", { style: styles.status, children: "Loading\u2026" }) : null,
+      list.hasMore && !list.isLoading ? /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          style: { ...styles.button, marginTop: 8 },
+          onClick: () => void list.loadMore(),
+          children: "Load more"
+        }
+      ) : null
+    ] }) : null,
     user ? /* @__PURE__ */ jsxs8(Fragment5, { children: [
       /* @__PURE__ */ jsxs8("h2", { style: styles.subtitle, children: [
         user.firstName || user.lastName ? `${user.firstName} ${user.lastName}`.trim() : user.email,
@@ -657,17 +717,24 @@ function CatalogScreen({ client }) {
 }
 
 // src/screens/SubscriberScreen.tsx
-import { useAdminSubscriber } from "@fonderie/react-admin";
+import { useAdminSubscriber, useAdminSubscribers } from "@fonderie/react-admin";
 import { useState as useState3 } from "react";
 import { Fragment as Fragment7, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
-function SubscriberScreen({ client }) {
+function SubscriberScreen({ client, pageSize = 50 }) {
   const [type, setType] = useState3("user");
   const [idInput, setIdInput] = useState3("");
   const [subscriber, setSubscriber] = useState3(null);
+  const list = useAdminSubscribers(client, { limit: pageSize });
   const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(client, subscriber, { limit: 20 });
   const [amount, setAmount] = useState3("");
   const [note, setNote] = useState3("");
   const [granted, setGranted] = useState3(null);
+  const open = (t, id) => {
+    setGranted(null);
+    setType(t);
+    setIdInput(id);
+    setSubscriber({ type: t, id });
+  };
   return /* @__PURE__ */ jsxs10("div", { style: styles.container, children: [
     /* @__PURE__ */ jsx10("h1", { style: styles.title, children: "Subscriber" }),
     /* @__PURE__ */ jsxs10(
@@ -703,11 +770,79 @@ function SubscriberScreen({ client }) {
               "aria-label": "Subscriber id"
             }
           ),
-          /* @__PURE__ */ jsx10("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Look up" })
+          /* @__PURE__ */ jsx10("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Look up" }),
+          subscriber ? /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => {
+                setSubscriber(null);
+                setIdInput("");
+                setGranted(null);
+              },
+              children: "\u2190 All subscribers"
+            }
+          ) : /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => void list.refresh(),
+              disabled: list.isLoading,
+              children: "Refresh"
+            }
+          )
         ]
       }
     ),
     error ? /* @__PURE__ */ jsx10("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    !subscriber ? /* @__PURE__ */ jsxs10(Fragment7, { children: [
+      list.error ? /* @__PURE__ */ jsx10("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
+      list.subscriptions.length === 0 && !list.isLoading ? /* @__PURE__ */ jsx10("p", { style: styles.muted, children: "No subscribers yet." }) : /* @__PURE__ */ jsxs10("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsxs10("tr", { children: [
+          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Subscriber" }),
+          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Plan" }),
+          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Status" }),
+          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Renews" })
+        ] }) }),
+        /* @__PURE__ */ jsx10("tbody", { children: list.subscriptions.map((s) => /* @__PURE__ */ jsxs10("tr", { children: [
+          /* @__PURE__ */ jsx10("td", { style: styles.td, children: /* @__PURE__ */ jsxs10(
+            "button",
+            {
+              type: "button",
+              style: { ...styles.navItem, padding: 0, ...styles.mono },
+              onClick: () => open(s.subscriberType, s.subscriberId),
+              children: [
+                s.subscriberType,
+                "/",
+                s.subscriberId
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs10("td", { style: styles.td, children: [
+            /* @__PURE__ */ jsx10("strong", { children: s.plan }),
+            " \xB7 ",
+            s.interval
+          ] }),
+          /* @__PURE__ */ jsxs10("td", { style: styles.td, children: [
+            s.status,
+            s.cancelAtPeriodEnd ? /* @__PURE__ */ jsx10("span", { style: styles.badge, children: "cancels" }) : null
+          ] }),
+          /* @__PURE__ */ jsx10("td", { style: styles.td, children: s.currentPeriodEnd ? new Date(s.currentPeriodEnd).toLocaleDateString() : /* @__PURE__ */ jsx10("span", { style: styles.muted, children: "\u2014" }) })
+        ] }, s.id)) })
+      ] }),
+      list.isLoading ? /* @__PURE__ */ jsx10("p", { style: styles.status, children: "Loading\u2026" }) : null,
+      list.hasMore && !list.isLoading ? /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          style: { ...styles.button, marginTop: 8 },
+          onClick: () => void list.loadMore(),
+          children: "Load more"
+        }
+      ) : null
+    ] }) : null,
     subscriber && !isLoading ? /* @__PURE__ */ jsxs10(Fragment7, { children: [
       /* @__PURE__ */ jsx10("h2", { style: styles.subtitle, children: "Subscription" }),
       subscription ? /* @__PURE__ */ jsx10("table", { style: styles.table, children: /* @__PURE__ */ jsxs10("tbody", { children: [