From e6a4c4cbfe651af7dbdbd7d60d2745a199a7d9ab Mon Sep 17 00:00:00 2001 From: CarlosCastanedaDev Date: Mon, 16 Oct 2023 10:50:05 -0500 Subject: [PATCH 1/2] added ajax methods for CRUDing comments --- Gemfile.lock | 4 ++++ app/controllers/comments_controller.rb | 7 +++++++ app/views/comments/_comment.html.erb | 11 ++++++++--- app/views/comments/_form.html.erb | 4 ++-- app/views/comments/create.js.erb | 11 +++++++++++ app/views/comments/destroy.js.erb | 5 +++++ app/views/comments/edit.html.erb | 2 +- app/views/comments/edit.js.erb | 3 +++ app/views/comments/update.js.erb | 1 + 9 files changed, 42 insertions(+), 6 deletions(-) create mode 100644 app/views/comments/create.js.erb create mode 100644 app/views/comments/destroy.js.erb create mode 100644 app/views/comments/edit.js.erb create mode 100644 app/views/comments/update.js.erb diff --git a/Gemfile.lock b/Gemfile.lock index c5e7a4ca..375a35e9 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -215,6 +215,8 @@ GEM net-smtp (0.3.3) net-protocol nio4r (2.5.9) + nokogiri (1.15.2-arm64-darwin) + racc (~> 1.4) nokogiri (1.15.2-x86_64-darwin) racc (~> 1.4) nokogiri (1.15.2-x86_64-linux) @@ -345,6 +347,7 @@ GEM actionpack (>= 5.2) activesupport (>= 5.2) sprockets (>= 3.0.0) + sqlite3 (1.6.2-arm64-darwin) sqlite3 (1.6.2-x86_64-darwin) sqlite3 (1.6.2-x86_64-linux) stimulus-rails (1.2.1) @@ -402,6 +405,7 @@ GEM zeitwerk (2.6.7) PLATFORMS + arm64-darwin-23 x86_64-darwin-22 x86_64-linux diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index 5b62df9e..5721c713 100644 --- a/app/controllers/comments_controller.rb +++ b/app/controllers/comments_controller.rb @@ -21,6 +21,7 @@ def new def edit respond_to do |format| format.html + format.js end end @@ -33,6 +34,7 @@ def create if @comment.save format.html { redirect_back fallback_location: root_path, notice: "Comment was successfully created." } format.json { render :show, status: :created, location: @comment } + format.js else format.html { render :new, status: :unprocessable_entity } format.json { render json: @comment.errors, status: :unprocessable_entity } @@ -46,6 +48,7 @@ def update if @comment.update(comment_params) format.html { redirect_to root_url, notice: "Comment was successfully updated." } format.json { render :show, status: :ok, location: @comment } + format.js else format.html { render :edit, status: :unprocessable_entity } format.json { render json: @comment.errors, status: :unprocessable_entity } @@ -59,6 +62,10 @@ def destroy respond_to do |format| format.html { redirect_back fallback_location: root_url, notice: "Comment was successfully destroyed." } format.json { head :no_content } + + format.js do + render template: "comments/destroy" + end end end diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 7b8dc14d..b0c4cb9e 100644 --- a/app/views/comments/_comment.html.erb +++ b/app/views/comments/_comment.html.erb @@ -1,4 +1,4 @@ -
  • +
  • <%= image_tag comment.author.avatar_image, class: "rounded-circle mr-2", width: 36 %> @@ -11,11 +11,16 @@
    <% if current_user == comment.author %> - <%= link_to edit_comment_path(comment), class: "btn btn-link btn-sm text-muted" do %> + <%= link_to edit_comment_path(comment), + class: "btn btn-link btn-sm text-muted", + remote: true do %> <% end %> - <%= link_to comment, data: { turbo_method: :delete }, class: "btn btn-link btn-sm text-muted" do %> + <%= link_to comment, + method: :delete, + class: "btn btn-link btn-sm text-muted", + remote: true do %> <% end %> <% end %> diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb index 4917fb32..25ad8897 100644 --- a/app/views/comments/_form.html.erb +++ b/app/views/comments/_form.html.erb @@ -1,5 +1,5 @@ -
  • - <%= form_with(model: comment) do |form| %> +
  • + <%= form_with(model: comment, local: false) do |form| %> <% if comment.errors.any? %>
      diff --git a/app/views/comments/create.js.erb b/app/views/comments/create.js.erb new file mode 100644 index 00000000..7ad49f38 --- /dev/null +++ b/app/views/comments/create.js.erb @@ -0,0 +1,11 @@ +console.log("<%= @comment.body %>") + +var added_comment = $("<%= escape_javascript(render 'comments/comment', comment: @comment) %>"); + +added_comment.hide(); + +$("#<%= dom_id(@comment.photo) %>_new_comment_form").before(added_comment); + +added_comment.slideDown(); + +$("#<%= dom_id(@comment.photo) %>_new_comment_form #comment_body").val("") diff --git a/app/views/comments/destroy.js.erb b/app/views/comments/destroy.js.erb new file mode 100644 index 00000000..9d448a53 --- /dev/null +++ b/app/views/comments/destroy.js.erb @@ -0,0 +1,5 @@ +console.log("bye, comment!") + +$("#<%= dom_id(@comment) %>").fadeOut(1000, function() { + $(this).remove(); +}); diff --git a/app/views/comments/edit.html.erb b/app/views/comments/edit.html.erb index 607e32ef..dbdb60ce 100644 --- a/app/views/comments/edit.html.erb +++ b/app/views/comments/edit.html.erb @@ -4,4 +4,4 @@ <%= render 'form', comment: @comment %>
    - \ No newline at end of file + diff --git a/app/views/comments/edit.js.erb b/app/views/comments/edit.js.erb new file mode 100644 index 00000000..a1738ee5 --- /dev/null +++ b/app/views/comments/edit.js.erb @@ -0,0 +1,3 @@ + + +$("#<%= dom_id(@comment) %>").replaceWith("<%= j(render "comments/form", comment: @comment) %>"); diff --git a/app/views/comments/update.js.erb b/app/views/comments/update.js.erb new file mode 100644 index 00000000..06a13885 --- /dev/null +++ b/app/views/comments/update.js.erb @@ -0,0 +1 @@ +$("#<%= dom_id(@comment.photo) %>_<%= dom_id(@comment) %>_form").replaceWith("<%= j(render @comment) %>"); From 587d95d898d57cc73cbef184570d695b2ba5c5cd Mon Sep 17 00:00:00 2001 From: CarlosCastanedaDev Date: Mon, 16 Oct 2023 14:23:05 -0500 Subject: [PATCH 2/2] added ajax methods for likes and follow requests --- app/controllers/follow_requests_controller.rb | 3 +++ app/controllers/likes_controller.rb | 3 +++ app/views/follow_requests/_follow_unfollow.html.erb | 4 ++-- app/views/follow_requests/create.js.erb | 1 + app/views/follow_requests/destroy.js.erb | 1 + app/views/likes/_form.html.erb | 2 +- app/views/likes/create.js.erb | 1 + app/views/likes/destroy.js.erb | 1 + app/views/photos/_likes.html.erb | 3 ++- 9 files changed, 15 insertions(+), 4 deletions(-) create mode 100644 app/views/follow_requests/create.js.erb create mode 100644 app/views/follow_requests/destroy.js.erb create mode 100644 app/views/likes/create.js.erb create mode 100644 app/views/likes/destroy.js.erb diff --git a/app/controllers/follow_requests_controller.rb b/app/controllers/follow_requests_controller.rb index 9c30da7c..10519cb8 100644 --- a/app/controllers/follow_requests_controller.rb +++ b/app/controllers/follow_requests_controller.rb @@ -28,6 +28,7 @@ def create if @follow_request.save format.html { redirect_back fallback_location: root_url, notice: "Follow request was successfully created." } format.json { render :show, status: :created, location: @follow_request } + format.js else format.html { render :new, status: :unprocessable_entity } format.json { render json: @follow_request.errors, status: :unprocessable_entity } @@ -41,6 +42,7 @@ def update if @follow_request.update(follow_request_params) format.html { redirect_back fallback_location: root_url, notice: "Follow request was successfully updated." } format.json { render :show, status: :ok, location: @follow_request } + format.js else format.html { render :edit, status: :unprocessable_entity } format.json { render json: @follow_request.errors, status: :unprocessable_entity } @@ -54,6 +56,7 @@ def destroy respond_to do |format| format.html { redirect_back fallback_location: root_url, notice: "Follow request was successfully destroyed." } format.json { head :no_content } + format.js end end diff --git a/app/controllers/likes_controller.rb b/app/controllers/likes_controller.rb index 49affd3e..c25e3fae 100644 --- a/app/controllers/likes_controller.rb +++ b/app/controllers/likes_controller.rb @@ -27,6 +27,7 @@ def create if @like.save format.html { redirect_back fallback_location: root_url, notice: "Like was successfully created." } format.json { render :show, status: :created, location: @like } + format.js else format.html { render :new, status: :unprocessable_entity } format.json { render json: @like.errors, status: :unprocessable_entity } @@ -43,6 +44,7 @@ def update else format.html { render :edit, status: :unprocessable_entity } format.json { render json: @like.errors, status: :unprocessable_entity } + format.js end end end @@ -53,6 +55,7 @@ def destroy respond_to do |format| format.html { redirect_back fallback_location: root_url, notice: "Like was successfully destroyed." } format.json { head :no_content } + format.js end end diff --git a/app/views/follow_requests/_follow_unfollow.html.erb b/app/views/follow_requests/_follow_unfollow.html.erb index a7f2292f..a63a2294 100644 --- a/app/views/follow_requests/_follow_unfollow.html.erb +++ b/app/views/follow_requests/_follow_unfollow.html.erb @@ -3,11 +3,11 @@ <% if follow_request %> <% if follow_request.pending? %> - <%= link_to follow_request, data: { turbo_method: :delete }, class: "btn btn-outline-secondary" do %> + <%= link_to follow_request, method: :delete, remote: true, class: "btn btn-outline-secondary" do %> Un-request <% end %> <% elsif follow_request.accepted? %> - <%= link_to follow_request, data: { turbo_method: :delete }, class: "btn btn-outline-secondary" do %> + <%= link_to follow_request, method: :delete, remote: true, class: "btn btn-outline-secondary" do %> Un-follow <% end %> <% end %> diff --git a/app/views/follow_requests/create.js.erb b/app/views/follow_requests/create.js.erb new file mode 100644 index 00000000..17173e04 --- /dev/null +++ b/app/views/follow_requests/create.js.erb @@ -0,0 +1 @@ +$("#<%= dom_id(@follow_request.id) %>_likes").replaceWith("<%= j(render 'users/show', follow_request: @follow_request.id) %>") diff --git a/app/views/follow_requests/destroy.js.erb b/app/views/follow_requests/destroy.js.erb new file mode 100644 index 00000000..17173e04 --- /dev/null +++ b/app/views/follow_requests/destroy.js.erb @@ -0,0 +1 @@ +$("#<%= dom_id(@follow_request.id) %>_likes").replaceWith("<%= j(render 'users/show', follow_request: @follow_request.id) %>") diff --git a/app/views/likes/_form.html.erb b/app/views/likes/_form.html.erb index 6ee11172..6880a0d9 100644 --- a/app/views/likes/_form.html.erb +++ b/app/views/likes/_form.html.erb @@ -1,4 +1,4 @@ -<%= form_with(model: like, class: "d-inline-block") do |form| %> +<%= form_with(model: like, local: false, class: "d-inline-block") do |form| %> <%= form.hidden_field :fan_id %> <%= form.hidden_field :photo_id %> diff --git a/app/views/likes/create.js.erb b/app/views/likes/create.js.erb new file mode 100644 index 00000000..37835d08 --- /dev/null +++ b/app/views/likes/create.js.erb @@ -0,0 +1 @@ +$("#<%= dom_id(@like.photo) %>_likes").replaceWith("<%= j(render "photos/likes", photo: @like.photo) %>") diff --git a/app/views/likes/destroy.js.erb b/app/views/likes/destroy.js.erb new file mode 100644 index 00000000..7f6c939a --- /dev/null +++ b/app/views/likes/destroy.js.erb @@ -0,0 +1 @@ +$("#<%= dom_id(@like.photo) %>_likes").replaceWith("<%= j(render 'photos/likes', photo: @like.photo) %>") diff --git a/app/views/photos/_likes.html.erb b/app/views/photos/_likes.html.erb index 93b092e8..7ce710e5 100644 --- a/app/views/photos/_likes.html.erb +++ b/app/views/photos/_likes.html.erb @@ -5,7 +5,8 @@ <% like = current_user.likes.find_by(photo: photo) %> <% if like %> - <%= link_to like, class: "btn btn-link link-underline-dark link-underline link-underline-opacity-0 link-underline-opacity-100-hover", data: { turbo_method: :delete } do %> + <%= link_to like, class: "btn btn-link link-underline-dark link-underline link-underline-opacity-0 link-underline-opacity-100-hover", + method: :delete, remote: true do %> Un-like