@unitedstatespowersquadrons/components 1.0.9 → 1.0.11

package/Reducer/Example/reducer.tsx

@@ -0,0 +1,35 @@
+import { createContext } from "react";
+import { Draft } from "immer";
+import * as ReducerHandlers from "./reducerHandlers";
+import { AppState, ServerResponse } from "./types";
+import { buildReducer, RailsAppAction } from "../";
+
+// If you want to add additional data to the server response, use type `RailsAppAction<ExampleServerResponse>`.
+// Otherwise, just use type `RailsAppAction`.
+//
+// If you need to access the available `type`s for your defined AppAction, use `AppActionType<AppAction>`
+//
+export type AppAction =
+  | RailsAppAction<ServerResponse>
+  | { type: "doSomething"; something: string };
+
+export const reducer = (draft: Draft<AppState>, action: AppAction): void => {
+  const { type } = action;
+
+  switch (type) {
+  case "doSomething":
+    draft.something = "changed";
+
+    break;
+  case "saveComplete": break;
+  case "saveFailed": break;
+  default: return type satisfies never;
+  }
+};
+
+const StateContext = createContext<AppState | null>(null);
+const DispatchContext = createContext<React.Dispatch<AppAction> | null>(null);
+const handlers = Object.values(ReducerHandlers);
+
+export const { AppProvider, useAppDispatch, useAppState } =
+  buildReducer(reducer, StateContext, DispatchContext, handlers);

package/Reducer/Example/reducerHandlers.tsx

@@ -0,0 +1,25 @@
+import { AppAction } from "./reducer";
+import { ServerResponse } from "./types";
+import { DispatchFunc, DispatchHandler } from "../types";
+import wrapDispatch from "../wrapDispatch";
+
+export const doSomething = (
+  dispatch: DispatchFunc<AppAction>
+): DispatchFunc<AppAction> => {
+  const actionType = "doSomething";
+
+  const handler: DispatchHandler<AppAction> = (action: AppAction) => {
+    if (action.type !== actionType) return {};
+
+    const { something } = action;
+
+    const bodyJson = { something };
+    const href = "/do_something";
+
+    return { bodyJson, href };
+  };
+
+  // If you want to add additional data to the server response, pass in type `ServerResponse`.
+  // Otherwise, just leave the second type parameter unspecified.
+  return wrapDispatch<AppAction, ServerResponse>(dispatch, [actionType], handler);
+};

package/Reducer/Example/types.ts

@@ -0,0 +1,9 @@
+import { RailsResponse } from "../types";
+
+export interface AppState {
+  something: string;
+}
+
+export interface ServerResponse extends RailsResponse {
+  update: AppState;
+}

package/Reducer/buildReducer.tsx

@@ -0,0 +1,60 @@
+import React, { useContext, useMemo } from "react";
+import { Draft, produce } from "immer";
+import { useImmerReducer } from "use-immer";
+import { ReducerHandler } from "./types";
+
+interface InitialAppProps<AppState> {
+  initialState: AppState;
+  children: React.ReactNode;
+}
+
+export default function buildReducer<AppState, AppAction>(
+  reducer: (draft: Draft<AppState>, action: AppAction) => void,
+  StateContext: React.Context<AppState | null>,
+  DispatchContext: React.Context<React.Dispatch<AppAction> | null>,
+  handlers: ReducerHandler<AppAction>[] = []
+) {
+  function AppProvider(props: InitialAppProps<AppState>) {
+    const [providerState, dispatch] = useImmerReducer(reducer, props.initialState, (state: AppState) => {
+      return produce(state, draft => draft);
+    });
+
+    const wrappedDispatch = useMemo(() => {
+      let d = dispatch;
+
+      handlers.forEach(handler => d = handler(d));
+
+      return d;
+    }, [dispatch]);
+
+    return (
+      <StateContext.Provider value={providerState}>
+        <DispatchContext.Provider value={wrappedDispatch}>
+          {props.children}
+        </DispatchContext.Provider>
+      </StateContext.Provider>
+    );
+  }
+
+  function useAppState() {
+    const context = useContext(StateContext);
+    if (!context) {
+      throw new Error("useAppState has to be used within AppProvider");
+    }
+    return context;
+  }
+
+  function useAppDispatch() {
+    const context = useContext(DispatchContext);
+    if (!context) {
+      throw new Error("useAppDispatch has to be used within AppProvider");
+    }
+    return context;
+  }
+
+  return {
+    AppProvider,
+    useAppDispatch,
+    useAppState,
+  };
+}

package/Reducer/buildUnreducableState.tsx

@@ -0,0 +1,31 @@
+import React, { useContext } from "react";
+
+interface InitialAppProps<AppState> {
+  initialState: AppState;
+  children: React.ReactNode;
+}
+
+export default function buildUnreducableState<AppState>(
+  StateContext: React.Context<AppState | null>
+) {
+  const AppProvider = (props: InitialAppProps<AppState>) => {
+    return (
+      <StateContext.Provider value={props.initialState}>
+        {props.children}
+      </StateContext.Provider>
+    );
+  };
+
+  function useAppState() {
+    const context = useContext(StateContext);
+    if (!context) {
+      throw new Error("useAppState has to be used within AppProvider");
+    }
+    return context;
+  }
+
+  return {
+    AppProvider,
+    useAppState,
+  };
+}

