diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
index 5918193..ddd546a 100644
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@@ -1,2 +1,4 @@
//= link_tree ../images
//= link_directory ../stylesheets .css
+//= link_tree ../../javascript .js
+//= link_tree ../../../vendor/javascript .js
diff --git a/app/controllers/images_controller.rb b/app/controllers/images_controller.rb
index 4ca0ce2..834ebc5 100644
--- a/app/controllers/images_controller.rb
+++ b/app/controllers/images_controller.rb
@@ -8,6 +8,13 @@ class ImagesController < ApplicationController
def show
@image = @current_user.images.find(params[:id])
+
+ if turbo_frame_request?
+ render partial: "tags/tags", locals: {
+ image: @image,
+ tags: @image.tags
+ }
+ end
end
def create
diff --git a/app/controllers/tags_controller.rb b/app/controllers/tags_controller.rb
index 89bc752..9abe2d8 100644
--- a/app/controllers/tags_controller.rb
+++ b/app/controllers/tags_controller.rb
@@ -8,7 +8,7 @@ class TagsController < ApplicationController
if !image.tags.include?(tag)
image.tags << tag
image.save
- render partial: "tags/tag", locals: { image: image, tag: tag }
+ redirect_to image, turbo_frame: "tags"
else
head :no_content, content_type: "text/html"
end
@@ -20,6 +20,6 @@ class TagsController < ApplicationController
image.tags.delete(tag)
image.save
- head :no_content
+ redirect_to image, turbo_frame: "tags"
end
end
diff --git a/app/javascript/application.js b/app/javascript/application.js
new file mode 100644
index 0000000..b62af4a
--- /dev/null
+++ b/app/javascript/application.js
@@ -0,0 +1,7 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+
+import "@hotwired/turbo-rails"
+import Rails from "@rails/ujs";
+import { Application } from "@hotwired/stimulus";
+
+Rails.start();
diff --git a/app/javascript/controllers/tag_controller.js b/app/javascript/controllers/tag_controller.js
deleted file mode 100644
index eecb056..0000000
--- a/app/javascript/controllers/tag_controller.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Controller } from "stimulus";
-import ajaxService from "../services/ajax_service";
-
-export default class extends Controller {
- static targets = ["name"];
-
- delete(event) {
- const tag = this.nameTarget.innerText;
-
- event.preventDefault();
-
- this.element.classList.add("hidden");
-
- ajaxService.deleteTag(tag)
- .then(response => {
- this.element.parentElement.removeChild(this.element);
- })
- .catch(error => {
- this.element.classList.remove("hidden")
- });
- }
-}
diff --git a/app/javascript/controllers/tags_controller.js b/app/javascript/controllers/tags_controller.js
deleted file mode 100644
index 291c6fc..0000000
--- a/app/javascript/controllers/tags_controller.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Controller } from "stimulus";
-import ajaxService from "../services/ajax_service";
-
-export default class extends Controller {
- static targets = ["tag", "tagList"]
-
- create(event) {
- const tag = this.tagTarget.value;
-
- event.preventDefault();
-
- ajaxService.createTag(tag)
- .then(response => {
- if (response.status == 200) {
- this.tagListTarget.innerHTML += response.data;
- this.tagTarget.value = "";
- };
- })
- }
-}
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
deleted file mode 100644
index 7c49ac0..0000000
--- a/app/javascript/packs/application.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/* eslint no-console:0 */
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-//
-// 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));
diff --git a/app/javascript/services/ajax_service.js b/app/javascript/services/ajax_service.js
deleted file mode 100644
index 2a1352d..0000000
--- a/app/javascript/services/ajax_service.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import axios from "axios";
-
-const csrfToken = () => {
- return document
- .getElementsByName("csrf-token")[0]
- .attributes["content"]
- .value;
-}
-
-const imageId = () => {
- return document
- .getElementsByClassName("show-image")[0]
- .attributes["data-image-id"]
- .value;
-}
-
-const config = () => ({
- headers: { "X-CSRF-Token": csrfToken() }
-});
-
-export default {
- createTag: (tag) => {
- return axios.post(`/images/${imageId()}/tags`, { tag }, config());
- },
-
- deleteTag: (tag) => {
- return axios.delete(
- `/images/${imageId()}/tags/${encodeURIComponent(tag)}`,
- config()
- );
- }
-}
diff --git a/app/views/images/_info.html.erb b/app/views/images/_info.html.erb
index fb3e99e..665734c 100644
--- a/app/views/images/_info.html.erb
+++ b/app/views/images/_info.html.erb
@@ -3,11 +3,13 @@
<%= render "tags/tags", image: image, tags: image.tags %>
- <%= form_tag image_tags_path(image),
+ <%= form_tag(
+ image_tags_path(image),
method: :post,
- data: { action: "tags#create" } do %>
- <%= text_field_tag :tag, nil, data: { target: "tags.tag" } %>
- <%= submit_tag "Add Tag", data: { disable_with: false } %>
+ data: {"turbo-frame": "tags"}
+ ) do %>
+ <%= text_field_tag :tag, nil %>
+ <%= submit_tag "Add Tag" %>
<% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index f627d95..7b5e753 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -4,8 +4,8 @@
My Images
<%= stylesheet_link_tag "application", media: "all" %>
- <%= javascript_pack_tag "application" %>
<%= csrf_meta_tags %>
+ <%= javascript_importmap_tags %>
diff --git a/app/views/tags/_tag.html.erb b/app/views/tags/_tag.html.erb
index 28ad3a3..3b0b641 100644
--- a/app/views/tags/_tag.html.erb
+++ b/app/views/tags/_tag.html.erb
@@ -3,7 +3,7 @@
data-controller="tag">
<%= tag %>
<%= link_to "×".html_safe,
- image_tag_path(image, tag),
- data: { action: "click->tag#delete" },
+ image_tag_path(image, id: tag),
+ data: {method: "delete", "turbo-frame": "tags"},
class: "delete-tag" %>
diff --git a/app/views/tags/_tags.html.erb b/app/views/tags/_tags.html.erb
index 14d52a7..6999504 100644
--- a/app/views/tags/_tags.html.erb
+++ b/app/views/tags/_tags.html.erb
@@ -1,5 +1,7 @@
-
+<%= turbo_frame_tag "tags" do %>
+
+<% end %>
diff --git a/app/views/tags/index.js.erb b/app/views/tags/index.js.erb
deleted file mode 100644
index 3d26a8e..0000000
--- a/app/views/tags/index.js.erb
+++ /dev/null
@@ -1,4 +0,0 @@
-document.getElementById("tag").value = "";
-
-document.getElementById("image-tags")
- .outerHTML = `<%= render "tags", image: image, tags: tags %>`;
diff --git a/bin/importmap b/bin/importmap
new file mode 100755
index 0000000..36502ab
--- /dev/null
+++ b/bin/importmap
@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+
+require_relative "../config/application"
+require "importmap/commands"
diff --git a/config/importmap.rb b/config/importmap.rb
new file mode 100644
index 0000000..920f51a
--- /dev/null
+++ b/config/importmap.rb
@@ -0,0 +1,8 @@
+# Pin npm packages by running ./bin/importmap
+
+pin "application"
+pin "@rails/ujs", to: "@rails--ujs.js" # @7.1.3
+pin "@hotwired/stimulus", to: "@hotwired--stimulus.js" # @3.2.2
+pin "@hotwired/turbo-rails", to: "@hotwired--turbo-rails.js" # @8.0.4
+pin "@hotwired/turbo", to: "@hotwired--turbo.js" # @8.0.4
+pin "@rails/actioncable/src", to: "@rails--actioncable--src.js" # @7.1.3