I have a problem when editing my CRUD. When I click edit on my index.tsx page, I can’t display the data stored in the database for editing and can’t be deleted, how is the solution?
Here’s the route for my crud
Route::resource('galeri', GalleryController::class);
this is my index.tsx
import React from "react";
import { Link, usePage, router } from "@inertiajs/react";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { PageProps } from "@/types";
import { route } from 'ziggy-js';
const createPostRoute = route('galeri.create');
// Define the type for a single post
interface Post {
id: number;
nama: string;
deskripsi: string;
image: string;
}
// Adjust the type to reflect the correct structure of posts
interface Posts {
data: Post[];
}
const Index = ({ auth }: PageProps) => {
const { posts } = usePage<{ posts: Posts; auth: PageProps["auth"] }>().props;
const data: Post[] = posts.data;
console.log(data);
// Function to handle delete action
const handleDelete = (id: number) => {
if (confirm("Are you sure you want to delete this post?")) {
router.delete(route("galeri.destroy", id));
}
};
return (
<AuthenticatedLayout
header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Dashboard</h2>}
>
<div className="container mx-auto max-w-7xl mt-4">
<h1 className="mb-8 text-4xl font-bold text-center">Posts Index</h1>
<div className="flex items-center justify-between mb-6">
<Link
className="px-3 py-1.5 text-white bg-blue-500 rounded-md focus:outline-none"
href={route("galeri.create")}
>
Create Post
</Link>
</div>
<div className="overflow-x-auto">
<table className="min-w-full bg-white">
<thead>
<tr>
<th className="px-4 py-2 bg-gray-200 text-gray-600 border-b border-gray-300 text-left text-sm uppercase font-semibold">
#
</th>
<th className="px-4 py-2 bg-gray-200 text-gray-600 border-b border-gray-300 text-left text-sm uppercase font-semibold">
Nama
</th>
<th className="px-4 py-2 bg-gray-200 text-gray-600 border-b border-gray-300 text-left text-sm uppercase font-semibold">
deskripsi
</th>
<th className="px-4 py-2 bg-gray-200 text-gray-600 border-b border-gray-300 text-left text-sm uppercase font-semibold">
image
</th>
<th className="px-4 py-2 bg-gray-200 text-gray-600 border-b border-gray-300 text-left text-sm uppercase font-semibold">
Actions
</th>
</tr>
</thead>
<tbody>
{data && data.length > 0 ? (
data.map(({ id, nama, deskripsi, image }) => (
<tr key={id}>
<td className="px-4 py-2 border-b border-gray-300">{id}</td>
<td className="px-4 py-2 border-b border-gray-300">{nama}</td>
<td className="px-4 py-2 border-b border-gray-300">{deskripsi}</td>
<td className="px-4 py-2 border-b border-gray-300">
<img
src={`/storage/${image}`}
alt={nama}
className="h-20 w-20 object-cover rounded"
/>
</td>
<td className="px-4 py-2 border-b border-gray-300">
<Link
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded text-xs mr-1"
href={route("galeri.edit", id)}
>
Edit
</Link>
<button
className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded text-xs"
onClick={() => handleDelete(id)}
>
Delete
</button>
</td>
</tr>
))
) : (
<tr>
<td className="px-4 py-2 border-b border-gray-300" colSpan={5}>
No posts found.
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</AuthenticatedLayout>
);
};
export default Index;
this is my controller
<?php
namespace AppHttpControllers;
use AppHttpRequestsStoreGalleryRequest;
use AppModelsGallery;
use IlluminateSupportFacadesAuth;
use IlluminateHttpRequest;
use IlluminateSupportFacadesRedirect;
use InertiaInertia;
class GalleryController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index()
{
$postgaleris = Gallery::all();
return Inertia::render('Gallery/index', [
'auth' => [
'user' => [
'name' => Auth::user()->name,
'email' => Auth::user()->email,
],
],
'posts' => ['data' => $postgaleris],
]);
}
/**
* Show the form for creating a new resource.
*/
public function create()
{
return Inertia::render('Gallery/post');
}
/**
* Store a newly created resource in storage.
*/
public function store(StoreGalleryRequest $request)
{
$data = $request->validated();
if ($request->hasFile('image')) {
$imagePath = $request->file('image')->store('gallery_fotos', 'public');
$data['image'] = $imagePath;
} else {
$data['image'] = null;
}
Gallery::create($data);
return Redirect::route('galeri.index');
}
/**
* Display the specified resource.
*/
public function show(Gallery $gallery)
{
//
}
/**
* Show the form for editing the specified resource.
*/
public function edit(Gallery $gallery)
{
return Inertia::render('Gallery/edit', [
'post' => [
'id' => $gallery->id,
'nama' => $gallery->nama,
'deskripsi' => $gallery->deskripsi,
'image' => $gallery->image ? asset('storage/' . $gallery->image) : null,
],
]);
}
/**
* Update the specified resource in storage.
*/
public function update(StoreGalleryRequest $request, Gallery $gallery)
{
$data = $request->validated();
if ($request->hasFile('image')) {
if ($gallery->image && Storage::disk('public')->exists($gallery->image)) {
Storage::disk('public')->delete($gallery->image);
}
$data['image'] = $request->file('image')->store('gallery_fotos', 'public');
}
$gallery->update($data);
return Redirect::route('galeri.index');
}
/**
* Remove the specified resource from storage.
*/
public function destroy(Gallery $gallery)
{
$gallery->delete();
return Redirect::route('galeri.index');
}
}
I’ve tried to find the problem, but I don’t know where it is because there is no error message for the destroy and update functions