Merge pull request #4408 from coralproject/fix/dsa-no-notifications-p…

…laceholder DSA no notifications placeholder text
coralproject · Nov 20, 2023 · 4ce4d1f · 4ce4d1f
2 parents 586bbd6 + 4f1e9f6
commit 4ce4d1f
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 83 deletions.
diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationsContainer.css b/client/src/core/client/stream/tabs/Notifications/NotificationsContainer.css
@@ -11,19 +11,3 @@
 
   margin-bottom: var(--spacing-2);
 }
-
-.methodOfRedress {
-  padding-left: var(--spacing-4);
-  padding-right: var(--spacing-4);
-  padding-top: var(--spacing-2);
-  padding-bottom: var(--spacing-2);
-
-  background-color: var(--palette-primary-100);
-
-  font-family: var(--font-family-primary);
-  color: var(--palette-text-200);
-  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--font-size-3);
-
-  margin-bottom: var(--spacing-2);
-}
diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationsContainer.tsx b/client/src/core/client/stream/tabs/Notifications/NotificationsContainer.tsx
@@ -3,7 +3,6 @@ import React, { FunctionComponent, useCallback, useEffect } from "react";
 import { graphql } from "react-relay";
 
 import { useLocal, withFragmentContainer } from "coral-framework/lib/relay";
-import { GQLDSA_METHOD_OF_REDRESS } from "coral-framework/schema";
 import { UserBoxContainer } from "coral-stream/common/UserBox";
 
 import { NotificationsContainer_settings } from "coral-stream/__generated__/NotificationsContainer_settings.graphql";
@@ -45,36 +44,6 @@ const NotificationsContainer: FunctionComponent<Props> = ({
       <div className={styles.title}>
         <Localized id="notifications-title">Notifications</Localized>
       </div>
-      <div className={styles.methodOfRedress}>
-        {settings.dsa.methodOfRedress.method ===
-          GQLDSA_METHOD_OF_REDRESS.NONE && (
-          <Localized id="notifications-methodOfRedress-none">
-            All moderation decisions are final and cannot be appealed
-          </Localized>
-        )}
-        {settings.dsa.methodOfRedress.method ===
-          GQLDSA_METHOD_OF_REDRESS.EMAIL && (
-          <Localized
-            id="notifications-methodOfRedress-email"
-            vars={{
-              email: settings.dsa.methodOfRedress.email,
-            }}
-          >
-            {`To appeal a decision that appears here please contact ${settings.dsa.methodOfRedress.email}`}
-          </Localized>
-        )}
-        {settings.dsa.methodOfRedress.method ===
-          GQLDSA_METHOD_OF_REDRESS.URL && (
-          <Localized
-            id="notifications-methodOfRedress-url"
-            vars={{
-              url: settings.dsa.methodOfRedress.url,
-            }}
-          >
-            {`To appeal a decision that appears here please visit ${settings.dsa.methodOfRedress.url}`}
-          </Localized>
-        )}
-      </div>
       <NotificationsListQuery viewerID={viewer.id} />
     </>
   );
@@ -90,13 +59,6 @@ const enhanced = withFragmentContainer<Props>({
   settings: graphql`
     fragment NotificationsContainer_settings on Settings {
       ...UserBoxContainer_settings
-      dsa {
-        methodOfRedress {
-          method
-          email
-          url
-        }
-      }
     }
   `,
 })(NotificationsContainer);

diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationsPaginator.css b/client/src/core/client/stream/tabs/Notifications/NotificationsPaginator.css
@@ -0,0 +1,25 @@
+.none {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-semi-bold);
+  font-size: var(--font-size-3);
+
+  color: var(--palette-text-100);
+
+  margin: var(--spacing-2);
+}
+
+.methodOfRedress {
+  padding-left: var(--spacing-4);
+  padding-right: var(--spacing-4);
+  padding-top: var(--spacing-2);
+  padding-bottom: var(--spacing-2);
+
+  background-color: var(--palette-primary-100);
+
+  font-family: var(--font-family-primary);
+  color: var(--palette-text-200);
+  font-weight: var(--font-weight-primary-regular);
+  font-size: var(--font-size-3);
+
+  margin-bottom: var(--spacing-2);
+}
diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationsPaginator.tsx b/client/src/core/client/stream/tabs/Notifications/NotificationsPaginator.tsx
@@ -7,11 +7,14 @@ import CLASSES from "coral-stream/classes";
 import Spinner from "coral-stream/common/Spinner";
 import { Button } from "coral-ui/components/v3";
 
+import { GQLDSA_METHOD_OF_REDRESS } from "coral-common/client/src/core/client/framework/schema/__generated__/types";
 import { NotificationsPaginator_query } from "coral-stream/__generated__/NotificationsPaginator_query.graphql";
 import { NotificationsPaginatorPaginationQueryVariables } from "coral-stream/__generated__/NotificationsPaginatorPaginationQuery.graphql";
 
 import NotificationContainer from "./NotificationContainer";
 
