useServerAction with examples #hook #nextjs

deleteNote.ts

'use server';

import type { TNote } from '@/types/note';

import { revalidatePath } from 'next/cache';

import { noteService } from '@/features/note/services/note';

export async function deleteNote(id: TNote['id']) {
  const { error } = await noteService.remove(id);

  if (error) return;

  revalidatePath('/notes');
}

DeleteNoteButton.tsx

'use client';

import type { TNote } from '@/types/note';

import { Button } from '@nextui-org/button';
import { Trash2 } from 'lucide-react';

import { deleteNote } from '@/features/note/actions/deleteNote';
import { useServerAction } from '@/hooks/useServerAction';

export const DeleteNoteButton = (props: Pick<TNote, 'id'>) => {
  const { loading, execute } = useServerAction(deleteNote);

  return (
    <Button isIconOnly isLoading={loading} size="sm" variant="ghost" onClick={() => execute(props.id)}>
      <Trash2 size={15} />
    </Button>
  );
};

useServerAction.ts

import { useState } from 'react';

type AsyncFn = (...args: any) => Promise<any>;

/**
 * Use this hook to execute server actions in the client side
 * It will handle loading, error and data states...
 * @param action
 * @example
 *    export const DeleteButton = ({id}) => {
 *      const { loading, execute } = useServerAction(deleteNote);
 *      return (
 *        <Button isLoading={loading} onClick={() => execute(id)}>Delete</Button>
 *      );
 *    };
 */
export const useServerAction = <T extends AsyncFn>(action: T) => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);
  const [data, setData] = useState<Awaited<ReturnType<T>> | null>(null);

  const execute = async (...args: Parameters<T>) => {
    setLoading(true);
    setError(null);
    setData(null);

    try {
      const res = await action(...args);

      setData(res);

      return res as Awaited<ReturnType<T>>;
    } catch (e) {
      console.log('Error:', e.message);
      setError(e);
    } finally {
      setLoading(false);
    }
  };

  return {
    data,
    loading,
    error,
    execute,
  };
};