Merge pull request #15 from AytacMursalzade/Coctails

coctails

src/App.js

@@ -11,6 +11,7 @@ import NewModelApp from './Components/NewModelApp/RedInc.js';
 import Word from './Components/WordReverseApp/Word.js';
 import { PiMoonStarsLight } from "react-icons/pi";
 import Calc from "./Components/Calculator/Calc.js";
+import CocktailMenu from "./Components/Cocktails/CocktailMenu.js";
 
 const getStorageTheme = () => {
   let theme = 'light-theme';
@@ -58,6 +59,7 @@ function App() {
           <Route path="/reverseapp" element={<Word />} />
           <Route path="/reverseapp" element={<Word />} />
           <Route path="/calculator" element={<Calc />} />
+          <Route path="/cocktails" element={<CocktailMenu />} />
         </Routes>
       </BrowserRouter>
     </div>

src/Components/Cocktails/Cocktail.js

@@ -0,0 +1,20 @@
+import React from "react";
+import {Link} from "react-router-dom"
+
+export default function Cocktail({ image, name, id, info, glass }) {
+  return (
+    <div>
+      <div>
+        <img src={image} alt={name} />
+      </div>
+      <div>
+        <h3>{name}</h3>
+        <h4>{glass}</h4>
+        <p>{info}</p>
+        <Link to={`/cocktail/${id}`}>
+        details
+        </Link>
+      </div>
+    </div>
+  );
+}

src/Components/Cocktails/CocktailList.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { useGlobalContext } from './context';
+import Loading from './Loading';
+import Cocktail from './Cocktail';
+
+export default function CocktailList() {
+
+    const { cocktails, loading } = useGlobalContext();
+
+    if(loading){
+        return <Loading />
+    };
+
+    if(cocktails.lenght < 1){
+        return(
+            <h2>no cocktails matched your search criteria</h2>    
+        )
+    }
+
+
+  return (
+    <div>
+      <h2>Cocktails</h2>
+      <div>
+        {cocktails.map((item) => {
+            return <Cocktail key={item.id} {...item} />
+        })}
+      </div>
+    </div>
+  )
+}
+
+

src/Components/Cocktails/CocktailMenu.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Home from "./pages/Home.js";
+import About from "./pages/About";
+import OneCoctails from "./pages/OneCoctails";
+import Error from "./pages/Error";
+
+function CocktailMenu() {
+  return (
+    <div>
+      <Link path="/" element={<Home />} />
+      <Link path="about" element={<About />} />
+      <Link path="cocktail/:id" element={<OneCoctails />} />
+      <Link path="*" element={<Error />} />
+    </div>
+  );
+}
+
+export default CocktailMenu;

src/Components/Cocktails/Loading.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+const Loading = () => {
+ return (
+  <div className="loader">
+  </div>
+ )
+}
+
+export default Loading

src/Components/Cocktails/Search.js

@@ -0,0 +1,41 @@
+import React, {useEffect, useRef} from "react";
+import { useGlobalContext } from './context';
+
+
+export default function Search() {
+
+
+  const { setSearchTerm } = useGlobalContext();
+  const searchValue = useRef("");
+
+    useEffect(()=>{
+      searchValue.current.focus();
+    },[]);
+
+    const searchCocktail = ()=>{
+        setSearchTerm(searchValue.current.value)
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+    }
+
+
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label htmlFor="name">Search your favorite cocktail</label>
+          <input
+            type="text"
+            name="name"
+            id="name"
+            ref={searchValue}
+            onChange={searchCocktail}
+          />
+        </div>
+      </form>
+    </div>
+  );
+}

src/Components/Cocktails/context.js

@@ -0,0 +1,63 @@
+import React, {
+  useState,
+  useContext,
+  createContext,
+  useCallback,
+  useEffect,
+} from "react";
+
+const url = "https://www.thecocktaildb.com/api/json/v1/1/search.php?s=";
+const AppContext = createContext();
+
+const AppProvider = ({ children }) => {
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState("a");
+  const [coctails, setCoctails] = useState([]);
+
+  const fetchDrinks = useCallback(async () => {
+    setLoading(true);
+
+    try {
+      const response = await fetch(`${url} ${searchTerm}`);
+      const data = await response.json();
+
+      const { drinks } = data;
+      if (drinks) {
+        const newcoctails = drinks.map((item) => {
+          const { idDrink, strDrink, strDrinkThumb, strAlcoholic, strGlass } =
+            item;
+
+          return {
+            id: idDrink,
+            name: strDrink,
+            image: strDrinkThumb,
+            info: strAlcoholic,
+            glass: strGlass,
+          };
+        });
+        setCoctails(newcoctails);
+      } else {
+        setCoctails([]);
+      }
+      setLoading(false);
+    } catch (error) {
+      setLoading(false);
+    }
+  }, [searchTerm]);
+
+  useEffect(() => {
+    fetchDrinks();
+  }, [searchTerm, fetchDrinks]);
+
+  return (
+    <AppContext.Provider value={{ loading, coctails, searchTerm }}>
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+export const useGlobalContext = () => {
+  return useContext(AppContext);
+};
+
+export { AppContext, AppProvider };

src/Components/Cocktails/pages/About.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+export default function About() {
+  return (
+    <section className="section about-section">
+      <h1 className="section-title">about us</h1>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae
+        repudiandae architecto qui adipisci in officiis, aperiam sequi atque
+        perferendis eos, autem maiores nisi saepe quisquam hic odio consectetur
+        nobis veritatis quasi explicabo obcaecati doloremque? Placeat ratione
+        hic aspernatur error blanditiis?
+      </p>
+    </section>
+  );
+}

src/Components/Cocktails/pages/Error.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Link } from "react-router-dom";
+export default function Error() {
+  return (
+    <section className="error-page section">
+      <div className="error-container">
+        <h1>oops! it's a dead end</h1>
+        <Link to="/" className="btn btn-primary">
+          back home
+        </Link>
+      </div>
+    </section>
+  );
+}

src/Components/Cocktails/pages/Home.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import CocktailList from '../CocktailList'
+import Search from '../Search'
+export default function Home() {
+  return (
+    <main>
+      <Search />
+      <CocktailList />
+    </main>
+  )
+}

src/Components/Cocktails/pages/OneCoctails.js

@@ -0,0 +1,109 @@
+import React from 'react'
+import Loading from '../Loading'
+import { useParams, Link } from 'react-router-dom'
+
+export default function SingleCocktail() {
+  const { id } = useParams()
+  const [loading, setLoading] = React.useState(false)
+  const [cocktail, setCocktail] = React.useState(null)
+
+  React.useEffect(() => {
+    setLoading(true)
+    async function getCocktail() {
+      try {
+        const response = await fetch(
+          `https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${id}`
+        )
+        const data = await response.json()
+        if (data.drinks) {
+          const {
+            strDrink: name,
+            strDrinkThumb: image,
+            strAlcoholic: info,
+            strCategory: category,
+            strGlass: glass,
+            strInstructions: instructions,
+            strIngredient1,
+            strIngredient2,
+            strIngredient3,
+            strIngredient4,
+            strIngredient5,
+          } = data.drinks[0]
+          const ingredients = [
+            strIngredient1,
+            strIngredient2,
+            strIngredient3,
+            strIngredient4,
+            strIngredient5,
+          ]
+          const newCocktail = {
+            name,
+            image,
+            info,
+            category,
+            glass,
+            instructions,
+            ingredients,
+          }
+          setCocktail(newCocktail)
+        } else {
+          setCocktail(null)
+        }
+      } catch (error) {
+        console.log(error)
+      }
+      setLoading(false)
+    }
+    getCocktail()
+  }, [id])
+  if (loading) {
+    return <Loading/>
+  }
+  if (!cocktail) {
+    return <h2 className='section-title'>no cocktail to display</h2>
+  } else {
+    const {
+      name,
+      image,
+      category,
+      info,
+      glass,
+      instructions,
+      ingredients,
+    } = cocktail
+    return (
+      <section className='section cocktail-section'>
+        <Link to='/' className='btn btn-primary'>
+          back home
+        </Link>
+        <h2 className='section-title'>{name}</h2>
+        <div className='drink'>
+          <img src={image} alt={name}></img>
+          <div className='drink-info'>
+            <p>
+              <span className='drink-data'>name :</span> {name}
+            </p>
+            <p>
+              <span className='drink-data'>category :</span> {category}
+            </p>
+            <p>
+              <span className='drink-data'>info :</span> {info}
+            </p>
+            <p>
+              <span className='drink-data'>glass :</span> {glass}
+            </p>
+            <p>
+              <span className='drink-data'>instructons :</span> {instructions}
+            </p>
+            <p>
+              <span className='drink-data'>ingredients :</span>
+              {ingredients.map((item, index) => {
+                return item ? <span key={index}> {item}</span> : null
+              })}
+            </p>
+          </div>
+        </div>
+      </section>
+    )
+  }
+}

src/Components/Menu/Menu.js

@@ -14,6 +14,7 @@ function Menu() {
     { to: "/modelapp", name: "Redux App", icon: <GrReactjs /> },
     { to: "/reverseapp", name: "Word Reverse App", icon: <GrReactjs /> },
     { to: "/calculator", name: "Calculator App", icon: <GrReactjs /> },
+    { to: "/cocktails", name: "Cocktails ", icon: <GrReactjs /> }
   ];
 
   return (