feat: show timestamp for comment creation

This commit resolves #28.
Dwigoric · Jul 31, 2023 · 538238e · 538238e
1 parent 6ba5df7
commit 538238e
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 12 deletions.
diff --git a/src/components/FeedPost.vue b/src/components/FeedPost.vue
@@ -193,8 +193,10 @@ async function savePost() {
             <PostVote :id="id" style="z-index: 2; position: absolute" />
             <span class="created-timestamp">
                 <VIcon size="x-small"> mdi-clock </VIcon>
-                <span class="time-span">posted {{ moment(date).fromNow() }}</span>
-                <VTooltip activator="parent" location="top">{{ moment(date) }}</VTooltip>
+                <span class="time-span">
+                    posted {{ moment(date).fromNow() }}
+                    <VTooltip activator="parent" location="top">{{ moment(date) }}</VTooltip>
+                </span>
             </span>
         </div>
     </div>
@@ -297,19 +299,18 @@ async function savePost() {
 
 .post-footer {
     position: absolute;
-    display: inline-grid;
-    grid-template-columns: 1fr 1fr 1fr 25fr;
+    display: flex;
     width: calc(100% - 4rem);
     align-items: center;
     bottom: 2rem;
 }
 
 .created-timestamp {
-    justify-self: flex-end;
-}
-
-[data-theme='light'] .created-timestamp {
-    background-color: var(--color-dark-pink);
+    display: flex;
+    flex: 1;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: flex-end;
 }
 
 .content {

diff --git a/src/components/PostComment.vue b/src/components/PostComment.vue
@@ -36,6 +36,10 @@ const props = defineProps({
         type: String,
         required: true
     },
+    date: {
+        type: Number,
+        required: true
+    },
     edited: {
         type: Number,
         required: false
@@ -179,10 +183,17 @@ async function saveComment() {
                 </VMenu>
                 <div v-if="edited" class="ml-9">
                     <VIcon size="x-small"> mdi-pencil </VIcon>
-                    <span class="edit-span">edited {{ moment(edited).fromNow() }}</span>
+                    <span class="time-span">edited {{ moment(edited).fromNow() }}</span>
                 </div>
             </div>
             <span class="deleted-comment" v-else> This comment has been deleted </span>
+            <span class="created-timestamp">
+                <VIcon size="x-small"> mdi-clock </VIcon>
+                <span class="time-span">
+                    {{ moment(date).fromNow() }}
+                    <VTooltip activator="parent" location="top">{{ moment(date) }}</VTooltip>
+                </span>
+            </span>
         </div>
         <VTextarea
             placeholder="Reply to this comment..."
@@ -203,6 +214,7 @@ async function saveComment() {
                 :post-id="postId"
                 :user="reply.user"
                 :body="reply.body"
+                :date="reply.date"
                 :edited="reply.edited"
                 :onclick="onclick"
             >
@@ -254,12 +266,22 @@ async function saveComment() {
     padding-left: 0.5rem;
 }
 
-.edit-span {
+.time-span {
     font-size: 0.8rem;
     color: var(--color-text);
     margin-left: 10px;
 }
 
+.created-timestamp {
+    display: flex;
+    flex: 1;
+    flex-flow: row nowrap;
+    align-items: center;
+    height: 100%;
+    margin-right: 0.5rem;
+    justify-content: flex-end;
+}
+
 .user {
     display: flex;
     flex-flow: row nowrap;

diff --git a/src/stores/comments.js b/src/stores/comments.js
@@ -30,7 +30,10 @@ export const useCommentsStore = defineStore('comments', () => {
                     return
                 }
 
-                comments.push(newComment)
+                comments.push({
+                    ...newComment,
+                    date: Date.now()
+                })
             } catch (err) {
                 console.error(err)
             }

diff --git a/src/views/PostView.vue b/src/views/PostView.vue
@@ -208,6 +208,7 @@ watch(
                     :body="comment.body"
                     :user="comment.user"
                     :depth="0"
+                    :date="comment.edited"
                     :edited="comment.edited"
                     :onclick="
                         (parentId) => {