@drehimself Thanks for your answer, @drehimself! It's not the CRUD actions I am struggling with. It's more the functionality that I would normally use a Livewire component with, I am having a hard time figuring out how to structure.
We can take an example. I am building a page where moderators can look through posts and either approve, skip or deny them. In Livewire, that would normally look like this:
<textarea wire:model="content" />
<div class="flex justify-between">
<button wire:click="approvePost">Approve post</button>
<button wire:click="denyPost">Deny post</button>
<button wire:click="skipPost">Skip post</button>
</div>
And in the component:
class Moderator extends Component {
protected $posts;
public $currentPost;
public string $content = '';
public function mount()
{
$this->posts = Post::where([...])->get();
$this->currentPost = $this->posts->first();
$this->content = $this->currentPost->content;
}
public function approvePost(){
//1. Update the database.
$this->currentPost->update(['status' => 'approved']);
//2. Get the next post.
// $this->currentPost .......
//3. Set the content in the frontend to the next post.
//$this->content = ...
//4. Show a success banner
//$this->notify('success', 'Post approved');
}
public function denyPost(){
//1. Update the database.
$this->currentPost->update(['status' => 'denied']);
//2. Get the next post.
// $this->currentPost .......
//3. Set the content in the frontend to the next post.
//$this->content = ...
//4. Show a success banner
//$this->notify('success', 'Post denied');
}
public function skipPost(){
//1. Update the database.
$this->currentPost->update(['status' => 'skipped']);
//2. Get the next post.
// $this->currentPost .......
//3. Set the content in the frontend to the next post.
//$this->content = ...
//4. Show a success banner
//$this->notify('success', 'Post skipped');
}
}
So the above code example (pseudo-code, so bear with me) illustrates how this can be solved very fast in Livewire - without setting up any additional URL endpoints. Now, with Inertia.js - how would I achieve this?
I figure that in my page, I must create JS methods to send the request - something like:
<!-- Index.vue -->
import { useForm } from '@inertiajs/inertia-vue3';
const form = useForm({.......});
const approvePost = () => {
form.put(route('posts.moderator.update'), {
errorBag: 'approvePost',
preserveScroll: true,
}
}
const denyPost = () => {
form.put(route('posts.moderator.update'), {
errorBag: 'approvePost',
preserveScroll: true,
}
}
const skipPost = () => {
form.put(route('posts.moderator.update'), {
errorBag: 'approvePost',
preserveScroll: true,
}
}
And then the logic is pushed to the backend? (Controller)
I guess what confuses me is that I will need to create endpoints/controllers for each and every action my site performs (when it needs to hit the database at least...)?
