sample_data

import recipes from '../sample_data/recipes.json'

class App extends Component {
  constructor(props) {
    super(props);

    this.recipes = recipes.results;
    this.arr = []
    Object.keys(this.recipes).forEach(index => {
      this.arr.push(this.recipes[index])
    })
    this.state = {
      searchString: '',
      filteredList: this.arr
    };
  }

  handleFilter = (newFilteredList, newSearchString) => {
    this.setState({filteredList: newFilteredList,  searchString: newSearchString });
  }

  render() {
    return (
      <div className="App">
        <Navbar onChangeFilter={this.handleFilter} listOfRecipes={this.arr}/>
        <div className="container mt-10">
          <div className="row">
              {this.state.filteredList.map((food, index) => <RecipeItem key={index} recipe={food} searchString={this.state.searchString}/>)}
          </div>
        </div>
      </div>
    );
  }
}

export default App;
     
import React from 'react'
import logo from '../logo.svg';

const Navbar = (props) => (
    <nav className="navbar fixed-top navbar-expand-sm navbar-dark bg-dark">
        <div className="navbar-brand col-1">
            <img src={logo} className="Navbar-logo" alt="logo" />
        </div>

        <div className="form-group justify-content-center row col-10 my-2">
            <input
                onChange={(e) => {
                    var newList = []
                    var oldList = []
                    if(e.targetValue !== ""){
                        oldList = props.listOfRecipes
                        newList = oldList.filter(item => {
                            return item.title.toLowerCase().includes(e.target.value.toLowerCase()) || item.ingredients.toLowerCase().includes(e.target.value.toLowerCase())      
                        })
                    } else {
                        newList = props.listOfRecipes
                    }
                    props.onChangeFilter(newList)
                }}
                className="form-control col-9 mr-2"
                type="text"
                placeholder="Search"
                aria-label="Search"
            />
        </div>
    </nav>
)


export default Navbar;
     
import React from 'react'

const RecipeItem = (props) => (
    <div className="col-sm-3 mt-4">
        <div className="card">
            <a href={props.recipe.href}><img className="card-img-top img-fluid" src={props.recipe.thumbnail} alt={props.recipe.ingredients} href={props.recipe.href}/></a>
            <div className="card-body">
                <h5 className="card-title">{props.recipe.title}</h5>
                <p className="card-text">
                    <strong>Ingredients: </strong>{props.recipe.ingredients}
                </p>
            </div>
        </div>
    </div>
)

export default RecipeItem;