Fetch done!

webui/src/components/Shared/Blank.js

@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types';
+
+import styled from 'styled-components';
+import oc from 'open-color';
+
+import SchoolIcon from 'react-icons/lib/md/school'
+
+const Wrapper = styled.div`
+  position: relative;
+  display: block;
+
+  padding-top : 4rem;
+`  
+
+const CircleIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: ${props => props.size};
+  height: ${props => props.size};
+  margin: 0 auto;
+
+  border-radius: calc(${props => props.size} * 0.5 );
+  font-size: calc(${props => props.size} * 0.75);
+
+  background: ${oc.gray[0]};
+  color: ${oc.gray[8]};
+`;
+
+const StyledTitle = styled.div`
+  display: block;
+  margin-top: 2rem;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: bold;
+
+  color: ${oc.indigo[8]};
+  cursor: pointer;
+`;
+
+const StyledBody = styled.div`
+  display: block;
+  margin-top: 2rem;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 300;
+
+  color: ${oc.gray[6]};
+  cursor: pointer;
+`;
+
+const Blank = ({visible, title, body, onTitle}) => visible ? (
+  <Wrapper>
+    <CircleIcon size="12rem">
+      <SchoolIcon/>
+    </CircleIcon>
+    <StyledBody>{body}</StyledBody>
+    <StyledTitle onClick={onTitle}>{title}</StyledTitle>
+  </Wrapper>
+) : null;
+
+Blank.propTypes = {
+  visible: PropTypes.bool,
+  title: PropTypes.string,
+  body: PropTypes.string,
+  onTitle: PropTypes.func
+};
+
+Blank.defaultProps = {
+  visible: false,
+  title: "ADD A DATA",
+  body: "You have no data... yet!"
+};
+
+export default Blank;

webui/src/components/Shared/ThumbnailIcon.js

@@ -25,7 +25,7 @@ Wrapper.propTypes = {
 
 const Thumbnail = ({size, color}) => (
   <Wrapper size={size} color={color}>
-      <Person />
+    <Person />
   </Wrapper>
 )
 

webui/src/components/Subscriber/List.js

@@ -5,7 +5,7 @@ import oc from 'open-color';
 import { media, transitions } from 'helpers/style-utils';
 import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 
-import { Layout } from 'components';
+import { Layout, Blank } from 'components';
 import Item from './Item';
 
 const Wrapper = styled.div`

webui/src/components/index.js

@@ -10,6 +10,7 @@ import Dimmed from './Shared/Dimmed';
 import Spinner from './Shared/Spinner';
 import FloatingButton from './Shared/FloatingButton';
 import Tooltip from './Shared/Tooltip';
+import Blank from './Shared/Blank';
 
 import * as Subscriber from './Subscriber';
 import * as User from './User';
@@ -27,6 +28,7 @@ export {
   Spinner,
   FloatingButton,
   Tooltip,
+  Blank,
 
   Subscriber,
   User

webui/src/containers/SubscriberContainer.js

@@ -9,7 +9,7 @@ import styled from 'styled-components';
 import oc from 'open-color';
 import { media } from 'helpers/style-utils';
 
-import { Subscriber, Spinner, FloatingButton } from 'components';
+import { Subscriber, Spinner, FloatingButton, Blank } from 'components';
 
 const Wrapper = styled.div`
   width: 100%;
@@ -85,12 +85,21 @@ class SubscriberContainer extends Component {
       subscribers 
     } = this.props
 
+    const {
+      isLoading,
+      data
+    } = subscribers;
+
+    const {
+      length
+    } = data;
+
     return (
       <Wrapper>
-        <Subscriber.Search 
+        {length !== 0 && <Subscriber.Search 
           onChange={handleSearchChange}
           value={search}
-          onClear={handleSearchClear} />
+          onClear={handleSearchClear} />}
         <Subscriber.List
           subscribers={subscribers.data}
           onShow={handleShow}
@@ -98,7 +107,13 @@ class SubscriberContainer extends Component {
           onDelete={handleDelete}
           search={search}
         />
-        {subscribers.isLoading && <Spinner md color={oc.indigo[9]} />}
+        {isLoading && <Spinner md color={oc.indigo[9]} />}
+        <Blank
+          visible={!isLoading && !length}
+          title="ADD A SUBSCRIBER"
+          body="You have no subscribers... yet!"
+          onTitle={handleAdd}
+          />
         <FloatingButton onClick={handleAdd}/>
       </Wrapper>
     )