From 18061e3e1cd87fe3d1cf1503ca7baa7b1bd4bf38 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 15 Jun 2017 17:32:14 -0300
Subject: [PATCH] new func and style

---
 client/coral-admin/src/actions/moderation.js  |  5 ++--
 .../coral-admin/src/components/ui/Layout.js   |  2 +-
 .../coral-admin/src/constants/moderation.js   |  3 ++-
 client/coral-admin/src/reducers/moderation.js |  4 +++-
 .../Moderation/components/StorySearch.css     | 23 ++++++++++--------
 .../Moderation/components/StorySearch.js      | 19 +++++++++++----
 .../Moderation/containers/Moderation.js       |  2 --
 .../Moderation/containers/StorySearch.js      | 24 ++++++++++++++-----
 8 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/client/coral-admin/src/actions/moderation.js b/client/coral-admin/src/actions/moderation.js
index 2b8c1e599..a684c6085 100644
--- a/client/coral-admin/src/actions/moderation.js
+++ b/client/coral-admin/src/actions/moderation.js
@@ -57,11 +57,10 @@ export const toggleStorySearch = (active) => ({
 });
 
 export const storySearchChange = (value) => ({
-  type: actions.CHANGE_ASSET_SEARCH_STRING,
+  type: actions.STORY_SEARCH_CHANGE_VALUE,
   value
 });
 
 export const storySearchClear = () => ({
-  type: actions.CHANGE_ASSET_SEARCH_STRING,
-  value: ''
+  type: actions.STORY_SEARCH_CLEAR
 });
