@indietabletop/appkit 4.0.0 → 4.1.0

package/lib/ModernIDB/ModernIDB.ts

@@ -5,6 +5,7 @@ import { ModernIDBError } from "./ModernIDBError.ts";
 import { ObjectStore } from "./ObjectStore.ts";
 import type {
   BlockingHandler,
+  ModernIDBIndexes,
   ModernIDBSchema,
   ModernIDBState,
   OpenRequestHandlers,
@@ -36,7 +37,7 @@ type DatabaseProps = {
 
 export class ModernIDB<
   Schema extends ModernIDBSchema,
-  IndexNames extends { [K in keyof Schema]?: string },
+  IndexNames extends ModernIDBIndexes<Schema>,
 > {
   readonly name: string;
   readonly version: number;
@@ -110,7 +111,6 @@ export class ModernIDB<
     if (this.state !== "closed") {
       throw new ModernIDBError(
         "InvalidConnectionStateError",
-
         `Cannot open connection to database '${this.name}'. Instance must ` +
           `be in a 'closed' state in order to be opened, but current ` +
           `state is '${this.state}'.`,

package/lib/ModernIDB/types.ts

@@ -13,6 +13,10 @@ export type ModernIDBSchema = {
   [key: string]: unknown;
 };
 
+export type ModernIDBIndexes<Schema extends ModernIDBSchema> = {
+  [K in keyof Schema]?: string;
+};
+
 export type VersionChangeHandler<
   Schema extends ModernIDBSchema,
   IndexNames extends {

package/lib/SubscribeCard/SubscribeByEmailCard.stories.tsx

@@ -4,12 +4,6 @@ import { LetterheadParagraph } from "../Letterhead/index.tsx";
 import { sleep } from "../sleep.ts";
 import { SubscribeByEmailCard } from "./SubscribeByEmailCard.tsx";
 
-const pledge = {
-  id: "1",
-  email: "test@example.com",
-  contactSubscribed: false,
-};
-
 const handlers = {
   subscribe() {
     return http.post(

package/lib/account/AccountIssueView.tsx

@@ -6,13 +6,11 @@ import {
   LetterheadHeading,
   LetterheadParagraph,
 } from "../Letterhead/index.tsx";
-import type { EventHandlerWithReload } from "./types.ts";
+import { useAppActions } from "../store/index.tsx";
 
-export function AccountIssueView(props: {
-  onLogout: EventHandlerWithReload;
-  reload: () => void;
-}) {
-  const { onLogout, reload } = props;
+export function AccountIssueView(props: { reload: () => void }) {
+  const { reload } = props;
+  const { logout } = useAppActions();
 
   return (
     <Letterhead>
@@ -25,7 +23,13 @@ export function AccountIssueView(props: {
 
       <LetterheadParagraph>
         {"You can try "}
-        <Button {...cx(interactiveText)} onClick={() => onLogout({ reload })}>
+        <Button
+          {...cx(interactiveText)}
+          onClick={async () => {
+            await logout();
+            reload();
+          }}
+        >
           logging out
         </Button>
         {" and in again. "}

package/lib/account/AlreadyLoggedInView.tsx

@@ -7,16 +7,16 @@ import {
   LetterheadHeading,
   LetterheadParagraph,
 } from "../Letterhead/index.tsx";
+import { useAppActions } from "../store/index.tsx";
 import type { CurrentUser } from "../types.ts";
-import type { EventHandlerWithReload } from "./types.ts";
 
 export function AlreadyLoggedInView(props: {
   currentUser: CurrentUser;
-  onLogout: EventHandlerWithReload;
   reload: () => void;
 }) {
+  const { currentUser, reload } = props;
   const { hrefs } = useAppConfig();
-  const { currentUser, onLogout, reload } = props;
+  const { logout } = useAppActions();
 
   return (
     <Letterhead>
@@ -30,10 +30,13 @@ export function AlreadyLoggedInView(props: {
         <Link className={interactiveText} href={hrefs.dashboard()}>
           Continue
         </Link>
-        {` as current user, or `}
+        {` as the current user, or `}
         <Button
           className={interactiveText}
-          onClick={() => onLogout({ reload })}
+          onClick={async () => {
+            await logout();
+            reload();
+          }}
         >
           log out
         </Button>

package/lib/account/CurrentUserFetcher.stories.tsx

@@ -1,7 +1,6 @@
 import { Story } from "@storybook/addon-docs/blocks";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { http, HttpResponse } from "msw";
-import { fn } from "storybook/test";
 import { sleep } from "../sleep.ts";
 import type { CurrentUser, SessionInfo } from "../types.ts";
 import { CurrentUserFetcher } from "./CurrentUserFetcher.tsx";
@@ -168,11 +167,6 @@ const meta = {
   component: CurrentUserFetcher,
   tags: ["autodocs"],
   args: {
-    localUser: null,
-    onLogout: fn(),
-    onClearLocalContent: fn(),
-    onLogin: fn(),
-    onServerLogout: fn(),
     children: (
       <div
         style={{
@@ -207,9 +201,6 @@ type Story = StoryObj<typeof meta>;
  * the local user (determined by the user id).
  */
 export const Default: Story = {
-  args: {
-    localUser: data.john,
-  },
   parameters: {
     msw: {
       handlers: {
@@ -230,9 +221,6 @@ export const NoLocalUser: Story = {};
  * error 401. The user should supply their credentials again.
  */
 export const SessionExpired: Story = {
-  args: {
-    localUser: data.john,
-  },
   parameters: {
     msw: {
       handlers: {
@@ -254,10 +242,6 @@ export const SessionExpired: Story = {
  * if not handled correctly.
  */
 export const UserMismatch: Story = {
-  args: {
-    localUser: data.john,
-  },
-
   parameters: {
     msw: {
       handlers: {
@@ -270,10 +254,6 @@ export const UserMismatch: Story = {
 /**
  */
 export const UserUnverified: Story = {
-  args: {
-    localUser: data.vernon,
-  },
-
   parameters: {
     msw: {
       handlers: {
@@ -293,10 +273,6 @@ export const UserUnverified: Story = {
  * This can happen if users delete their accounts but
  */
 export const UserNotFound: Story = {
-  args: {
-    localUser: data.john,
-  },
-
   parameters: {
     msw: {
       handlers: {
@@ -311,10 +287,6 @@ export const UserNotFound: Story = {
  * carry any special meaning.
  */
 export const UnknownFailure: Story = {
-  args: {
-    localUser: data.john,
-  },
-
   parameters: {
     msw: {
       handlers: {

package/lib/account/CurrentUserFetcher.tsx

@@ -1,30 +1,18 @@
 import { useState, type ReactNode } from "react";
 import { ModalDialog } from "../ModalDialog/index.tsx";
-import type { CurrentUser } from "../types.ts";
+import { useCurrentUser } from "../store/index.tsx";
 import { AccountIssueView } from "./AccountIssueView.tsx";
 import { LoginView } from "./LoginView.tsx";
-import type { EventHandler, EventHandlerWithReload } from "./types.ts";
-import { useCurrentUserResult } from "./useCurrentUserResult.tsx";
+import { useFetchCurrentUser } from "./useFetchCurrentUser.tsx";
 import { UserMismatchView } from "./UserMismatchView.tsx";
 import { VerifyAccountView } from "./VerifyPage.tsx";
 
 type CurrentUserFetcherProps = {
-  /**
-   * Current user as stored in persistent storage.
-   *
-   * If this property is set, the component will attempt to fetch latest data
-   * from the server and store it (via ITC client).
-   */
-  localUser: CurrentUser | null;
-  onLogin: EventHandlerWithReload;
-  onClearLocalContent: EventHandler;
-  onLogout: EventHandlerWithReload;
-  onServerLogout: EventHandlerWithReload;
   children: ReactNode;
 };
 
 /**
- * Fetches fresh current user data if local data is provided.
+ * Fetches fresh current user data if a local user exists in the app store.
  *
  * This component uses the Indie Tabletop Client under the hood, so if new
  * data is successfully fetched, the onCurrentUser callback will be invoked,
@@ -34,22 +22,17 @@ type CurrentUserFetcherProps = {
  * that we could run into: expired session, user mismatch and account deletion.
  *
  * All other errors are ignored. This allows users to use the app in offline
- * more, and doesn't interrupt their session if some unexpected error happens,
+ * mode, and doesn't interrupt their session if some unexpected error happens,
  * which they cannot do anything about anyways.
  */
 export function CurrentUserFetcher(props: CurrentUserFetcherProps) {
-  const {
-    localUser,
-    children,
-    onLogin,
-    onLogout,
-    onClearLocalContent,
-    onServerLogout,
-  } = props;
+  const { children } = props;
+  const localUser = useCurrentUser();
   const [isOpen, setOpen] = useState(true);
 
-  const { result, reload } = useCurrentUserResult({
-    // We only want to fetch the current user if they exist in local storage
+  const { result, reload } = useFetchCurrentUser({
+    // We only want to fetch the current user if they exist in the store, i.e.
+    // they have logged into the app previously.
     performFetch: !!localUser,
   });
 
@@ -62,8 +45,7 @@ export function CurrentUserFetcher(props: CurrentUserFetcherProps) {
           <ModalDialog size="large" open>
             <LoginView
               currentUser={localUser}
-              onLogin={onLogin}
-              onLogout={onLogout}
+              onLogin={() => reload()}
               description={undefined}
               reload={reload}
             />
@@ -80,7 +62,7 @@ export function CurrentUserFetcher(props: CurrentUserFetcherProps) {
       return (
         <>
           <ModalDialog size="large" open>
-            <AccountIssueView onLogout={onLogout} reload={reload} />
+            <AccountIssueView reload={reload} />
           </ModalDialog>
 
           {children}
@@ -101,8 +83,6 @@ export function CurrentUserFetcher(props: CurrentUserFetcherProps) {
             <UserMismatchView
               serverUser={result.value}
               localUser={localUser}
-              onClearLocalContent={onClearLocalContent}
-              onServerLogout={onServerLogout}
               reload={reload}
             />
           </ModalDialog>
@@ -119,7 +99,6 @@ export function CurrentUserFetcher(props: CurrentUserFetcherProps) {
             <VerifyAccountView
               currentUser={serverUser}
               onClose={() => setOpen(false)}
-              onLogout={onLogout}
               reload={reload}
             />
           </ModalDialog>

package/lib/account/JoinCard.stories.tsx

@@ -1,7 +1,6 @@
 import { Story } from "@storybook/addon-docs/blocks";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { http, HttpResponse } from "msw";
-import { fn } from "storybook/test";
 import { sleep } from "../sleep.ts";
 import type { CurrentUser, SessionInfo } from "../types.ts";
 import { JoinCard } from "./JoinCard.tsx";
@@ -142,7 +141,6 @@ const meta = {
   tags: ["autodocs"],
   args: {
     defaultValues: {},
-    onLogout: fn(),
   },
   parameters: {
     msw: {

package/lib/account/JoinCard.tsx

@@ -26,8 +26,8 @@ import { AlreadyLoggedInView } from "./AlreadyLoggedInView.tsx";
 import { FailureFallbackView } from "./FailureFallbackView.tsx";
 import { LoadingView } from "./LoadingView.tsx";
 import { NoConnectionView } from "./NoConnectionView.tsx";
-import type { DefaultFormValues, EventHandlerWithReload } from "./types.ts";
-import { useCurrentUserResult } from "./useCurrentUserResult.tsx";
+import type { DefaultFormValues } from "./types.ts";
+import { useFetchCurrentUser } from "./useFetchCurrentUser.tsx";
 
 type SetStep = Dispatch<SetStateAction<JoinStep>>;
 
@@ -248,7 +248,6 @@ function JoinFlow(props: { defaultValues?: DefaultFormValues }) {
 }
 
 export type JoinCardProps = {
-  onLogout: EventHandlerWithReload;
   defaultValues?: DefaultFormValues;
 };
 
@@ -256,17 +255,11 @@ export type JoinCardProps = {
  * Allows the user to join Indie Tabletop Club.
  */
 export function JoinCard(props: JoinCardProps) {
-  const { result, latestAttemptTs, reload } = useCurrentUserResult();
+  const { result, latestAttemptTs, reload } = useFetchCurrentUser();
 
   return result.unpack(
     (currentUser) => {
-      return (
-        <AlreadyLoggedInView
-          {...props}
-          currentUser={currentUser}
-          reload={reload}
-        />
-      );
+      return <AlreadyLoggedInView currentUser={currentUser} reload={reload} />;
     },
     (failure) => {
       if (failure.type === "API_ERROR" && failure.code === 401) {

package/lib/account/LoginCard.stories.tsx

@@ -128,13 +128,9 @@ const meta = {
   component: LoginCard,
   tags: ["autodocs"],
   args: {
-    currentUser: null,
     description: "Log in to Indie Tabletop Club to enable backup & sync.",
     defaultValues: {},
     onLogin: fn(),
-    onLogout: fn(),
-    onClearLocalContent: fn(),
-    onServerLogout: fn(),
   },
   parameters: {
     msw: {
@@ -169,9 +165,6 @@ export const Default: Story = {
  * attempting to create a new session.
  */
 export const InvalidCredentialsOnSubmit: Story = {
-  args: {
-    currentUser: null,
-  },
   parameters: {
     msw: {
       handlers: {
@@ -187,9 +180,6 @@ export const InvalidCredentialsOnSubmit: Story = {
  * email is used that is not currently in the database.
  */
 export const UserNotFoundOnSubmit: Story = {
-  args: {
-    currentUser: null,
-  },
   parameters: {
     msw: {
       handlers: {
@@ -205,9 +195,6 @@ export const UserNotFoundOnSubmit: Story = {
  * that doesn't have a specific meaning in the context of the login page.
  */
 export const UnknownFailureOnSubmit: Story = {
-  args: {
-    currentUser: null,
-  },
   parameters: {
     msw: {
       handlers: {
@@ -222,9 +209,6 @@ export const UnknownFailureOnSubmit: Story = {
  * A case when user is stored locally, but their server session has expired.
  */
 export const ReauthenticateSession: Story = {
-  args: {
-    currentUser: data.john,
-  },
   parameters: {
     msw: {
       handlers: {
@@ -242,9 +226,6 @@ export const ReauthenticateSession: Story = {
  * The user is directed to app without any further steps.
  */
 export const AlreadyLoggedIn: Story = {
-  args: {
-    currentUser: data.john,
-  },
   parameters: {
     msw: {
       handlers: {
@@ -260,10 +241,6 @@ export const AlreadyLoggedIn: Story = {
  * different credentials.
  */
 export const UserMismatch: Story = {
-  args: {
-    currentUser: data.john,
-  },
-
   parameters: {
     msw: {
       handlers: {

package/lib/account/LoginCard.tsx

@@ -1,29 +1,16 @@
 import { type ReactNode } from "react";
-import type { CurrentUser } from "../types.ts";
+import { useCurrentUser } from "../store/index.tsx";
 import { AccountIssueView } from "./AccountIssueView.tsx";
 import { AlreadyLoggedInView } from "./AlreadyLoggedInView.tsx";
 import { FailureFallbackView } from "./FailureFallbackView.tsx";
 import { LoadingView } from "./LoadingView.tsx";
 import { LoginView } from "./LoginView.tsx";
 import { NoConnectionView } from "./NoConnectionView.tsx";
-import type {
-  DefaultFormValues,
-  EventHandler,
-  EventHandlerWithReload,
-} from "./types.ts";
-import { useCurrentUserResult } from "./useCurrentUserResult.tsx";
+import type { AuthEventHandler, DefaultFormValues } from "./types.ts";
+import { useFetchCurrentUser } from "./useFetchCurrentUser.tsx";
 import { UserMismatchView } from "./UserMismatchView.tsx";
 
 export type LoginCardProps = {
-  /**
-   * Any user data that might currently be stored in persistent storage like
-   * `localStorage` or IndexedDB.
-   *
-   * If the app contains any local data, it is important that this value is
-   * provided so that we don't run into strange user mismatch issues!
-   */
-  currentUser: CurrentUser | null;
-
   /**
    * A description that will appear in the default login case (i.e. when an
    * unauthenticated user is prompted to log in).
@@ -48,53 +35,22 @@ export type LoginCardProps = {
    *
    * Typically you want to redirect the user at this point, and possibly
    * run additional side-effects.
-   *
-   * Note that it is not necessary to save the new current user in any way,
-   * as they will already be saved via the client onCurrentUser handler.
-   */
-  onLogin: EventHandler;
-
-  /**
-   * Called when the user indicates that they would like to log out.
-   *
-   * Typically, you might want to clear all local data, perform
-   * a server logout, and redirect to some sensible new location.
-   */
-  onLogout: EventHandlerWithReload;
-
-  /**
-   * Called when there is a mismatch between local user data and data returned
-   * from the server and the user chooses to use the server account.
-   *
-   * Local content should be cleared in response to this action, but **not**
-   * server logout (as the user is choosing to continue as the user that is
-   * currently referenced in the cookie).
-   */
-  onClearLocalContent: EventHandler;
-
-  /**
-   * Called when there is a mismatch between local user data and data returned
-   * from the server and the user chooses to use the local account.
-   *
-   * A server logout should be performed in response to this event, but local
-   * data should not be touched.
    */
-  onServerLogout: EventHandlerWithReload;
+  onLogin: AuthEventHandler;
 };
 
 /**
  * Allows the user to log into Indie Tabletop Club.
  */
 export function LoginCard(props: LoginCardProps) {
-  const { currentUser } = props;
-  const { result, latestAttemptTs, reload } = useCurrentUserResult();
+  const currentUser = useCurrentUser();
+  const { result, latestAttemptTs, reload } = useFetchCurrentUser();
 
   return result.unpack(
     (serverUser) => {
       if (currentUser && currentUser.id !== serverUser.id) {
         return (
           <UserMismatchView
-            {...props}
             serverUser={serverUser}
             localUser={currentUser}
             reload={reload}
@@ -102,23 +58,19 @@ export function LoginCard(props: LoginCardProps) {
         );
       }
 
-      return (
-        <AlreadyLoggedInView
-          {...props}
-          currentUser={serverUser}
-          reload={reload}
-        />
-      );
+      return <AlreadyLoggedInView currentUser={serverUser} reload={reload} />;
     },
 
     (failure) => {
       if (failure.type === "API_ERROR") {
         if (failure.code === 401) {
-          return <LoginView {...props} reload={reload} />;
+          return (
+            <LoginView {...props} currentUser={currentUser} reload={reload} />
+          );
         }
 
         if (failure.code === 404) {
-          return <AccountIssueView {...props} reload={reload} />;
+          return <AccountIssueView reload={reload} />;
         }
       }
 

package/lib/account/LoginView.tsx

@@ -17,22 +17,22 @@ import {
   LetterheadSubmitError,
   LetterheadTextField,
 } from "../LetterheadForm/index.tsx";
+import { useAppActions } from "../store/index.tsx";
 import type { CurrentUser } from "../types.ts";
 import { useForm } from "../use-form.ts";
 import { validEmail } from "../validations.ts";
-import type { DefaultFormValues, EventHandlerWithReload } from "./types.ts";
+import type { AuthEventHandler, DefaultFormValues } from "./types.ts";
 
 export function LoginView(props: {
   defaultValues?: DefaultFormValues;
-  onLogin: EventHandlerWithReload;
-  onLogout: EventHandlerWithReload;
+  onLogin: AuthEventHandler;
   currentUser: CurrentUser | null;
   description: ReactNode;
   reload: () => void;
 }) {
+  const { currentUser, defaultValues, description, onLogin, reload } = props;
   const { placeholders, client, hrefs } = useAppConfig();
-  const { defaultValues, description, currentUser, onLogin, onLogout, reload } =
-    props;
+  const { logout } = useAppActions();
   const localUserPresent = !!currentUser?.email;
   const defaultEmailValue = currentUser?.email ?? defaultValues?.email ?? "";
 
@@ -50,7 +50,7 @@ export function LoginView(props: {
       });
     },
     onSuccess() {
-      onLogin({ reload });
+      onLogin();
     },
   });
 
@@ -72,7 +72,10 @@ export function LoginView(props: {
               {"To use a different account, please "}
               <Button
                 className={interactiveText}
-                onClick={() => onLogout({ reload })}
+                onClick={async () => {
+                  await logout();
+                  reload();
+                }}
               >
                 log out
               </Button>

package/lib/account/UserMismatchView.tsx

@@ -6,19 +6,17 @@ import {
   LetterheadParagraph,
 } from "../Letterhead/index.tsx";
 import { LetterheadHeader } from "../LetterheadForm/index.tsx";
+import { useAppActions } from "../store/index.tsx";
 import type { CurrentUser } from "../types.ts";
 import { accountPicker } from "./style.css.ts";
-import type { EventHandler, EventHandlerWithReload } from "./types.ts";
 
 export function UserMismatchView(props: {
   serverUser: CurrentUser;
   localUser: CurrentUser;
-  onClearLocalContent: EventHandler;
-  onServerLogout: EventHandlerWithReload;
   reload: () => void;
 }) {
-  const { localUser, serverUser, onClearLocalContent, onServerLogout, reload } =
-    props;
+  const { localUser, serverUser, reload } = props;
+  const { clientLogout, serverLogout } = useAppActions();
 
   return (
     <Letterhead>
@@ -39,7 +37,7 @@ export function UserMismatchView(props: {
         <Button
           {...cx(accountPicker.button)}
           type="button"
-          onClick={() => onClearLocalContent()}
+          onClick={async () => await clientLogout({ serverUser })}
         >
           <div {...cx(accountPicker.buttonLabel)}>{serverUser.email}</div>
           <div>Local data will be deleted.</div>
@@ -50,7 +48,10 @@ export function UserMismatchView(props: {
         <Button
           {...cx(accountPicker.button)}
           type="button"
-          onClick={() => onServerLogout({ reload })}
+          onClick={async () => {
+            await serverLogout();
+            reload();
+          }}
         >
           <div {...cx(accountPicker.buttonLabel)}>{localUser.email}</div>
           <div>You will be asked to log in again.</div>