bistro/frontend/app/waiter/[id]/new/page.tsx

'use client';

import Link from 'next/link';
import { useParams, useRouter } from 'next/navigation';
import * as React from 'react';
import { useForm, useFieldArray, useWatch, Control } from 'react-hook-form';
import { fetcher } from '@/app/api/tools';
import useSWR from 'swr';

type FormValues = {
  data: {
    item: string;
    additional_info: string;
    finished: boolean;
  }[];
};

export default function App() {
  const { data, error, isLoading } = useSWR('/api/meals', fetcher);

  const { id } = useParams();
  const router = useRouter();
  const {
    register,
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    defaultValues: {
      data: [{ item: '', additional_info: '', finished: false }],
    },
    mode: 'onBlur',
  });
  const { fields, append, remove } = useFieldArray({
    name: 'data',
    control,
  });
  const onSubmit = (data: FormValues) => {
    console.log(data);
    fetch('/api/orders', {
      method: 'POST',
      body: JSON.stringify({ waiter: id, ...data }),
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then(({ status }) => console.log(status))
      .then((_) => router.push(`/waiter/${id}`));
  };

  if (error) return <div>Błąd przy ładowaniu danych</div>;
  if (isLoading) return <div>Ładowanie</div>;

  return (
    <>
      <form
        id="form"
        onSubmit={handleSubmit(onSubmit)}
        className="flex flex-col max-w-screen-md w-full my-4"
      >
        <p className="text-2xl text-center">Nowe zamówienie</p>
        {fields.map((field, index) => {
          return (
            <div
              key={field.id}
              className="border-2 m-2 p-2 gap-4 flex flex-col items-stretch justify-around content-center"
            >
              <input
                type="checkbox"
                className="hidden"
                {...register(`data.${index}.finished` as const, {
                  required: false,
                })}
              />
              <p className="basis-1/3">
                <label htmlFor={`data.${index}.item`}>Danie</label>
                <select
                  {...register(`data.${index}.item` as const, {
                    required: true,
                  })}
                  className={errors?.data?.[index]?.item ? 'error' : ''}
                >
                  <option value="Inne">Inne</option>
                  {data?.map((data: { id: number; name: string }) => (
                    <option key={data.name} value={data.name}>
                      {data.name}
                    </option>
                  ))}
                </select>
              </p>
              <p className="basis-1/3">
                <label htmlFor={`data.${index}.additional_info`}>
                  Dodatkowe informacje
                </label>
                <textarea
                  placeholder="Dodatkowe informacje"
                  {...register(`data.${index}.additional_info` as const, {
                    required: false,
                  })}
                  className={
                    errors?.data?.[index]?.additional_info ? 'error' : ''
                  }
                />
              </p>
              {fields.length > 1 ? (
                <p className="basis-1/3 flex items-center justify-center">
                  <button type="button" onClick={() => remove(index)}>
                    Usuń
                  </button>
                </p>
              ) : (
                <></>
              )}
            </div>
          );
        })}

        <button
          type="button"
          className="mx-auto"
          onClick={() =>
            append({
              item: '',
              additional_info: '',
              finished: false,
            })
          }
        >
          Dodaj kolejne danie
        </button>
        <button
          type="submit"
          className={
            'mt-10 mx-auto p-2 border-2 text-black hover:text-black ' +
            (!!errors.data
              ? 'bg-red-300 border-red-500'
              : 'bg-green-300 border-green-500')
          }
          disabled={!!errors.data}
        >
          Złóż zamówienie
        </button>
      </form>
      <Link href={`/waiter/${id}`} className='mt-10'><button>Powrót</button></Link>
    </>
  );
}