package/Reducer/index.tsx

@@ -0,0 +1,3 @@
+export { default as wrapDispatch } from "./wrapDispatch";
+export { default as buildReducer } from "./buildReducer";
+export type * from "./types";

package/Reducer/types.ts

@@ -0,0 +1,34 @@
+import { Toast } from "../Toasts";
+
+export interface RailsResponse {
+  reload?: boolean;
+  status: "OK" | "ERROR";
+  toasts: Toast[];
+}
+
+export type DispatchFunc<T> = (action: T) => void;
+export type DispatchHandler<T> = (action: T) => {
+  body?: string;
+  bodyJson?: object;
+  headers?: { [key: string]: string };
+  href?: string;
+  method?: string;
+};
+
+export type ReducerHandler<AppAction> = (dispatch: DispatchFunc<AppAction>) => DispatchFunc<AppAction>;
+
+export interface GenericAppAction {
+  type: string;
+}
+
+export type RailsAppAction<R extends RailsResponse = RailsResponse> =
+  | { type: "saveComplete"; res: R }
+  | { type: "saveFailed" };
+
+type ExtractField<T, K extends string> = T extends { [key in K]: infer U } ? U : never;
+export type AppActionType<
+  A extends GenericAppAction,
+  Res extends RailsResponse = RailsResponse
+> =
+  | ExtractField<A, "type">
+  | ExtractField<RailsAppAction<Res>, "type">;

package/Reducer/wrapDispatch.tsx

@@ -0,0 +1,74 @@
+import {
+  AppActionType,
+  DispatchFunc,
+  DispatchHandler,
+  GenericAppAction,
+  RailsAppAction,
+  RailsResponse,
+} from "./types";
+import railsFetchJson from "../railsFetchJson";
+
+type AppAction<Res extends RailsResponse = RailsResponse> =
+  | GenericAppAction
+  | RailsAppAction<Res>;
+
+export default function wrapDispatch<
+  A extends AppAction<ServerResponse>,
+  ServerResponse extends RailsResponse = RailsResponse
+>(
+  dispatch: DispatchFunc<A>,
+  appActionTypes: AppActionType<A>[],
+  handler: DispatchHandler<A>
+): DispatchFunc<A> {
+  const updateDebounceTime = (("testEnv" in window) && window.testEnv) ? 50 : 250;
+
+  const updateHandler = async (action: A, signal: AbortSignal) => {
+    const { bodyJson, headers, href, method } = handler(action);
+
+    if (!href || !bodyJson) return;
+
+    const requestHeaders = headers || {};
+
+    try {
+      const res = await railsFetchJson<ServerResponse>(
+        href,
+        { bodyJson, headers: requestHeaders, method: method || "POST", signal }
+      );
+
+      dispatch({ res, type: "saveComplete" } as A);
+    } catch(e) {
+      // Ignore request aborts
+      if (e instanceof DOMException) return;
+
+      dispatch({ type: "saveFailed" } as A);
+    }
+  };
+
+  const timers: { [id: string]: number } = {};
+  const abortControllers: { [id: string]: AbortController } = {};
+
+  return (action: A) => {
+    // Run it like normal
+    dispatch(action);
+
+    // Skip if it's not one of the appActionTypes we care about
+    if (!appActionTypes.includes(action.type as AppActionType<A>)) return;
+
+    const timeoutKey = "userTimeout";
+
+    // Stop previous request
+    const timer = timers[timeoutKey];
+    if (timer) clearTimeout(timer);
+    delete timers[timeoutKey];
+    const oldAbortController = abortControllers[timeoutKey];
+    if (oldAbortController) oldAbortController.abort();
+    delete abortControllers[timeoutKey];
+
+    // Make request
+    const abortController = abortControllers[timeoutKey] = new AbortController();
+    const signal = abortController.signal;
+    timers[timeoutKey] = setTimeout(() => {
+      void updateHandler(action, signal);
+    }, updateDebounceTime);
+  };
+}

