diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationsContainer.css b/client/src/core/client/stream/tabs/Notifications/NotificationsContainer.css index ccfd84d7c8..ae468e8c59 100644 --- 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 index b50dc9c76d..bafb554fd6 100644 --- 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 = ({
Notifications
-
- {settings.dsa.methodOfRedress.method === - GQLDSA_METHOD_OF_REDRESS.NONE && ( - - All moderation decisions are final and cannot be appealed - - )} - {settings.dsa.methodOfRedress.method === - GQLDSA_METHOD_OF_REDRESS.EMAIL && ( - - {`To appeal a decision that appears here please contact ${settings.dsa.methodOfRedress.email}`} - - )} - {settings.dsa.methodOfRedress.method === - GQLDSA_METHOD_OF_REDRESS.URL && ( - - {`To appeal a decision that appears here please visit ${settings.dsa.methodOfRedress.url}`} - - )} -
); @@ -90,13 +59,6 @@ const enhanced = withFragmentContainer({ 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 new file mode 100644 index 0000000000..4c6cccf543 --- /dev/null +++ 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 index 32c9c714c7..af9b59f6ee 100644 --- 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) => { return null; } + if (props.query.notifications.edges.length === 0) { + return ( +
+ + You do not currently have any notifications + +
+ ); + } + return ( -
- {props.query.notifications.edges.map(({ node }) => { - return ( - - ); - })} - {isRefetching && } - {!isRefetching && !disableLoadMore && props.relay.hasMore() && ( - - - - )} -
+ {`To appeal a decision that appears here please contact ${props.query.settings.dsa.methodOfRedress.email}`} + + )} + {props.query.settings.dsa.methodOfRedress.method === + GQLDSA_METHOD_OF_REDRESS.URL && ( + + {props.query.settings.dsa.methodOfRedress.url} + + ), + }} + > + {`To appeal a decision that appears here please visit ${props.query.settings.dsa.methodOfRedress.url}`} + + )} + +
+ {props.query.notifications.edges.map(({ node }) => { + return ( + + ); + })} + {isRefetching && } + {!isRefetching && !disableLoadMore && props.relay.hasMore() && ( + + + + )} +
+ ); }; @@ -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 index 5e9cfb6f03..f3c61ae0b1 100644 --- 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 { $email } notifications-methodOfRedress-url = - To appeal a decision that appears here please visit { $url } \ No newline at end of file + To appeal a decision that appears here please visit { $url } + +notifications-youDoNotCurrentlyHaveAny = You do not currently have any notifications \ No newline at end of file