improved fetch error handling

static/src/Home/Home.js

@@ -4,6 +4,7 @@ import DatePicker from 'react-datepicker';
 import moment from 'moment';
 import MediaQuery from 'react-responsive';
 import 'react-datepicker/dist/react-datepicker.css';
+import toastr from 'toastr'
 
 import CustomCard from '../Card/Card'
 import './Home.css'
@@ -22,11 +23,15 @@ export default class HomeComponent extends Component {
         'Authorization': window.localStorage.getItem('token'),
         'Content-Type': 'application/json'
       }
-    }).then(res => res.ok ? res.json() : Promise.reject(res.json()))
+    })
+      .then(res => res.ok ? res.json() : Promise.reject(res.json()))
       .then(() => {
         this.setState({ showCustomIDError: true })
       })
-      .catch(() => this.setState({ showCustomIDError: false }))
+      .catch(e => {
+        this.setState({ showCustomIDError: false })
+        toastr.error(`Could not fetch lookup: ${e}`)
+      })
   }
   onSettingsChange = (e, { value }) => this.setState({ setOptions: value })
 
@@ -56,7 +61,8 @@ export default class HomeComponent extends Component {
           'Authorization': window.localStorage.getItem('token'),
           'Content-Type': 'application/json'
         }
-      }).then(res => res.ok ? res.json() : Promise.reject(res.json()))
+      })
+        .then(res => res.ok ? res.json() : Promise.reject(res.json()))
         .then(r => this.setState({
           links: [...this.state.links, [
             r.URL,
@@ -65,6 +71,7 @@ export default class HomeComponent extends Component {
             r.DeletionURL
           ]]
         }))
+        .catch(e => toastr.error(`Could not fetch create: ${e}`))
     }
   }
 
@@ -103,7 +110,7 @@ export default class HomeComponent extends Component {
           </Form>
         </Segment>
         <Card.Group itemsPerRow="2" stackable style={{ marginTop: "1rem" }}>
-          {links.map((link, i) => <CustomCard key={i} header={new URL(link[1]).hostname} expireDate={link[2]} metaHeader={link[1]} description={link[0]} deletionURL={link[3]}/>)}
+          {links.map((link, i) => <CustomCard key={i} header={new URL(link[1]).hostname} expireDate={link[2]} metaHeader={link[1]} description={link[0]} deletionURL={link[3]} />)}
         </Card.Group>
       </div >
     )

static/src/Lookup/Lookup.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { Segment, Header, Form, Input, Card } from 'semantic-ui-react'
 import moment from 'moment';
+import toastr from 'toastr'
 
 import CustomCard from '../Card/Card'
 
@@ -20,7 +21,8 @@ export default class LookupComponent extends Component {
                 'Authorization': window.localStorage.getItem('token'),
                 'Content-Type': 'application/json'
             }
-        }).then(res => res.ok ? res.json() : Promise.reject(res.json()))
+        })
+            .then(res => res.ok ? res.json() : Promise.reject(res.json()))
             .then(res => this.setState({
                 links: [...this.state.links, [
                     res.URL,
@@ -31,6 +33,7 @@ export default class LookupComponent extends Component {
                     res.Expiration ? moment(res.Expiration) : null
                 ]]
             }))
+            .catch(e => toastr.error(`Could not fetch lookup: ${e}`))
     }
     render() {
         const { links } = this.state

static/src/index.js

@@ -31,6 +31,7 @@ export default class BaseComponent extends Component {
             .then(d => d.json())
             .then(info => this.setState({ info }))
             .then(() => this.checkAuth())
+            .catch(e => toastr.error(`Could not fetch info: ${e}`))
     }
 
     checkAuth = () => {
@@ -54,7 +55,7 @@ export default class BaseComponent extends Component {
                     })
                 })
                 .catch(e => {
-                    toastr.error(`Could not fetch info: ${e}`)
+                    toastr.error(`Could not fetch check: ${e}`)
                     window.localStorage.removeItem('token');
                     that.setState({ authorized: false })
                 })