Merge pull request #85 from which-ecosystem/errors

Handle frontend errors

1 files changed, 17 insertions, 3 deletions

diff --git a/src/components/EmptyState/EmptyState.tsx b/src/components/EmptyState/EmptyState.tsx
index f79a391..7167ba2 100644
--- a/src/components/EmptyState/EmptyState.tsx
+++ b/src/components/EmptyState/EmptyState.tsx
@@ -1,14 +1,18 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 
+import Image from '../Image/Image';
 import Message from '../Message/Message';
 import noContentIcon from '../../assets/noContent.svg';
 import constructionIcon from '../../assets/construction.svg';
+import serverIcon from '../../assets/server.svg';
+import errorIcon from '../../assets/error.svg';
 
 
 interface PropTypes {
-  variant?: 'default' | 'construction';
+  variant?: 'default' | 'construction' | 'waiting' | 'error';
   message?: string;
+  smart?: boolean;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -25,16 +29,26 @@ const CONTEXT = {
   construction: {
     icon: constructionIcon,
     tagline: 'Coming soon'
+  },
+  waiting: {
+    icon: serverIcon,
+    tagline: 'Waiting for server'
+  },
+  error: {
+    icon: errorIcon,
+    tagline: 'Something went wrong'
   }
 };
 
-const EmptyState: React.FC<PropTypes> = ({ variant = 'default', message }) => {
+const EmptyState: React.FC<PropTypes> = ({ variant = 'default', smart = false, message }) => {
   const classes = useStyles();
   const { icon, tagline } = CONTEXT[variant];
 
+  const Component = smart ? Image : 'img';
+
   return (
     <Message tagline={tagline} message={message}>
-      <img src={icon} className={classes.img} alt="No content" />
+      <Component src={icon} className={classes.img} alt="No content" />
     </Message>
   );
 };