From 58cda9cc7fb79ca9df6746de7f9662bc08dc156a Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Fri, 13 Oct 2017 12:29:40 +0200 Subject: initial commit --- src/containers/settings/RecipesScreen.js | 126 +++++++++++++++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 src/containers/settings/RecipesScreen.js (limited to 'src/containers/settings/RecipesScreen.js') diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js new file mode 100644 index 000000000..65341e9e3 --- /dev/null +++ b/src/containers/settings/RecipesScreen.js @@ -0,0 +1,126 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { autorun } from 'mobx'; +import { inject, observer } from 'mobx-react'; + +import RecipePreviewsStore from '../../stores/RecipePreviewsStore'; +import RecipeStore from '../../stores/RecipesStore'; +import ServiceStore from '../../stores/ServicesStore'; +import UserStore from '../../stores/UserStore'; +import { gaPage } from '../../lib/analytics'; + +import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard'; + +@inject('stores', 'actions') @observer +export default class RecipesScreen extends Component { + static propTypes = { + params: PropTypes.shape({ + filter: PropTypes.string, + }).isRequired, + }; + + static defaultProps = { + params: { + filter: null, + }, + }; + + state = { + needle: null, + currentFilter: 'featured', + }; + + componentDidMount() { + gaPage('Settings/Recipe Dashboard/Featured'); + + autorun(() => { + const { filter } = this.props.params; + const { currentFilter } = this.state; + + if (filter === 'all' && currentFilter !== 'all') { + gaPage('Settings/Recipe Dashboard/All'); + this.setState({ currentFilter: 'all' }); + } else if (filter === 'featured' && currentFilter !== 'featured') { + gaPage('Settings/Recipe Dashboard/Featured'); + this.setState({ currentFilter: 'featured' }); + } else if (filter === 'dev' && currentFilter !== 'dev') { + gaPage('Settings/Recipe Dashboard/Dev'); + this.setState({ currentFilter: 'dev' }); + } + }); + } + + componentWillUnmount() { + this.props.stores.services.resetStatus(); + } + + searchRecipes(needle) { + if (needle === '') { + this.resetSearch(); + } else { + const { search } = this.props.actions.recipePreview; + this.setState({ needle }); + search({ needle }); + } + } + + resetSearch() { + this.setState({ needle: null }); + } + + render() { + const { recipePreviews, recipes, services, user } = this.props.stores; + const { showAddServiceInterface } = this.props.actions.service; + + const { filter } = this.props.params; + let recipeFilter; + + if (filter === 'all') { + recipeFilter = recipePreviews.all; + } else if (filter === 'dev') { + recipeFilter = recipePreviews.dev; + } else { + recipeFilter = recipePreviews.featured; + } + + const allRecipes = this.state.needle ? recipePreviews.searchResults : recipeFilter; + + const isLoading = recipePreviews.featuredRecipePreviewsRequest.isExecuting + || recipePreviews.allRecipePreviewsRequest.isExecuting + || recipes.installRecipeRequest.isExecuting + || recipePreviews.searchRecipePreviewsRequest.isExecuting; + + return ( + this.searchRecipes(e)} + resetSearch={() => this.resetSearch()} + searchNeedle={this.state.needle} + serviceStatus={services.actionStatus} + devRecipesCount={recipePreviews.dev.length} + /> + ); + } +} + +RecipesScreen.wrappedComponent.propTypes = { + stores: PropTypes.shape({ + recipePreviews: PropTypes.instanceOf(RecipePreviewsStore).isRequired, + recipes: PropTypes.instanceOf(RecipeStore).isRequired, + services: PropTypes.instanceOf(ServiceStore).isRequired, + user: PropTypes.instanceOf(UserStore).isRequired, + }).isRequired, + actions: PropTypes.shape({ + service: PropTypes.shape({ + showAddServiceInterface: PropTypes.func.isRequired, + }).isRequired, + recipePreview: PropTypes.shape({ + search: PropTypes.func.isRequired, + }).isRequired, + }).isRequired, +}; -- cgit v1.2.3-70-g09d2