diff --git a/src/app/assets/stylesheets/_themes.scss b/src/app/assets/stylesheets/_themes.scss
index 7478604ec1dfd54f50b51bcc773560e6c68d59f3..37b782ce1167cbe3ac0436fdeae061184ca5d598 100755
--- a/src/app/assets/stylesheets/_themes.scss
+++ b/src/app/assets/stylesheets/_themes.scss
@@ -14,6 +14,7 @@ $themes: (
moduleMediumBackgroundColor: $color-white,
navBackgroundColor: $color-white,
highlightBackgroundColor: #f3faf0,
+ alertBackgroundColor: #ffa6a6,
tableRowEvenBackgroundColor: #f4f4f4,
border: 1px solid $color-border-light,
borderLight: 1px solid $color-border-light-lightest,
@@ -54,6 +55,7 @@ $themes: (
moduleMediumBackgroundColor: $color-transparent,
navBackgroundColor: $color-white,
highlightBackgroundColor: #f3faf0,
+ alertBackgroundColor: #ffa6a6,
tableRowOddBackgroundColor: #e5e5e5,
tableRowEvenBackgroundColor: #f4f4f4,
border: 1px solid $color-border-light,
@@ -96,6 +98,7 @@ $themes: (
moduleMediumBackgroundColor: $color-background-dark,
navBackgroundColor: $color-background-less-dark,
highlightBackgroundColor: $color-hive-black-darkest,
+ alertBackgroundColor: #ffa6a6,
tableRowOddBackgroundColor: #283239,
tableRowEvenBackgroundColor: #212C33,
border: 1px solid $color-border-dark-lightest,
diff --git a/src/app/assets/stylesheets/foundation-overrides.scss b/src/app/assets/stylesheets/foundation-overrides.scss
index 5db2f84e8da86d557658ac2598ab0b7a8cccb7d5..5a4ef1456d33d33da4c6e202fc449d64beef02aa 100644
--- a/src/app/assets/stylesheets/foundation-overrides.scss
+++ b/src/app/assets/stylesheets/foundation-overrides.scss
@@ -12,25 +12,25 @@
box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.75);
z-index: 1000;
font-size: inherit;
- background-color: $color-white;
+ background-color: $color-white;
.VerticalMenu {
a:hover {
background-color: #f6f6f6;
color: $color-hive-red-dark;
- }
+ }
}
}
a {
transition: 0.2s all ease-in-out;
@include themify($themes) {
- color: themed('textColorAccent');
- }
+ color: themed('textColorAccent');
+ }
&:hover, &:focus {
@include themify($themes) {
- color: themed('textColorAccentHover');
- }
+ color: themed('textColorAccentHover');
+ }
}
}
@@ -55,10 +55,17 @@ button, .button {
.callout {
margin-top: 1rem;
@include themify($themes) {
- color: themed('textColorPrimary');
- background-color: themed('highlightBackgroundColor');
- border: themed('border');
- }
+ color: themed('textColorPrimary');
+ background-color: themed('highlightBackgroundColor');
+ border: themed('border');
+ }
+ &.alert {
+ @include themify($themes) {
+ color: themed('textColorPrimary');
+ background-color: themed('alertBackgroundColor');
+ border: themed('border');
+ }
+ }
}
.close-button {
@@ -70,19 +77,19 @@ button, .button {
font-size: 2em;
line-height: 1;
@include themify($themes) {
- color: themed('textColorSecondary');
- }
+ color: themed('textColorSecondary');
+ }
&:hover, &:focus {
@include themify($themes) {
- color: themed('textColorAccent');
- }
+ color: themed('textColorAccent');
+ }
}
}
hr {
@include themify($themes) {
- border-bottom: themed('border');
- }
+ border-bottom: themed('border');
+ }
}
table {
@@ -92,21 +99,21 @@ table {
thead, tbody, tfoot {
@include themify($themes) {
- background-color: themed('backgroundColor');
- }
+ background-color: themed('backgroundColor');
+ }
}
thead {
@include themify($themes) {
- background-color: themed('tableRowEvenBackgroundColor');
- color: themed('textColorPrimary');
- }
+ background-color: themed('tableRowEvenBackgroundColor');
+ color: themed('textColorPrimary');
+ }
}
tbody tr:nth-child(even) {
@include themify($themes) {
- background-color: themed('tableRowEvenBackgroundColor');
- }
+ background-color: themed('tableRowEvenBackgroundColor');
+ }
}
.reveal-overlay {
@@ -115,7 +122,7 @@ tbody tr:nth-child(even) {
}
.reveal {
- box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.1), 7px 7px 0 0 $color-hive-red;
+ box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.1), 7px 7px 0 0 $color-hive-red;
border-radius: 0 30px;
border: transparent;
transition: 0.2s all ease-in-out;
diff --git a/src/app/components/all.scss b/src/app/components/all.scss
index 57d31ae66f0080b3c74795558e59e52abb2c5d2e..b6ee77359599f86774eb5a3e69fb6ae4af1fd602 100644
--- a/src/app/components/all.scss
+++ b/src/app/components/all.scss
@@ -29,7 +29,7 @@
@import "./elements/AuthorDropdown";
@import "./elements/UserNames";
@import "./elements/SortOrder/styles";
-@import "./elements/SearchInput/styles";
+@import "./elements/ElasticSearchInput/styles";
@import "./elements/IconButton/styles";
@import "./elements/NativeSelect/styles";
@import "./elements/SteemLogo/styles";
diff --git a/src/app/components/cards/PostsList.jsx b/src/app/components/cards/PostsList.jsx
index 7763cfe048a1ed04033e332e3fc5ffa55488f672..d86e20737053d33aa87e70a7a9ec97d4b6b026ac 100644
--- a/src/app/components/cards/PostsList.jsx
+++ b/src/app/components/cards/PostsList.jsx
@@ -67,15 +67,8 @@ class PostsList extends React.Component {
const scrollTop =
window.pageYOffset !== undefined
? window.pageYOffset
- : (
- document.documentElement ||
- document.body.parentNode ||
- document.body
- ).scrollTop;
- if (
- topPosition(el) + el.offsetHeight - scrollTop - window.innerHeight <
- 10
- ) {
+ : (document.documentElement || document.body.parentNode || document.body).scrollTop;
+ if (topPosition(el) + el.offsetHeight - scrollTop - window.innerHeight < 10) {
const { loadMore, posts } = this.props;
if (loadMore && posts.size > 0) loadMore();
}
@@ -107,14 +100,7 @@ class PostsList extends React.Component {
}
render() {
- const {
- posts,
- loading,
- category,
- order,
- nsfwPref,
- hideCategory,
- } = this.props;
+ const { posts, loading, category, order, nsfwPref, hideCategory } = this.props;
const { thumbSize } = this.state;
const renderSummary = items =>
@@ -141,21 +127,10 @@ class PostsList extends React.Component {
</div>
</div>
);
- } else if (
- this.props.shouldSeeAds &&
- i >= every &&
- i % every === 0
- ) {
+ } else if (this.props.shouldSeeAds && i >= every && i % every === 0) {
summary.push(
- <div
- key={`ad-${i}`}
- className="articles__content-block--ad"
- >
- <GptAd
- tags={[category]}
- type="Freestar"
- id="bsa-zone_1566495089502-1_123456"
- />
+ <div key={`ad-${i}`} className="articles__content-block--ad">
+ <GptAd tags={[category]} type="Freestar" id="bsa-zone_1566495089502-1_123456" />
</div>
);
}
@@ -165,19 +140,14 @@ class PostsList extends React.Component {
return (
<div id="posts_list" className="PostsList">
- <ul
- className="PostsList__summaries hfeed"
- itemScope
- itemType="http://schema.org/blogPosts"
- >
- {renderSummary(posts)}
- </ul>
+ {!loading && (
+ <ul className="PostsList__summaries hfeed" itemScope itemType="http://schema.org/blogPosts">
+ {renderSummary(posts)}
+ </ul>
+ )}
{loading && (
<center>
- <LoadingIndicator
- style={{ marginBottom: '2rem' }}
- type="circle"
- />
+ <LoadingIndicator style={{ marginBottom: '2rem' }} type="circle" />
</center>
)}
</div>
@@ -190,20 +160,12 @@ export default connect(
const userPreferences = state.app.get('user_preferences').toJS();
const nsfwPref = userPreferences.nsfwPref || 'warn';
const shouldSeeAds = state.app.getIn(['googleAds', 'enabled']);
- const videoAdsEnabled = state.app.getIn([
- 'googleAds',
- 'videoAdsEnabled',
- ]);
+ const videoAdsEnabled = state.app.getIn(['googleAds', 'videoAdsEnabled']);
const adSlots = state.app.getIn(['googleAds', 'adSlots']).toJS();
const current = state.user.get('current');
- const username = current
- ? current.get('username')
- : state.offchain.get('account');
- const mutes = state.global.getIn(
- ['follow', 'getFollowingAsync', username, 'ignore_result'],
- List()
- );
+ const username = current ? current.get('username') : state.offchain.get('account');
+ const mutes = state.global.getIn(['follow', 'getFollowingAsync', username, 'ignore_result'], List());
let { posts } = props;
if (typeof posts === 'undefined') {
diff --git a/src/app/components/elements/ElasticSearchInput/index.jsx b/src/app/components/elements/ElasticSearchInput/index.jsx
index 1f154c7b40e20fefe071bc728e5df450581fe938..4f39a6ee63c5464f2cd78bcfb4525d70f318fce6 100644
--- a/src/app/components/elements/ElasticSearchInput/index.jsx
+++ b/src/app/components/elements/ElasticSearchInput/index.jsx
@@ -9,17 +9,20 @@ class ElasticSearchInput extends React.Component {
handleSubmit: PropTypes.func,
expanded: PropTypes.bool,
initValue: PropTypes.string,
+ loading: PropTypes.bool,
};
static defaultProps = {
handleSubmit: null,
expanded: true,
initValue: '',
+ loading: true,
};
constructor(props) {
super(props);
this.state = {
value: this.props.initValue ? this.props.initValue : '',
+ sortOrder: 'newest',
};
this.handleChange = this.handleChange.bind(this);
this.onSearchSubmit = this.onSearchSubmit.bind(this);
@@ -29,19 +32,37 @@ class ElasticSearchInput extends React.Component {
this.setState({ value: event.target.value });
}
- onSearchSubmit = e => {
- e.preventDefault();
+ doSearch(searchQuery, sortOrder) {
const { handleSubmit, redirect } = this.props;
- handleSubmit && handleSubmit(this.state.value);
- redirect && browserHistory.push(`/search?q=${this.state.value}`);
+ if (handleSubmit) {
+ handleSubmit(searchQuery, sortOrder);
+ }
+ if (redirect) {
+ browserHistory.push(`/search?q=${searchQuery}&s=${sortOrder}`);
+ }
+ }
+
+ onSearchSubmit = event => {
+ event.preventDefault();
+ const { value: searchQuery, sortOrder } = this.state;
+ this.doSearch(searchQuery, sortOrder);
+ };
+
+ onSortOrderChange = event => {
+ const sortOrder = event.target.value;
+ const { value: searchQuery } = this.state;
+ this.setState({ value: searchQuery, sortOrder });
+
+ this.doSearch(searchQuery, sortOrder);
};
render() {
- const formClass = this.props.expanded
- ? 'search-input--expanded'
- : 'search-input';
+ const { loading, expanded } = this.props;
+ const { value: searchQuery, sortOrder } = this.state;
+ const formClass = expanded ? 'search-input--expanded' : 'search-input';
+
return (
- <span>
+ <div>
<form className={formClass} onSubmit={this.onSearchSubmit}>
<svg
className="search-input__icon"
@@ -65,10 +86,24 @@ class ElasticSearchInput extends React.Component {
type="search"
placeholder={tt('g.search')}
onChange={this.handleChange}
- value={this.state.value}
+ value={searchQuery}
/>
</form>
- </span>
+
+ {expanded &&
+ !loading && (
+ <div className="search-sort-order">
+ <div className="search-sort-order--title">{tt('searchinput.sortBy')}</div>
+ <div className="search-sort-order--select">
+ <select onChange={this.onSortOrderChange} defaultValue={sortOrder}>
+ <option value="newest">{tt('searchinput.newest')}</option>
+ <option value="popularity">{tt('searchinput.popularity')}</option>
+ <option value="relevance">{tt('searchinput.relevance')}</option>
+ </select>
+ </div>
+ </div>
+ )}
+ </div>
);
}
}
diff --git a/src/app/components/elements/ElasticSearchInput/styles.scss b/src/app/components/elements/ElasticSearchInput/styles.scss
index 2ed47dd39bdd808ea94adaea3b827b632a7204a8..7b38fc42e4c2d64b30d3383f1539ab3c0e706a3d 100644
--- a/src/app/components/elements/ElasticSearchInput/styles.scss
+++ b/src/app/components/elements/ElasticSearchInput/styles.scss
@@ -10,26 +10,23 @@ form.search-input {
}
stroke-width: 1.2;
fill: none;
-
}
input.search-input__inner {
outline: none;
- padding: 9px 10px 9px 32px;
- width: 55px;
+ padding: 9px 10px 11px 32px;
border-radius: 25pc;
transition: all 0.3s ease-in-out;
font-size: 16px;
background: transparent;
- box-shadow: none !important;
+ box-shadow: none;
width: 42px;
height: 42px;
color: transparent;
cursor: pointer;
- transition: all 0.3s ease-in-out;
font-family: $font-primary;
- border: 1px solid rgba(173, 173, 173, 0.6);
-
+ border: 1px solid rgba(202, 202, 202, 0.6);
+
&::placeholder {
color: transparent
}
@@ -38,13 +35,11 @@ form.search-input {
}
&:focus {
width: 180px;
- background-color: $color-white;
@include themify($themes) {
border: themed('moduleBackgroundColor');
}
border-color: $color-hive-red;
// box-shadow: 0 0 5px rgba(109,207,246,.5);
- width: 180px;
padding-left: 2.5rem;
@include themify($themes) {
color: themed('textColorPrimary');
@@ -54,7 +49,7 @@ form.search-input {
&::placeholder {
color: $color-blue-dark;
@include themify($themes) {
- color: themed('textColorSecondary');
+ // color: themed('textColorSecondary');
}
}
}
@@ -64,4 +59,78 @@ form.search-input {
input.search-input__inner.search-input__inner--small {
}
-}
\ No newline at end of file
+}
+
+form.search-input--expanded {
+
+ height: 42px;
+
+ svg.search-input__icon {
+ position: absolute;
+ pointer-events: none;
+ @include themify($themes) {
+ stroke: themed('colorAccentReverse');
+ }
+ stroke-width: 1.2;
+ fill: none;
+ }
+
+ &:hover {
+ svg.search-input__icon {
+ // stroke: $color-white;
+ }
+ }
+
+ input.search-input__inner {
+ outline: none;
+ padding: 9px 10px 11px 32px;
+ border-radius: 25pc;
+ transition: all 0.3s ease-in-out;
+ font-size: 16px;
+ background: transparent;
+ height: 42px;
+ color: transparent;
+ font-family: $font-primary;
+ width: 100%;
+
+ border-color: $color-hive-red;
+ // box-shadow: 0 0 5px rgba(109,207,246,.5);
+ padding-left: 2.5rem;
+ cursor: auto;
+ border: 1px solid rgba(202, 202, 202, 0.6);
+
+
+ @include themify($themes) {
+ color: themed('textColorPrimary');
+ }
+ &:hover {
+ // background-color: $color-hive-red;
+ // color: $color-white;
+ }
+ &::placeholder {
+ @include themify($themes) {
+ color: themed('textColorSecondary');
+ }
+ }
+ &:hover::placeholder {
+ // color: $color-text-white;
+ }
+ }
+
+ /* small */
+ input.search-input__inner.search-input__inner--small {
+
+ }
+}
+
+.search-sort-order {
+ margin-top: 10px;
+}
+
+.search-sort-order--title {
+ margin-bottom: 3px;
+}
+
+.search-sort-order--select select {
+ width: 200px;
+}
diff --git a/src/app/components/pages/SearchIndex.jsx b/src/app/components/pages/SearchIndex.jsx
index f4adc44da4701e58dee330c34ac512b454e1f77c..b56984a202644aced90d50edc45408269ae0baa8 100644
--- a/src/app/components/pages/SearchIndex.jsx
+++ b/src/app/components/pages/SearchIndex.jsx
@@ -1,12 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
-import tt from 'counterpart';
+import _ from 'lodash';
import { search } from 'app/redux/SearchReducer';
import Callout from 'app/components/elements/Callout';
import ElasticSearchInput from 'app/components/elements/ElasticSearchInput';
import PostsList from 'app/components/cards/PostsList';
-import { List, Map, fromJS } from 'immutable';
+import { fromJS } from 'immutable';
class SearchIndex extends React.Component {
static propTypes = {
@@ -17,6 +17,7 @@ class SearchIndex extends React.Component {
s: PropTypes.string,
}).isRequired,
scrollId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
+ error: PropTypes.object.isRequired,
result: PropTypes.arrayOf(
PropTypes.shape({
app: PropTypes.string,
@@ -42,14 +43,13 @@ class SearchIndex extends React.Component {
constructor(props) {
super(props);
- this.state = {};
this.fetchMoreResults = this.fetchMoreResults.bind(this);
}
componentDidMount() {
const { performSearch, params } = this.props;
if (!params.s) {
- params.s = undefined;
+ params.s = 'newest';
}
if (params.q) {
performSearch(params);
@@ -67,28 +67,40 @@ class SearchIndex extends React.Component {
}
render() {
- const { result, loading, params, performSearch } = this.props;
+ const { result, loading, params, performSearch, error } = this.props;
+ const errorMessage = _.get(error, 'message', undefined);
const searchResults = (
<PostsList ref="list" posts={fromJS(result)} loading={loading} loadMore={this.fetchMoreResults} />
);
return (
- <div className={'PostsIndex row ' + 'layout-list'}>
+ <div className="PostsIndex row layout-list">
<article className="articles">
<div className="articles__header row">
<div className="small-12 medium-12 large-12 column">
<ElasticSearchInput
initValue={params.q}
- expanded={true}
- handleSubmit={q => {
- performSearch({ q, s: undefined });
+ expanded
+ handleSubmit={(q, s) => {
+ performSearch({ q, s });
}}
- redirect={true}
+ redirect
+ loading={loading}
/>
</div>
</div>
- {!loading && result.length === 0 ? <Callout>{'Nothing was found.'}</Callout> : searchResults}
+ {!loading && !errorMessage && result.length === 0 ? (
+ <Callout>Nothing was found.</Callout>
+ ) : (
+ searchResults
+ )}
+ {!loading &&
+ errorMessage && (
+ <Callout title="There was an error" type="alert">
+ {errorMessage}
+ </Callout>
+ )}
</article>
</div>
);
@@ -103,6 +115,7 @@ module.exports = {
return {
loading: state.search.get('pending'),
result: state.search.get('result').toJS() || {},
+ error: state.search.get('error') || {},
scrollId: state.search.get('scrollId'),
isBrowser: process.env.BROWSER,
params,
diff --git a/src/app/locales/en.json b/src/app/locales/en.json
index 0a112473fd839a004ba8efc9ef78d853e0616c0a..68527d09f367a661306498017a9bb9b5e3b4139f 100644
--- a/src/app/locales/en.json
+++ b/src/app/locales/en.json
@@ -869,5 +869,11 @@
"next": "Next",
"last": "Last",
"users_on_list": "Users On List: %(user_count)s"
+ },
+ "searchinput": {
+ "sortBy": "Sort by:",
+ "newest": "Newest",
+ "popularity": "Popularity",
+ "relevance": "Relevance"
}
}
diff --git a/src/app/redux/SearchReducer.js b/src/app/redux/SearchReducer.js
index 473943ba8419847e66db23a238aba0e84fbdebe8..825a4fb70cd68ee286fbc7b1d5559f1e66b7d0b0 100644
--- a/src/app/redux/SearchReducer.js
+++ b/src/app/redux/SearchReducer.js
@@ -13,7 +13,7 @@ const defaultSearchState = Map({
});
export default function reducer(state = defaultSearchState, action) {
- const payload = action.payload;
+ const { payload } = action;
switch (action.type) {
// Has a saga watcher.
@@ -22,6 +22,8 @@ export default function reducer(state = defaultSearchState, action) {
}
case SEARCH_PENDING: {
const { pending } = payload;
+ state.setIn(['result'], undefined);
+ state.setIn(['error'], undefined);
return state.setIn(['pending'], pending);
}
case SEARCH_ERROR: {
@@ -29,15 +31,17 @@ export default function reducer(state = defaultSearchState, action) {
return state.setIn(['error'], error);
}
case SEARCH_RESULT: {
- const { hits, results, scroll_id, append } = payload;
+ const { results, scroll_id, append } = payload;
if (results === null || results === undefined) return state;
const posts = List(
results.map(post => {
post.created = post.created_at;
+ post.author_rep = parseFloat(post.author_rep);
post.author_reputation = post.author_rep;
post.stats = { total_votes: post.total_votes };
+
return fromJS(post);
})
);
@@ -66,7 +70,7 @@ export const searchPending = payload => ({
payload,
});
export const searchError = payload => ({
- type: SEARCH_PENDING,
+ type: SEARCH_ERROR,
payload,
});
diff --git a/src/app/redux/SearchSaga.js b/src/app/redux/SearchSaga.js
index 4a8c65e20182d3c50620991f65fe76aef8a2ecdd..68f4a03ef907529f224a43d7e076b28dd0ba09a6 100644
--- a/src/app/redux/SearchSaga.js
+++ b/src/app/redux/SearchSaga.js
@@ -6,7 +6,7 @@ export const searchWatches = [takeEvery('search/SEARCH_DISPATCH', search)];
export function* search(action) {
const { q, s, scroll_id } = action.payload;
- const append = action.payload.scroll_id ? true : false;
+ const append = !!scroll_id;
yield put(reducer.searchPending({ pending: true }));
try {
const requestParams = {
@@ -17,10 +17,13 @@ export function* search(action) {
},
};
const searchResponse = yield call(conductSearch, requestParams);
- const searchJSON = yield call([searchResponse, searchResponse.json]);
- yield put(reducer.searchResult({ ...searchJSON, append }));
+ if (searchResponse.status >= 200 && searchResponse.status < 300) {
+ const searchJSON = yield call([searchResponse, searchResponse.json]);
+ yield put(reducer.searchResult({ ...searchJSON, append }));
+ } else {
+ yield put(reducer.searchError({ error: new Error('There was an error') }));
+ }
} catch (error) {
- console.log('Search error', error);
yield put(reducer.searchError({ error }));
}
yield put(reducer.searchPending({ pending: false }));
diff --git a/src/app/utils/ExtractContent.js b/src/app/utils/ExtractContent.js
index dbfb2b3fc682e2989599847ebf9f0481ec1bba56..c31203b0eea385da03f91863ee9077702f6ad094 100644
--- a/src/app/utils/ExtractContent.js
+++ b/src/app/utils/ExtractContent.js
@@ -89,7 +89,7 @@ export function extractBodySummary(body, stripQuotes = false) {
export function getPostSummary(jsonMetadata, body, stripQuotes = false) {
let shortDescription;
- if (typeof jsonMetadata.get === 'function') {
+ if (jsonMetadata && typeof jsonMetadata.get === 'function') {
shortDescription = jsonMetadata.get('description');
} else {
shortDescription = _.get(jsonMetadata, 'description');