editable inline for Todos

app/controllers/application_controller.rb

@@ -1,5 +1,4 @@
 class ApplicationController < ActionController::Base
-
   private
 
   def serialize(resource, serializer_class)

app/controllers/todos_controller.rb

@@ -1,5 +1,5 @@
 class TodosController < ApplicationController
-  before_action :set_todo, only: [:show, :edit, :update, :destroy]
+  before_action :set_todo, only: [:show, :update, :destroy]
 
   # GET /todos or /todos.json
   def index
@@ -12,14 +12,6 @@ def show
     render inertia: "Todos/Show", props: { todo: serialize(@todo, TodoSerializer) }
   end
 
-  # GET /todos/new
-  def new
-    @todo = Todo.new
-  end
-
-  # GET /todos/1/edit
-  def edit; end
-
   # POST /todos or /todos.json
   def create
     @todo = Todo.new(todo_params)
@@ -33,14 +25,10 @@ def create
 
   # PATCH/PUT /todos/1 or /todos/1.json
   def update
-    respond_to do |format|
-      if @todo.update(todo_params)
-        format.html { redirect_to todo_url(@todo), notice: "Todo was successfully updated." }
-        format.json { render :show, status: :ok, location: @todo }
-      else
-        format.html { render :edit, status: :unprocessable_entity }
-        format.json { render json: @todo.errors, status: :unprocessable_entity }
-      end
+    if @todo.update(todo_params)
+      redirect_to todos_url(@todo), notice: "Todo was successfully edited."
+    else
+      redirect_to todos_url(@todo), inertia: { errors: { name: "Nome inválido" } }
     end
   end
 

app/frontend/components/Todo.jsx

@@ -1,20 +1,56 @@
-import React from "react";
-import {Link} from "@inertiajs/react";
+import React, {useState} from "react";
+import {Link, useForm} from "@inertiajs/react";
 
 const Todo = ({todo}) => {
+  const [editable, setEditable] = useState(false);
+
+  const {data, setData, patch, processing, errors} = useForm({
+    name: todo.name
+  });
+
+  const submit = (e) => {
+    e.preventDefault()
+    patch(`/todos/${todo.id}`, {preserveState: true})
+    setEditable(false);
+  }
+
   return (
     <div className="flex justify-between border-2 border-handwrite border-black mt-5 p-3">
-      {todo.name}
-      <div className="flex gap-2">
+      <div className="flex flex-col">
+        {editable ? (
+            <form method="patch" className="flex flex-row" onSubmit={submit}>
+
+              <input name="name"
+                     placeholder="Nome da tarefa"
+                     className="form-input block w-full border-2 border-handwrite border-black p-2"
+                     value={data.name}
+                     onChange={e => setData("name", e.target.value)}
+              />
+              <div className="pl-4">
+                <button type="submit" className="border-2 border-handwrite border-black p-2" disabled={processing}>
+                  {processing ? 'Enviando...' : 'Enviar'}
+                </button>
+              </div>
 
-        <Link href={`todos/${todo.id}`} className="border-2 border-handwrite border-black p-2">
+            </form>
+          ) :
+          <Link href={`todos/${todo.id}`} className="h-fit my-auto">
+            {todo.name}
+          </Link>
+        }
+        <span className="text-red-500 text-xs">{errors.name && errors.name}</span>
+      </div>
+
+      <div className="flex gap-2">
+        <button onClick={() => setEditable(!editable)} className="border-2 border-handwrite border-black p-2">
           Editar
-        </Link>
+        </button>
 
         <Link href={`todos/${todo.id}`} method="delete" as="button"
               className="border-2 border-handwrite border-black p-2">
           Remover
         </Link>
+
       </div>
     </div>
   )

app/frontend/pages/Todos/Show.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+const TodosShow = ({todo}) => {
+
+  return (
+    <div className="container px-4 mx-auto pt-26">
+      <div className="flex justify-between">
+        <h1 className="text-3xl font-bold underline">
+          Tarefa {todo.name}
+        </h1>
+      </div>
+
+      <div className="pt-2">
+        <p className="font-bold">
+          Criado em: {todo.created_at}
+        </p>
+        <p className="font-bold">
+          Atualizado em: {todo.updated_at}
+        </p>
+      </div>
+
+    </div>
+  )
+}
+
+export default TodosShow;

config/routes.rb

@@ -1,5 +1,5 @@
 Rails.application.routes.draw do
-  resources :todos
+  resources :todos, except: [:new, :edit]
 
   root "todos#index"
 end