Show error message on http error in blog post view

src/Model/AppState.tsx

@@ -12,10 +12,6 @@ export enum LoggedInState {
  LoggedIn = 2,
 }
 
-interface MyApiData {
- name: string;
-}
-
 class AppState {
  @observable bloglist: BlogInfo[] = [];
  @observable blogPostlist: BlogPost[] = [];
@@ -65,7 +61,9 @@ class AppState {
 
  this.checkAuth();
 
- // Fetch posts for currently selected blog
+ // We will now fetch posts for the currently selected blog
+
+ // Determine if we should fetch all or only unread
  const selectedBlog = _.find(this.bloglist, { uid: uid });
  let onlyUnread = true;
  if (selectedBlog) {
@@ -74,14 +72,27 @@ class AppState {
  }
 
  // First fetch post ids
- let response = await OldReaderResource.getPostIds(this.auth, `feed/${uid}`, onlyUnread);
- let data: MyApiData = await response.json();
+
+ // tslint:disable-next-line
+ let rsp : any = await OldReaderResource.getPostIds(this.auth, `feed/${uid}`, onlyUnread)
+ .catch(err => {
+ return {
+ status: -1
+ };
+ });
+ if (rsp.status !== 200) {
+ this.errorMessage = "Could not fetch posts, please try again.";
+ this.isLoadingPosts = false;
+ return;
+ }
+
+ let data: any = await rsp.json(); // tslint:disable-line
 
  // Now create list of blog posts
- this.blogPostlist = _.map((data as any).itemRefs, (r: any) => { return new BlogPost(r.id, !onlyUnread); }); // tslint:disable-line
+ this.blogPostlist = _.map(data.itemRefs, (r: any) => { return new BlogPost(r.id, !onlyUnread); }); // tslint:disable-line
  // console.log(itemRefs)
 
- // Fetch first 5 unread posts
+ // Fetch first N unread posts
  if (this.blogPostlist.length > 0) {
  this.fetchFiveUnreadPosts();
  } else {

src/Model/gridStyle.ts → src/Model/CustomStyles.ts

@@ -1,4 +1,6 @@
-export const gridStyle = {padding: '0.2em'};
+export const belowMainMenuStyle = {
+ padding: '0.2em'
+};
 export const gridStyleWithTopPadding = {
  padding: '0.2em', 
  paddingTop: '3.5em'
@@ -10,3 +12,4 @@ export const gridStyleWithTopPadding = {
  bottom: '0',
  width: '100%'
  };
+

src/Views/BlogListView.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as _ from 'lodash';
 import { inject, observer } from 'mobx-react';
 import RootStore from '../Model/RootStore';
-import { gridStyleWithTopPadding as gridStyle } from '../Model/gridStyle';
+import { gridStyleWithTopPadding as gridStyle } from '../Model/CustomStyles';
 import { BlogInfo } from '../Model/BlogInfo';
 import { Link } from 'react-router-dom';
 import { Dropdown, Icon } from 'semantic-ui-react';

src/Views/BlogPostView.tsx

@@ -4,11 +4,12 @@ import { inject, observer } from 'mobx-react';
 import RootStore from '../Model/RootStore';
 import renderHTML from 'react-render-html';
 import Headroom from 'react-headroom';
-import { gridStyle } from '../Model/gridStyle';
+import { belowMainMenuStyle } from '../Model/CustomStyles';
 import ScrollToTopOnMount from './ScrollToTop';
 import StringUtils from '../Model/StringUtils';
 import { scroller as scroll } from 'react-scroll';
 import * as readingTime from 'reading-time';
+import { HeaderErrorMessage } from './HeaderErrorMessage';
 
 const Loader: React.SFC = () => {
  return (
@@ -67,10 +68,14 @@ class BlogPostView extends React.Component<RootStore, {}> {
  const activeStyle = { color: '#FFFFFF', background: '#3B83C0' };
  const inactiveStyle = { color: '#FFFFFF', background: '#808080' };
 
- const blogPosts = this.props.appState.blogPostlist.length === 0 && !this.props.appState.isLoadingPosts ? (
- <div className="item right">
- No posts... <i className="icon meh"></i> 
- </div>) : 
+ const blogPosts = 
+ this.props.appState.blogPostlist.length === 0 && 
+ this.props.appState.errorMessage.length === 0 &&
+ !this.props.appState.isLoadingPosts ? (
+ <HeaderErrorMessage 
+ errorMessage="No posts..."
+ dismissError={() => this.props.appState.dismissError()} 
+ />) : 
  _.map(this.props.appState.blogPostlist, (b, i) => {
  if (!b.title) { return null; }
 
@@ -192,7 +197,11 @@ class BlogPostView extends React.Component<RootStore, {}> {
  <div className="header borderless item">{this.props.appState.currentBlogTitle}</div>
  </div>
  </Headroom>
- <div className="ui grid" style={gridStyle}>
+ <HeaderErrorMessage 
+ errorMessage={this.props.appState.errorMessage}
+ dismissError={() => this.props.appState.dismissError()} 
+ />
+ <div className="ui grid" style={belowMainMenuStyle}>
  <div className="sixteen wide column">
  {blogPosts}
  {moreToFetchloader}

src/Views/FooterErrorMessage.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { footerErrorStyle } from '../Model/gridStyle';
+import { footerErrorStyle } from '../Model/CustomStyles';
 
 interface FooterErrorMessageProps {
  errorMessage: string;

src/Views/HeaderErrorMessage.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { belowMainMenuStyle } from '../Model/CustomStyles';
+
+interface FooterErrorMessageProps {
+ errorMessage: string;
+ dismissError(): void;
+}
+
+export const HeaderErrorMessage: React.SFC<FooterErrorMessageProps> = (props) => {
+ if (props.errorMessage.length > 0) {
+ return ( 
+ <div style={belowMainMenuStyle}>
+ <div className="ui negative message">
+ <i className="close icon" onClick={() => props.dismissError()} />
+ <i className="warning icon" />{props.errorMessage}
+ </div>
+ </div>
+ );
+ } else {
+ return null;
+ }
+};