React 101

.gitignore

@@ -34,3 +34,6 @@
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

Gemfile

@@ -54,3 +54,5 @@ end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+gem "tailwindcss-rails", "~> 2.0"

Gemfile.lock

@@ -171,6 +171,8 @@ GEM
       actionpack (>= 5.2)
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
+    tailwindcss-rails (2.0.8-x86_64-darwin)
+      railties (>= 6.0.0)
     thor (1.2.1)
     tilt (2.0.10)
     turbolinks (5.2.1)
@@ -215,6 +217,7 @@ DEPENDENCIES
   sass-rails (>= 6)
   selenium-webdriver (>= 4.0.0.rc1)
   spring
+  tailwindcss-rails (~> 2.0)
   turbolinks (~> 5)
   tzinfo-data
   web-console (>= 4.1.0)

Procfile.dev

@@ -0,0 +1,2 @@
+web: bin/rails server -p 3000
+css: bin/rails tailwindcss:watch

app/assets/config/manifest.js

@@ -1,2 +1,3 @@
 //= link_tree ../images
 //= link_directory ../stylesheets .css
+//= link_tree ../builds

app/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+
+*/

app/assets/stylesheets/homepage.scss

@@ -0,0 +1,74 @@
+// Place all the styles related to the Homepage controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/
+
+.main-container {
+  padding: 1.25rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.new-task {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+label {
+  color: rgb(17, 24, 39)
+}
+
+.task-input {
+  border-width: 1px;
+  border-color: rgb(209, 213, 219);
+  padding: 0.25rem;
+  margin-right: 0.5rem;
+  border-radius: 0.375rem;
+}
+
+.add-task {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  background-color: #3B82F6;
+  color: #ffffff;
+  border-radius: 0.375rem;
+}
+
+.task-container {
+  display: flex;
+  padding: 0.25rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 20rem;
+  border-radius: 0.375rem;
+}
+
+.task-container:hover {
+  background-color: #F3F4F6;
+}
+
+.task-subcontainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.checkbox {
+  margin-right: 0.5rem;
+  border-radius: 0.125rem;
+}
+
+.description {
+  color: #111827;
+}
+
+.remove-button {
+  margin-right: 0.5rem;
+}

app/controllers/api/v1/tasks_controller.rb

@@ -0,0 +1,38 @@
+class Api::V1::TasksController < ApplicationController
+  def index
+    tasks = Task.all.order(created_at: :desc)
+    render json: tasks
+  end
+
+  def create
+    task = Task.create!(task_params)
+    if task
+      render json: task
+    else
+      render json: task.errors
+    end
+  end
+
+  def show
+    if task
+      render json: task
+    else
+      render json: task.errors
+    end
+  end
+
+  def destroy
+    task&.destroy
+    render json: { message: 'Task deleted!' }
+  end
+
+  private
+
+  def task_params
+    params.permit(:description, :completed)
+  end
+
+  def task
+    @task ||= Task.find(params[:id])
+  end
+end

app/controllers/application_controller.rb

@@ -1,2 +1,3 @@
 class ApplicationController < ActionController::Base
+  skip_before_action :verify_authenticity_token
 end

app/controllers/homepage_controller.rb

@@ -0,0 +1,4 @@
+class HomepageController < ApplicationController
+  def index
+  end
+end

app/helpers/homepage_helper.rb

@@ -0,0 +1,2 @@
+module HomepageHelper
+end

app/javascript/components/Home.jsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from "react";
+
+export default () => {
+  const [tasks, setTasks] = useState([]);
+  const [inputValue, setInputValue] = useState('');
+
+  async function addTask () {
+    const newTask = {
+      description: inputValue,
+    }
+    const response = await fetch("/api/v1/tasks", {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(newTask),
+    });
+    if (response.ok) {
+      loadTasks();
+    }
+  }
+
+  async function removeTask (id) {
+    const response = await fetch(`/api/v1/tasks/${id}`, {
+      method: 'DELETE',
+    });
+    if (response.ok) {
+      loadTasks();
+    }
+  }
+
+  async function loadTasks () {
+    const response = await fetch("/api/v1/tasks")
+    if (response.ok) {
+      const jsonResponse = await response.json();
+      setTasks(jsonResponse);
+    }
+  }
+
+  useEffect(() => {
+    loadTasks();
+  }, []);
+
+  return (
+    <div className="main-container">
+      <h1 className="title">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>
+
+      { tasks.map((task) => (
+        <div key={task.id} className="task-container">
+          <div className="task-subcontainer">
+            <input type="checkbox" className="checkbox"/>
+            <p className="description">
+              { task.description }
+            </p>
+          </div>
+          <button className="remove-button" type="button" onClick={() => removeTask(task.id) }>x</button>
+        </div>
+      )) }
+    </div>
+  );
+};

app/javascript/packs/Index.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client';
+import Home from '../components/Home'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const container = document.body.appendChild(document.createElement('div'));
+  const root = createRoot(container);
+  root.render(<Home />);
+})

app/models/task.rb

@@ -0,0 +1,2 @@
+class Task < ApplicationRecord
+end

app/views/layouts/application.html.erb

@@ -5,12 +5,16 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
+    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
 
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'Index' %>
   </head>
 
   <body>
-    <%= yield %>
+    <main class="container mx-auto px-5 flex">
+      <%= yield %>
+    </main>
   </body>
 </html>

bin/dev

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+if ! command -v foreman &> /dev/null
+then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+foreman start -f Procfile.dev

config/routes.rb

@@ -1,3 +1,10 @@
 Rails.application.routes.draw do
+  get 'homepage/index'
   # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
+
+  namespace :api do
+    namespace :v1 do
+      resources :tasks, only: [ :index, :show, :create, :destroy]
+    end
+  end
 end

config/tailwind.config.js

@@ -0,0 +1,21 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+  content: [
+    './app/helpers/**/*.rb',
+    './app/javascript/**/*.{js,jsx}',
+    './app/views/**/*.{erb,haml,html,slim}'
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/aspect-ratio'),
+    require('@tailwindcss/typography'),
+  ]
+}

db/migrate/20220513160046_create_tasks.rb

@@ -0,0 +1,9 @@
+class CreateTasks < ActiveRecord::Migration[6.1]
+  def change
+    create_table :tasks do |t|
+      t.string :description
+
+      t.timestamps
+    end
+  end
+end

test/controllers/homepage_controller_test.rb

@@ -0,0 +1,8 @@
+require "test_helper"
+
+class HomepageControllerTest < ActionDispatch::IntegrationTest
+  test "should get index" do
+    get homepage_index_url
+    assert_response :success
+  end
+end

test/fixtures/tasks.yml

@@ -0,0 +1,7 @@
+# Read about fixtures at https://api.rubyonrails.org/classes/ActiveRecord/FixtureSet.html
+
+one:
+  description: MyString
+
+two:
+  description: MyString