handle error

client/src/App.js

@@ -8,6 +8,7 @@ import SignUp from './components/SignUp';
 import ItemDetails from './components/ItemDetails';
 import ItemList from './components/ItemList';
 import Feedback from './components/Feedback';
+import Error from './components/Shared/Error';
 
 function App() {
   return (
@@ -21,6 +22,8 @@ function App() {
         <Route path="/item-details/:id" component={ItemDetails} />
         <Route path="/item-list" component={ItemList} />
         <Route path="/feedback" component={Feedback} />
+        <Route path="/error" component={Error} />
+
       </div>
     </Router>
   );

client/src/components/Feedback/index.js

@@ -35,6 +35,9 @@ class Feedback extends Component {
           const { history } = this.props;
           history.push('/');
         }
+      }).catch(() => {
+        const { history } = this.props;
+        history.push('/error');
       });
     axios
       .get('/get-feedback')
@@ -48,8 +51,10 @@ class Feedback extends Component {
           }
           this.setState({ loading: false });
         }
-      })
-      .catch(err => console.log(err));
+      }).catch(() => {
+        const { history } = this.props;
+        history.push('/error');
+      });
   }
 
   updateOptions = (feedbacks) => {
@@ -127,8 +132,9 @@ class Feedback extends Component {
           if (data.success) {
             history.push('/item-list');
           }
-        })
-        .catch(() => history.push('/error'));
+        }).catch(() => {
+          history.push('/error');
+        });
     }
     history.push('/item-list');
   };

client/src/components/GetDetails/index.js

@@ -88,6 +88,9 @@ class GetDetails extends Component {
             brands,
           });
         }
+      }).catch(() => {
+        const { history } = this.props;
+        history.push('/error');
       });
 
       axios.get('/checkcookie').then(({ data: { cookie, logged } }) => {
@@ -96,6 +99,9 @@ class GetDetails extends Component {
         } else {
           this.setState({ title: 'LOGIN TO SAVE YOUR ITEM' });
         }
+      }).catch(() => {
+        const { history } = this.props;
+        history.push('/error');
       });
     } else {
       const { history } = this.props;
@@ -107,6 +113,9 @@ class GetDetails extends Component {
       const airtableNames = type.map(item => item.name);
       const filtered = this.state.itemType.filter(item => !airtableNames.includes(item.name));
       this.setState({ itemType: [...filtered, ...type] });
+    }).catch(() => {
+      const { history } = this.props;
+      history.push('/error');
     });
   }
 
@@ -206,6 +215,9 @@ class GetDetails extends Component {
                 if (data.success) {
                   history.push({ pathname: '/item-list', logged });
                 }
+              }).catch(() => {
+                const { history } = this.props;
+                history.push('/error');
               });
             } else {
               history.push({ pathname: '/login-form', data: inputs });
@@ -220,6 +232,9 @@ class GetDetails extends Component {
         } else {
           history.push({ pathname: '/login-form', data: inputs });
         }
+      }).catch(() => {
+        const { history } = this.props;
+        history.push('/error');
       });
     }
   };
@@ -257,6 +272,9 @@ class GetDetails extends Component {
         } else {
           history.push({ pathname: '/login-form', data: inputs });
         }
+      }).catch(() => {
+        const { history } = this.props;
+        history.push('/error');
       });
     }
   };

client/src/components/ItemDetails/index.js

@@ -87,11 +87,17 @@ class ItemDetails extends Component {
         const brands = this.removeDuplicate(data.data, this.state.selected_brands);
         this.setState({ brands: [this.state.selected_brands, ...brands] });
       }
+    }).catch(() => {
+      const { history } = this.props;
+      history.push('/error');
     });
 
     axios.get('/get-types').then(({ data }) => {
       const types = this.removeDuplicate(data.itemType, this.state.selected_itemType);
       this.setState({ itemType: [this.state.selected_itemType, ...types] });
+    }).catch(() => {
+      const { history } = this.props;
+      history.push('/error');
     });
   }
 
