Add tags using Rails UJS and Stimulus

Gemfile

@@ -9,7 +9,6 @@ gem "rails", "5.2.1"
 gem "delayed_job_active_record"
 gem "dragonfly"
 gem "http"
-gem "jquery-rails"
 gem "omniauth-github"
 gem "pg"
 gem "puma"

Gemfile.lock

@@ -102,10 +102,6 @@ GEM
     http_parser.rb (0.6.0)
     i18n (1.1.0)
       concurrent-ruby (~> 1.0)
-    jquery-rails (4.3.3)
-      rails-dom-testing (>= 1, < 3)
-      railties (>= 4.2.0)
-      thor (>= 0.14, < 2.0)
     jwt (1.5.6)
     launchy (2.4.3)
       addressable (~> 2.3)
@@ -175,6 +171,8 @@ GEM
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.0.4)
       loofah (~> 2.2, >= 2.2.2)
+    rails-ujs (0.1.0)
+      railties (>= 3.1)
     railties (5.2.1)
       actionpack (= 5.2.1)
       activesupport (= 5.2.1)
@@ -264,7 +262,6 @@ DEPENDENCIES
   dotenv-rails
   dragonfly
   http
-  jquery-rails
   launchy
   omniauth-github
   pg
@@ -272,6 +269,7 @@ DEPENDENCIES
   pry
   puma
   rails (= 5.2.1)
+  rails-ujs
   rspec-rails
   sass-rails
   sdoc

app/controllers/tags_controller.rb

@@ -7,9 +7,10 @@ class TagsController < ApplicationController
     image.tags << tag unless image.tags.include?(tag)
     image.save
 
-    respond_to do |format|
-      format.html { redirect_to([:user, image]) }
-      format.js { render "index", locals: { image: image, tags: image.tags } }
+    if request.xhr?
+      render partial: "tags/tag", locals: { image: image, tag: tag }
+    else
+      redirect_to([:user, image])
     end
   end
 

app/javascript/controllers/tag_controller.js

@@ -2,15 +2,7 @@ import { Controller } from "stimulus";
 import ajaxService from "../services/ajax_service";
 
 export default class extends Controller {
-  static targets = [ "name" ];
-
-  connect() {
-    console.log("Connected to our tags");
-  }
-
-  disconnect() {
-    console.log("Bye bye tag!");
-  }
+  static targets = ["name"];
 
   delete(event) {
     const imageId = this.element.dataset.imageId;

app/javascript/controllers/tags_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["tag", "tagList"]
+
+  onPostSuccess(event) {
+    let [data, status, xhr] = event.detail;
+    this.tagListTarget.innerHTML += xhr.response;
+    this.tagTarget.value = "";
+  }
+}

app/javascript/packs/application.js

@@ -7,9 +7,12 @@
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
 // layout file, like app/views/layouts/application.html.erb
 
+import Rails from "rails-ujs";
 import { Application } from "stimulus";
 import { definitionsFromContext } from "stimulus/webpack-helpers";
 
+Rails.start();
+
 const application = Application.start();
 const context = require.context("controllers", true, /.js$/);
 application.load(definitionsFromContext(context));

app/views/images/_info.html.erb

@@ -0,0 +1,20 @@
+<div class="image-info">
+  <div class="image-tags" data-controller="tags">
+    <%= render "tags/tags", image: image, tags: image.tags %>
+
+    <div class="new-tag-form">
+      <%= form_with url: user_image_tags_path(image),
+        method: :post,
+        html: {
+          data: {
+            remote: true,
+            type: "html",
+            action: "ajax:success->tags#onPostSuccess"
+          }
+        } do %>
+        <%= text_field_tag :tag, nil, data: { target: "tags.tag" } %>
+        <%= submit_tag "Add Tag" %>
+      <% end %>
+    </div>
+  </div>
+</div>

app/views/images/show.html.erb

@@ -9,18 +9,5 @@
     <%= render "image", image: @image %>
   </div>
 
-  <div class="image-info">
-    <div class="image-tags">
-      <%= render "tags/tags", image: @image, tags: @image.tags %>
-
-      <div class="new-tag-form">
-        <%= form_tag user_image_tags_path(@image),
-            remote: true,
-            method: :post do %>
-          <%= text_field_tag :tag %>
-          <%= submit_tag "Add Tag" %>
-        <% end %>
-      </div>
-    </div>
-  </div>
+  <%= render "info", image: @image %>
 </div>

app/views/tags/_tags.html.erb

@@ -1,4 +1,4 @@
-<ul class="image-tags-list" id="image-tags">
+<ul class="image-tags-list" id="image-tags" data-target="tags.tagList">
   <% tags.each do |tag| %>
     <%= render "tags/tag", image: image, tag: tag %>
   <% end %>

bin/setup

@@ -11,6 +11,9 @@ gem list bundler --installed > /dev/null || gem install bundler
 gem list foreman --installed > /dev/null || gem install foreman
 bundle install
 
+# Install Javascript dependencies
+yarn install
+
 # Set up configurable environment variables
 if [ ! -f .env ]; then
   cp .env.sample .env

package.json

@@ -2,6 +2,7 @@
   "dependencies": {
     "@rails/webpacker": "3.5",
     "axios": "^0.18.0",
+    "rails-ujs": "^5.2.1",
     "stimulus": "^1.1.0"
   },
   "devDependencies": {

yarn.lock

@@ -4563,6 +4563,10 @@ querystringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.0.0.tgz#fa3ed6e68eb15159457c89b37bc6472833195755"
 
+rails-ujs@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/rails-ujs/-/rails-ujs-5.2.1.tgz#2869c6d54fdfefac3aaa257f4efe211d8f5a7169"
+
 randomatic@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.0.tgz#36f2ca708e9e567f5ed2ec01949026d50aa10116"