ユーザー個別ページ > 回答一覧をVue.js化した

app/controllers/api/answers_controller.rb

@@ -6,7 +6,22 @@ class API::AnswersController < API::BaseController
   before_action :set_available_emojis, only: %i[index create]
 
   def index
-    @answers = question.answers.order(created_at: :asc)
+    if params[:question_id].present?
+      @answers = question.answers.order(created_at: :asc)
+    else
+      user = User.find(params[:user_id])
+      @answers = user.answers.where(user_id: params[:user_id]).includes(
+        {
+          question: [
+            :correct_answer,
+            { user: [:company, { avatar_attachment: :blob }] },
+            :practice,
+            :tag_taggings,
+            :tags
+          ]
+        }
+      ).order(created_at: :desc).page(params[:page])
+    end
   end
 
   def create

app/controllers/users/answers_controller.rb

@@ -5,16 +5,5 @@ class Users::AnswersController < ApplicationController
 
   def index
     @user = User.find(params[:user_id])
-    @answers = @user.answers.includes(
-      {
-        question: [
-          :correct_answer,
-          { user: [:company, { avatar_attachment: :blob }] },
-          :practice,
-          :tag_taggings,
-          :tags
-        ]
-      }
-    ).order(created_at: :desc)
   end
 end

app/javascript/answers.vue

