Fix NSFW blurring on search and make search show/hide smarter

ui/js/actions/search.js

@@ -45,3 +45,15 @@ export function doSearchContent(query) {
     })
   }
 }
+
+export function doActivateSearch() {
+  return {
+    type: types.ACTIVATE_SEARCH,
+  }
+}
+
+export function doDeactivateSearch() {
+  return {
+    type: types.DEACTIVATE_SEARCH,
+  }
+}

ui/js/component/fileTileStream/index.js

@@ -35,7 +35,7 @@ const makeSelect = () => {
     fileInfo: selectFileInfoForUri(state, props),
     fetchingAvailability: selectFetchingAvailabilityForUri(state, props),
     selectAvailabilityForUri: selectAvailabilityForUri(state, props),
-    obscureNswf: selectObscureNsfw(state),
+    obscureNsfw: selectObscureNsfw(state),
     metadata: selectMetadataForUri(state, props),
     source: selectSourceForUri(state, props),
   })

ui/js/component/fileTileStream/view.jsx

@@ -75,7 +75,13 @@ class FileTileStream extends React.Component {
       <section className={ 'file-tile card ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseOut.bind(this)}>
         <div className={"row-fluid card__inner file-tile__row"}>
           <div className="span3 file-tile__thumbnail-container">
-            <a href="#" onClick={() => navigate(`show=${uri}`)}><Thumbnail className="file-tile__thumbnail" {... metadata && metadata.thumbnail ? {src: metadata.thumbnail} : {}} alt={'Photo for ' + this.props.uri} /></a>
+            <a href="#" onClick={() => navigate(`show=${uri}`)}>
+              {metadata && metadata.thumbnail ?
+              <Thumbnail key={this.props.uri} className="file-tile__thumbnail" src={metadata.thumbnail} alt={'Photo for ' + this.props.uri} />
+              :
+              <Thumbnail className="file-tile__thumbnail" alt={'Photo for ' + this.props.uri} />
+              }
+              </a>
           </div>
           <div className="span9">
             <div className="card__title-primary">

ui/js/component/header/index.js

@@ -11,6 +11,8 @@ import {
 } from 'actions/app'
 import {
   doSearchContent,
+  doActivateSearch,
+  doDeactivateSearch,
 } from 'actions/search'
 import Header from './view'
 
@@ -22,6 +24,8 @@ const select = (state) => ({
 const perform = (dispatch) => ({
   navigate: (path) => dispatch(doNavigate(path)),
   search: (query) => dispatch(doSearchContent(query)),
+  activateSearch: () => dispatch(doActivateSearch()),
+  deactivateSearch: () => setTimeout(() => { dispatch(doDeactivateSearch()) }, 10),
 })
 
 export default connect(select, perform)(Header)

ui/js/constants/action_types.js

@@ -5,8 +5,6 @@ export const CLOSE_MODAL = 'CLOSE_MODAL'
 export const OPEN_DRAWER = 'OPEN_DRAWER'
 export const CLOSE_DRAWER = 'CLOSE_DRAWER'
 
-export const START_SEARCH = 'START_SEARCH'
-
 export const DAEMON_READY = 'DAEMON_READY'
 
 // Upgrades
@@ -63,3 +61,5 @@ export const DELETE_FILE_COMPLETED = 'DELETE_FILE_COMPLETED'
 export const SEARCH_STARTED = 'SEARCH_STARTED'
 export const SEARCH_COMPLETED = 'SEARCH_COMPLETED'
 export const SEARCH_CANCELLED = 'SEARCH_CANCELLED'
+export const ACTIVATE_SEARCH = 'ACTIVATE_SEARCH'
+export const DEACTIVATE_SEARCH = 'DEACTIVATE_SEARCH'

ui/js/page/discover/index.js

@@ -12,6 +12,7 @@ import {
   selectIsSearching,
   selectSearchQuery,
   selectCurrentSearchResults,
+  selectSearchActivated,
 } from 'selectors/search'
 import DiscoverPage from './view'
 
@@ -20,6 +21,7 @@ const select = (state) => ({
   isSearching: selectIsSearching(state),
   query: selectSearchQuery(state),
   results: selectCurrentSearchResults(state),
+  searchActive: selectSearchActivated(state),
 })
 
 const perform = (dispatch) => ({

ui/js/page/discover/view.jsx

@@ -61,4 +61,22 @@ let DiscoverPage = React.createClass({
   }
 })
 
+// const DiscoverPage = (props) => {
+//   const {
+//     isSearching,
+//     query,
+//     results,
+//     searchActive,
+//   } = props
+//
+//   return (
+//     <main>
+//       { (!searchActive || (!isSearching && !query)) && <FeaturedContent {...props} /> }
+//       { searchActive && isSearching ? <SearchActive /> : null }
+//       { searchActive && !isSearching && query && results.length ? <SearchResults results={results} /> : null }
+//       { searchActive && !isSearching && query && !results.length ? <SearchNoResults query={query} /> : null }
+//     </main>
+//   );
+// }
+
 export default DiscoverPage;

ui/js/reducers/search.js

@@ -41,6 +41,18 @@ reducers[types.SEARCH_CANCELLED] = function(state, action) {
   })
 }
 
+reducers[types.ACTIVATE_SEARCH] = function(state, action) {
+  return Object.assign({}, state, {
+    activated: true,
+  })
+}
+
+reducers[types.DEACTIVATE_SEARCH] = function(state, action) {
+  return Object.assign({}, state, {
+    activated: false,
+  })
+}
+
 export default function reducer(state = defaultState, action) {
   const handler = reducers[action.type];
   if (handler) return handler(state, action);

ui/js/selectors/search.js

@@ -27,3 +27,8 @@ export const selectCurrentSearchResults = createSelector(
   selectSearchResultsByQuery,
   (query, byQuery) => byQuery[query] || []
 )
+
+export const selectSearchActivated = createSelector(
+  _selectState,
+  (state) => !!state.activated
+)