Stories Dropdown, Proptypes and tiny refactor

client/coral-admin/src/routes/Stories/components/Stories.css

@@ -76,31 +76,6 @@
   display: block;
 }
 
-.statusMenu {
-  border-radius: 2px;
-  width: 10em;
-  text-align: center;
-  float: right;
-  color: #fff;
-  cursor: pointer;
-  letter-spacing: 0.7px;
-  font-weight: 400;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-}
-
-.statusMenuOpen {
-  padding: 10px;
-  background-color: #268D81;
-}
-
-.statusMenuIcon {
-  float: right;
-}
-
-.statusMenuClosed {
-  padding: 10px;
-  background-color: #262626;
-}
 
 .hidden {
   display: none;

client/coral-admin/src/routes/Stories/components/Stories.js

@@ -1,16 +1,16 @@
 import React, {Component} from 'react';
-import styles from './Stories.css';
-import t from 'coral-framework/services/i18n';
 import {Link} from 'react-router';
-
-import {Pager, Icon} from 'coral-ui';
-import {DataTable, TableHeader, RadioGroup, Radio} from 'react-mdl';
-import EmptyCard from 'coral-admin/src/components/EmptyCard';
+import PropTypes from 'prop-types';
 import sortBy from 'lodash/sortBy';
+import {Dropdown, Option, Pager, Icon} from 'coral-ui';
+import {DataTable, TableHeader, RadioGroup, Radio} from 'react-mdl';
+import t from 'coral-framework/services/i18n';
+import styles from './Stories.css';
+import EmptyCard from 'coral-admin/src/components/EmptyCard';
 
 const limit = 25;
 
-export default class Stories extends Component {
+class Stories extends Component {
 
   state = {
     search: '',
@@ -50,27 +50,13 @@ export default class Stories extends Component {
     return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
   }
 
-  onStatusClick = (closeStream, id, statusMenuOpen) => async () => {
-    if (statusMenuOpen) {
-      this.setState((prev) => {
-        prev.statusMenus[id] = false;
-        return prev;
-      });
-
-      try {
-        await this.props.updateAssetState(id, closeStream ? Date.now() : null);
-        const {search, sort, filter, page} = this.state;
-        this.props.fetchAssets(page, limit, search, sort, filter);
-      } catch (err) {
-
-        // TODO: handle error.
-        console.error(err);
-      }
-    } else {
-      this.setState((prev) => {
-        prev.statusMenus[id] = true;
-        return prev;
-      });
+  onStatusClick = async (closeStream, id) => {
+    try {
+      this.props.updateAssetState(id, closeStream ? Date.now() : null);
+      const {search, sort, filter, page} = this.state;
+      this.props.fetchAssets(page, limit, search, sort, filter);
+    } catch(err) {
+      console.error(err);
     }
   }
 
@@ -78,23 +64,15 @@ export default class Stories extends Component {
 
   renderStatus = (closedAt, {id}) => {
     const closed = closedAt && new Date(closedAt).getTime() < Date.now();
-    const statusMenuOpen = this.state.statusMenus[id];
-    return <div className={styles.statusMenu}>
-      <div
-        className={closed ? styles.statusMenuClosed : styles.statusMenuOpen}
-        onClick={this.onStatusClick(closed, id, statusMenuOpen)}>
-        {!statusMenuOpen && <Icon className={styles.statusMenuIcon} name='keyboard_arrow_down'/>}
-        {closed ? t('streams.closed') : t('streams.open')}
-      </div>
-      {
-        statusMenuOpen &&
-        <div
-          className={!closed ? styles.statusMenuClosed : styles.statusMenuOpen}
-          onClick={this.onStatusClick(!closed, id, statusMenuOpen)}>
-          {!closed ? t('streams.closed') : t('streams.open')}
-        </div>
-      }
-    </div>;
+    return (
+      <Dropdown 
+        value={closed}
+        label={closed ? t('streams.closed') : t('streams.open')}
+        onChange={(value) => this.onStatusClick(!value, id)}>     
+        <Option value={null}>{t('streams.closed')}</Option>
+        <Option value={true}>{t('streams.open')}</Option>
+      </Dropdown> 
+    );
   }
 
   onPageClick = (page) => {
@@ -174,3 +152,11 @@ export default class Stories extends Component {
   }
 }
 
+Stories.propTypes = {
+  assets: PropTypes.object,
+  fetchAssets: PropTypes.func,
+  updateAssetState: PropTypes.func,
+};
+
+export default Stories;
+

client/coral-ui/components/Dropdown.js

@@ -108,7 +108,8 @@ Dropdown.propTypes = {
   label: PropTypes.string,
   value: PropTypes.oneOfType([
     PropTypes.number,
-    PropTypes.string
+    PropTypes.string,
+    PropTypes.bool
   ]),
 };