Bug fixes with syncing

src/pages/Home/Scene.js

@@ -6,6 +6,7 @@ import Curve from '../../components/Curve';
 import Icon from '../../components/Icon';
 import Logo from '../../components/Logo';
 import screenshot from '../../images/screenshot.png';
+import rowExample from '../../images/row.png';
 import '../../styles/gradient.css';
 
 const hash = process.env.GIT_HASH ? `#${process.env.GIT_HASH}` : '';
@@ -330,6 +331,18 @@ function createImagePlaceholder (highlight) {
   );
 }
 
+const NotificationsRowExample = styled('div')({
+  position: 'relative',
+  height: 59,
+  width: 745,
+  borderRadius: 8,
+  margin: '58px auto 24px',
+  background: `url(${rowExample}) center center no-repeat`,
+  backgroundSize: 'cover',
+  backgroundColor: '#fff',
+  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.51)',
+});
+
 const ImageContainer = styled('div')({
   position: 'absolute',
   height: 390,
@@ -339,7 +352,7 @@ const ImageContainer = styled('div')({
   background: `url(${screenshot}) center center no-repeat`,
   backgroundSize: 'cover',
   backgroundColor: '#fff',
-  boxShadow: '0 2px 8px rgba(179, 179, 179, 0.25)',
+  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.51)',
   marginLeft: 100,
   borderRadius: 8,
   display: 'block',
@@ -708,6 +721,10 @@ export default function Scene ({loggedIn, onLogout, ...props}) {
           </Item>
           <Item style={{flex: '0 0 2.5%', padding: 0}} />
         </WidthContainer>
+        <NotificationsRowExample />
+        <div className="button-container" style={{marginTop: 100 - 24}}>
+          <RouterLink to={routes.LOGIN}>sign in and try it out</RouterLink>
+        </div>
       </Section>
       <Section alt={true} style={{
         marginTop: 0,

src/pages/Notifications/Scene.js

@@ -848,7 +848,16 @@ export default function Scene ({
                   fontSize: 16,
                   fontWeight: 400,
                 }}>
-                  No {activeStatus.toLowerCase()} notifications</p>
+                  No
+                  {activeStatus === Status.QUEUED ? (
+                    ' unread '
+                  ) : activeStatus === Status.STAGED ? (
+                    ' read '
+                  ) : (
+                    ' resolved '
+                    )}
+                  notifications
+                </p>
                 <p style={{
                   fontSize: 12,
                   fontWeight: 400,

src/pages/Notifications/index.js

@@ -123,6 +123,7 @@ class NotificationsPage extends React.Component {
 
   state = {
     currentTime: moment(),
+    error: null,
     notificationSent: false,
     isFirstTimeUser: false,
     isSearching: false,
@@ -142,7 +143,8 @@ class NotificationsPage extends React.Component {
 
     this.props.notificationsApi.fetchNotifications();
     this.syncer = setInterval(() => {
-      this.props.notificationsApi.fetchNotificationsSync();
+      this.props.notificationsApi.fetchNotificationsSync()
+        .catch(error => this.setState({error}));
       this.setState({currentTime: moment()});
     }, 8 * 1000);
   }
@@ -327,7 +329,6 @@ class NotificationsPage extends React.Component {
       // we shouldn't do it like this. instead, we should have an additional state called
       // "new changes" or something that the notifications api knows about.
       // this will be whatever we get in the syncing/fetching response
-      console.log('send', this.props.notificationsApi.newChanges)
       this.sendWebNotification(this.props.notificationsApi.newChanges);
     }
 
@@ -412,7 +413,7 @@ class NotificationsPage extends React.Component {
         onRefreshNotifications={this.props.storageApi.refreshNotifications}
         isSearching={this.state.isSearching}
         isFetchingNotifications={isFetchingNotifications}
-        fetchingNotificationsError={fetchingNotificationsError}
+        fetchingNotificationsError={fetchingNotificationsError || this.state.error}
         onSetActiveFilter={this.onSetActiveFilter}
       />
     );

src/providers/Notifications.js

@@ -119,22 +119,6 @@ class NotificationsProvider extends React.Component {
           this.last_modified = headers['last-modified'];
         }
 
-        return {
-          headers,
-          json
-        };
-      });
-  }
-
-  requestFetchNotifications = (page = 1, optimizePolling = true) => {
-    if (this.state.syncing) {
-      // Don't try to send off another request if we're already trying to get one.
-      return Promise.reject();
-    }
-
-    this.setState({syncing: true});
-    return this.requestPage(page, optimizePolling)
-      .then(({headers, json}) => {
         // This means that we got a response where nothing changed.
         if (json === null) {
           this.setState({newChanges: null});
@@ -146,7 +130,17 @@ class NotificationsProvider extends React.Component {
           nextPage = links.next.page;
         }
         return this.processNotificationsChunk(nextPage, json);
-      })
+      });
+  }
+
+  requestFetchNotifications = (page = 1, optimizePolling = true) => {
+    if (this.state.syncing) {
+      // Don't try to send off another request if we're already trying to get one.
+      return Promise.reject();
+    }
+
+    this.setState({syncing: true});
+    return this.requestPage(page, optimizePolling)
       .finally(() => this.setState({syncing: false}));
   }
 
@@ -206,11 +200,11 @@ class NotificationsProvider extends React.Component {
 
       if (nextPage && everythingUpdated) {
         // Still need to fetch more updates.
-        this.fetchNotifications(nextPage, false);
+        return this.requestPage(nextPage, false).then(resolve);
       } else {
         // All done fetching updates, let's trigger a sync.
         this.props.refreshNotifications();
-        resolve();
+        return resolve();
       }
     });
   }