React 102

app/javascript/components/Home.jsx

@@ -1,65 +1,62 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
+import { useQuery, useMutation } from 'react-query'
 
 export default () => {
-  const [tasks, setTasks] = useState([]);
   const [inputValue, setInputValue] = useState('');
+  const { isLoading: isLoadingTasks, data: tasks, refetch: loadTasks } = useQuery('tasks', () =>
+    fetch("/api/v1/tasks").then(res =>
+      res.json()
+    ), {
+      refetchInterval: 5 * 1000,
+    }
+  );
 
-  async function addTask () {
+  const { mutate: addTask } = useMutation(() => {
     const newTask = {
       description: inputValue,
     }
-    const response = await fetch("/api/v1/tasks", {
+    return fetch("/api/v1/tasks", {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify(newTask),
-    });
-    if (response.ok) {
-      loadTasks();
-    }
-  }
+    }).then(loadTasks);
+  });
 
-  async function removeTask (id) {
-    const response = await fetch(`/api/v1/tasks/${id}`, {
+  const { mutate: removeTask } = useMutation((id) => {
+    return fetch(`/api/v1/tasks/${id}`, {
       method: 'DELETE',
-    });
-    if (response.ok) {
-      loadTasks();
-    }
-  }
+    }).then(loadTasks);
+  });
 
-  async function loadTasks () {
-    const response = await fetch("/api/v1/tasks")
-    if (response.ok) {
-      const jsonResponse = await response.json();
-      setTasks(jsonResponse);
-    }
+  if (isLoadingTasks) {
+    return (
+      <div className="p-5">
+        <p>Cargando...</p>
+      </div>
+    );
   }
 
-  useEffect(() => {
-    loadTasks();
-  }, []);
-
   return (
-    <div className="main-container">
-      <h1 className="title">Tareas</h1>
+    <div className="p-5">
+      <h1 className="text-4xl mb-6">Tareas</h1>
 
-      <div className="new-task">
-        <label className="label">Nueva tarea:</label><br></br>
-        <input className="task-input" type="text" onChange={(e) => setInputValue(e.target.value)} />
-        <button className="add-task" type="button" onClick={addTask}>Agregar</button>
+      <div className="mb-6">
+        <label className="">Nueva tarea:</label><br></br>
+        <input className="rounded-md border-gray-300 mr-2" type="text" onChange={(e) => setInputValue(e.target.value)} />
+        <button className="rounded-md bg-blue-500 hover:bg-blue-600 text-white px-4 py-2" type="button" onClick={addTask}>Agregar</button>
       </div>
 
       { tasks.map((task) => (
-        <div key={task.id} className="task-container">
-          <div className="task-subcontainer">
-            <input type="checkbox" className="checkbox"/>
-            <p className="description">
+        <div key={task.id} className="flex flex-row justify-between hover:bg-gray-100 rounded-md px-4 py-2 items-center max-w-md">
+          <div className="flex flex-row items-center">
+            <input type="checkbox" className="mr-3 rounded-sm"/>
+            <p className="text-gray-700">
               { task.description }
             </p>
           </div>
-          <button className="remove-button" type="button" onClick={() => removeTask(task.id) }>x</button>
+          <button className="" type="button" onClick={() => removeTask(task.id) } data-testid={`remove-${task.id}`}>x</button>
         </div>
       )) }
     </div>

app/javascript/packs/Index.jsx

@@ -1,9 +1,21 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from 'react-query'
 import Home from '../components/Home'
 
+const queryClient = new QueryClient()
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Home />
+    </QueryClientProvider>
+   )
+}
+
+
 document.addEventListener('DOMContentLoaded', () => {
   const container = document.body.appendChild(document.createElement('div'));
   const root = createRoot(container);
-  root.render(<Home />);
+  root.render(<App />);
 })

package.json

@@ -11,12 +11,22 @@
     "prop-types": "^15.8.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-query": "^3.39.0",
     "turbolinks": "^5.2.0",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12"
   },
   "version": "0.1.0",
   "devDependencies": {
+    "@testing-library/react": "^13.3.0",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
     "webpack-dev-server": "^3"
+  },
+  "jest": {
+    "testEnvironment": "jsdom"
+  },
+  "scripts": {
+    "test": "jest"
   }
 }

test/javascript/components/Home.spec.js

@@ -0,0 +1,53 @@
+import React from "react";
+import { render, screen, fireEvent } from '@testing-library/react';
+import Home from '../../../app/javascript/components/Home';
+
+let mockIsLoading = false;
+let mockData = [];
+
+let mockFetch = jest.fn(() =>
+  Promise.resolve({
+    json: jest.fn(),
+  })
+);
+global.fetch = mockFetch;
+
+
+jest.mock('react-query', () => ({
+  useQuery: () => ({ isLoading: mockIsLoading, data: mockData, refetch: jest.fn() }),
+  useMutation: (fn) => ({ mutate: fn }),
+}));
+
+describe('Home', () => {
+  describe('when tasks are loading', () => {
+    beforeAll(() => {
+      mockIsLoading = true;
+      render(<Home />);
+    });
+
+    it('shows loading message', () => {
+      const text = screen.getByText('Cargando...');
+      expect(text).not.toBeNull();
+    });
+  });
+
+  describe('when tasks are loaded', () => {
+    beforeEach(() => {
+      mockIsLoading = false;
+      const mockTask = { id: 1, description: "Hola" };
+      mockData = [mockTask];
+      render(<Home />);
+    });
+
+    it('shows tasks', () => {
+      const text = screen.getByText('Hola');
+      expect(text).not.toBeNull();
+    });
+
+    it('allows removing a task', () => {
+      const button = screen.getByText('x');
+      fireEvent.click(button);
+      expect(mockFetch).toHaveBeenCalledWith(`/api/v1/tasks/1`, { method: 'DELETE' });
+    });
+  });
+});