Overlay and Container

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

@@ -214,7 +214,6 @@ export default class Moderation extends Component {
           moderation={this.props.moderation}
           closeSearch={this.closeSearch}
           storySearchChange={this.props.storySearchChange}
-          storySearchClear={this.props.storySearchClear}
         />
       </div>
     );

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

@@ -1,3 +1,14 @@
+.overlay {
+  position: absolute;
+  background-color: transparent;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 99;
+}
+
 .container {
   position: absolute;
   background-color: white;

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

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './StorySearch.css';
 import {Button, Spinner, Icon} from 'coral-ui';
-import {withRouter} from 'react-router';
 import Story from './Story';
 
 const StorySearch = (props) => {
@@ -18,52 +17,49 @@ const StorySearch = (props) => {
     return null;
   }
 
-  const goToStory = (id) => {
-    props.router.push(`/admin/moderate/${id}`);
-    props.closeSearch();
-  };
-
   return (
-    <div className={styles.container}>
-      <div className={styles.positionShim}>
-        <div className={styles.headInput}>
-          <input
-            className={styles.searchInput}
-            onChange={props.handleSearchChange}
-            onKeyDown={props.handleEnter}
-            value={props.searchValue}
-          />
-          <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>
-          <div className={styles.storyList}>
-            <div className={styles.recentStories}>
-              <Icon name="access_time" />
-              <span className={styles.headlineRecent}>Most Recent Stories</span>
+    <div className={styles.overlay} onClick={props.closeSearch}>
+      <div className={styles.container}>
+        <div className={styles.positionShim}>
+          <div className={styles.headInput}>
+            <input
+              className={styles.searchInput}
+              onChange={props.handleSearchChange}
+              onKeyDown={props.handleEnter}
+              value={props.searchValue}
+            />
+            <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>
+            <div className={styles.storyList}>
+              <div className={styles.recentStories}>
+                <Icon name="access_time" />
+                <span className={styles.headlineRecent}>Most Recent Stories</span>
+              </div>
+              {
+                loading
+                ? <Spinner />
+                : assets.map((story, i) => {
+                  const storyOpen = story.closedAt === null || new Date(story.closedAt) > new Date();
+                  return <Story
+                    key={i}
+                    id={story.id}
+                    title={story.title}
+                    createdAt={new Date(story.created_at).toISOString()}
+                    open={storyOpen}
+                    author={story.author}
+                    goToStory={props.goToStory}
+                  />;
+                })
+              }
             </div>
-            {
-              loading
-              ? <Spinner />
-              : assets.map((story, i) => {
-                const storyOpen = story.closedAt === null || new Date(story.closedAt) > new Date();
-                return <Story
-                  key={i}
-                  id={story.id}
-                  title={story.title}
-                  createdAt={new Date(story.created_at).toISOString()}
-                  open={storyOpen}
-                  author={story.author}
-                  goToStory={goToStory}
-                />;
-              })
-            }
           </div>
         </div>
       </div>
@@ -72,9 +68,11 @@ const StorySearch = (props) => {
 };
 
 StorySearch.propTypes = {
-  handleSearchChange: PropTypes.func.isRequired,
   search: PropTypes.func.isRequired,
-  moderation: PropTypes.object.isRequired
+  goToStory: PropTypes.func.isRequired,
+  closeSearch: PropTypes.func.isRequired,
+  moderation: PropTypes.object.isRequired,
+  handleSearchChange: PropTypes.func.isRequired
 };
 
-export default withRouter(StorySearch);
+export default StorySearch;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import {compose, gql} from 'react-apollo';
 import StorySearch from '../components/StorySearch';
+import {withRouter} from 'react-router';
 import withQuery from 'coral-framework/hocs/withQuery';
 
 class StorySearchContainer extends React.Component {
@@ -31,12 +32,19 @@ class StorySearchContainer extends React.Component {
     this.props.storySearchChange(searchValue);
   }
 
+  goToStory = (id) => {
+    const {router, closeSearch} = this.props;
+    router.push(`/admin/moderate/${id}`);
+    closeSearch();
+  }
+
   render () {
     return (
       <StorySearch
         search={this.search}
-        searchValue={this.state.searchValue}
+        goToStory={this.goToStory}
         handleEnter={this.handleEnter}
+        searchValue={this.state.searchValue}
         handleSearchChange={this.handleSearchChange}
         {...this.props}
       />
@@ -66,5 +74,6 @@ export const withAssetSearchQuery = withQuery(gql`
 });
 
 export default compose(
-  withAssetSearchQuery
+  withAssetSearchQuery,
+  withRouter
 )(StorySearchContainer);