fix: question comment issues

ONEARMY · Mar 3, 2025 · 088e689 · 088e689
1 parent 29168d5
commit 088e689
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 64 deletions.
diff --git a/packages/components/src/CommentDisplay/CommentDisplay.tsx b/packages/components/src/CommentDisplay/CommentDisplay.tsx
@@ -58,72 +58,69 @@ export const CommentDisplay = (props: IProps) => {
           />
         </Box>
 
-        <Flex
-          sx={{
-            flexDirection: 'column',
-            flex: 1,
-          }}
-        >
+        <Flex sx={{ flexDirection: 'column', flex: 1 }}>
           <Flex
             sx={{
-              flexWrap: 'wrap',
               justifyContent: 'space-between',
-              flexDirection: ['column', 'row'],
+              flexDirection: 'column',
               gap: 2,
             }}
           >
             <Flex
               sx={{
-                alignItems: 'baseline',
                 gap: 2,
                 flexDirection: 'row',
+                justifyContent: 'space-between',
+                flexWrap: 'wrap',
               }}
             >
-              <Username
-                user={{
-                  userName: comment.createdBy?.username || '',
-                  countryCode: comment.createdBy?.country,
-                  isVerified: comment.createdBy?.isVerified,
-                  // TODO: isSupporter
-                }}
-              />
-              <Text sx={{ fontSize: 1, color: 'darkGrey' }}>
-                {comment.modifiedAt &&
-                  compareDesc(comment.createdAt, comment.modifiedAt) > 0 &&
-                  'Edited '}
-                <DisplayDate date={comment.modifiedAt || comment.createdAt} />
-              </Text>
-            </Flex>
+              <Flex sx={{ alignItems: 'center', gap: 2 }}>
+                <Username
+                  user={{
+                    userName: comment.createdBy?.username || '',
+                    countryCode: comment.createdBy?.country,
+                    isVerified: comment.createdBy?.isVerified,
+                    // TODO: isSupporter
+                  }}
+                />
+                <Text sx={{ fontSize: 1, color: 'darkGrey' }}>
+                  {comment.modifiedAt &&
+                    compareDesc(comment.createdAt, comment.modifiedAt) > 0 &&
+                    'Edited '}
+                  <DisplayDate date={comment.modifiedAt || comment.createdAt} />
+                </Text>
+              </Flex>
 
-            {isEditable && (
-              <Flex
-                sx={{
-                  alignItems: 'flex-end',
-                  gap: 2,
-                }}
-              >
-                <Button
-                  type="button"
-                  data-cy={`${itemType}: edit button`}
-                  variant="subtle"
-                  small={true}
-                  icon="edit"
-                  onClick={() => setShowEditModal(true)}
-                >
-                  edit
-                </Button>
-                <Button
-                  type="button"
-                  data-cy={`${itemType}: delete button`}
-                  variant="subtle"
-                  small={true}
-                  icon="delete"
-                  onClick={() => setShowDeleteModal(true)}
+              {isEditable && (
+                <Flex
+                  sx={{
+                    alignItems: 'flex-end',
+                    gap: 2,
+                  }}
                 >
-                  delete
-                </Button>
-              </Flex>
-            )}
+                  <Button
+                    type="button"
+                    data-cy={`${itemType}: edit button`}
+                    variant="subtle"
+                    small={true}
+                    icon="edit"
+                    onClick={() => setShowEditModal(true)}
+                  >
+                    edit
+                  </Button>
+                  <Button
+                    type="button"
+                    data-cy={`${itemType}: delete button`}
+                    variant="subtle"
+                    small={true}
+                    icon="delete"
+                    onClick={() => setShowDeleteModal(true)}
+                  >
+                    delete
+                  </Button>
+                </Flex>
+              )}
+            </Flex>
             <CommentBody body={comment.comment} />
           </Flex>
         </Flex>

diff --git a/src/pages/common/CommentsSupabase/CommentItemSupabase.tsx b/src/pages/common/CommentsSupabase/CommentItemSupabase.tsx
@@ -38,12 +38,9 @@ export const CommentItemSupabase = observer((props: ICommentItemProps) => {
   const { activeUser } = userStore
 
   const isEditable = useMemo(() => {
-    if (!userStore.activeUser?._authID) {
-      return false
-    }
-
     return (
       activeUser?._authID === comment.createdBy?.firebaseAuthId ||
+      activeUser?._id === comment.createdBy?.username ||
       activeUser?.userRoles?.includes(UserRole.ADMIN) ||
       activeUser?.userRoles?.includes(UserRole.SUPER_ADMIN)
     )

diff --git a/src/pages/common/CommentsSupabase/CommentReplySupabase.tsx b/src/pages/common/CommentsSupabase/CommentReplySupabase.tsx
@@ -31,16 +31,13 @@ export const CommentReply = observer(
     const { activeUser } = userStore
 
     const isEditable = useMemo(() => {
-      if (!activeUser?._authID) {
-        return false
-      }
-
       return (
         activeUser?._authID === comment.createdBy?.firebaseAuthId ||
-        activeUser.userRoles?.includes(UserRole.ADMIN) ||
-        activeUser.userRoles?.includes(UserRole.SUPER_ADMIN)
+        activeUser?._id === comment.createdBy?.username ||
+        activeUser?.userRoles?.includes(UserRole.ADMIN) ||
+        activeUser?.userRoles?.includes(UserRole.SUPER_ADMIN)
       )
-    }, [activeUser?._authID, comment.createdBy?.firebaseAuthId])
+    }, [activeUser, comment])
 
     useEffect(() => {
       if (comment.highlighted) {

diff --git a/src/pages/common/CommentsSupabase/CreateCommentSupabase.tsx b/src/pages/common/CommentsSupabase/CreateCommentSupabase.tsx
@@ -46,7 +46,10 @@ export const CreateCommentSupabase = observer((props: Props) => {
       }}
     >
       <Flex sx={{ flexDirection: 'column' }}>
-        <Flex data-target="create-comment-container" sx={{ gap: 2 }}>
+        <Flex
+          data-target="create-comment-container"
+          sx={{ gap: 2, padding: isReply ? 2 : 0 }}
+        >
           <Box
             sx={{
               lineHeight: 0,