انيرشيا و رياكت و لارافيل inertia+react+laravel 11 for CRUD

				
					//resources/js/Components/Customer.jsx
import React, { useState } from 'react';
import Dropdown from '@/Components/Dropdown';
import InputError from '@/Components/InputError';
import PrimaryButton from '@/Components/PrimaryButton';
import { useForm, usePage } from '@inertiajs/react';
import Swal from 'sweetalert2';
import axios from 'axios';

export default function Customer({ c }) {
    const { auth } = usePage().props;

    const [editing, setEditing] = useState(false);
    const [modalIsOpen, setModalIsOpen] = useState(false);
    const [confirmDelete, setConfirmDelete] = useState(false);

    const { data, setData, patch, processing, reset, errors } = useForm({
        name: c.name,
        phone: c.phone,
        address: c.address,
        message: c.message,
    });

    const submit = (e) => {
        e.preventDefault();
        patch(route('customers.update', c.id), {
            data: {
                name: data.name,
                phone: data.phone,
                address: data.address,
                message: data.message,
            },
            onSuccess: () => setEditing(false),
        });
    };

    return (
        <>
            <tbody className="bg-white divide-y divide-gray-200">
                <tr>
                    {editing ? (
                        <td colSpan="4" className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                            <form onSubmit={submit}>
                                <div className="mt-4">
                                    <textarea value={data.name} onChange={e => setData('name', e.target.value)} className="w-full text-gray-900 border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"></textarea>
                                    <InputError message={errors.name} className="mt-2" />
                                </div>
                                <div className="mt-4">
                                    <textarea value={data.phone} onChange={e => setData('phone', e.target.value)} className="w-full text-gray-900 border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"></textarea>
                                    <InputError message={errors.phone} className="mt-2" />
                                </div>
                                <div className="mt-4">
                                    <textarea value={data.address} onChange={e => setData('address', e.target.value)} className="w-full text-gray-900 border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"></textarea>
                                    <InputError message={errors.address} className="mt-2" />
                                </div>
                                <div className="space-x-2 mt-4">
                                    <PrimaryButton className="mt-4">Save</PrimaryButton>
                                    <button className="mt-4" onClick={() => { setEditing(false); reset(); }}>Cancel</button>
                                </div>
                            </form>
                        </td>
                    ) : (
                        <>
                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{c.name}</td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{c.phone}</td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{c.address}</td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{c.email}</td>
                            <td className="px-12 whitespace-nowrap text-sm text-gray-500">
                                <div className="flex justify-between items-center">                                   
                                            <button className="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:bg-gray-100 transition duration-150 ease-in-out" onClick={() => setEditing(true)}>
                                            <i className='fas fa-pen hover:text-green-700'></i>
                                            </button>
                                            <Dropdown.Link as="button" onClick={() => {
                                              axios.delete(route('customers.destroy', c.id))                                       
                                                .catch((error) => {
                                                  console.error(error);
                                                  Swal.fire({
                                                    title: 'Deleted!',
                                                    text: 'Customer has been deleted successfully!',
                                                    icon: 'success',
                                                    timer: 2000,
                                                    showConfirmButton: false,
                                                  });
                                                });
                                            }}>
                                              <i className='fas fa-trash-alt text-red-600 hover:text-red-800'></i>
                                            </Dropdown.Link>
                                </div>
                            </td>
                        </>
                    )}
                </tr>
            </tbody>
        </>
    );
}