import createServerClient from '@/utils/server';
import TestForm from './formTest';

export default async function Test() {
  const supabase = await createServerClient();
  const { data: items } = await supabase.from('items').select('*');

  return (
    <section className="mb-32">
      <TestForm />
      <ul>
        {
          items?.map((item) => (
            <li key={item.id}>
              <span>{item.name}</span>
            </li>
          ))
        }
      </ul>
    </section>
  );
}

'use server';

const createTest = async (prevState: any, formData: FormData) => {
  // save in the DB etc...
  console.log('createTest', formData);

  revalidatePath('/test');

  return {
    status: 200,
    message: 'Item created',
  };
};

'use client';

import { useState, useEffect } from 'react';
import { useFormState } from 'react-dom';
import { notifications } from '@mantine/notifications';
import { TextInput } from '@mantine/core';

import { createTest } from '@/actions/actions';
import FormControls from './formControls';

const initialFormMessageState = {
  status: 200,
  message: '',
};

const FormTest: React.FC = () => {
  const [name, setName] = useState('');

  const [createFormState, createFormAction] = useFormState(
    createTest,
    initialFormMessageState
  );

  // Manage notification toasts
  useEffect(() => {
    console.log(createFormState);

    if (
      createFormState?.status === 200 &&
      createFormState?.message
    ) {
      notifications.show({
        title: createFormState?.message ?? 'Item created',
        message: 'New entry created successfully',
        color: 'green'
      });
    }

    if (
      createFormState?.status === 400 &&
      createFormState?.message
    ) {
      notifications.show({
        title: createFormState?.message ?? 'Error creating an item',
        message: 'Error!',
        color: 'red',
        autoClose: false
      });
    }
  }, [createFormState]);

  return (
    <div className="flex mt-8 justify-center items-center flex-col">
      <form
        action={createFormAction}
        className={`flex gap-2 items-center flex-wrap`}
      >
        <TextInput
          name="itemName"
          placeholder="Name"
          label="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          required
        />
        <FormControls />
      </form>
    </div>
  );
};

export default FormTest;

import React from 'react';
import { useFormStatus } from 'react-dom';
import { Button } from '@mantine/core';

const FormControls: React.FC = () => {
  const { pending } = useFormStatus();

  return (
    <Button
      className="flex-shrink-0"
      type="submit"
      loading={pending}
    >
      Add new
    </Button>
  );
};

export default FormControls;

const {execute, status} = useAction(someServerAction, {
     onSuccess: async (data, input, reset) => {
            toast.success("Saved.")
     },
     onError: handleActionError,
});