@@ -114,7 +114,7 @@ export default {
         return response.json()
       })
       .then((json) => {
-        json.forEach((c) => {
+        json.answers.forEach((c) => {
           this.answers.push(c)
         })
 

app/javascript/packs/application.js

@@ -71,3 +71,4 @@ import '../learning-completion-message.js'
 import '../practices-pages.js'
 import '../users-questions.js'
 import '../company-select.js'
+import '../users-answers.js'

app/javascript/users-answer.vue

@@ -0,0 +1,67 @@
+<template lang="pug">
+.thread-list-item(:class='answerClass')
+  .thread-list-item__inner
+    .thread-list-item__user
+      a.a-user-name(:href='answer.question.user.url')
+        img.thread-list-item__user-icon.a-user-icon(
+          :title='answer.question.user.icon_title',
+          :alt='answer.question.user.icon_title',
+          :src='answer.question.user.avatar_url',
+          :class='[roleClass, daimyoClass]'
+        )
+    .thread-list-item__rows
+      .thread-list-item__row
+        .thread-list-item-title
+          h1.thread-list-item-title__title(itemprop='name')
+            a.thread-list-item-title__link(
+              :href='answer.question.url',
+              itemprop='url'
+            ) {{ answer.question.title }}
+      .thread-list-item__row(v-if='answer.question.practice')
+        .thread-list-item-meta
+          .thread-list-item-meta__items
+            .thread-list-item-meta__item
+              .thread-list-item-sub-title {{ answer.question.practice.title }}
+      .thread-list-item__row
+        .thread-list-item__summary
+          p {{ answer.description }}
+      .thread-list-item__row
+        .thread-list-item-meta
+          .thread-list-item-meta__items
+            .thread-list-item-meta__item
+              a.a-user-name(:href='`/users/${answer.question.user.id}`')
+                | {{ answer.question.user.long_name }}
+            .thread-list-item-meta__item
+              time.a-meta(:datetime='answer.updated_at', pubdate='pubdate') {{ updatedAt }}
+      .answer-badge(v-if='answer.type == "CorrectAnswer"')
+        .answer-badge__icon
+          i.fas.fa-star
+        .answer-badge__label ベストアンサー
+</template>
+<script>
+import dayjs from 'dayjs'
+
+export default {
+  props: {
+    answer: { type: Object, required: true }
+  },
+  computed: {
+    updatedAt() {
+      return dayjs(this.answer.updated_at).format('YYYY年MM月DD日(dd) HH:mm')
+    },
+    roleClass() {
+      return `is-${this.answer.question.user.primary_role}`
+    },
+    daimyoClass() {
+      return { 'is-daimyo': this.answer.question.user.daimyo }
+    },
+    answerClass() {
+      if (this.answer.has_correct_answer) {
+        return 'is-solved'
+      } else {
+        return ''
+      }
+    }
+  }
+}
+</script>

app/javascript/users-answers.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import UsersAnswers from './users-answers.vue'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const selector = '#js-users-answers'
+  const usersAnswers = document.querySelector(selector)
+  if (usersAnswers) {
+    const userId = usersAnswers.getAttribute('data-user-id')
+    new Vue({
+      render: (h) =>
+        h(UsersAnswers, {
+          props: {
+            userId
+          }
+        })
+    }).$mount(selector)
+  }
+})

app/javascript/users-answers.vue

@@ -0,0 +1,106 @@
+<template lang="pug">
+div
+  nav.pagination(v-if='totalPages > 1')
+    pager(v-bind='pagerProps')
+  div(v-if='answers === null')
+    loadingListPlaceholder
+    .thread-list.a-card
+  .o-empty-message(v-else-if='answers.length === 0')
+    .o-empty-message__icon
+      i.far.fa-sad-tear
+    p.o-empty-message__text
+      | 回答はまだありません。
+  .thread-list.a-card(v-else)
+    usersAnswer(v-for='answer in answers', :key='answer.id', :answer='answer')
+  nav.pagination(v-if='totalPages > 1')
+    pager(v-bind='pagerProps')
+</template>
+
+<script>
+import LoadingListPlaceholder from './loading-list-placeholder.vue'
+import Pager from './pager.vue'
+import UsersAnswer from './users-answer.vue'
+
+export default {
+  components: {
+    loadingListPlaceholder: LoadingListPlaceholder,
+    pager: Pager,
+    usersAnswer: UsersAnswer
+  },
+  props: {
+    userId: { type: String, required: true }
+  },
+  data() {
+    return {
+      answers: null,
+      currentPage: this.pageParam(),
+      totalPages: null
+    }
+  },
+  computed: {
+    newParams() {
+      const params = new URL(location.href).searchParams
+      params.set('page', this.currentPage)
+      params.set('user_id', this.userId)
+      return params
+    },
+    newURL() {
+      return `${location.pathname}?${this.newParams}`
+    },
+    usersAnswersAPI() {
+      const params = this.newParams
+      return `/api/answers.json?${params}`
+    },
+    pagerProps() {
+      return {
+        initialPageNumber: this.currentPage,
+        pageCount: this.totalPages,
+        pageRange: 9,
+        clickHandle: this.clickCallback
+      }
+    }
+  },
+  created() {
+    window.onpopstate = () => {
+      this.currentPage = this.pageParam()
+      this.getUsersAnswers()
+    }
+    this.getUsersAnswers()
+  },
+  methods: {
+    pageParam() {
+      const url = new URL(location.href)
+      const page = url.searchParams.get('page')
+      return parseInt(page || 1)
+    },
+    clickCallback(pageNum) {
+      this.currentPage = pageNum
+      history.pushState(null, null, this.newURL)
+      this.usersAnswers = null
+      this.getUsersAnswers()
+    },
+    getUsersAnswers() {
+      fetch(this.usersAnswersAPI, {
+        method: 'GET',
+        headers: { 'X-Requested-With': 'XMLHttpRequest' },
+        credentials: 'same-origin',
+        redirect: 'manual'
+      })
+        .then((response) => {
+          return response.json()
+        })
+        .then((json) => {
+          this.answers = []
+          json.answers.forEach((r) => {
+            this.answers.push(r)
+            console.log(this.answers)
+          })
+          this.totalPages = parseInt(json.totalPages)
+        })
+        .catch((error) => {
+          console.warn(error)
+        })
+    }
+  }
+}
+</script>

app/views/api/answers/_answer.json.jbuilder

@@ -1,6 +1,7 @@
 json.(answer, :id, :description, :created_at, :updated_at, :type, :question_id)
+json.has_correct_answer answer.question.correct_answer.present?
 json.question do
-  json.created_at answer.question.created_at
+  json.partial! 'api/questions/question', question: answer.question
 end
 json.user do
   json.partial! "api/users/user", user: answer.user

app/views/api/answers/index.json.jbuilder

@@ -1,3 +1,7 @@
-json.array! @answers do |answer|
+json.answers @answers do |answer|
   json.partial! "api/answers/answer", answer: answer, available_emojis: @available_emojis
 end
+
+if @answers.respond_to?(:total_pages)
+  json.totalPages @answers.total_pages
+end

app/views/users/answers/index.html.slim

@@ -1,4 +1,4 @@
-- title "#{@user.login_name}の回答"
+- title @user.login_name
 header.page-header
   .container
     .page-header__inner
@@ -14,12 +14,4 @@ header.page-header
 
 .page-body
   .container.is-md
-    - if @answers.present?
-      .thread-list.a-card
-        = render partial: 'users/answers/answer', collection: @answers, as: :answer
-    - else
-      .o-empty-message
-        .o-empty-message__icon
-          i.far.fa-sad-tear
-        p.o-empty-message__text
-          | 回答はまだありません。
+    #js-users-answers data-user-id="#{params[:user_id]}"

db/fixtures/answers.yml

@@ -27,3 +27,10 @@ answer6:
   description: Q&Aのコメントです。(ベストアンサーではない)
   user: machida
   question: question6
+
+<% 7.upto(50) do |i| %>
+answer<%= i %>:
+  description: ページャー確認用のデモ回答です。
+  user: komagata
+  question: question1
+<% end %>

test/integration/api/answers_test.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require 'test_helper'
+
+class API::AnswersTest < ActionDispatch::IntegrationTest
+  test 'GET /api/answers.json?user_id=253826460' do
+    user = users(:hajime)
+    get api_answers_path(user_id: user.id, format: :json)
+    assert_response :unauthorized
+
+    token = create_token('hajime', 'testtest')
+    get api_answers_path(user_id: user.id, format: :json),
+        headers: { 'Authorization' => "Bearer #{token}" }
+    assert_response :ok
+  end
+end

test/system/user/answers_test.rb

@@ -5,6 +5,14 @@
 class User::AnswersTest < ApplicationSystemTestCase
   test 'show listing answers' do
     visit_with_auth "/users/#{users(:komagata).id}/answers", 'komagata'
-    assert_equal 'komagataの回答 | FJORD BOOT CAMP（フィヨルドブートキャンプ）', title
+    assert_equal 'komagata | FJORD BOOT CAMP（フィヨルドブートキャンプ）', title
+  end
+
+  test "visit user profile page when clicked on user's name on answer" do
+    visit_with_auth "/users/#{users(:komagata).id}/answers", 'komagata'
+    assert_text 'どのエディターを使うのが良いでしょうか'
+    click_link 'machida (Machida Teppei)', match: :first
+    assert_text 'プロフィール'
+    assert_text 'Machida Teppei（マチダ テッペイ）'
   end
 end