@@ -110,8 +116,10 @@ class ItemDetails extends Component {
         if (data.success) {
           history.push('/item-list');
         }
-      })
-      .catch(() => history.push('/error'));
+      }).catch(() => {
+        const { history } = this.props;
+        history.push('/error');
+      });
   };
 
   toggleOpen = (e) => {
@@ -255,8 +263,10 @@ class ItemDetails extends Component {
           if (data.success) {
             history.push('/item-list');
           }
-        })
-        .catch(() => history.push('/error'));
+        }).catch(() => {
+          const { history } = this.props;
+          history.push('/error');
+        });
     }
     history.push('/item-list');
   };

client/src/components/ItemList/index.js

@@ -29,12 +29,18 @@ class ItemList extends Component {
           const { history } = this.props;
           history.push('/');
         }
+      }).catch(() => {
+        const { history } = this.props;
+        history.push('/error');
       });
 
     axios
       .get('/items')
       .then(({ data }) => this.setState({ itemlist: data.data, loading: false }))
-      .catch(err => console.log(err));
+      .catch(() => {
+        const { history } = this.props;
+        history.push('/error');
+      });
   }
 
   goItemDetails = (id, index) => {

client/src/components/Login/index.js

@@ -37,6 +37,9 @@ class Login extends Component {
           const { history } = this.props;
           history.push('/item-list');
         }
+      }).catch(() => {
+        const { history } = this.props;
+        history.push('/error');
       });
   }
 
@@ -82,13 +85,17 @@ class Login extends Component {
               } else {
                 history.push('/error');
               }
+            }).catch(() => {
+              history.push('/error');
             });
           } else {
             history.push('/item-list');
           }
         } else {
           this.setState({ passwordError: 'Username or password is incorrect.', isErrorUsername: true, isErrorPassword: true });
         }
+      }).catch(() => {
+        history.push('/error');
       });
     }
   };

client/src/components/Shared/Error/error.style.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export default styled.h1`
+  font-size: 20px;
+  font-family:'Assistant';
+  background-color:#FAFAFA;
+  padding: 22px 0px;
+  text-align:center;
+  @media (max-width: 650px) {
+    font-size: 16px;
+}
+`;

client/src/components/Shared/Error/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import StyledErrorr from './error.style';
+
+const Error = () => (
+  <StyledErrorr>
+    SERVER ERROR!
+  </StyledErrorr>
+);
+export default Error;

client/src/components/Shared/Title/index.js

@@ -15,6 +15,9 @@ class Title extends Component {
     axios.get('/checkcookie')
       .then(({ data: { cookie } }) => {
         if (cookie) { this.setState({ logged: true }); } else { this.setState({ logged: false }); }
+      }).catch(() => {
+        const { history } = this.props;
+        history.push('/error');
       });
   }
 
@@ -23,6 +26,8 @@ class Title extends Component {
       axios.get('/logout')
         .then(() => {
           history.push('/login-form');
+        }).catch(() => {
+          history.push('/error');
         });
     };
 

client/src/components/SignUp/index.js

@@ -35,6 +35,9 @@ class signUp extends Component {
           const { history } = this.props;
           history.push('/item-list');
         }
+      }).catch(() => {
+        const { history } = this.props;
+        history.push('/error');
       });
   }
 
@@ -93,6 +96,8 @@ class signUp extends Component {
         } else {
           this.setState({ usernameError: 'This username already exists.', isErrorUsername: true });
         }
+      }).catch(() => {
+        history.push('/error');
       });
     }
   };

client/src/components/SplashPage/index.js

@@ -17,6 +17,9 @@ class Splash extends Component {
           const { history } = this.props;
           history.push('/item-list');
         }
+      }).catch(() => {
+        const { history } = this.props;
+        history.push('/error');
       });
   }
 

client/src/components/Upload/index.js

@@ -23,6 +23,9 @@ class Upload extends Component {
     axios.post('/add-to-amazon', img).then(({ data }) => {
       this.setState({ details: data });
       this.props.history.push({ pathname: '/get-details', details: this.state.details });
+    }).catch(() => {
+      const { history } = this.props;
+      history.push('/error');
     });
   };