From 9efe6d85aaddaafe2aa37765f09db7bd273472ff Mon Sep 17 00:00:00 2001
From: Junyoung Choi <fluke8259@gmail.com>
Date: Wed, 2 Mar 2022 15:45:20 +0900
Subject: [PATCH] Show placeholder when initial comment of thread is deleted

---
 src/cloud/components/Comments/CommentList.tsx  | 18 ++++++++++++++++--
 .../components/Comments/CommentManager.tsx     |  2 ++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/cloud/components/Comments/CommentList.tsx b/src/cloud/components/Comments/CommentList.tsx
index 261ae27d5..a5624aa7d 100644
--- a/src/cloud/components/Comments/CommentList.tsx
+++ b/src/cloud/components/Comments/CommentList.tsx
@@ -19,6 +19,7 @@ import CommentReactions from './CommentReactions'
 import EmojiPickHandler from './EmojiPickHandler'
 
 interface CommentThreadProps {
+  initialComment?: Comment
   comments: Comment[]
   className: string
   updateComment: (comment: Comment, message: string) => Promise<any>
@@ -30,6 +31,7 @@ interface CommentThreadProps {
 }
 
 function CommentList({
+  initialComment,
   comments,
   className,
   updateComment,
@@ -44,7 +46,12 @@ function CommentList({
   }, [comments])
 
   return (
-    <div className={className}>
+    <CommentListContainer className={className}>
+      {initialComment == null && (
+        <div className={'deleted_initial_comment'}>
+          This comment has been deleted.
+        </div>
+      )}
       {sorted.map((comment) => (
         <div key={comment.id}>
           <CommentItem
@@ -59,10 +66,17 @@ function CommentList({
           />
         </div>
       ))}
-    </div>
+    </CommentListContainer>
   )
 }
 
+const CommentListContainer = styled.div`
+  .deleted_initial_comment {
+    margin: ${({ theme }) => theme.sizes.spaces.xsm}px 0;
+    color: ${({ theme }) => theme.colors.text.subtle};
+  }
+`
+
 interface CommentItemProps {
   comment: Comment
   updateComment: (comment: Comment, message: string) => Promise<any>
diff --git a/src/cloud/components/Comments/CommentManager.tsx b/src/cloud/components/Comments/CommentManager.tsx
index 3badf9f7d..fb94a2939 100644
--- a/src/cloud/components/Comments/CommentManager.tsx
+++ b/src/cloud/components/Comments/CommentManager.tsx
@@ -162,7 +162,9 @@ function CommentManager({
               </Button>
 
               <div className='thread__context'>{state.thread.context}</div>
+
               <CommentList
+                initialComment={state.thread.initialComment}
                 comments={state.comments}
                 className='comment__list'
                 updateComment={updateComment}