From ec0260e773946b3bb48a7008660ca87dac6ff32a Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Wed, 25 Mar 2020 18:59:37 +0100
Subject: [PATCH] add times and move filename

---
 .../app/overmind/namespaces/comments/state.ts | 28 +++++++++++++++++
 .../Workspace/screens/Comments/Comment.tsx    | 16 ++++++----
 .../Workspace/screens/Comments/index.tsx      | 30 +++++++++++++++----
 3 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/app/overmind/namespaces/comments/state.ts b/packages/app/src/app/overmind/namespaces/comments/state.ts
index 787c83f25da..e9c452d99c7 100644
--- a/packages/app/src/app/overmind/namespaces/comments/state.ts
+++ b/packages/app/src/app/overmind/namespaces/comments/state.ts
@@ -1,5 +1,6 @@
 import { CommentsFilterOption } from '@codesandbox/common/lib/types';
 import { CommentFragment, CommentWithRepliesFragment } from 'app/graphql/types';
+import isToday from 'date-fns/isToday';
 import { Derive } from 'app/overmind';
 
 export const OPTIMISTIC_COMMENT_ID = '__OPTIMISTIC_COMMENT_ID__';
@@ -27,6 +28,13 @@ type State = {
       }>;
     }
   >;
+  currentCommentsByDate: Derive<
+    State,
+    {
+      today: CommentFragment[];
+      prev: CommentFragment[];
+    }
+  >;
   multiCommentsSelector: {
     ids: string[];
     x: number;
@@ -119,4 +127,24 @@ export const state: State = {
         return [];
     }
   },
+  currentCommentsByDate({ currentComments }) {
+    return currentComments.reduce(
+      (acc, comment) => {
+        if (
+          isToday(new Date(comment.insertedAt)) ||
+          isToday(new Date(comment.updatedAt))
+        ) {
+          acc.today.push(comment);
+        } else {
+          acc.prev.push(comment);
+        }
+
+        return acc;
+      },
+      {
+        today: [],
+        prev: [],
+      }
+    );
+  },
 };
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx
index cacbabaa934..a7cfc2f3067 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx
@@ -66,6 +66,17 @@ export const Comment = React.memo<{
         });
       }}
     >
+      <Link
+        variant="muted"
+        css={css({
+          paddingBottom: 2,
+          display: 'block',
+        })}
+      >
+        {comment.references[0]
+          ? comment.references[0].metadata.path
+          : 'General'}
+      </Link>
       <Stack align="flex-start" justify="space-between" marginBottom={4}>
         <AvatarBlock comment={comment} />
         <Stack align="center">
@@ -117,11 +128,6 @@ export const Comment = React.memo<{
           borderColor: 'sideBar.border',
         })}
       >
-        {comment.references[0] && (
-          <Link style={{ color: '#3793E0' }}>
-            {comment.references[0].metadata.path}
-          </Link>
-        )}
         <Text block css={truncateText} marginBottom={2}>
           {comment.content}
         </Text>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx
index 3a4d427969e..27742126036 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx
@@ -24,6 +24,7 @@ export const Comments: React.FC = () => {
         currentComments,
         currentCommentId,
         multiCommentsSelector,
+        currentCommentsByDate,
       },
     },
     actions: { comments: commentsActions },
@@ -112,11 +113,30 @@ export const Comments: React.FC = () => {
               overflow: 'auto',
             }}
           >
-            {currentComments.map(comment =>
-              comment.id === OPTIMISTIC_COMMENT_ID ? null : (
-                <Comment key={comment.id} comment={comment} />
-              )
-            )}
+            {currentCommentsByDate.today.length ? (
+              <>
+                <Text size={3} weight="bold" block margin={2}>
+                  Today
+                </Text>
+                {currentCommentsByDate.today.map(comment =>
+                  comment.id === OPTIMISTIC_COMMENT_ID ? null : (
+                    <Comment key={comment.id} comment={comment} />
+                  )
+                )}
+              </>
+            ) : null}
+            {currentCommentsByDate.prev.length ? (
+              <>
+                <Text size={3} weight="bold" block margin={2} marginTop={4}>
+                  Earlier
+                </Text>
+                {currentCommentsByDate.prev.map(comment =>
+                  comment.id === OPTIMISTIC_COMMENT_ID ? null : (
+                    <Comment key={comment.id} comment={comment} />
+                  )
+                )}
+              </>
+            ) : null}
           </List>
         ) : null}
       </div>