From f35cea5ba62090331d73a8d56f62152231dce997 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Wed, 7 Mar 2018 18:38:53 -0500 Subject: [PATCH] loading states for notifications --- src/Metamaps/GlobalUI/Notifications.js | 7 +++++++ src/Metamaps/GlobalUI/ReactApp.js | 6 +----- src/components/NotificationBox.js | 5 +++-- src/components/UpperRightUI.js | 3 ++- src/constants.js | 2 ++ src/routes/App.js | 3 ++- src/routes/Maps/index.js | 13 ++++++++++++- src/routes/Notifications/NotificationPage.js | 7 ++----- src/routes/Notifications/Notifications.js | 12 ++++++++++-- src/routes/helpers/LoadingPage.js | 17 +++++++++++++++++ 10 files changed, 58 insertions(+), 17 deletions(-) create mode 100644 src/routes/helpers/LoadingPage.js diff --git a/src/Metamaps/GlobalUI/Notifications.js b/src/Metamaps/GlobalUI/Notifications.js index b907d00c..2ed7238d 100644 --- a/src/Metamaps/GlobalUI/Notifications.js +++ b/src/Metamaps/GlobalUI/Notifications.js @@ -4,16 +4,23 @@ import GlobalUI from './index' const Notifications = { notifications: [], + notificationsLoading: false, unreadNotificationsCount: 0, init: serverData => { Notifications.unreadNotificationsCount = serverData.unreadNotificationsCount }, fetchNotifications: render => { + Notifications.notificationsLoading = true + render() $.ajax({ url: '/notifications.json', success: function(data) { Notifications.notifications = data + Notifications.notificationsLoading = false render() + }, + error: function() { + GlobalUI.notifyUser('There was an error fetching notifications') } }) }, diff --git a/src/Metamaps/GlobalUI/ReactApp.js b/src/Metamaps/GlobalUI/ReactApp.js index b3dc3697..cb5dc947 100644 --- a/src/Metamaps/GlobalUI/ReactApp.js +++ b/src/Metamaps/GlobalUI/ReactApp.js @@ -53,7 +53,6 @@ const ReactApp = { switch (pathname.split('/')[1]) { case '': if (Active.Mapper && Active.Mapper.id) { - $('#yield').hide() ExploreMaps.updateFromPath(pathname) self.mapId = null Active.Map = null @@ -61,7 +60,6 @@ const ReactApp = { } break case 'explore': - $('#yield').hide() ExploreMaps.updateFromPath(pathname) self.mapId = null self.topicId = null @@ -69,21 +67,18 @@ const ReactApp = { Active.Topic = null break case 'topics': - $('#yield').hide() Active.Map = null self.mapId = null self.topicId = pathname.split('/')[2] break case 'maps': if (!pathname.includes('request_access')) { - $('#yield').hide() Active.Topic = null self.topicId = null self.mapId = pathname.split('/')[2] } break default: - $('#yield').show() break } self.render() @@ -108,6 +103,7 @@ const ReactApp = { openInviteLightbox: () => self.openLightbox('invite'), serverData: self.serverData, notifications: Notifications.notifications, + notificationsLoading: Notifications.notificationsLoading, fetchNotifications: apply(Notifications.fetchNotifications, ReactApp.render), fetchNotification: apply(Notifications.fetchNotification, ReactApp.render), markAsRead: apply(Notifications.markAsRead, ReactApp.render), diff --git a/src/components/NotificationBox.js b/src/components/NotificationBox.js index b2315cee..fdb836f6 100644 --- a/src/components/NotificationBox.js +++ b/src/components/NotificationBox.js @@ -9,6 +9,7 @@ import Loading from './Loading' class NotificationBox extends Component { static propTypes = { notifications: PropTypes.array, + loading: PropTypes.bool.isRequired, fetchNotifications: PropTypes.func.isRequired, toggleNotificationsBox: PropTypes.func.isRequired, markAsRead: PropTypes.func.isRequired, @@ -60,11 +61,11 @@ class NotificationBox extends Component { } render = () => { - const { notifications } = this.props + const { loading } = this.props return
    - {notifications ? this.showNotifications() : this.showLoading()} + {loading ? this.showLoading() : this.showNotifications()}
} diff --git a/src/components/UpperRightUI.js b/src/components/UpperRightUI.js index 08276c82..b2b68c5e 100644 --- a/src/components/UpperRightUI.js +++ b/src/components/UpperRightUI.js @@ -50,7 +50,7 @@ class UpperRightUI extends Component { render () { const { currentUser, signInPage, unreadNotificationsCount, notifications, fetchNotifications, openInviteLightbox, - markAsRead, markAsUnread } = this.props + markAsRead, markAsUnread, notificationsLoading } = this.props const { accountBoxOpen, notificationsBoxOpen } = this.state return
{currentUser && @@ -63,6 +63,7 @@ class UpperRightUI extends Component { unreadNotificationsCount={unreadNotificationsCount} toggleNotificationsBox={this.toggleNotificationsBox}/> {notificationsBoxOpen && + +
+
+ ) + } return (
diff --git a/src/routes/Notifications/NotificationPage.js b/src/routes/Notifications/NotificationPage.js index d35c6417..18debfe3 100644 --- a/src/routes/Notifications/NotificationPage.js +++ b/src/routes/Notifications/NotificationPage.js @@ -3,6 +3,7 @@ import { Link } from 'react-router' import { MAP_ACCESS_REQUEST } from '../../constants' import NotificationsHeader from './NotificationsHeader' +import LoadingPage from '../helpers/LoadingPage' import Loading from '../../components/Loading' import NotificationBody from '../../components/NotificationBody' @@ -25,11 +26,7 @@ class NotificationPage extends Component { if (!notification) { return (
-
-
- -
-
+
) diff --git a/src/routes/Notifications/Notifications.js b/src/routes/Notifications/Notifications.js index 4a8f71e0..a1f96cfd 100644 --- a/src/routes/Notifications/Notifications.js +++ b/src/routes/Notifications/Notifications.js @@ -1,6 +1,7 @@ import React, { Component } from 'react' import { Link } from 'react-router' +import LoadingPage from '../helpers/LoadingPage' import Notification from '../../components/Notification' import { @@ -10,7 +11,6 @@ import { } from '../../constants' import NotificationsHeader from './NotificationsHeader' -// these come from mailboxer.rb in the api repo const BLACKLIST = [MAP_ACCESS_REQUEST, MAP_ACCESS_APPROVED, MAP_INVITE_TO_EDIT] /* TODO!! @@ -25,8 +25,16 @@ class Notifications extends Component { } render = () => { - const { markAsRead, markAsUnread } = this.props + const { notificationsLoading, markAsRead, markAsUnread } = this.props const notifications = (this.props.notifications || []).filter(n => !(BLACKLIST.indexOf(n.type) > -1 && (!n.data.object || !n.data.map))) + if (notificationsLoading) { + return ( +
+ + +
+ ) + } return (
diff --git a/src/routes/helpers/LoadingPage.js b/src/routes/helpers/LoadingPage.js new file mode 100644 index 00000000..36c59804 --- /dev/null +++ b/src/routes/helpers/LoadingPage.js @@ -0,0 +1,17 @@ +import React, { Component } from 'react' + +import Loading from '../../components/Loading' + +class LoadingPage extends Component { + render = () => { + return ( +
+
+ +
+
+ ) + } +} + +export default LoadingPage \ No newline at end of file