package/Toasts/Toast.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 import { createUseStyles } from "react-jss";
-import { DismissFunc, ToastProps, Toast_Status } from "./types";
+import { DismissFunc, Toast_Status, ToastProps } from "./types";
 import FontAwesomeIcon from "../FontAwesomeIcon";
 
 interface Props {

package/Toasts/Toasts.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import classNames from "classnames";
 import { createUseStyles } from "react-jss";
 import Toast from "./Toast";
-import createDismissToast from "./createDismissToast";
+import { createDismissToast } from "./toastHelpers";
 import { DismissFunc, ToastProps, ToastRemoveAppAction } from "./types";
-import { DispatchFunc } from "../types";
+import { DispatchFunc } from "../";
 
 interface BaseProps {
   toasts?: ToastProps[];

package/Toasts/index.tsx

@@ -1,5 +1,8 @@
 export { default as Toasts } from "./Toasts";
-export { default as createDismissToast } from "./createDismissToast";
+export * from "./toastHelpers";
 
-export { Toast_Status } from "./types";
-export type { Toast, ToastAppAction, ToastProps } from "./types";
+export * from "./types";
+export type * from "./types";
+
+// Legacy exports for compatibility
+export { createDismissToast } from "./toastHelpers";

package/Toasts/toastHelpers.ts

@@ -0,0 +1,47 @@
+import { Draft } from "immer";
+import { Toast, ToastProps, ToastRemoveAppAction } from "./types";
+import { AppStateWithToasts, DispatchFunc } from "../";
+
+export function createDismissToast(dispatch: DispatchFunc<ToastRemoveAppAction>) {
+  const dismissToast = (toastId: number) => {
+    dispatch({ toastId, type: "dismissToast" });
+
+    setTimeout(() => dispatch({ toastId, type: "removeToast" }), 2000);
+  };
+
+  return dismissToast;
+}
+
+export function handleToasts<T extends AppStateWithToasts>(draft: Draft<T>, toasts: Toast[]) {
+  const handleToastsFunc = () => {
+    if (toasts.length > 0) {
+      toasts.forEach(toast => addToast(draft, toast));
+    }
+  };
+
+  return handleToastsFunc;
+}
+
+export function addToast<T extends AppStateWithToasts>(draft: Draft<T>, toastOptions: Toast) {
+  const { body, status, timeout, title } = toastOptions;
+
+  // Increment current toastId to prevent collisions
+  const id = draft.toastId ? draft.toastId + 1 : 1;
+  draft.toastId = id;
+
+  const toast = { body, id, status, timeout, title } as ToastProps;
+
+  // Initialize toasts array if not provided by the server
+  if (!draft.toasts) draft.toasts = [];
+
+  // Do not store multiple identical toasts
+  if (draft.toasts.some(t => {
+    return (
+      toast.body === t.body &&
+        toast.status === t.status &&
+        toast.title === t.title
+    );
+  })) return;
+
+  draft.toasts.push(toast);
+}

package/eslint.config.mjs

@@ -30,6 +30,13 @@ export default tseslint.config(
       "quotes": ["error", "double"],
       "semi": ["error", "always"],
       "sort-keys": ["error", "asc", { caseSensitive: true, minKeys: 2, natural: false }],
+      "sort-imports": [
+        "error",
+        {
+          "ignoreCase": true,
+          "ignoreDeclarationSort": true,
+        }
+      ],
       "arrow-parens": ["error", "as-needed"],
       "comma-dangle": [
         "error",

package/index.tsx

@@ -1,3 +1,5 @@
+export * from "./Reducer";
+
 export { default as FontAwesomeIcon } from "./FontAwesomeIcon";
 
 export { default as railsFetchJson } from "./railsFetchJson";
@@ -17,6 +19,7 @@ export { default as Colors } from "./Colors";
 export { default as Styles } from "./Styles";
 
 export type * from "./types";
+export type * from "./Reducer";
 export type * from "./Colors";
 export type * from "./FontAwesomeIcon";
 export type * from "./ActionButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {
@@ -18,9 +18,11 @@
   "homepage": "https://github.com/unitedstatespowersquadrons/components#readme",
   "dependencies": {
     "classnames": "^2.5.1",
+    "immer": "^10.1.1",
     "react": "^19.1.0",
     "react-jss": "^10.10.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "use-immer": "^0.11.0"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^5.1.0",

package/types.ts

@@ -1,20 +1,11 @@
 import React from "react";
-import { Toast, ToastProps } from "./Toasts";
+import { ToastProps } from "./Toasts";
 
 export interface AppStateWithToasts {
   toasts: ToastProps[];
   toastId?: number;
 }
 
-export type DispatchFunc<T> = (action: T) => void;
-export type DispatchHandler<T> = (action: T) => {
-  body?: string;
-  bodyJson?: object;
-  headers?: { [key: string]: string };
-  href?: string;
-  method?: string;
-};
-
 export type OnClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => void;
 export type OnInputChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
 export type OnClickOrKeyboardHandler = (event: OnClickOrKeyboardEvent) => void;
@@ -44,9 +35,3 @@ export interface OnClickProps {
   confirm?: string | undefined;
   onClick: OnClickHandler;
 }
-
-export interface RailsResponse {
-  reload?: boolean;
-  status: "OK" | "ERROR";
-  toasts: Toast[];
-}

package/Toasts/createDismissToast.ts

@@ -1,16 +0,0 @@
-import { ToastRemoveAppAction } from "./types";
-import { DispatchFunc } from "../types";
-
-const createDismissToast = (dispatch: DispatchFunc<ToastRemoveAppAction>) => {
-  const dismissToast = (toastId: number) => {
-    dispatch({ toastId, type: "dismissToast" });
-
-    setTimeout(() => {
-      dispatch({ toastId, type: "removeToast" });
-    }, 2000);
-  };
-
-  return dismissToast;
-};
-
-export default createDismissToast;