Skip to content

Commit

Permalink
refactor(hooks): better useOptimisticAction variable names
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheEdoRan
TheEdoRan committed May 19, 2024
1 parent 4ef5f9a commit 131f8bf
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 10 deletions.
4 changes: 2 additions & 2 deletions apps/playground/src/app/(examples)/optimistic-hook/addtodo-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ const AddTodoForm = ({ todos }: Props) => {
const { execute, result, status, reset, optimisticState } =
useOptimisticAction(addTodo, {
currentState: { todos },
updateFn: (prevState, newTodo) => ({
todos: [...prevState.todos, newTodo],
updateFn: (state, newTodo) => ({
todos: [...state.todos, newTodo],
}),
onSuccess({ data, input }) {
console.log("HELLO FROM ONSUCCESS", data, input);
Expand Down
8 changes: 4 additions & 4 deletions packages/next-safe-action/src/hooks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,15 +210,15 @@ export const useOptimisticAction = <
safeActionFn: HookSafeActionFn<ServerError, S, BAS, FVE, FBAVE, Data>,
utils: {
currentState: State;
updateFn: (prevState: State, input: S extends Schema ? InferIn<S> : undefined) => State;
updateFn: (state: State, input: S extends Schema ? InferIn<S> : undefined) => State;
} & HookCallbacks<ServerError, S, BAS, FVE, FBAVE, Data>
) => {
const [, startTransition] = React.useTransition();
const [result, setResult] = React.useState<HookResult<ServerError, S, BAS, FVE, FBAVE, Data>>(EMPTY_HOOK_RESULT);
const [clientInput, setClientInput] = React.useState<S extends Schema ? InferIn<S> : void>();
const [isExecuting, setIsExecuting] = React.useState(false);
const [isIdle, setIsIdle] = React.useState(true);
const [optimisticState, setOptimisticState] = React.useOptimistic<State, S extends Schema ? InferIn<S> : undefined>(
const [optimisticState, setOptimisticValue] = React.useOptimistic<State, S extends Schema ? InferIn<S> : undefined>(
utils.currentState,
utils.updateFn
);
Expand All @@ -232,7 +232,7 @@ export const useOptimisticAction = <
setIsExecuting(true);

return startTransition(() => {
setOptimisticState(input as S extends Schema ? InferIn<S> : undefined);
setOptimisticValue(input as S extends Schema ? InferIn<S> : undefined);
return safeActionFn(input as S extends Schema ? InferIn<S> : undefined)
.then((res) => setResult(res ?? EMPTY_HOOK_RESULT))
.catch((e) => {
Expand All @@ -247,7 +247,7 @@ export const useOptimisticAction = <
});
});
},
[safeActionFn, setOptimisticState]
[safeActionFn, setOptimisticValue]
);

const reset = () => {
Expand Down
8 changes: 4 additions & 4 deletions website/docs/execution/hooks/useoptimisticaction.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,9 @@ export default function TodosBox({ todos }: Props) {
addTodo,
{
currentState: { todos }, // gets passed from Server Component
updateFn: (prevState, newTodo) => {
updateFn: (state, newTodo) => {
return {
todos: [...prevState.todos, newTodo]
todos: [...state.todos, newTodo]
};
}
}
Expand Down Expand Up @@ -118,14 +118,14 @@ export default function TodosBox({ todos }: Props) {
| Name | Type | Purpose |
| ----------------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `safeActionFn` | [`HookSafeActionFn`](/docs/types#hooksafeactionfn) | This is the action that will be called when you use `execute` from hook's return object. |
| `utils` | `{ currentState: State; updateFn: (prevState: State, input: InferIn<S>) => State }` `&` [`HookCallbacks`](/docs/types#hookcallbacks) | Object with required `currentState`, `updateFn` and optional callbacks. See below for more information. |
| `utils` | `{ currentState: State; updateFn: (state: State, input: InferIn<S>) => State }` `&` [`HookCallbacks`](/docs/types#hookcallbacks) | Object with required `currentState`, `updateFn` and optional callbacks. See below for more information. |

`utils` properties in detail:

| Name | Type | Purpose |
| ----------------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `currentState` | `State` (generic) | An optimistic state setter. This value should come from the parent Server Component. |
| `updateFn` | `(prevState: State, input: InferIn<S>) => State` | When you call the action via `execute`, this function determines how the optimistic state update is performed. Basically, here you define what happens **immediately** after `execute` is called, and before the actual result comes back from the server (after revalidation). |
| `updateFn` | `(state: State, input: InferIn<S>) => State` | When you call the action via `execute`, this function determines how the optimistic state update is performed. Basically, here you define what happens **immediately** after `execute` is called, and before the actual result comes back from the server (after revalidation). |
| `{ onExecute?, onSuccess?, onError?, onSettled? }` | [`HookCallbacks`](/docs/types#hookcallbacks) | Optional callbacks. More information about them [here](/docs/execution/hooks/callbacks). |

### `useOptimisticAction` return object
Expand Down

0 comments on commit 131f8bf

Please sign in to comment.