diff --git a/client/coral-admin/src/components/ui/Layout.js b/client/coral-admin/src/components/ui/Layout.js
index 11432e570..10433048e 100644
--- a/client/coral-admin/src/components/ui/Layout.js
+++ b/client/coral-admin/src/components/ui/Layout.js
@@ -10,7 +10,7 @@ const Layout = ({
   toggleShortcutModal,
   restricted = false,
   ...props}) => (
-  <LayoutMDL fixedDrawer>
+  <LayoutMDL className={styles.layout} fixedDrawer>
     <Header
       handleLogout={handleLogout}
       showShortcuts={toggleShortcutModal}
diff --git a/client/coral-admin/src/constants/moderation.js b/client/coral-admin/src/constants/moderation.js
index 37f048e23..fec6b2353 100644
--- a/client/coral-admin/src/constants/moderation.js
+++ b/client/coral-admin/src/constants/moderation.js
@@ -14,4 +14,5 @@ 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';
-export const CHANGE_ASSET_SEARCH_STRING = 'CHANGE_ASSET_SEARCH_STRING';
+export const STORY_SEARCH_CHANGE_VALUE = 'STORY_SEARCH_CHANGE_VALUE';
+export const STORY_SEARCH_CLEAR = 'STORY_SEARCH_CLEAR';
diff --git a/client/coral-admin/src/reducers/moderation.js b/client/coral-admin/src/reducers/moderation.js
index 349ff517a..858986e45 100644
--- a/client/coral-admin/src/reducers/moderation.js
+++ b/client/coral-admin/src/reducers/moderation.js
@@ -86,8 +86,10 @@ export default function moderation (state = initialState, action) {
     return state.set('storySearchVisible', true);
   case actions.HIDE_STORY_SEARCH:
     return state.set('storySearchVisible', false);
-  case actions.CHANGE_ASSET_SEARCH_STRING:
+  case actions.STORY_SEARCH_CHANGE_VALUE:
     return state.set('storySearchString', action.value);
+  case actions.STORY_SEARCH_CLEAR:
+    return state.set('storySearchString', '');
   case actions.SET_SORT_ORDER:
     return state.set('sortOrder', action.order);
   default :
diff --git a/client/coral-admin/src/routes/Moderation/components/StorySearch.css b/client/coral-admin/src/routes/Moderation/components/StorySearch.css
index 4224a38fb..796bc9266 100644
--- a/client/coral-admin/src/routes/Moderation/components/StorySearch.css
+++ b/client/coral-admin/src/routes/Moderation/components/StorySearch.css
@@ -28,7 +28,7 @@
   padding: 8px;
   height: 100%;
   font-size: 16px;
-  margin-right: 10px;
+  margin-right: 5px;
   position: relative;
   top: 2px;
   box-sizing: border-box;
@@ -39,13 +39,16 @@
 }
 
 .cta {
-  padding: 32px 30px;
   letter-spacing: 1px;
   font-weight: bold;
-  font-size: 17px;
+  font-size: 15px;
   margin: 0;
-  height: 74px;
+  height: 50px;
   box-sizing: border-box;
+  font-size: 15px;
+  font-weight: 500;
+  padding: 12px 30px;
+  letter-spacing: 0.7px;
 }
 
 .storyList {
@@ -58,7 +61,7 @@
   cursor: pointer;
   display: block;
   text-decoration: none;
-  height: 66px;
+  height: 50px;
 
   &:hover {
     background-color: #efefef;
@@ -69,7 +72,6 @@
   margin: 0;
   color: black;
   font-size: 17px;
-  /* margin: 0 0 -4px; */
 }
 
 .author, .createdAt, .status {
@@ -104,8 +106,8 @@
 }
 
 .recentStories i {
-  font-size: 20px;
-  line-height: 26px;
+  font-size: 16px;
+  vertical-align: middle;
 }
 
 .accessStories {
@@ -113,9 +115,10 @@
 }
 
 .headlineRecent {
-  font-size: 17px;
+  font-size: 15px;
   font-weight: 500;
-  padding: 17px;
   letter-spacing: 0.7px;
+  vertical-align: middle;
+  margin-left: 10px;
 }
 
diff --git a/client/coral-admin/src/routes/Moderation/components/StorySearch.js b/client/coral-admin/src/routes/Moderation/components/StorySearch.js
index b1c44baff..b5d746114 100644
--- a/client/coral-admin/src/routes/Moderation/components/StorySearch.js
+++ b/client/coral-admin/src/routes/Moderation/components/StorySearch.js
@@ -24,8 +24,17 @@ const StorySearch = (props) => {
     <div className={styles.container}>
       <div className={styles.positionShim}>
         <div className={styles.headInput}>
-          <input className={styles.searchInput} onChange={props.storySearchChange} />
-          <Button cStyle='blue' className={styles.searchButton} raised>Search</Button>
+          <input
+            className={styles.searchInput}
+            onChange={props.handleSearchChange}
+          />
+          <Button
+            cStyle='blue'
+            className={styles.searchButton}
+            onClick={props.search}
+            raised >
+            Search
+          </Button>
         </div>
         <div className={styles.results}>
           <p className={styles.cta}>Moderate comments on All Stories</p>
@@ -57,8 +66,8 @@ const StorySearch = (props) => {
   );
 };
 
-StorySearch.propTypes = {
-  storySearchChange: PropTypes.func.isRequired
-};
+// StorySearch.propTypes = {
+//   storySearchChange: PropTypes.func.isRequired
+// };
 
 export default withRouter(StorySearch);
diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index eac900d40..24a3d748d 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -25,7 +25,6 @@ import {
   viewUserDetail,
   hideUserDetail,
   setSortOrder,
-  storySearchClear
 } from 'actions/moderation';
 
 import {Spinner} from 'coral-ui';
@@ -307,7 +306,6 @@ const mapDispatchToProps = (dispatch) => ({
     viewUserDetail,
     hideUserDetail,
     setSortOrder,
-    storySearchClear
   }, dispatch),
 });
 
diff --git a/client/coral-admin/src/routes/Moderation/containers/StorySearch.js b/client/coral-admin/src/routes/Moderation/containers/StorySearch.js
index c2c43c6ee..0fc4a79aa 100644
--- a/client/coral-admin/src/routes/Moderation/containers/StorySearch.js
+++ b/client/coral-admin/src/routes/Moderation/containers/StorySearch.js
@@ -7,20 +7,32 @@ import withQuery from 'coral-framework/hocs/withQuery';
 import {storySearchChange} from 'coral-admin/src/actions/moderation';
 
 class StorySearchContainer extends React.Component {
-  searchChange = (e) => {
+
+  handleSearchChange = (e) => {
     const value = e.target.value;
     this.props.storySearchChange(value);
-    this.props.data.refetch();
   }
 
-  componentDidUpdate (prevProps) {
-    if (prevProps.moderation.storySearchString !== this.props.moderation.storySearchString) {
-      this.props.data.refetch();
+  handleEnter = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      this.search();
     }
   }
 
+  search = () => {
+    this.props.data.refetch();
+  }
+
   render () {
-    return <StorySearch searchChange={this.searchChange} {...this.props} />;
+    return (
+      <StorySearch
+        search={this.search}
+        handleSearchChange={this.handleSearchChange}
+        onKeyDownHandler={this.handleEnter}
+        {...this.props}
+      />
+    );
   }
 }