From 65b308a0612789aeda3da097ad51942394938146 Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Wed, 14 Dec 2016 16:01:43 -0500
Subject: [PATCH] Adding initial stream list.

---
 .../src/containers/Streams/Streams.css        |  2 +-
 .../src/containers/Streams/Streams.js         | 89 ++++++++++++-------
 2 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/client/coral-admin/src/containers/Streams/Streams.css b/client/coral-admin/src/containers/Streams/Streams.css
index 07724baa8..7ab1b5199 100644
--- a/client/coral-admin/src/containers/Streams/Streams.css
+++ b/client/coral-admin/src/containers/Streams/Streams.css
@@ -8,7 +8,7 @@
 }
 
 .mainContent {
-  width: calc(70% - 300px)
+  width: calc(90% - 200px);
 }
 
 .searchIcon {
diff --git a/client/coral-admin/src/containers/Streams/Streams.js b/client/coral-admin/src/containers/Streams/Streams.js
index c6c9feeb3..bec61e995 100644
--- a/client/coral-admin/src/containers/Streams/Streams.js
+++ b/client/coral-admin/src/containers/Streams/Streams.js
@@ -5,7 +5,9 @@ import translations from '../../translations.json';
 import {
   RadioGroup,
   Radio,
-  Icon
+  Icon,
+  DataTable,
+  TableHeader
 } from 'react-mdl';
 
 class Streams extends Component {
@@ -20,42 +22,69 @@ class Streams extends Component {
     this.setState({[setting]: e.target.value});
   }
 
+  renderDate = (date) => {
+    const d = new Date(date);
+    return `${d.getMonth()}/${d.getDate()}/${d.getYear()}`;
+  }
+
+  renderStatus = (status) => {
+    return <div>{status}</div>;
+  }
+
   render () {
     const {searchTerm, sortBy, statusFilter} = this.state;
 
     return <div className={styles.container}>
       <div className={styles.leftColumn}>
-      <div className={styles.searchBox}>
-        <Icon name='search' className={styles.searchIcon}/>
-        <input
-          type='text'
-          value={searchTerm}
-          className={styles.searchBoxInput}
-          onChange={this.onSettingChange('searchTerm')}
-          placeholder={lang.t('streams.search')}/>
-      </div>
-      <div className={styles.optionHeader}>{lang.t('streams.filter-streams')}</div>
-      <div className={styles.optionDetail}>{lang.t('streams.stream-status')}</div>
-      <RadioGroup
-        name='status filter'
-        value={statusFilter}
-        childContainer='div'
-        onChange={this.onSettingChange('statusFilter')}>
-        <Radio value='all'>{lang.t('streams.all')}</Radio>
-        <Radio value='open'>{lang.t('streams.open')}</Radio>
-        <Radio value='closed'>{lang.t('streams.closed')}</Radio>
-      </RadioGroup>
-      <div className={styles.optionHeader}>{lang.t('streams.sort-by')}</div>
-      <RadioGroup
-        name='sort by'
-        value={sortBy}
-        childContainer='div'
-        onChange={this.onSettingChange('sortBy')}>
-        <Radio value='newest'>{lang.t('streams.newest')}</Radio>
-        <Radio value='oldest'>{lang.t('streams.oldest')}</Radio>
-      </RadioGroup>
+
+        <div className={styles.searchBox}>
+          <Icon name='search' className={styles.searchIcon}/>
+          <input
+            type='text'
+            value={searchTerm}
+            className={styles.searchBoxInput}
+            onChange={this.onSettingChange('searchTerm')}
+            placeholder={lang.t('streams.search')}/>
+        </div>
+
+        <div className={styles.optionHeader}>{lang.t('streams.filter-streams')}</div>
+        <div className={styles.optionDetail}>{lang.t('streams.stream-status')}</div>
+          <RadioGroup
+            name='status filter'
+            value={statusFilter}
+            childContainer='div'
+            onChange={this.onSettingChange('statusFilter')}>
+            <Radio value='all'>{lang.t('streams.all')}</Radio>
+            <Radio value='open'>{lang.t('streams.open')}</Radio>
+            <Radio value='closed'>{lang.t('streams.closed')}</Radio>
+          </RadioGroup>
+          <div className={styles.optionHeader}>{lang.t('streams.sort-by')}</div>
+          <RadioGroup
+            name='sort by'
+            value={sortBy}
+            childContainer='div'
+            onChange={this.onSettingChange('sortBy')}>
+            <Radio value='newest'>{lang.t('streams.newest')}</Radio>
+            <Radio value='oldest'>{lang.t('streams.oldest')}</Radio>
+          </RadioGroup>
       </div>
+
       <div className={styles.mainContent}>
+      <DataTable
+        rows={[
+            {article: 'Acrylic (Transparent)', pubdate: 25, status: 2.90},
+            {article: 'Plywood (Birch)', pubdate: 50, status: 1.25},
+            {article: 'Laminate (Gold on Blue)', pubdate: 10, status: 2.35}
+        ]}
+      >
+        <TableHeader name="article">{lang.t('streams.article')}</TableHeader>
+        <TableHeader name="pubdate" cellFormatter={this.renderDate}>
+          {lang.t('streams.pubdate')}
+        </TableHeader>
+        <TableHeader name="status" cellFormatter={this.renderStatus}>
+          {lang.t('streams.status')}
+        </TableHeader>
+      </DataTable>
       </div>
     </div>;
   }