- { formatMessage(messages.filter_x, {title: this.props.title }) } - { this.props.title } -
- { items } - { this.props.filter[this.props.title] ? - - { formatMessage(messages.clear_filter) } - - : '' - } +
+
+ { active ? : null }
+ { item.title }
+ { item.total ? { item.total } : '' }
+
);
- }
-}
-
-module.exports.Filter = injectIntl(Filter);
\ No newline at end of file
+ });
+
+ return (
+
+ { title }
+ { items }
+
+ );
+};
+
+Filter.propTypes = {
+ title: PropTypes.string.isRequired,
+ qsTitle: PropTypes.string.isRequired,
+ data: PropTypes.array.isRequired,
+ multiSelect: PropTypes.bool,
+ qs: PropTypes.object.isRequired,
+ cssClass: PropTypes.string,
+ buildUrl: PropTypes.func.isRequired,
+};
+
+export default Filter;
\ No newline at end of file
diff --git a/frontend/modules/browse/components/ListRecipes.js b/frontend/modules/browse/components/ListRecipes.js
index 690b8acb..497ff77b 100644
--- a/frontend/modules/browse/components/ListRecipes.js
+++ b/frontend/modules/browse/components/ListRecipes.js
@@ -6,59 +6,57 @@ import Ratings from '../../recipe/components/Ratings';
require("./../css/list-recipes.scss");
-class ListRecipes extends React.Component {
- getRecipeImage(recipe) {
+const ListRecipes = ({ data, format }) => {
+ const getRecipeImage = (recipe) => {
if (recipe.photo_thumbnail) {
return recipe.photo_thumbnail;
} else {
const images = ['fish', 'fried-eggs', 'pizza', 'soup', 'steak'];
return '/images/' + images[Math.floor(Math.random(0) * images.length)] + '.png';
}
- }
+ };
- render() {
- const recipes = this.props.data.map((recipe) => {
- const link = '/recipe/' + recipe.id;
- return (
-
-
-
-
- 
-
-
-
-
-
- { recipe.title }
-{ recipe.info }
-
-
- { recipe.pub_date }
-
-
-
{ recipe.pub_date }
+ const recipes = data.map((recipe) => { + const link = '/recipe/' + recipe.id; + return ( +
+
+
+ { title }
+
+
+ );
- _onClick(event) {
- event.preventDefault();
- if (this.props.filter) {
- this.props.filter('offset', parseInt(event.target.name));
- }
- }
+ const numbers = (offset, limit, count) => {
+ let numbers = [];
- render() {
- let offset = this.props.offset ? parseInt(this.props.offset) : 0;
- let limit = this.props.limit ? parseInt(this.props.limit) : 0;
- let count = this.props.count ? parseInt(this.props.count) : 0;
- let next = offset + limit;
- let previous = offset - limit;
+ const min = 2, max = 5;
+ // Make sure we start at the min value
+ let start = offset - min < 1 ? 1 : offset - min;
+ // Make sure we start at the max value
+ start = start > count/limit-max ? count/limit-max : start;
+ // Only show data if we have results
+ start = start < 1 ? 1 : start;
- const {formatMessage} = this.props.intl;
- const messages = defineMessages({
- newer: {
- id: 'pagination.newer',
- description: 'Newer content link text',
- defaultMessage: 'Newer',
- },
- older: {
- id: 'pagination.older',
- description: 'Older content link text',
- defaultMessage: 'Older',
- }
- });
+ for (let i = start; i < count/limit && i < max + start; i++) {
+ numbers.push(link(i+1, limit*i, i+1, offset==limit*i))
+ }
+ return numbers
+ };
- return (
-
+
- );
- });
-
- return (
-
+
+
+
+
+
+
+
{ recipe.title }
+{ recipe.info }
+{ recipe.pub_date }
+
+
+ { recipe.pub_date }
+
- { recipes }
);
- }
-}
+ });
+
+ return (
+
+ { recipes }
+
+ );
+};
ListRecipes.propTypes = {
format: PropTypes.string.isRequired,
data: PropTypes.array.isRequired
};
-module.exports = ListRecipes;
+export default ListRecipes;
diff --git a/frontend/modules/browse/components/Loading.js b/frontend/modules/browse/components/Loading.js
new file mode 100644
index 00000000..4b06854b
--- /dev/null
+++ b/frontend/modules/browse/components/Loading.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import Spinner from 'react-spinkit';
+
+const Loading = () => {
+ return (
+
+
+ )
+};
+
+export default Loading;
\ No newline at end of file
diff --git a/frontend/modules/browse/components/NoResults.js b/frontend/modules/browse/components/NoResults.js
new file mode 100644
index 00000000..4749bfbe
--- /dev/null
+++ b/frontend/modules/browse/components/NoResults.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+ injectIntl,
+ defineMessages
+} from 'react-intl';
+
+const NoResults = ({intl}) => {
+ const messages = defineMessages({
+ no_results: {
+ id: 'browse.no_results',
+ description: 'No results header',
+ defaultMessage: 'Sorry, there are no results for your search.',
+ }
+ });
+
+ return (
+
+
+
+
+
+
+
+
+ )
+};
+
+NoResults.propTypes = {
+ intl: PropTypes.object
+};
+
+export default injectIntl(NoResults);
\ No newline at end of file
diff --git a/frontend/modules/browse/components/Pagination.js b/frontend/modules/browse/components/Pagination.js
index cd9b95bb..bbadefaa 100644
--- a/frontend/modules/browse/components/Pagination.js
+++ b/frontend/modules/browse/components/Pagination.js
@@ -1,71 +1,54 @@
import React from 'react'
-import {
- injectIntl,
- IntlProvider,
- defineMessages,
- formatMessage
-} from 'react-intl';
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Link } from 'react-router-dom'
-class Pagination extends React.Component {
- constructor(props) {
- super(props);
+const Pagination = ({ offset, limit, count, buildUrl }) => {
+ offset = offset ? parseInt(offset) : 0;
+ limit = limit ? parseInt(limit) : 0;
+ count = count ? parseInt(count) : 0;
+ let next = offset + limit;
+ let previous = offset - limit;
- this._onClick = this._onClick.bind(this);
- }
+ const link = (title, offset, key, active) => (
+
+
+
+
+
+
+ { intl.formatMessage(messages.no_results) }
+-
-
- - { (previous >= 0) ? - - ← { formatMessage(messages.newer) } - - : '' - } - -
- - { (next < count) ? - - { formatMessage(messages.older) } → - - : '' - } - + return ( +
+
+ )
+};
+
+Pagination.propTypes = {
+ buildUrl: PropTypes.func.isRequired
+};
-module.exports.Pagination = injectIntl(Pagination);
+export default Pagination;
diff --git a/frontend/modules/browse/components/Results.js b/frontend/modules/browse/components/Results.js
new file mode 100644
index 00000000..f61080dc
--- /dev/null
+++ b/frontend/modules/browse/components/Results.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import ListRecipes from './ListRecipes'
+import Pagination from './Pagination'
+
+const Results = ({ search, qs, defaults, buildUrl }) => {
+ return (
+ -
+ { (previous >= 0) ? link('←', previous, 'previous') : '' }
+ { link('1', 0, 'first', offset==0) }
+ { numbers(offset, limit, count) }
+ { (next < count) ? link('→', next, 'next') : '' }
+
+ )
+};
+
+Results.propTypes = {
+ search: PropTypes.object,
+ qs: PropTypes.object,
+ buildUrl: PropTypes.func
+};
+
+export default Results;
\ No newline at end of file
diff --git a/frontend/modules/browse/components/Search.js b/frontend/modules/browse/components/Search.js
new file mode 100644
index 00000000..f6ac4237
--- /dev/null
+++ b/frontend/modules/browse/components/Search.js
@@ -0,0 +1,59 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import SearchMenu from '../components/SearchMenu'
+import SearchBar from '../components/SearchBar'
+import Results from '../components/Results'
+import NoResults from '../components/NoResults'
+import Loading from '../components/Loading'
+
+const Search = ({ search, courses, cuisines, ratings, qs, qsString, buildUrl, doSearch, defaultFilters }) => {
+ if (Object.keys(search.results).length > 0) {
+ return (
+
+
+
+
+
+
+
+
+ );
+ } else {
+ return
+
+
+
+
+
+
- { formatMessage(messages.search) }:
- { formatMessage(messages.search_mobile) }:
+
+ { formatMessage(messages.search) }:
+
+
+ { formatMessage(messages.search_mobile) }:
+
+
+ );
+
+ return (
+
+
+
+ { mobileText }
+
+
+ { activeFilter ? mobileReset() : '' }
+
+
+
+ );
+ }
+}
+
+SearchMenu.propTypes = {
+ qs: PropTypes.object.isRequired,
+ courses: PropTypes.array,
+ cuisines: PropTypes.array,
+ ratings: PropTypes.array,
+ buildUrl: PropTypes.func.isRequired,
+};
+
+export default injectIntl(SearchMenu);
diff --git a/frontend/modules/browse/constants/FilterConstants.js b/frontend/modules/browse/constants/FilterConstants.js
new file mode 100644
index 00000000..3da1683b
--- /dev/null
+++ b/frontend/modules/browse/constants/FilterConstants.js
@@ -0,0 +1,9 @@
+
+export default {
+ BROWSE_FILTER_LOAD: 'BROWSE_FILTER_LOAD',
+ BROWSE_FILTER_ERROR: 'BROWSE_FILTER_ERROR',
+ BROWSE_FILTER_LOADING: 'BROWSE_FILTER_LOADING',
+ BROWSE_FILTER_COURSE: 'BROWSE_FILTER_COURSE',
+ BROWSE_FILTER_CUISINE: 'BROWSE_FILTER_CUISINE',
+ BROWSE_FILTER_RATING: 'BROWSE_FILTER_RATING'
+};
\ No newline at end of file
diff --git a/frontend/modules/browse/constants/SearchConstants.js b/frontend/modules/browse/constants/SearchConstants.js
new file mode 100644
index 00000000..5dbc28ed
--- /dev/null
+++ b/frontend/modules/browse/constants/SearchConstants.js
@@ -0,0 +1,5 @@
+
+export default {
+ BROWSE_SEARCH_RESULTS: 'BROWSE_SEARCH_RESULTS',
+ BROWSE_SEARCH_LOADING: 'BROWSE_SEARCH_LOADING',
+};
\ No newline at end of file
diff --git a/frontend/modules/browse/containers/Browse.js b/frontend/modules/browse/containers/Browse.js
new file mode 100644
index 00000000..0c811c09
--- /dev/null
+++ b/frontend/modules/browse/containers/Browse.js
@@ -0,0 +1,161 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import queryString from 'query-string'
+import { injectIntl } from 'react-intl';
+
+import history from '../../common/history'
+import Search from '../components/Search'
+
+import * as SearchActions from '../actions/SearchActions'
+import * as FilterActions from '../actions/FilterActions'
+import DefaultFilters from '../constants/DefaultFilters'
+import documentTitle from '../../common/documentTitle'
+
+class Browse extends React.Component {
+ componentDidMount() {
+ documentTitle(this.props.intl.messages['nav.recipes']);
+ this.reloadData(queryString.parse(this.props.location.search))
+ }
+
+ componentWillUnmount() {
+ documentTitle();
+ }
+
+ componentWillReceiveProps(nextProps) {
+ let query = queryString.parse(this.props.location.search);
+ let nextQuery = queryString.parse(nextProps.location.search);
+ if (query.offset !== nextQuery.offset) {
+ this.reloadData(nextQuery);
+ } else if (query.limit !== nextQuery.limit) {
+ this.reloadData(nextQuery);
+ } else if (query.ordering !== nextQuery.ordering) {
+ this.reloadData(nextQuery);
+ } else if (query.offset !== nextQuery.offset) {
+ this.reloadData(nextQuery);
+ } else if (query.course !== nextQuery.course) {
+ this.reloadData(nextQuery);
+ } else if (query.cuisine !== nextQuery.cuisine) {
+ this.reloadData(nextQuery);
+ } else if (query.rating !== nextQuery.rating) {
+ this.reloadData(nextQuery);
+ } else if (query.search !== nextQuery.search) {
+ this.reloadData(nextQuery);
+ }
+ }
+
+ reloadData(qs) {
+ if (!this.props.search.results[queryString.stringify(this.mergeDefaultFilters(qs))]) {
+ this.props.searchActions.loadRecipes(this.mergeDefaultFilters(qs));
+ }
+ if (!this.props.courses.results[queryString.stringify(this.mergeDefaultFilters(qs))]) {
+ this.props.filterActions.loadCourses(this.mergeDefaultFilters(qs));
+ }
+ if (!this.props.cuisines.results[queryString.stringify(this.mergeDefaultFilters(qs))]) {
+ this.props.filterActions.loadCuisines(this.mergeDefaultFilters(qs));
+ }
+ if (!this.props.ratings.results[queryString.stringify(this.mergeDefaultFilters(qs))]) {
+ this.props.filterActions.loadRatings(this.mergeDefaultFilters(qs));
+ }
+ }
+
+ doSearch = (value) => {
+ console.log('hi');
+ let qs = queryString.parse(this.props.location.search);
+ value !== "" ? qs['search'] = value : delete qs['search'];
+ let str = queryString.stringify(qs);
+ str = str ? '/browse/?' + str : '/browse/';
+ history.push(str);
+ };
+
+ buildUrl = (name, value, multiSelect=false) => {
+ if (!name) return '/browse/';
+
+ let qs = queryString.parse(this.props.location.search);
+
+ if (value !== "") {
+ if (qs[name] && multiSelect) {
+ let query = qs[name].split(',');
+ if (query.includes(value.toString())) {
+ if (query.length === 1) {
+ delete qs[name];
+ } else {
+ let str = '';
+ query.map(val => { val != value ? str += val + ',' : ''});
+ qs[name] = str.substring(0, str.length - 1);
+ }
+ } else {
+ qs[name] = qs[name] + ',' + value;
+ }
+ } else {
+ qs[name] = value;
+ }
+ } else {
+ delete qs[name];
+ }
+
+ let str = queryString.stringify(qs);
+ return str ? '/browse/?' + str : '/browse/';
+ };
+
+ mergeDefaultFilters = (query) => {
+ let filter = {};
+
+ if (Object.keys(DefaultFilters).length > 0) {
+ for (let key in DefaultFilters) {
+ filter[key] = DefaultFilters[key];
+ }
+ }
+
+ if (Object.keys(query).length > 0) {
+ for (let key in query) {
+ filter[key] = query[key];
+ }
+ }
+
+ return filter
+ };
+
+ render() {
+ const qs = queryString.parse(this.props.location.search);
+ const qsString = queryString.stringify(this.mergeDefaultFilters(qs));
+ return (
+
+ { mobileHeader }
+
+
+
+
+ { intl.formatMessage(messages.filters) }
+
+
+
+
+
+
+
+
+ {
+ r.slug = r.rating;
+ r.title = intl.formatMessage(messages.x_stars, {rating: r.rating});
+ return r;
+ }) : []
+ }
+ qs={ qs }
+ multiSelect={ true }
+ buildUrl={ buildUrl }
+ />
+
+
+
+
+
+ { activeFilter ? reset() : '' }
+
+
+`;
diff --git a/frontend/modules/browse/tests/__snapshots__/NoResults.test.js.snap b/frontend/modules/browse/tests/__snapshots__/NoResults.test.js.snap
new file mode 100644
index 00000000..754785e1
--- /dev/null
+++ b/frontend/modules/browse/tests/__snapshots__/NoResults.test.js.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NoResults component test 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/frontend/modules/common/Api.js b/frontend/modules/common/Api.js
deleted file mode 100644
index 438de849..00000000
--- a/frontend/modules/common/Api.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { request } from './CustomSuperagent';
-import { serverURLs } from './config'
-
-class ApiClass {
- getRecipes(callback, filter) {
- const map = {
- 'cuisine': 'cuisine__slug',
- 'course': 'course__slug'
- };
-
- let parsed_filter = {};
- for (let f in filter) {
- if (filter[f] !== null) {
- parsed_filter[f in map ? map[f] : f] = filter[f];
- }
- }
-
- request()
- .get(serverURLs.browse)
- .query(parsed_filter)
- .end(callback);
- }
-
- getCourses(callback, filter) {
- let parsed_filter = {};
- for (let f in filter) {
- if (!['limit', 'offset'].includes(f)) {
- parsed_filter[f] = filter[f];
- }
- }
-
- request()
- .get(serverURLs.course_count)
- .query(parsed_filter)
- .end(callback);
- }
-
- getCuisines(callback, filter) {
- let parsed_filter = {};
- for (let f in filter) {
- if (!['limit', 'offset'].includes(f)) {
- parsed_filter[f] = filter[f];
- }
- }
-
- request()
- .get(serverURLs.cuisine_count)
- .query(parsed_filter)
- .end(callback);
- }
-
- getRatings(callback, filter) {
- let parsed_filter = {};
- for (let f in filter) {
- if (!['limit', 'offset'].includes(f)) {
- parsed_filter[f] = filter[f];
- }
- }
-
- request()
- .get(serverURLs.ratings)
- .query(parsed_filter)
- .end(callback);
- }
-}
-
-module.exports = new ApiClass();
\ No newline at end of file
diff --git a/frontend/modules/common/AppDispatcher.js b/frontend/modules/common/AppDispatcher.js
deleted file mode 100644
index 56da186f..00000000
--- a/frontend/modules/common/AppDispatcher.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright (c) 2014-2015, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * AppDispatcher
- *
- * A singleton that operates as the central hub for application updates.
- */
-
-var Dispatcher = require('flux').Dispatcher;
-
-module.exports = new Dispatcher();
diff --git a/frontend/modules/common/reducer.js b/frontend/modules/common/reducer.js
index 103292f8..98e4e467 100644
--- a/frontend/modules/common/reducer.js
+++ b/frontend/modules/common/reducer.js
@@ -1,5 +1,6 @@
import { combineReducers } from 'redux'
import { default as user } from '../account/reducers/LoginReducer'
+import { default as browse } from '../browse/reducers/Reducer'
import { default as list } from '../list/reducers/GroceryListReducer'
import { default as recipe } from '../recipe/reducers/Reducer'
import { default as recipeForm } from '../recipe_form/reducers/Reducer'
@@ -7,6 +8,7 @@ import { default as recipeForm } from '../recipe_form/reducers/Reducer'
const reducer = combineReducers({
list,
user,
+ browse,
recipe,
recipeForm,
});
diff --git a/frontend/modules/index.js b/frontend/modules/index.js
index ce441e20..0023374f 100644
--- a/frontend/modules/index.js
+++ b/frontend/modules/index.js
@@ -20,7 +20,7 @@ import NotFound from './base/components/NotFound'
import Login from './account/containers/Login'
import News from './news/components/News'
import List from './list/containers/List'
-import Browse from './browse/components/Browse'
+import Browse from './browse/containers/Browse'
import Form from './recipe_form/containers/Form'
import RecipeView from './recipe/components/RecipeView'
diff --git a/frontend/modules/news/components/News.js b/frontend/modules/news/components/News.js
index 7e95663f..29403f0b 100644
--- a/frontend/modules/news/components/News.js
+++ b/frontend/modules/news/components/News.js
@@ -9,7 +9,7 @@ import {
} from 'react-intl'
import { request } from '../../common/CustomSuperagent';
-import MiniBrowse from '../../browse/components/MiniBrowse'
+import MiniBrowse from '../../browse/containers/MiniBrowse'
import { serverURLs } from '../../common/config'
import documentTitle from '../../common/documentTitle'
diff --git a/frontend/modules/recipe/components/RecipeView.js b/frontend/modules/recipe/components/RecipeView.js
index 5380a8d0..a7cf46da 100644
--- a/frontend/modules/recipe/components/RecipeView.js
+++ b/frontend/modules/recipe/components/RecipeView.js
@@ -2,7 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import Recipe from '../containers/Recipe'
-import MiniBrowse from '../../browse/components/MiniBrowse'
+import MiniBrowse from '../../browse/containers/MiniBrowse'
const RecipeView = ({ match }) => (
+
+
+
+
+
+ + Sorry, there are no results for your search. +
+
diff --git a/frontend/package.json b/frontend/package.json
index 2411c89e..0c62b9bb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,9 +24,7 @@
"classnames": "^2.1.5",
"compression": "^1.6.2",
"express": "^4.14.0",
- "flux": "3.1.3",
"if-env": "^1.0.0",
- "keymirror": "^0.1.1",
"prop-types": "^15.5.10",
"query-string": "^5.0.0",
"react": "16.0.0",
@@ -37,7 +35,6 @@
"react-redux": "^5.0.6",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
- "react-smooth-collapse": "1.3.2",
"react-spinkit": "2.1.2",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",