Addfunc/modify to ajax/#54 (#79)

* addfunc: Split JavaScript files #54

* addfunc: Add function Ajax process to like #54

* addfunc: Add function Ajax process to follow #54

* addfunc: Fix like #54

* addfunc: Fix follow #54

* addfunc: Add function Ajax process to commnent #54

* refactor: Like #54 

LGTM

app/controllers/comments_controller.rb

@@ -11,9 +11,7 @@ def create
     @post = @comment.post
 
     if @comment.save
-      flash[:success] = 'コメントしました'
       @post.create_notification_comment!(current_user, @comment.id)
-      redirect_to @post
     else
       @like = Like.find_by(post_id: @post.id, user_id: current_user.id)
       @comments = @post.comments
@@ -24,8 +22,7 @@ def create
   def destroy
     @comment = Comment.find(params[:id])
     @comment.destroy
-    flash[:success] = 'コメントを削除しました'
-    redirect_to @comment.post
+
   end
 
   private

app/controllers/likes_controller.rb

@@ -4,17 +4,16 @@ class LikesController < ApplicationController
   def create
     @like = Like.create(post_id: params[:post_id], user_id: current_user.id)
 
-    post = Post.find(params[:post_id])
-    post.create_notification_like!(current_user)
-    redirect_to post
+    @post = Post.find(params[:post_id])
+    @post.create_notification_like!(current_user)
+
   end
 
   def destroy
-    post = Post.find(params[:post_id])
+    @post = Post.find(params[:post_id])
 
     @like = Like.find(params[:id])
     @like.destroy
 
-    redirect_to post
   end
 end

app/controllers/posts_controller.rb

@@ -17,6 +17,8 @@ def show
 
     if user_signed_in?
       @like = Like.find_by(post_id: @post.id, user_id: current_user.id)
+      @relationship = Relationship.find_by(user_id: current_user.id, follow_id: @post.user)
+
     end
   end
 
@@ -96,4 +98,5 @@ def post_params
     def set_ranks
       @rank_posts = Like.create_all_ranks
     end
+
 end

app/controllers/relationships_controller.rb

@@ -2,31 +2,20 @@ class RelationshipsController < ApplicationController
   before_action :set_user, only: [:create, :destroy]
 
   def create
-    following = current_user.follow(@user)
-    if following.save
+    @relationship = current_user.follow(@user)
+    if @relationship.save
       @user.create_notification_follow!(current_user)
-      flash[:success] = 'ユーザーをフォローしました'
-    else
-      flash.now[:alert] = 'ユーザーのフォローに失敗しました'
     end
-
-    redirect_back(fallback_location: root_path)
-
   end
 
   def destroy
-    following = current_user.unfollow(@user)
-    if following.destroy
-      flash[:success] = 'ユーザーのフォローを解除しました'
-    else
-      flash.now[:alert] = 'ユーザーのフォロー解除に失敗しました'
-    end
-
-    redirect_back(fallback_location: root_path)
+    relationship = current_user.unfollow(@user)
+    relationship.destroy
   end
 
   private
     def set_user
       @user = User.find(params[:user_id])
     end
+
 end

app/controllers/users_controller.rb

@@ -4,6 +4,8 @@ class UsersController < ApplicationController
 
   def show
     @posts = Post.where(user_id:params[:id]).order(created_at: :desc).page(params[:page])
+
+    @relationship = Relationship.find_by(user_id: current_user.id, follow_id: @user)
   end
 
   private

app/javascript/custom/imgUploader.js

@@ -0,0 +1,91 @@
+/*
+* Image uploader
+*/
+$(document).on('turbolinks:load', () =>{
+
+  const imgUplorader = new ImgUplorader;
+  imgUplorader.copyToSaveInput();
+
+});
+
+class ImgUplorader{
+  constructor(){
+    this.selectorPreview = '.form-image-uploader__preview';
+    this.selectorSave = '.form-image-uploader__save';
+    this.selectorCache = '.form-image-uploader__cache';
+    this.noPhotoImgPath = '/assets/nophoto-e1a743df0c155237d2677a50919e83279a8002ff93f24727582e52ffb2347dd1.jpg';
+
+  }
+
+  /*
+  * Change preview image to nophoto image when image is not selected
+  * @param input : Element of current target
+  */
+  copyToSaveInput(){
+    $(document).on('change', this.selectorSave, event => {
+
+      const input = $(event.currentTarget);
+      const filesLength = input[0].files.length;
+      const cacheDefaultVal = $(input).next(this.selectorCache)[0].defaultValue;
+
+
+      // Change preview image to nophoto image when image is not selected
+      if (this.hasNotImg(filesLength)) {
+        this.changeNoPhotoImg(input);
+        return;
+      }
+
+      // Change preview image to selected image when image is selected
+      this.changeSelectedImg(input);
+
+    });
+  }
+
+  /*
+   * Return true when input doesn't have file
+   * @param filesLength : file length of input
+   * @return bool
+  */
+  hasCacheDefaultImg(filesLength){
+    if(filesLength == 0){
+      return true;
+    }
+
+    return false;
+  }
+
+  /*
+   * Return true when input doesn't have file
+   * @param filesLength : file length of input
+   * @return bool
+  */
+  hasNotImg(filesLength){
+    if(filesLength == 0){
+      return true;
+    }
+
+    return false;
+  }
+
+  /*
+   * Change preview image to nophoto image when image is not selected
+   * @param input : Element of current target
+  */
+  changeNoPhotoImg(input){
+    $(input).prev(this.selectorImg).children('img').attr('src', this.noPhotoImgPath);
+  }
+
+  /*
+   * Change preview image to selected image when image is selected
+   * @param input : Element of current target
+  */
+  changeSelectedImg(input){
+    const reader = new FileReader();
+    reader.onload = (progressEvent) => {
+      $(input).prev(this.selectorImg).children('img').attr('src', progressEvent.currentTarget.result);
+    }
+
+    const file = input[0].files[0];
+    reader.readAsDataURL(file);
+  }
+}

