Share an empty state components

Author: amoshydra

views/components/Announcements/Container.jsx

@@ -2,6 +2,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import Annoncement from './Announcement';
+import EmptyState from '../Shared/EmptyState';
 import styles from '../Shared/styles/container.css';
 
 export default class Container extends Component {
@@ -11,26 +12,26 @@ export default class Container extends Component {
     this.renderList = this.renderList.bind(this);
   }
 
-  renderList() {
-    const dataList = this.props.list;
-
-    if (dataList && dataList.length > 0) {
-      return dataList.filter((dataItem) =>
-        (dataItem.dataType === 'Announcements')
-      ).map((dataItem) =>
-        <li key={dataItem.ID}>
-          <Annoncement announcement={dataItem} />
-        </li>
-      );
-    }
-    return <p>Nothing to see here.</p>;
+  renderList(dataList) {
+    return dataList.filter((dataItem) =>
+      (dataItem.dataType === 'Announcements')
+    ).map((dataItem) =>
+      <li key={dataItem.ID}>
+        <Annoncement announcement={dataItem} />
+      </li>
+    );
   }
 
   render() {
+    const dataList = this.props.list;
+    if (!(dataList && dataList.length > 0)) {
+      return <EmptyState dirname={__dirname}/>
+    }
+
     return (
       <div className={styles.container}>
         <ul>
-          {this.renderList()}
+          {this.renderList(dataList)}
         </ul>
       </div>
     );

views/components/Forum/Container.jsx

@@ -1,29 +1,30 @@
 'use babel';
 
 import React, { Component, PropTypes } from 'react';
-import styles from '../Shared/styles/container.css';
 import CourseWrapper from './CourseWrapper';
+import EmptyState from '../Shared/EmptyState';
+import styles from '../Shared/styles/container.css';
 
 export default class Container extends Component {
 
-  renderList() {
-    const dataList = this.props.list;
-
-    if (dataList && dataList.length > 0) {
-      return dataList.filter((dataItem) =>
-        (dataItem.dataType === 'Forums')
-      ).map((dataItem) =>
-        <CourseWrapper key={dataItem.ID} dataItem={dataItem}/>
-      );
-    }
-    return <p>Nothing to see here.</p>;
+  renderList(dataList) {
+    return dataList.filter((dataItem) =>
+      (dataItem.dataType === 'Forums')
+    ).map((dataItem) =>
+      <CourseWrapper key={dataItem.ID} dataItem={dataItem}/>
+    );
   }
 
   render() {
+    const dataList = this.props.list;
+    if (!(dataList && dataList.length > 0)) {
+      return <EmptyState dirname={__dirname}/>
+    }
+
     return (
       <div className={styles.container}>
         <ul>
-          {this.renderList()}
+          {this.renderList(dataList)}
         </ul>
       </div>
     );

views/components/Multimedia/Container.jsx

@@ -2,6 +2,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import CourseWrapper from './CourseWrapper';
+import EmptyState from '../Shared/EmptyState';
 import Storage from './../../../controllers/storage';
 import styles from '../Shared/styles/container.css';
 
@@ -39,7 +40,7 @@ export default class Container extends Component {
     // TODO perhaps shouldn't use get module next time
     if (!dataList || dataList.length <= 0 || !Storage.user.has('modules')) {
       return (
-        <p>Loading data...</p>
+        <EmptyState dirname={__dirname}/>
       );
     }
 

views/components/Shared/EmptyState.jsx

@@ -0,0 +1,46 @@
+'use babel';
+
+import React, { PropTypes } from 'react';
+import Storage from './../../../controllers/storage';
+
+const checkLoginStatus = function checkLoginStatus() {
+  return Storage.user.has('user');
+}
+
+const EmptyState = ({ dirname }) => {
+
+  const splitted = dirname.split('\\');
+  const componentName = splitted[splitted.length - 1];
+
+  return (
+    <div style={{
+      height: '100vh',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }}>
+      <div style={{textAlign:'center', marginBottom: '200px'}}>
+        <div>
+          <strong>{componentName}</strong>
+        </div>
+        <div style={{margin: "15px"}}>
+          {(checkLoginStatus()) ?
+            <div>
+              <div>Nothing here yet..</div>
+              <div style={{marginTop: 5, opacity: '0.3'}}>Try refreshing the app ({(process.platform === 'win32') ? 'CTRL' : 'CMD'}+R)</div>
+            </div> :
+            <div>
+              <div>Login first to see your data</div>
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EmptyState;
+
+EmptyState.propTypes = {
+  dirname: PropTypes.string
+};