fix/Serialize user with comment after creation

Author: LewisYoul

app/controllers/comments_controller.rb

@@ -5,7 +5,7 @@ def create
     comment = Comment.new(comment_params)
 
     if comment.save
-      render json: { comment: comment }
+      render json: { comment: comment.serialize }
     else
       render json: { errors: comment.errors.full_messages }, status: 400
     end

app/javascript/comment.vue

@@ -1,21 +1,18 @@
 <template>
   <card>
     <div style="display: flex;">
-        <img style="border-radius: 50%;" src="https://media-exp1.licdn.com/dms/image/C4D03AQFDEttQjYQSbA/profile-displayphoto-shrink_200_200/0?e=1593648000&v=beta&t=V16a0Z3adcm8E22knjzE7dqvUddTkBgJj0g6-6Zstt4" height="48" width="48" />
-        <div style="margin-left: 12px; margin-top: 8px;">
-          <span style="display: block; font-weight: bold; font-size: 14px; font-family: Helvetica, sans-serif;">{{ comment.user_name }}</span>
-          <span style="font-size: 12px; color: gray;">54 seconds ago</span>
-        </div>
-      </div>
+      <user-preview :user="comment.user" :date="comment.created_at"/>
+    </div>
     <span class="comment--body">{{ comment.body }}</span>
   </card>
 </template>
 
 <script>
 import Card from './card';
+import UserPreview from './user-preview';
 
 export default {
-  components: { Card },
+  components: { Card, UserPreview },
 
   props: {
     comment: { required: true, type: Object }

app/javascript/snippet-preview.vue

@@ -2,7 +2,7 @@
   <card>
     <a class="snippet-preview--container" :href="snippetUrl">
       <div class="snippet-preview--author-wrapper">
-        <user-preview :user="snippet.user" :snippet="snippet"/>
+        <user-preview :user="snippet.user" :date="snippet.created_at"/>
         <div>
           <div style="font-size: 14px;">
             <span style="display: inline-block; font-family: Helvetica, sans serif; font-weight: lighter;">{{ snippet.language }}</span>

app/javascript/snippet-show.vue

@@ -2,7 +2,7 @@
   <div>
     <card>
       <div class="snippet-preview--author-wrapper">
-      <user-preview :user="snippet.user" :snippet="snippet"/>
+      <user-preview :user="snippet.user" :date="snippet.created_at"/>
       <div>
         <div style="font-size: 14px;">
           <span style="display: inline-block; font-family: Helvetica, sans serif; font-weight: lighter;">{{ snippet.language }}</span>

app/javascript/user-preview.vue

@@ -7,7 +7,7 @@
       <a :href="`/users/${user.id}`">
         <span class="user-preview--summary-name">{{ user.name }}</span>
       </a>
-      <span v-if="snippet" class="user-preview--summary-time-ago">{{ snippet.created_at }}</span>
+      <span v-if="date" class="user-preview--summary-time-ago">{{ date }}</span>
       <span v-else class="user-preview--summary-time-ago">@{{ user.name }}</span>
     </div>
   </div>
@@ -17,7 +17,7 @@
 export default {
   props: {
     user: { type: Object, required: true },
-    snippet: { type: Object, required: false }
+    date: { type: String, required: false }
   }
 }
 </script>

app/models/comment.rb

@@ -4,6 +4,10 @@ class Comment < ApplicationRecord
 
   validates_presence_of :body
 
+  def serialize
+    CommentSerializer.new(self).to_h
+  end
+
   def user_name
     user.name
   end

app/serializers/comment_serializer.rb

@@ -1,5 +1,9 @@
 class CommentSerializer < ActiveModel::Serializer
-  attributes :id, :body, :created_at, :user_name
+  include ActionView::Helpers::DateHelper
+
+  attributes :id, :body, :created_at, :user
 
-  belongs_to :user
+  def created_at
+    time_ago_in_words(object.created_at) + ' ago'
+  end
 end