Show post/comment authors, avatars.

README.md

@@ -75,9 +75,12 @@ Good luck!
 - [ ] Comments
     - [X] List under post
     - [X] Adding -> show
-    - [ ] Show author email
+    - [X] Show author email for listed comments
+    - [X] Basic markdown (no editor)
     - [ ] Author can delete
-    - [ ] Basic markdown (no editor)
+    - [ ] Anonymous
+    - [ ] Spinner when loading
+- [ ] Multiple boards
 - [ ] Styling
 - [ ] Scheduled job to reset available votes
 

actions/comments.go

@@ -49,7 +49,7 @@ func (v CommentsResource) List(c buffalo.Context) error {
 	q := tx.PaginateFromParams(c.Params())
 
 	// Retrieve all Comments from the DB
-	if err := q.Where("post_id = ?", postID).Order("created_at").All(comments); err != nil {
+	if err := q.Where("post_id = ?", postID).Order("created_at").Eager().All(comments); err != nil {
 		return err
 	}
 
@@ -122,15 +122,13 @@ func (v CommentsResource) Create(c buffalo.Context) error {
 		return err
 	}
 	comment.AuthorID = currentUser.ID
+	comment.Author = *currentUser
 	postID, err := uuid.FromString(c.Param("post_id"))
 	if err != nil {
 		return err
 	}
 
 	comment.PostID = postID
-	fmt.Println("post_id =", postID)
-
-	fmt.Println(comment)
 
 	// Get the DB connection from the context
 	tx, ok := c.Value("tx").(*pop.Connection)

actions/render.go

@@ -1,6 +1,8 @@
 package actions
 
 import (
+	"fmt"
+	"net/url"
 	"rally/models"
 	"time"
 
@@ -44,6 +46,43 @@ func init() {
 
 				return post.Author.Email
 			},
+			"postAvatarURL": func(post *models.Post) string {
+				if post.Anonymous {
+					return avatarURL("Anonymous", "large")
+				}
+				return avatarURL(post.Author.Email, "large")
+			},
+			"commentAuthor": func(comment interface{}) string {
+				c := toCommentPtr(comment)
+				return c.Author.Email
+			},
+			"commentAvatarURL": func(comment interface{}) string {
+				c := toCommentPtr(comment)
+				return avatarURL(c.Author.Email, "small")
+			},
+			"avatarURL": avatarURL,
 		},
 	})
 }
+
+func avatarURL(seed, size string) string {
+	var px int
+	if size == "large" {
+		px = 64
+	} else {
+		px = 32
+	}
+	return fmt.Sprintf("https://avatars.dicebear.com/api/bottts/%v.com.svg?colorful=1&w=%v&h=%v&deterministic=1", url.QueryEscape(seed), px, px)
+}
+
+func toCommentPtr(comment interface{}) *models.Comment {
+	ptr, ok := comment.(*models.Comment)
+	if ok {
+		return ptr
+	}
+	val, ok := comment.(models.Comment)
+	if ok {
+		return &val
+	}
+	panic("Expecting models.Comment or *models.Comment")
+}

assets/css/application.scss

@@ -6,3 +6,11 @@
 .order-active {
     color: black;
 }
+
+.media-small .media-body {
+    font-size: 0.9rem;
+}
+
+.time-ago {
+    color: grey!important;
+}

migrations/20200828073700_create_comments.up.fizz

@@ -5,5 +5,6 @@ create_table("comments") {
 	t.Column("author_id", "uuid", {})
     t.ForeignKey("author_id", {"users": ["id"]}, {"on_delete": "cascade"})
 	t.Column("body", "text", {})
-	t.Timestamps()
+    t.Column("created_at", "timestamp with time zone", {})
+    t.Column("updated_at", "timestamp with time zone", {})
 }

templates/comments/_item.plush.html

@@ -1,5 +1,7 @@
-<tr>
-    <td>
-        <%= markdown(comment.Body) %>
-    </td>
-</tr>
+<li class="media media-small">
+    <img class="mr-3" src='<%= commentAvatarURL(comment) %>' alt='<%= commentAuthor(comment) %>'>
+    <div class="media-body">
+        <h6 class="mt-0"><%= commentAuthor(comment) %> <span class="time-ago"><%= timeAgo(comment.CreatedAt) %></h6>
+            <%= markdown(comment.Body) %>
+    </div>
+</li>

templates/comments/_list.plush.html

@@ -1,20 +1,20 @@
 <div class="py-4 mb-2">
-    <h3 class="d-inline-block">Comments</h3>
+    <h5 class="d-inline-block">Comments</h5>
 </div>
 
