views/notifications_view.tsx

notifications_view.tsx

interface NotificationsViewProps {
  unreadNotifications: Notification[];
  readNotifications: Notification[];
  onMarkAsRead: (notification: Notification) => void;
}

class NotificationsView extends React.Component<NotificationsViewProps, {}> {
  render(): JSX.Element {
    return (
      <div>
        <h1>Unread Notifications</h1>
        { this.props.unreadNotifications && (
          <div>
            { this.props.unreadNotifications.map((notification) => (
              <div key={ notification.id }>
                { notification.content }
                <span onClick={ () => this.props.onMarkAsRead(notification) }>
                  Mark as Read
                </span>
              </div>
            )) }
          </div>
        ) }
        <h1>Read Notifications</h1>
        { this.props.readNotifications && (
          <div>
            { this.props.readNotifications.map((notification) => (
              <div key={ notification.id }>
                { notification.content }
              </div>
            )) }
          </div>
        ) }
      </div>
    );
  }
}