Skip to content

Commit b6bdc40

Browse files
nick-funknick-funk
committed
show placeholder text when user has no notifications
1 parent 4092c15 commit b6bdc40

File tree

5 files changed

+109
-82
lines changed

5 files changed

+109
-82
lines changed

‎client/src/core/client/stream/tabs/Notifications/NotificationsContainer.css

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,3 @@
1111

1212
margin-bottom: var(--spacing-2);
1313
}
14-
15-
.methodOfRedress {
16-
padding-left: var(--spacing-4);
17-
padding-right: var(--spacing-4);
18-
padding-top: var(--spacing-2);
19-
padding-bottom: var(--spacing-2);
20-
21-
background-color: var(--palette-primary-100);
22-
23-
font-family: var(--font-family-primary);
24-
color: var(--palette-text-200);
25-
font-weight: var(--font-weight-primary-regular);
26-
font-size: var(--font-size-3);
27-
28-
margin-bottom: var(--spacing-2);
29-
}

‎client/src/core/client/stream/tabs/Notifications/NotificationsContainer.tsx

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React, { FunctionComponent, useCallback, useEffect } from "react";
33
import { graphql } from "react-relay";
44

55
import { useLocal, withFragmentContainer } from "coral-framework/lib/relay";
6-
import { GQLDSA_METHOD_OF_REDRESS } from "coral-framework/schema";
76
import { UserBoxContainer } from "coral-stream/common/UserBox";
87