-<table id="comment-list" class="table table-hover table-bordered">
-    <tbody>
-        <%= for (comment) in comments { %>
-        <tr>
-            <td>
+<ul id="comment-list" class="list-unstyled">
+    <%= for (comment) in comments { %>
+    <li class="media media-small">
+        <img class="mr-3" src='<%= commentAvatarURL(comment) %>' alt='<%= commentAuthor(comment) %>'>
+        <div class="media-body">
+            <h6 class="mt-0"><%= commentAuthor(comment) %> <span class="time-ago"><%= timeAgo(comment.CreatedAt) %></h6>
                 <%= markdown(comment.Body) %>
-            </td>
-        </tr>
-        <% } %>
-    </tbody>
-</table>
+        </div>
+    </li>
+    <% } %>
+</ul>
 
 <%= remoteFormFor(comment, {action: postCommentsPath({post_id: comment.PostID}), method: "POST"}) { %>
-<%= f.TextAreaTag("Body", {rows: 4}) %>
-<button class="btn btn-success" role="submit">Post</button>
+<%= f.TextAreaTag("Body", {rows: 4, label: "New comment"}) %>
+<button class="btn btn-sm btn-success" role="submit">Submit</button>
 <% } %>

templates/comments/created.plush.js

@@ -1,2 +1,2 @@
-$('#comment-list').append('<%= partial("comments/item.plush.html", { "comment": comment }) %>');
+$('#comment-list').append('<%= partial("comments/item.plush.html") %>');
 $('#comment-Body').val('');

templates/posts/show.plush.html

@@ -1,59 +1,37 @@
 <div class="py-4 mb-2">
-  <h3 class="d-inline-block">Post Details</h3>
 
-  <div class="float-right">
-    <%= linkTo(postsPath(), {class: "btn btn-info"}) { %>
-      Back to all Posts
-    <% } %>
-    <%= if (authorized) { %>
-      <%= linkTo(editPostPath({ post_id: post.ID }), {class: "btn btn-warning", body: "Edit"}) %>
-      <%= linkTo(postPath({ post_id: post.ID }), {class: "btn btn-danger", "data-method": "DELETE", "data-confirm": "Are you sure?", body: "Destroy"}) %>
-    <% } %>
-  </div>
+    <div class="float-right">
+        <%= linkTo(postsPath(), {class: "btn btn-info"}) { %>
+        Back to all Posts
+        <% } %>
+        <%= if (authorized) { %>
+        <%= linkTo(editPostPath({ post_id: post.ID }), {class: "btn btn-warning", body: "Edit"}) %>
+        <%= linkTo(postPath({ post_id: post.ID }), {class: "btn btn-danger", "data-method": "DELETE", "data-confirm": "Are you sure?", body: "Destroy"}) %>
+        <% } %>
+    </div>
 </div>
 
 
-
-<ul class="list-group mb-2 ">
-
-
-  <li class="list-group-item pb-1">
-    <label class="small d-block">Author</label>
-    <p class="d-inline-block"><%= postAuthor(post) %></p>
-  </li>
-
-
-  <li class="list-group-item pb-1">
-    <label class="small d-block">Title</label>
-    <p class="d-inline-block"><%= post.Title %></p>
-  </li>
-
-
-
-  <li class="list-group-item pb-1">
-    <label class="small d-block">Body</label>
-    <p class="d-inline-block"><%= markdown(post.Body) %></p>
-  </li>
-
-
-
-  <li class="list-group-item pb-1">
-    <label class="small d-block">Votes</label>
-    <p class="d-inline-block"><%= post.Votes %></p>
-  </li>
+<div class="media">
+    <img class="mr-3" src='<%= postAvatarURL(post) %>' alt="<%= postAuthor(post) %>">
+    <div class="media-body">
+        <h3 class="d-inline-block"><%= post.Title %></h3>
+        <h6 class="mt-0"><%= postAuthor(post) %> <span class="time-ago"><%= timeAgo(post.CreatedAt) %></span></h6>
+        <%= markdown(post.Body) %>
+    </div>
+</div>
 
 
-</ul>
 
 <div id="comments">
 
-<script type="text/javascript">
- window.onload = function () {
-     $.ajax({
-         method: 'GET',
-         url: '<%= postCommentsPath({post_id: post.ID}) %>',
-         dataType: 'script',
-         contentType: 'text/javascript'
-     });
-  }
-</script>
+    <script type="text/javascript">
+     window.onload = function () {
+         $.ajax({
+             method: 'GET',
+             url: '<%= postCommentsPath({post_id: post.ID}) %>',
+             dataType: 'script',
+             contentType: 'text/javascript'
+         });
+     }
+    </script>