app/javascript/custom/slideToggle.js

@@ -0,0 +1,8 @@
+/*
+* Slide Toggle
+*/
+$(document).on('turbolinks:load', () =>{
+  $('.block-toggle__press .btn').on('click', event =>{
+    $(event.currentTarget).parent('.block-toggle__press').next('.block-toggle__content').slideToggle(700);
+  });
+});

app/javascript/packs/application.js

@@ -8,110 +8,13 @@ require("turbolinks").start()
 require("@rails/activestorage").start()
 require("channels")
 
+require("custom/imgUploader")
+require("custom/slideToggle")
+
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
 // or the `imagePath` JavaScript helper below.
 //
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
-
-
-/*Slide Toggle
-------------------------------------------------------*/
-$(document).on('turbolinks:load', () =>{
-  $('.block-toggle__press .btn').on('click', event =>{
-    $(event.currentTarget).parent('.block-toggle__press').next('.block-toggle__content').slideToggle(700);
-  });
-});
-
-/*Image uplorader
-------------------------------------------------------*/
-$(document).on('turbolinks:load', () =>{
-
-  const imgUplorader = new ImgUplorader;
-  imgUplorader.copyToSaveInput();
-
-});
-
-class ImgUplorader{
-  constructor(){
-    this.selectorPreview = '.form-image-uploader__preview';
-    this.selectorSave = '.form-image-uploader__save';
-    this.selectorCache = '.form-image-uploader__cache';
-    this.noPhotoImgPath = '/assets/nophoto-e1a743df0c155237d2677a50919e83279a8002ff93f24727582e52ffb2347dd1.jpg';
-
-  }
-
-  /*
-  * Change preview image to nophoto image when image is not selected
-  * @param input : Element of current target
-  */
-  copyToSaveInput(){
-    $(document).on('change', this.selectorSave, event => {
-
-      const input = $(event.currentTarget);
-      const filesLength = input[0].files.length;
-      const cacheDefaultVal = $(input).next(this.selectorCache)[0].defaultValue;
-
-
-      // Change preview image to nophoto image when image is not selected
-      if (this.hasNotImg(filesLength)) {
-        this.changeNoPhotoImg(input);
-        return;
-      }
-
-      // Change preview image to selected image when image is selected
-      this.changeSelectedImg(input);
-
-    });
-  }
-
-  /*
-   * Return true when input doesn't have file
-   * @param filesLength : file length of input
-   * @return bool
-  */
-  hasCacheDefaultImg(filesLength){
-    if(filesLength == 0){
-      return true;
-    }
-
-    return false;
-  }
-
-  /*
-   * Return true when input doesn't have file
-   * @param filesLength : file length of input
-   * @return bool
-  */
-  hasNotImg(filesLength){
-    if(filesLength == 0){
-      return true;
-    }
-
-    return false;
-  }
-
-  /*
-   * Change preview image to nophoto image when image is not selected
-   * @param input : Element of current target
-  */
-  changeNoPhotoImg(input){
-    $(input).prev(this.selectorImg).children('img').attr('src', this.noPhotoImgPath);
-  }
-
-  /*
-   * Change preview image to selected image when image is selected
-   * @param input : Element of current target
-  */
-  changeSelectedImg(input){
-    const reader = new FileReader();
-    reader.onload = (progressEvent) => {
-      $(input).prev(this.selectorImg).children('img').attr('src', progressEvent.currentTarget.result);
-    }
-
-    const file = input[0].files[0];
-    reader.readAsDataURL(file);
-  }
-}

app/views/comments/_comment.html.erb

@@ -0,0 +1,11 @@
+<div class="comment-id-<%= comment.id %>">
+  <div class="d-flex align-items-center">
+    <%= render 'users/user-info', user: comment.user %>
+    <small class="color-text-l-gray ml-auto"><%= l comment.created_at %></small>
+  </div>
+  <div><%= comment.content %></div>
+  <% if current_user == comment.user %>
+    <small class="text-right d-block"><%= link_to '削除', post_comment_path(post, comment), method: :delete, remote: true %></small>
+  <% end %>
+  <hr>
+</div>

app/views/comments/create.js.erb

@@ -0,0 +1,3 @@
+$('.post-comment').append('<%= j(render partial: 'comments/comment', locals: { comment: @comment, post: @post }) %>');
+
+$('#comment_content').val('');

app/views/comments/destroy.js.erb

@@ -0,0 +1,3 @@
+$('.comment-id-<%= @comment.id %>').fadeOut().queue(function() {
+  this.remove();
+});

app/views/likes/_like.html.erb

@@ -0,0 +1,6 @@
+<% if current_user.already_liked?(post) %>
+  <%= link_to 'Like', post_like_path(post, like), method: :delete, class:'post-like__cancel', remote: true %>
+<% else %>
+  <%= link_to 'Like', post_likes_path(post), method: :post, class:'post-like__enable', remote: true %>
+<% end %>
+<div class="post-like__num"><%= post.likes.count %></div>

app/views/likes/create.js.erb

@@ -0,0 +1 @@
+$('.post-like').html('<%= j(render partial: 'likes/like', locals: { post: @post, like: @like }) %>');

app/views/likes/destroy.js.erb

@@ -0,0 +1 @@
+$('.post-like').html('<%= j(render partial: 'likes/like', locals: { post: @post, like: @like }) %>');