From 2b08fe5be98ba1de0dc3c16f2f3f25ce3c2b262c Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Wed, 27 Mar 2019 11:37:16 -0700
Subject: [PATCH] Adding correct comment ordering

---
 server/src/actions/comment.rs |  1 +
 ui/src/components/post.tsx    | 15 ++++++++-------
 ui/src/main.css               | 11 +++++++++++
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/server/src/actions/comment.rs b/server/src/actions/comment.rs
index ceedf2945..93e808a44 100644
--- a/server/src/actions/comment.rs
+++ b/server/src/actions/comment.rs
@@ -103,6 +103,7 @@ impl Comment {
   pub fn from_post(conn: &PgConnection, post: &Post) -> Result<Vec<Self>, Error> {
     use schema::community::dsl::*;
     Comment::belonging_to(post)
+      .order_by(comment::published.desc())
       .load::<Self>(conn) 
   }
 }
diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index 193da3de0..5e383c09c 100644
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -131,7 +131,7 @@ export class Post extends Component<any, State> {
   commentsTree() {
     let nodes = this.buildCommentsTree();
     return (
-      <div className="sticky-top">
+      <div className="">
         <CommentNodes nodes={nodes} />
       </div>
     );
@@ -147,7 +147,7 @@ export class Post extends Component<any, State> {
     } else if (op == UserOperation.GetPost) {
       let res: PostResponse = msg;
       this.state.post = res.post;
-      this.state.comments = res.comments.reverse();
+      this.state.comments = res.comments;
       this.setState(this.state);
     } else if (op == UserOperation.CreateComment) {
       let res: CommentResponse = msg;
@@ -177,10 +177,11 @@ export class CommentNodes extends Component<CommentNodesProps, CommentNodesState
     return (
       <div className="comments">
         {this.props.nodes.map(node =>
-          <div className="comment ml-2">
-            <div className="float-left small font-weight-light">
-              <div className="pointer">▲</div>
-              <div className="pointer">▼</div>
+          <div className={`comment ${node.comment.parent_id ? 'ml-4' : ''}`}>
+            <div className="float-left small text-center">
+              <div className="pointer upvote">▲</div>
+              <div>20</div>
+              <div className="pointer downvote">▼</div>
             </div>
             <div className="details ml-4">
             <ul class="list-inline mb-0 text-muted small">
@@ -189,7 +190,7 @@ export class CommentNodes extends Component<CommentNodesProps, CommentNodesState
               </li>
               <li className="list-inline-item">
                 <span>(
-                  <span className="text-info"> 1300</span>
+                  <span className="text-info"> +1300</span>
                   <span> | </span>
                   <span className="text-danger">-29</span>
                   <span> ) points</span>
diff --git a/ui/src/main.css b/ui/src/main.css
index cb2d53d44..30fbc8dcc 100644
--- a/ui/src/main.css
+++ b/ui/src/main.css
@@ -1,3 +1,14 @@
+
+
+
 .pointer {
   cursor: pointer;
 }
+
+.upvote:hover {
+ color: var(--info);
+}
+
+.downvote:hover {
+  color: var(--danger);
+}