98
import { NotificationsContainer_settings } from "coral-stream/__generated__/NotificationsContainer_settings.graphql";
@@ -45,36 +44,6 @@ const NotificationsContainer: FunctionComponent<Props> = ({
4544
<div className={styles.title}>
4645
<Localized id="notifications-title">Notifications</Localized>
4746
</div>
48-
<div className={styles.methodOfRedress}>
49-
{settings.dsa.methodOfRedress.method ===
50-
GQLDSA_METHOD_OF_REDRESS.NONE && (
51-
<Localized id="notifications-methodOfRedress-none">
52-
All moderation decisions are final and cannot be appealed
53-
</Localized>
54-
)}
55-
{settings.dsa.methodOfRedress.method ===
56-
GQLDSA_METHOD_OF_REDRESS.EMAIL && (
57-
<Localized
58-
id="notifications-methodOfRedress-email"
59-
vars={{
60-
email: settings.dsa.methodOfRedress.email,
61-
}}
62-
>
63-
{`To appeal a decision that appears here please contact ${settings.dsa.methodOfRedress.email}`}
64-
</Localized>
65-
)}
66-
{settings.dsa.methodOfRedress.method ===
67-
GQLDSA_METHOD_OF_REDRESS.URL && (
68-
<Localized
69-
id="notifications-methodOfRedress-url"
70-
vars={{
71-
url: settings.dsa.methodOfRedress.url,
72-
}}
73-
>
74-
{`To appeal a decision that appears here please visit ${settings.dsa.methodOfRedress.url}`}
75-
</Localized>
76-
)}
77-
</div>
7847
<NotificationsListQuery viewerID={viewer.id} />
7948
</>
8049
);
@@ -90,13 +59,6 @@ const enhanced = withFragmentContainer<Props>({
9059
settings: graphql`
9160
fragment NotificationsContainer_settings on Settings {
9261
...UserBoxContainer_settings
93-
dsa {
94-
methodOfRedress {
95-
method
96-
email
97-
url
98-
}
99-
}
10062
}
10163
`,
10264
})(NotificationsContainer);

‎client/src/core/client/stream/tabs/Notifications/NotificationsPaginator.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.none {
2+
font-family: var(--font-family-primary);
3+
font-weight: var(--font-weight-primary-semi-bold);
4+
font-size: var(--font-size-3);
5+
6+
color: var(--palette-text-100);
7+
8+
margin: var(--spacing-2);
9+
}
10+
11+
.methodOfRedress {
12+
padding-left: var(--spacing-4);
13+
padding-right: var(--spacing-4);
14+
padding-top: var(--spacing-2);
15+
padding-bottom: var(--spacing-2);
16+
17+
background-color: var(--palette-primary-100);
18+
19+
font-family: var(--font-family-primary);
20+
color: var(--palette-text-200);
21+
font-weight: var(--font-weight-primary-regular);
22+
font-size: var(--font-size-3);
23+
24+
margin-bottom: var(--spacing-2);
25+
}

‎client/src/core/client/stream/tabs/Notifications/NotificationsPaginator.tsx

Lines changed: 81 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,14 @@ import CLASSES from "coral-stream/classes";
77
import Spinner from "coral-stream/common/Spinner";
88
import { Button } from "coral-ui/components/v3";
99

10+
import { GQLDSA_METHOD_OF_REDRESS } from "coral-common/client/src/core/client/framework/schema/__generated__/types";
1011
import { NotificationsPaginator_query } from "coral-stream/__generated__/NotificationsPaginator_query.graphql";
1112
import { NotificationsPaginatorPaginationQueryVariables } from "coral-stream/__generated__/NotificationsPaginatorPaginationQuery.graphql";
1213

1314
import NotificationContainer from "./NotificationContainer";
1415

16+
import styles from "./NotificationsPaginator.css";
17+
1518
interface Props {
1619
query: NotificationsPaginator_query;
1720
relay: RelayPaginationProp;
@@ -52,35 +55,77 @@ const NotificationsPaginator: FunctionComponent<Props> = (props) => {
5255
return null;
5356
}
5457

58+
if (props.query.notifications.edges.length === 0) {
59+
return (
60+
<div className={styles.none}>
61+
<Localized id="notifications-youDoNotCurrentlyHaveAny">
62+
You do not currently have any notifications
63+
</Localized>
64+
</div>
65+
);
66+
}
67+
5568
return (
56-
<div>
57-
{props.query.notifications.edges.map(({ node }) => {
58-
return (
59-
<NotificationContainer
60-
key={node.id}
61-
notification={node}
62-
viewer={props.query.viewer}
63-
/>
64-
);
65-
})}
66-
{isRefetching && <Spinner />}
67-
{!isRefetching && !disableLoadMore && props.relay.hasMore() && (
68-
<Localized id="notifications-loadMore">
69-
<Button
70-
key={props.query.notifications.edges.length}
71-
onClick={loadMore}
72-
variant="outlined"
73-
color="secondary"
74-
fullWidth
75-
disabled={disableLoadMore}
76-
aria-controls="notifications-loadMore"
77-
className={CLASSES.tabBarNotifications.loadMore}
69+
<>
70+
<div className={styles.methodOfRedress}>
71+
{props.query.settings.dsa.methodOfRedress.method ===
72+
GQLDSA_METHOD_OF_REDRESS.NONE && (
73+
<Localized id="notifications-methodOfRedress-none">
74+
All moderation decisions are final and cannot be appealed
75+
</Localized>
76+
)}
77+
{props.query.settings.dsa.methodOfRedress.method ===
78+
GQLDSA_METHOD_OF_REDRESS.EMAIL && (
79+
<Localized
80+
id="notifications-methodOfRedress-email"
81+
vars={{
82+
email: props.query.settings.dsa.methodOfRedress.email,
83+
}}
7884
>
79-
Load More
80-
</Button>
81-
</Localized>
82-
)}
83-
</div>
85+
{`To appeal a decision that appears here please contact ${props.query.settings.dsa.methodOfRedress.email}`}
86+
</Localized>
87+
)}
88+
{props.query.settings.dsa.methodOfRedress.method ===
89+
GQLDSA_METHOD_OF_REDRESS.URL && (
90+
<Localized
91+
id="notifications-methodOfRedress-url"
92+
vars={{
93+
url: props.query.settings.dsa.methodOfRedress.url,
94+
}}
95+
>
96+
{`To appeal a decision that appears here please visit ${props.query.settings.dsa.methodOfRedress.url}`}
97+
</Localized>
98+
)}
99+
</div>
100+
<div>
101+
{props.query.notifications.edges.map(({ node }) => {
102+
return (
103+
<NotificationContainer
104+
key={node.id}
105+
notification={node}
106+
viewer={props.query.viewer}
107+
/>
108+
);
109+
})}
110+
{isRefetching && <Spinner />}
111+
{!isRefetching && !disableLoadMore && props.relay.hasMore() && (
112+
<Localized id="notifications-loadMore">
113+
<Button
114+
key={props.query.notifications.edges.length}
115+
onClick={loadMore}
116+
variant="outlined"
117+
color="secondary"
118+
fullWidth
119+
disabled={disableLoadMore}
120+
aria-controls="notifications-loadMore"
121+
className={CLASSES.tabBarNotifications.loadMore}
122+
>
123+
Load More
124+
</Button>
125+
</Localized>
126+
)}
127+
</div>
128+
</>
84129
);
85130
};
86131

@@ -102,6 +147,15 @@ const enhanced = withPaginationContainer<
102147
viewer {
103148
...NotificationContainer_viewer
104149
}
150+
settings {
151+
dsa {
152+
methodOfRedress {
153+
method
154+
email
155+
url
156+
}
157+
}
158+
}
105159
notifications(ownerID: $viewerID, after: $cursor, first: $count)
106160
@connection(key: "NotificationsPaginator_notifications") {
107161
edges {

‎locales/en-US/stream.ftl

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1084,4 +1084,6 @@ notifications-methodOfRedress-none =
10841084
notifications-methodOfRedress-email =
10851085
To appeal a decision that appears here please contact { $email }
10861086
notifications-methodOfRedress-url =
1087-
To appeal a decision that appears here please visit { $url }
1087+
To appeal a decision that appears here please visit { $url }
1088+
1089+
notifications-youDoNotCurrentlyHaveAny = You do not currently have any notifications

0 commit comments

Comments
 (0)