provide default visibility state for comments tied to notifications

not just for when they're approved/rejected
coralproject · Nov 10, 2023 · 5862ccc · 5862ccc
1 parent 7621a52
commit 5862ccc
Showing 1 changed file with 52 additions and 26 deletions.
diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationCommentContainer.tsx b/client/src/core/client/stream/tabs/Notifications/NotificationCommentContainer.tsx
@@ -29,35 +29,61 @@ const NotificationCommentContainer: FunctionComponent<Props> = ({
     setIsOpen(!isOpen);
   }, [setIsOpen, isOpen]);
 
+  const hasBeenModerated =
+    status === GQLCOMMENT_STATUS.APPROVED ||
+    status === GQLCOMMENT_STATUS.REJECTED;
+
   return (
     <>
-      {status === GQLCOMMENT_STATUS.APPROVED && isOpen && (
-        <button className={styles.toggle} onClick={onToggleOpenClosed}>
-          <Localized id="notification-comment-toggle-approved-open">
-            Approved comment
-          </Localized>
-        </button>
-      )}
-      {status === GQLCOMMENT_STATUS.APPROVED && !isOpen && (
-        <button className={styles.toggle} onClick={onToggleOpenClosed}>
-          <Localized id="notification-comment-toggle-approved-closed">
-            + Approved comment
-          </Localized>
-        </button>
-      )}
-      {status === GQLCOMMENT_STATUS.REJECTED && isOpen && (
-        <button className={styles.toggle} onClick={onToggleOpenClosed}>
-          <Localized id="notification-comment-toggle-rejected-open">
-            Rejected comment
-          </Localized>
-        </button>
+      {hasBeenModerated && (
+        <>
+          {status === GQLCOMMENT_STATUS.APPROVED && isOpen && (
+            <button className={styles.toggle} onClick={onToggleOpenClosed}>
+              <Localized id="notification-comment-toggle-approved-open">
+                Approved comment
+              </Localized>
+            </button>
+          )}
+          {status === GQLCOMMENT_STATUS.APPROVED && !isOpen && (
+            <button className={styles.toggle} onClick={onToggleOpenClosed}>
+              <Localized id="notification-comment-toggle-approved-closed">
+                + Approved comment
+              </Localized>
+            </button>
+          )}
+          {status === GQLCOMMENT_STATUS.REJECTED && isOpen && (
+            <button className={styles.toggle} onClick={onToggleOpenClosed}>
+              <Localized id="notification-comment-toggle-rejected-open">
+                Rejected comment
+              </Localized>
+            </button>
+          )}
+          {status === GQLCOMMENT_STATUS.REJECTED && !isOpen && (
+            <button className={styles.toggle} onClick={onToggleOpenClosed}>
+              <Localized id="notification-comment-toggle-rejected-closed">
+                + Rejected comment
+              </Localized>
+            </button>
+          )}
+        </>
       )}
-      {status === GQLCOMMENT_STATUS.REJECTED && !isOpen && (
-        <button className={styles.toggle} onClick={onToggleOpenClosed}>
-          <Localized id="notification-comment-toggle-rejected-closed">
-            + Rejected comment
-          </Localized>
-        </button>
+      {!hasBeenModerated && (
+        <>
+          {isOpen && (
+            <button className={styles.toggle} onClick={onToggleOpenClosed}>
+              <Localized id="notification-comment-toggle-default-open">
+                Comment
+              </Localized>
+            </button>
+          )}
+          {!isOpen && (
+            <button className={styles.toggle} onClick={onToggleOpenClosed}>
+              <Localized id="notification-comment-toggle-default-closed">
+                + Comment
+              </Localized>
+            </button>
+          )}
+        </>
       )}
 
       {isOpen && (