RecipeListScreen.txt

import React, { Component } from "react";
import {
  StyleSheet,
  View,
  Text,
  Image,
  ImageBackground,
  TouchableHighlight,
  StyleProp,
  TextStyle,
  FlatList,
  ListRenderItem,
  ImageSourcePropType,
  TouchableOpacity,
  TextInput,
  Button
} from "react-native";
import { Query, QueryProps } from "react-apollo";
import { withNavigation } from 'react-navigation';
import { connect, Provider } from 'react-redux';

import { Colors, Metrics, Fonts } from "../themes";
import MainImages from "../images/mainImages/mainImages";
import ApplicationStyles from "../styles/ApplicationStyles";
import apolloClient from "../graphql/client";
import {GET_RECIPIES_QUERY, GetRecipesQueryResult} from "../graphql/queries";
import Images from "../images/mainImages/mainImages";
import store from "../components/Store";
import { ApolloConsumer } from "react-apollo";

class RecipeListScreen extends Component {
  _onPressButton = (item) => {
    this.props.navigation.navigate(
      'RecipeDetail', {
        recipeId: item.recipeId, mainImageEntry: item.mainImageEntry
      } 
    );
  }

  _renderRecipe = ({item}) => {
    return (
      <TouchableOpacity testID={`${item.recipeName}`} onPress={() => this._onPressButton(item)}>
        <View style={styles.recipeContainer}>
          <ImageBackground
            source={Images[item.mainImageEntry]}
            style={styles.recipeImage}
            resizeMode='cover'
          > 
            <View style={styles.textContainer}>
              <Text style={styles.recipeName}>{item.recipeName.toUpperCase()}</Text>
            </View>
          </ImageBackground>
        </View>
      </TouchableOpacity>
    );
  }

  _filterRecipes = (recipes, search) => {
    if (this.props.favoritesFilter) {
      return recipes.filter(recipe => {
        return this.props.selectedFavorites.includes(recipe.recipeId)
      })
    }

    return recipes.filter(recipe => {
      return recipe.recipeName.includes(search)
    })
  }

  render() {
    return (
      <ApolloConsumer>
        {client => (
          <View style={ApplicationStyles.mainContainer}>
          <Query client={client} query={GET_RECIPIES_QUERY}>
            {({ loading, error, data }) => {
              if (loading) return <Text>Loading...</Text>
              if (error) {
                return <Text>Error</Text>
              }

              const filteredRecipes = this._filterRecipes(
                data.getRecipes,
                this.props.searchFilter.toLowerCase()
              );
              
              return (
                <View >
                  <TextInput
                    testID='InputSearch'
                    placeholder={"Search for some recipes!"}
                    style={styles.searchInput}
                    value={this.props.searchFilter}
                    onChangeText={(textValue) => {
                      this.props.onSearchUpdated(textValue)
                    }}
                  />
                  <View>
                    <Button testID='FavoritesButton' title="Show my favorites"
                      onPress={() => this.props.toggleFavFilter()}
                    />
                  </View>
                  {filteredRecipes.length ?
                    <FlatList
                      data={filteredRecipes}
                      testID='FlatList'
                      keyExtractor={(item, index) => `${index}`}
                      renderItem={this._renderRecipe}
                      numColumns={1}
                      horizontal={false}
                    />
                    : <View style={styles.nothingMessageContainer}>
                      <Text testID='NothingFound' style={styles.nothingMessage}>Nothing was found</Text>
                    </View>}
                  
                </View>
              )
            }}
          </Query>
        </View>
        )}
      </ApolloConsumer>
    );
  }
}

const styles = StyleSheet.create({
  recipeContainer: {
    flex: 1,
    margin: Metrics.baseMargin,
    justifyContent: 'center',
    alignItems: 'center',
  },
  recipeImage: {
    width: Metrics.images.main,
    height: Metrics.images.main,
  },
  searchInput: {
    backgroundColor: Colors.white,
    borderWidth: Metrics.borderWidth.small,
    borderColor: Colors.grayLight,
    margin: Metrics.baseMargin,
    padding: Metrics.basePadding
  },
  textContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: Colors.transparentWhite
  },
  recipeName: {
    fontSize: Fonts.size.large,
    fontWeight: 'bold',
    color: Colors.grayDark
  },
  nothingMessageContainer: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  nothingMessage: {
    fontSize: Fonts.size.medium
  }
})

mapStateToProps = (state) => {
  return {
    searchFilter: state.searchFilter,
    favoritesFilter: state.toggleFilterForFavorites,
    selectedFavorites: state.selectedFavorites
  }
}

mapDispatchToProps = (dispatch) => {
  return {
    onSearchUpdated: (textValue) => {
      dispatch({
        type: 'ADD_SEARCH_FILTER',
        searchFilter: textValue
      })
    },
    toggleFavFilter: () => {
      dispatch({
        type: 'TOGGLE_FILTER_FOR_FAVORITES'
      })
    }
  }
}

export const RecipeListScreenWithoutHocs = RecipeListScreen;

export default withNavigation(connect(mapStateToProps, mapDispatchToProps)(RecipeListScreen));