はしばみあきら blog

プログラミングアウトプットするブログ。202010スタート

【RailsでLINEを作る】クリックでトークを表示させる

今日は恐ろしくやる気が出ず、ブログの更新だけになります...

昨日、一昨日で友だちをクリックしたときにトーク内容をJSで更新させるようにしました。

CSSをあまりいじってないので雰囲気だけ...

流れとして

友だち一覧を取得しeachで表示 ↓ 友だち1つ1つにパラメータとしてIDを持たせる ↓ link_toを非同期対応させて、同じページを呼び出す ↓ パラメータを元にコントローラの動きを分ける ↓ 部分テンプレートにしてあるトークを書き換える

まずindexのviewに部分テンプレートを記述します

talk_rooms/index.html.slim

    .talk-room-index__talk
      .user-talks
        #talks.user-talks__talk
          = render partial: "users/user-talk-index", locals: { user: @user, room: @room, talks: @talks}

id="talks"をターゲットにするのでidはつけておきます

次に、each文で表示する友だちにパラメターを持たせます

talk_rooms/index.html.slim

 .talk-rooms__list--friends
     span.select-friends-list 友だち
        ul
           - current_user.followings.each do |follower|
             li class="follower"
               = link_to talk_rooms_path(follower: follower.id), class: "user-talk-show", remote: true do
                  = render partial: 'users/attachment', locals: { user: follower}
                  p = follower.name

link_toのパスの後に(follower: follower.id)と書くことで、リンク先にfollowerのidをparams[:follower]として渡すことができます

パスは同じviewなのでtalk_tooms_pathにしてあります

次にコントローラー

talk_rooms_controller.rb

  def index
    unless params[:follower].blank?
      @user = User.find_by(id: params[:follower])
      @current_room = RoomUser.where(user_id: current_user.id)
      @another_room = RoomUser.where(user_id: @user.id)
      unless @user.id == current_user.id
        @current_room.each do |cr|
          @another_room.each do |ar|
            # ルームが存在する時
            if cr.talk_room_id == ar.talk_room_id
              @is_room = true
              @room = TalkRoom.find_by(id: cr.talk_room_id)
              @talks = @room.talk
            end
          end
        end
        # なければ新規作成
        unless @is_room
          @room = TalkRoom.new
          @room_user = RoomUser.new
        end
      end
    end
    @users = User.where.not(id: current_user.id)
  end

普通にindexを表示した時点ではパラメータがないので@users = User.where.not(id: current_user.id)だけを渡します

友だちがクリックされた時に初めて unless params[:follower].blank?を実行し変数をviewに渡します

そして書き換えるjsファイルを作成

talk_rooms/index.js.erb

$('#talks').html("<%= j(render partial: 'users/user-talk-index', locals: { user: @user, room: @room, talks: @talks}) %>");

部分テンプレートの中身を作成

users/_user-talk-index.html.slim

.user-talk-index
  - unless user.blank?
    .user-talk-index__name
      p = "#{user.name}"
    .user-talk-index__talks
      #talk
        - talks.each do |talk|
          p = talk.talk
    .user-talk-index__form
      input[type="text"
            id="talk-form"
            data-behavior="room_speaker"
            data-user="#{current_user.id}"
            data-room="#{room.id}"
            placeholder="メッセージを入力"]
  - else
    .non-talk-case
      p トークをはじめよう!

-unless user.blank?でクリックされてパラメータが渡される前は、elseの部分を表示させるようにしてあります

今回かなり沼ったのは素直にlink_toにパラメータを持たせず、dataを使おうとして混乱してしまった所です

シンプルに部分テンプレートで書き換えるのが間違いなさそうです

次回はインクリメンタルサーチを実装した記事を書いていきます。