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 } from 'react-hook-form';
import { fetcher } from '@/app/api/tools';
import useSWR from 'swr';
import { Dish } from '@/app/tools';

type FormDish = Dish & {
  filter: string;
};

type FormValues = {
  status: number;
  client: string;
  realization_time: string;
  data: FormDish[];
};

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

  const { id } = useParams();
  const router = useRouter();
  const {
    register,
    control,
    handleSubmit,
    formState: { errors },
    getValues,
    setValue,
    watch,
  } = useForm<FormValues>({
    defaultValues: {
      status: 2,
      client: '',
      realization_time: new Date().toLocaleTimeString('pl-PL', {
        hour: '2-digit',
        minute: '2-digit',
      }),
      data: [
        {
          item: '',
          additional_info: '',
          finished: false,
          takeout: false,
          times: 1,
          filter: '',
        },
      ],
    },
    mode: 'all',
    criteriaMode: 'all',
    shouldFocusError: true
  });
  const { fields, append, remove } = useFieldArray({
    name: 'data',
    control,
  });
  const onSubmit = (data: FormValues) => {
    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>;

  watch('data')

  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>
        <p>
          <label htmlFor={`client`}>Klient</label>
          <input
            placeholder="Klient"
            type="text"
            {...register(`client` as const, {
              required: false,
            })}
            className={errors?.client ? 'error' : ''}
          />
        </p>
        <p>
          <label htmlFor={`realization_time`}>Godzina realizacji</label>
          <input
            {...register(`realization_time` as const, {
              required: false,
            })}
            className={errors?.realization_time ? 'error' : ''}
          />
        </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,
                })}
              />
              <div className="basis-1/3 gap-2">
                <label htmlFor={`data.${index}.item`}>Danie</label>
                <input
                  {...register(`data.${index}.filter` as const, {
                    required: false,
                  })}
                  placeholder='Wyszukaj danie'
                  className={errors?.data?.[index]?.filter ? 'error' : ''}
                  onChange={(e) => setValue(`data.${index}.item`, data
                    ?.filter((data: { id: number; name: string }) =>
                      data.name
                        .toLowerCase()
                        .includes(
                          e.target.value.toLowerCase()
                        )
                    )[0].name, {shouldValidate: true})}
                />
                <select
                  {...register(`data.${index}.item` as const, {
                    required: true,
                  })}
                  className={errors?.data?.[index]?.item ? 'error' : ''}
                >
                  {!!getValues(`data.${index}.filter`) ? (
                    null
                  ) : (
                    <option value="Inne">Inne</option>
                  )}
                  {data
                    ?.filter((data: { id: number; name: string }) =>
                      data.name
                        .toLowerCase()
                        .includes(
                          getValues(`data.${index}.filter`).toLowerCase()
                        )
                    )
                    .map((data: { id: number; name: string }) => (
                      <option key={data.name} value={data.name}>
                        {data.name}
                      </option>
                    ))}
                </select>
                <label htmlFor={`data.${index}.times`}>Ilość</label>
                  <input
                    {...register(`data.${index}.times` as const, {
                      required: false,
                    })}
                    type="number"
                    className={errors?.data?.[index]?.times ? 'error' : ''}
                  />
                <section className="flex flex-row my-2 gap-2">
                  <label htmlFor={`data.${index}.takeout`}>Na wynos</label>
                  <input
                    {...register(`data.${index}.takeout` as const, {
                      required: false,
                    })}
                    type="checkbox"
                    className={errors?.data?.[index]?.takeout ? 'error' : ''}
                  />
                </section>
              </div>
              <div 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' : ''
                  }
                />
              </div>
              {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,
              takeout: false,
              times: 1,
              filter: '',
            })
          }
        >
          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>
    </>
  );
}