{"version":3,"sources":["logo2.svg","components/Recipe.js","components/Loading.js","context.js","components/RecipeList.js","components/SearchForm.js","pages/Home.js","pages/About.js","pages/SingleRecipe.js","pages/Error.js","components/Navbar.js","App.js","index.js"],"names":["module","exports","Recipe","id","name","slug","duration","course","image","className","to","src","alt","Loading","AppContext","React","createContext","AppProvider","children","useState","loading","setLoading","searchTerm","setSearchTerm","recipes","setRecipes","fetchRecipes","useCallback","a","fetch","response","json","filteredRecipes","filter","item","title","rendered","toLowerCase","includes","newRecipes","map","acf","image_url","category","type","ingredients","instructions","console","log","useEffect","Provider","value","useGlobalContext","useContext","RecipeList","length","key","SearchForm","searchValue","useRef","current","focus","onSubmit","e","preventDefault","htmlFor","ref","onChange","Home","About","url","SingleRecipe","useParams","recipe","setRecipe","data","findRecipe","find","getRecipe","dangerouslySetInnerHTML","__html","Error","Navbar","logo","App","path","element","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.c07f1386.chunk.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/media/logo2.8deddbba.svg\";","import React from \"react\";\nimport { Link } from \"react-router-dom\";\n\nconst Recipe = ({ id, name, slug, duration, course, image }) => {\n  return (\n    <article className='recipe'>\n      <Link to={`/recipe/${slug}`}>\n        <div className='image-container'>\n          <img src={image} alt={name} className='recipe-image' />\n        </div>\n      </Link>\n      <div className='recipe-footer'>\n        <Link to={`/recipe/${slug}`}>\n          <h3>{name}</h3>\n        </Link>\n        <h4>{course}</h4>\n        <p>{duration}</p>\n        <Link to={`/recipe/${slug}`} className='btn btn-primary btn-details'>\n          Details\n        </Link>\n      </div>\n    </article>\n  );\n};\n\nexport default Recipe;\n","import React from 'react'\n\nconst Loading = () => {\n return (\n  <div className=\"loader\">\n  </div>\n )\n}\n\nexport default Loading\n","import React, { useState, useContext, useEffect } from \"react\";\nimport { useCallback } from \"react\";\n\nconst url = \"http://recipes.wordpresssites.host/wp-json/wp/v2/recipes/\";\nconst AppContext = React.createContext();\n\nconst AppProvider = ({ children }) => {\n  const [loading, setLoading] = useState(true);\n  const [searchTerm, setSearchTerm] = useState(\"a\");\n  const [recipes, setRecipes] = useState([]);\n\n  const fetchRecipes = useCallback(async () => {\n    try {\n      setLoading(true);\n      const response = await fetch(url);\n      const recipes = await response.json();\n\n      const filteredRecipes = recipes.filter((item) => {\n        if (item.title.rendered.toLowerCase().includes(searchTerm)) return item;\n      });\n\n      if (recipes) {\n        const newRecipes = filteredRecipes.map((item) => {\n          const { id, acf, slug } = item;\n          const {\n            name,\n            duration,\n            course,\n            image_url,\n            category,\n            type,\n            ingredients,\n            instructions,\n          } = acf;\n          return {\n            id,\n            name,\n            slug,\n            image: image_url,\n            duration,\n            course,\n            category,\n            type,\n            ingredients,\n            instructions,\n          };\n        });\n        setRecipes(newRecipes);\n      } else {\n        setRecipes([]);\n      }\n      setLoading(false);\n    } catch (error) {\n      console.log(error);\n      setLoading(false);\n    }\n  }, [searchTerm]);\n\n  // Fetch recipes every time searchTerm changes\n  useEffect(() => {\n    fetchRecipes();\n  }, [searchTerm, fetchRecipes]);\n\n  return (\n    <AppContext.Provider\n      value={{ loading, setLoading, recipes, setSearchTerm }}\n    >\n      {children}\n    </AppContext.Provider>\n  );\n};\n// make sure use\nexport const useGlobalContext = () => {\n  return useContext(AppContext);\n};\n\nexport { AppContext, AppProvider };\n","import React from \"react\";\nimport Recipe from \"./Recipe\";\nimport Loading from \"./Loading\";\nimport { useGlobalContext } from \"../context\";\n\nconst RecipeList = () => {\n  const { recipes, loading } = useGlobalContext();\n\n  if (loading) {\n    return <Loading />;\n  }\n  if (recipes.length < 1) {\n    return <h2>No recipe matched your search criteria</h2>;\n  }\n\n  return (\n    <section className='section'>\n      {/* <h2 className='section-title'>recipes</h2> */}\n      <div className='recipes-center'>\n        {recipes.map((item) => {\n          return <Recipe key={item.id} {...item} />;\n        })}\n      </div>\n    </section>\n  );\n};\n\nexport default RecipeList;\n","import React from \"react\";\nimport { useGlobalContext } from \"../context\";\n\nconst SearchForm = () => {\n  const { setSearchTerm } = useGlobalContext();\n  const searchValue = React.useRef();\n\n  React.useEffect(() => {\n    searchValue.current.focus();\n  }, []);\n\n  const searchRecipe = () => {\n    setSearchTerm(searchValue.current.value);\n  };\n  const handleSubmit = (e) => {\n    e.preventDefault();\n  };\n\n  return (\n    <section className='section search'>\n      <form className='search-form' onSubmit={handleSubmit}>\n        <div className='form-control'>\n          <label htmlFor='name'>Search your favorite recipe</label>\n          <input\n            type='text'\n            id='name'\n            ref={searchValue}\n            onChange={searchRecipe}\n          />\n        </div>\n      </form>\n    </section>\n  );\n};\n\nexport default SearchForm;\n","import React from \"react\";\nimport RecipeList from \"../components/RecipeList\";\nimport SearchForm from \"../components/SearchForm\";\n\nconst Home = () => {\n  return (\n    <main>\n      <SearchForm />\n      <RecipeList />\n    </main>\n  );\n};\n\nexport default Home;\n","import React from \"react\";\n\nconst About = () => {\n  return (\n    <section className='section about-section'>\n      <h1 className='section-title'>About Us</h1>\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates\n        suscipit temporibus neque minus autem, dolore itaque doloribus debitis.\n        Iste, excepturi nihil, similique mollitia nam voluptatem iusto obcaecati\n        alias accusantium, sint quo unde quas saepe harum quos omnis asperiores.\n        Excepturi, omnis.\n      </p>\n    </section>\n  );\n};\n\nexport default About;\n","import React from \"react\";\nimport Loading from \"../components/Loading\";\nimport { useParams, Link } from \"react-router-dom\";\nconst url = \"http://recipes.wordpresssites.host/wp-json/wp/v2/recipes/\";\n\nconst SingleRecipe = () => {\n  const { id } = useParams();\n  const [loading, setLoading] = React.useState(false);\n  const [recipe, setRecipe] = React.useState(null);\n\n  React.useEffect(() => {\n    setLoading(true);\n\n    async function getRecipe() {\n      try {\n        const response = await fetch(url);\n        const data = await response.json();\n\n        const findRecipe = data.find((item) => item.slug === id);\n\n        if (findRecipe.acf) {\n          const {\n            name,\n            image_url,\n            duration,\n            course,\n            type,\n            category,\n            instructions,\n            ingredients,\n          } = findRecipe.acf;\n\n          const newRecipe = {\n            name,\n            image: image_url,\n            duration,\n            course,\n            type,\n            category,\n            instructions,\n            ingredients,\n          };\n\n          setRecipe(newRecipe);\n        } else {\n          setRecipe(null);\n        }\n        setLoading(false);\n      } catch (error) {\n        console.log(error);\n        setLoading(false);\n      }\n    }\n    getRecipe();\n  }, [id]);\n\n  if (loading) {\n    return <Loading />;\n  }\n\n  if (!recipe) {\n    return <h2 className='section-title'>No recipe to display</h2>;\n  }\n\n  const {\n    name,\n    image,\n    duration,\n    course,\n    type,\n    category,\n    instructions,\n    ingredients,\n  } = recipe;\n\n  return (\n    <section className='section recipe-section'>\n      <Link to='/' className='btn btn-primary'>\n        Back Home\n      </Link>\n      <h2 className='section-title'>{name}</h2>\n      <div className='plate'>\n        <div className='image-container'>\n          <img src={image} alt={name} />\n        </div>\n        <div className='plate-info'>\n          <div className='plate-items'>\n            <span className='plate-data'>Category:</span>\n            {category}\n          </div>\n          <div className='plate-items'>\n            <span className='plate-data'>Type:</span>\n            {type}\n          </div>\n          <div className='plate-items'>\n            <span className='plate-data'>Duration:</span>\n            {duration}\n          </div>\n          <h3>Ingrediënten</h3>\n          <div\n            className='plate-ingredients'\n            dangerouslySetInnerHTML={{ __html: ingredients }}\n          ></div>\n          <div\n            className='plate-instructions'\n            dangerouslySetInnerHTML={{ __html: instructions }}\n          ></div>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default SingleRecipe;\n","import React from \"react\";\nimport { Link } from \"react-router-dom\";\n\nconst Error = () => {\n  return (\n    <section className='section error-section'>\n      <div className='error-container'>\n        <h1>Oops! It's a dead end</h1>\n        <Link className='btn btn-primary'>Back Home</Link>\n      </div>\n    </section>\n  );\n};\n\nexport default Error;\n","import React from \"react\";\nimport { Link } from \"react-router-dom\";\nimport logo from \"../logo2.svg\";\n\nconst Navbar = () => {\n  return (\n    <nav className='navbar'>\n      <div className='nav-center'>\n        <Link to='/'>\n          <img src={logo} alt='logo' className='logo' />\n        </Link>\n      </div>\n      <ul className='nav-links'>\n        <li>\n          <Link to='/'>Home</Link>\n        </li>\n        <li>\n          <Link to='/about'>About</Link>\n        </li>\n      </ul>\n    </nav>\n  );\n};\n\nexport default Navbar;\n","import React from \"react\";\nimport { BrowserRouter as Router, Route, Routes } from \"react-router-dom\";\n\n// import pages\nimport Home from \"./pages/Home\";\nimport About from \"./pages/About\";\nimport SingleRecipe from \"./pages/SingleRecipe\";\nimport Error from \"./pages/Error\";\n\n// import components\nimport Navbar from \"./components/Navbar\";\n\nfunction App() {\n  return (\n    <Router>\n      <Navbar />\n      <Routes>\n        <Route path='/' element={<Home />} />\n        <Route path='about' element={<About />} />\n        <Route path='recipe/:id' element={<SingleRecipe />} />\n        <Route path='*' element={<Error />} />\n      </Routes>\n    </Router>\n  );\n}\n\nexport default App;\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport './index.css'\nimport App from './App'\nimport { AppProvider } from './context'\nReactDOM.render(\n  <React.StrictMode>\n    <AppProvider>\n    <App />\n    </AppProvider>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\n"],"sourceRoot":""}