toggle story search

client/coral-admin/src/actions/moderation.js

@@ -51,3 +51,5 @@ export const toggleSelectCommentInUserDetail = (id, active) => {
     id
   };
 };
+
+export const toggleStorySearch = (active) => ({type: active ? actions.SHOW_STORY_SEARCH : actions.HIDE_STORY_SEARCH});

client/coral-admin/src/constants/moderation.js

@@ -12,3 +12,5 @@ export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
 export const SELECT_USER_DETAIL_COMMENT = 'SELECT_USER_DETAIL_COMMENT';
 export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
 export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';
+export const SHOW_STORY_SEARCH = 'SHOW_STORY_SEARCH';
+export const HIDE_STORY_SEARCH = 'HIDE_STORY_SEARCH';

client/coral-admin/src/reducers/moderation.js

@@ -12,6 +12,8 @@ const initialState = fromJS({
   userDetailStatuses: ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'],
   userDetailSelectedIds: new Set(),
   banDialog: false,
+  storySearchVisible: false,
+  storySearchString: '',
   shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show',
   sortOrder: 'REVERSE_CHRONOLOGICAL',
   suspendUserDialog: {
@@ -80,6 +82,10 @@ export default function moderation (state = initialState, action) {
     return state.update('userDetailSelectedIds', (set) => set.add(action.id));
   case actions.UNSELECT_USER_DETAIL_COMMENT:
     return state.update('userDetailSelectedIds', (set) => set.delete(action.id));
+  case actions.SHOW_STORY_SEARCH:
+    return state.set('storySearchVisible', true);
+  case actions.HIDE_STORY_SEARCH:
+    return state.set('storySearchVisible', false);
   case actions.SET_SORT_ORDER:
     return state.set('sortOrder', action.order);
   default :

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

@@ -32,8 +32,14 @@ export default class Moderation extends Component {
     this.toggleModal(false);
   }
 
-  openSearch = () => {
+  closeSearch = () => {
+    console.log('closeSearch');
+    this.props.toggleStorySearch(false);
+  }
 
+  openSearch = () => {
+    console.log('openSearch');
+    this.props.toggleStorySearch(true);
   }
 
   moderate = (accept) => () => {
@@ -132,7 +138,11 @@ export default class Moderation extends Component {
 
     return (
       <div>
-        <ModerationHeader openSearch={this.openSearch} asset={asset} />
+        <ModerationHeader
+          searchVisible={this.props.moderation.storySearchVisible}
+          openSearch={this.openSearch}
+          closeSearch={this.closeSearch}
+          asset={asset} />
         <ModerationMenu
           asset={asset}
           allCount={root.allCount}

client/coral-admin/src/routes/Moderation/components/ModerationHeader.js

@@ -4,19 +4,18 @@ import {Icon} from 'coral-ui';
 import styles from './styles.css';
 import t from 'coral-framework/services/i18n';
 
-const ModerationHeader = (props) => {
+const ModerationHeader = ({asset, searchVisible, openSearch, closeSearch}) => {
 
-  const allStreams = props.asset
+  const trigger = searchVisible ? closeSearch : openSearch;
+  const searchTriggerIcon = <Icon className={styles.searchTrigger} name={searchVisible ? 'arrow_drop_up' : 'arrow_drop_down'} />;
+
+  const allStreams = asset
     ? <Link className="mdl-tabs__tab" to="/admin/moderate">{t('modqueue.all_streams')}</Link>
     : <a className="mdl-tabs__tab" />;
 
-  const title = props.asset
-    ? (
-      <Link className="mdl-tabs__tab" to={`/admin/moderate/${props.asset.id}`}>
-        {props.asset.title} <Icon className={styles.searchTrigger} name="keyboard_arrow_down" />
-      </Link>
-    )
-    : <a className="mdl-tabs__tab">{t('modqueue.all_streams')} <Icon className={styles.searchTrigger} name="keyboard_arrow_down" /></a>;
+  const title = asset
+    ? <span onClick={trigger} className="mdl-tabs__tab">{asset.title} {searchTriggerIcon}</span>
+    : <span onClick={trigger} className="mdl-tabs__tab">{t('modqueue.all_streams')} {searchTriggerIcon}</span>;
 
   return (
     <div className=''>
@@ -32,7 +31,12 @@ const ModerationHeader = (props) => {
 };
 
 ModerationHeader.propTypes = {
-  openSearch: PropTypes.func.isRequired
+  asset: PropTypes.shape({
+    title: PropTypes.string,
+    id: PropTypes.string
+  }),
+  openSearch: PropTypes.func.isRequired,
+  closeSearch: PropTypes.func.isRequired
 };
 
 export default ModerationHeader;

client/coral-admin/src/routes/Moderation/components/styles.css

@@ -471,4 +471,5 @@ span {
 .searchTrigger {
   position: relative;
   top: .3em;
+  background-color: blue;
 }

client/coral-admin/src/routes/Moderation/containers/Moderation.js

@@ -21,6 +21,7 @@ import {
   showSuspendUserDialog,
   hideSuspendUserDialog,
   hideShortcutsNote,
+  toggleStorySearch,
   viewUserDetail,
   hideUserDetail,
   setSortOrder,
@@ -299,6 +300,7 @@ const mapDispatchToProps = (dispatch) => ({
     showBanUserDialog,
     hideBanUserDialog,
     hideShortcutsNote,
+    toggleStorySearch,
     showSuspendUserDialog,
     hideSuspendUserDialog,
     viewUserDetail,