counterweight
b86b506d72
- Created useAsyncData hook: Eliminates repetitive data fetching boilerplate - Handles loading, error, and data state automatically - Supports enabled/disabled fetching - Provides refetch function - Created PageLayout component: Standardizes page structure - Handles loading state, authorization checks, header, error display - Reduces ~10 lines of boilerplate per page - Created useMutation hook: Simplifies action handling - Manages loading state and errors for mutations - Supports success/error callbacks - Used for cancel, create, revoke actions - Created ErrorDisplay component: Standardizes error UI - Consistent error banner styling across app - Integrated into PageLayout - Created useForm hook: Foundation for form state management - Handles form data, validation, dirty checking - Ready for future form migrations - Migrated pages to use new patterns: - invites/page.tsx: useAsyncData + PageLayout - trades/page.tsx: useAsyncData + PageLayout + useMutation - trades/[id]/page.tsx: useAsyncData - admin/price-history/page.tsx: useAsyncData + PageLayout - admin/invites/page.tsx: useMutation for create/revoke Benefits: - ~40% reduction in boilerplate code - Consistent patterns across pages - Easier to maintain and extend - Better type safety All tests passing (32 frontend, 33 e2e)
59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import { useState, useCallback } from "react";
|
|
|
|
/**
|
|
* Hook for handling mutations (create, update, delete operations).
|
|
* Manages loading state and error handling for async mutations.
|
|
*
|
|
* @param mutationFn - Function that performs the mutation and returns a Promise
|
|
* @param options - Configuration options
|
|
* @returns Object containing mutate function, loading state, and error
|
|
*/
|
|
export function useMutation<TArgs, TResponse = void>(
|
|
mutationFn: (args: TArgs) => Promise<TResponse>,
|
|
options: {
|
|
/** Callback called on successful mutation */
|
|
onSuccess?: (data: TResponse) => void;
|
|
/** Callback called on mutation error */
|
|
onError?: (err: unknown) => void;
|
|
} = {}
|
|
): {
|
|
mutate: (args: TArgs) => Promise<TResponse | undefined>;
|
|
isLoading: boolean;
|
|
error: string | null;
|
|
} {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const mutate = useCallback(
|
|
async (args: TArgs): Promise<TResponse | undefined> => {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const result = await mutationFn(args);
|
|
if (options.onSuccess) {
|
|
options.onSuccess(result);
|
|
}
|
|
return result;
|
|
} catch (err) {
|
|
const errorMessage = err instanceof Error ? err.message : "Operation failed";
|
|
setError(errorMessage);
|
|
if (options.onError) {
|
|
options.onError(err);
|
|
} else {
|
|
console.error("Mutation failed:", err);
|
|
}
|
|
throw err;
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
},
|
|
[mutationFn, options]
|
|
);
|
|
|
|
return {
|
|
mutate,
|
|
isLoading,
|
|
error,
|
|
};
|
|
}
|