+import styles from "./NotificationsPaginator.css";
+
 interface Props {
   query: NotificationsPaginator_query;
   relay: RelayPaginationProp;
@@ -52,35 +55,99 @@ const NotificationsPaginator: FunctionComponent<Props> = (props) => {
     return null;
   }
 
+  if (props.query.notifications.edges.length === 0) {
+    return (
+      <div className={styles.none}>
+        <Localized id="notifications-youDoNotCurrentlyHaveAny">
+          You do not currently have any notifications
+        </Localized>
+      </div>
+    );
+  }
+
   return (
-    <div>
-      {props.query.notifications.edges.map(({ node }) => {
-        return (
-          <NotificationContainer
-            key={node.id}
-            notification={node}
-            viewer={props.query.viewer}
-          />
-        );
-      })}
-      {isRefetching && <Spinner />}
-      {!isRefetching && !disableLoadMore && props.relay.hasMore() && (
-        <Localized id="notifications-loadMore">
-          <Button
-            key={props.query.notifications.edges.length}
-            onClick={loadMore}
-            variant="outlined"
-            color="secondary"
-            fullWidth
-            disabled={disableLoadMore}
-            aria-controls="notifications-loadMore"
-            className={CLASSES.tabBarNotifications.loadMore}
+    <>
+      <div className={styles.methodOfRedress}>
+        {props.query.settings.dsa.methodOfRedress.method ===
+          GQLDSA_METHOD_OF_REDRESS.NONE && (
+          <Localized id="notifications-methodOfRedress-none">
+            All moderation decisions are final and cannot be appealed
+          </Localized>
+        )}
+        {props.query.settings.dsa.methodOfRedress.method ===
+          GQLDSA_METHOD_OF_REDRESS.EMAIL && (
+          <Localized
+            id="notifications-methodOfRedress-email"
+            vars={{
+              email: props.query.settings.dsa.methodOfRedress.email,
+            }}
+            elems={{
+              a: (
+                <a
+                  href={`mailto: ${props.query.settings.dsa.methodOfRedress.email}`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {props.query.settings.dsa.methodOfRedress.email}
+                </a>
+              ),
+            }}
           >
-            Load More
-          </Button>
-        </Localized>
-      )}
-    </div>
+            <span>{`To appeal a decision that appears here please contact ${props.query.settings.dsa.methodOfRedress.email}`}</span>
+          </Localized>
+        )}
+        {props.query.settings.dsa.methodOfRedress.method ===
+          GQLDSA_METHOD_OF_REDRESS.URL && (
+          <Localized
+            id="notifications-methodOfRedress-url"
+            vars={{
+              url: props.query.settings.dsa.methodOfRedress.url,
+            }}
+            elems={{
+              a: (
+                <a
+                  href={`${props.query.settings.dsa.methodOfRedress.url}`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {props.query.settings.dsa.methodOfRedress.url}
+                </a>
+              ),
+            }}
+          >
+            <span>{`To appeal a decision that appears here please visit ${props.query.settings.dsa.methodOfRedress.url}`}</span>
+          </Localized>
+        )}
+      </div>
+      <div>
+        {props.query.notifications.edges.map(({ node }) => {
+          return (
+            <NotificationContainer
+              key={node.id}
+              notification={node}
+              viewer={props.query.viewer}
+            />
+          );
+        })}
+        {isRefetching && <Spinner />}
+        {!isRefetching && !disableLoadMore && props.relay.hasMore() && (
+          <Localized id="notifications-loadMore">
+            <Button
+              key={props.query.notifications.edges.length}
+              onClick={loadMore}
+              variant="outlined"
+              color="secondary"
+              fullWidth
+              disabled={disableLoadMore}
+              aria-controls="notifications-loadMore"
+              className={CLASSES.tabBarNotifications.loadMore}
+            >
+              Load More
+            </Button>
+          </Localized>
+        )}
+      </div>
+    </>
   );
 };
 
@@ -102,6 +169,15 @@ const enhanced = withPaginationContainer<
         viewer {
           ...NotificationContainer_viewer
         }
+        settings {
+          dsa {
+            methodOfRedress {
+              method
+              email
+              url
+            }
+          }
+        }
         notifications(ownerID: $viewerID, after: $cursor, first: $count)
           @connection(key: "NotificationsPaginator_notifications") {
           edges {

diff --git a/locales/en-US/stream.ftl b/locales/en-US/stream.ftl
@@ -1080,6 +1080,8 @@ notifications-reportDecisionMade-illegal =
 notifications-methodOfRedress-none =
   All moderation decisions are final and cannot be appealed
 notifications-methodOfRedress-email =
-  To appeal a decision that appears here please contact { $email }
+  To appeal a decision that appears here please contact <a>{ $email }</a>
 notifications-methodOfRedress-url =
-  To appeal a decision that appears here please visit { $url }
+  To appeal a decision that appears here please visit <a>{ $url }</a>
+
+notifications-youDoNotCurrentlyHaveAny = You do not currently have any notifications