Skip to content
This repository has been archived by the owner on Mar 1, 2024. It is now read-only.

feat(NotificationTray): Style the unread notifications #378

Merged
merged 2 commits into from
Dec 3, 2018
Merged

feat(NotificationTray): Style the unread notifications #378

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
84613df
feat(NotificationTray): Style the unread notifications
mattsoftware Dec 2, 2018
96d9d18
fix(NotificationTray): Fix a copy/paste comment issue and type import
mattsoftware Dec 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat(NotificationTray): Style the unread notifications
  • Loading branch information
@mattsoftware
mattsoftware committed Dec 2, 2018
commit 84613df6cc3ada0814e585f0f5f32b95f9845ed1
98 changes: 61 additions & 37 deletions example/src/SiteWrapper.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,12 @@ type Props = {|
|};

type State = {|
unreadCount: number,
notificationsObjects: Array<{
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Notification.react exports its props, so could we potentially import this instead of redefining the type here? Not 100% sure if this is doable but maybe something like:

import type { Props as NotificationProps } from ...
Then you can type this as notificationsObjects: Array<NotificationProps>,

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its doable, I would need to

a) import the Notification file directly, or
b) export the type from index.js

(I already tried this but as nothing else had this pattern I thought I would type a similar object). Do you have a preference?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's export the type from index.js similar to lines 4-18 in that file (exporting event types).

unread: boolean,
avatarURL: string,
message: React.Node,
time: string,
}>,
|};

type subNavItem = {|
Expand Down Expand Up @@ -118,37 +123,6 @@ const navBarItems: Array<navItem> = [
},
];

const notificationsObjects = [
{
avatarURL: "demo/faces/male/41.jpg",
message: (
<React.Fragment>
<strong>Nathan</strong> pushed new commit: Fix page load performance
issue.
</React.Fragment>
),
time: "10 minutes ago",
},
{
avatarURL: "demo/faces/female/1.jpg",
message: (
<React.Fragment>
<strong>Alice</strong> started new task: Tabler UI design.
</React.Fragment>
),
time: "1 hour ago",
},
{
avatarURL: "demo/faces/female/18.jpg",
message: (
<React.Fragment>
<strong>Rose</strong> deployed new version of NodeJS REST Api // V3
</React.Fragment>
),
time: "2 hours ago",
},
];

const accountDropdownProps = {
avatarURL: "./demo/faces/female/25.jpg",
name: "Jane Pearson",
Expand All @@ -166,11 +140,47 @@ const accountDropdownProps = {

class SiteWrapper extends React.Component<Props, State> {
state = {
unreadCount: 2,
notificationsObjects: [
{
unread: true,
avatarURL: "demo/faces/male/41.jpg",
message: (
<React.Fragment>
<strong>Nathan</strong> pushed new commit: Fix page load performance
issue.
</React.Fragment>
),
time: "10 minutes ago",
},
{
unread: true,
avatarURL: "demo/faces/female/1.jpg",
message: (
<React.Fragment>
<strong>Alice</strong> started new task: Tabler UI design.
</React.Fragment>
),
time: "1 hour ago",
},
{
unread: false,
avatarURL: "demo/faces/female/18.jpg",
message: (
<React.Fragment>
<strong>Rose</strong> deployed new version of NodeJS REST Api // V3
</React.Fragment>
),
time: "2 hours ago",
},
],
};

render(): React.Node {
const unreadCount = this.state.unreadCount || 0;
const notificationsObjects = this.state.notificationsObjects || [];
const unreadCount = this.state.notificationsObjects.reduce(
(a, v) => a || v.unread,
false
);
return (
<Site.Wrapper
headerProps={{
Expand All @@ -194,10 +204,24 @@ class SiteWrapper extends React.Component<Props, State> {
notificationsTray: {
notificationsObjects,
markAllAsRead: () =>
this.setState({ unreadCount: 0 }, () =>
setTimeout(() => this.setState({ unreadCount: 4 }), 5000)
this.setState(
() => ({
notificationsObjects: this.state.notificationsObjects.map(
v => ({ ...v, unread: false })
),
}),
() =>
setTimeout(
() =>
this.setState({
notificationsObjects: this.state.notificationsObjects.map(
v => ({ ...v, unread: true })
),
}),
5000
)
),
unread: unreadCount > 0,
unread: unreadCount,
},
accountDropdown: accountDropdownProps,
}}
Expand Down
4 changes: 4 additions & 0 deletions src/components/Notification/Notification.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ export type Props = {|
* The time displayed within the Notification
*/
+time?: string,
/**
* The time displayed within the Notification
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like an accidental typo, change to something about read/unread.

*/
+unread?: boolean,
|};

/**
Expand Down
6 changes: 5 additions & 1 deletion src/components/Notification/NotificationTray.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,12 @@ function NotificationTray(props: Props): React.Node {
))) ||
(notificationsObjects &&
notificationsObjects.map((n, i) => (
<Dropdown.Item className="d-flex" key={i}>
<Dropdown.Item
className={`d-flex ${n.unread ? "bg-light" : ""}`}
key={i}
>
<Notification
unread={n.unread}
avatarURL={n.avatarURL}
message={n.message}
time={n.time}
Expand Down