Day 14 Cocktails | Setup

Author: mohdibrahimofficial

15-cocktails/setup/src/App.js

@@ -1,17 +1,34 @@
 import React from 'react'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
+
 // import pages
 import Home from './pages/Home'
 import About from './pages/About'
 import SingleCocktail from './pages/SingleCocktail'
 import Error from './pages/Error'
+
 // import components
 import Navbar from './components/Navbar'
+
 function App() {
  return (
- <div>
- <h2>app component</h2>
- </div>
+ <Router>
+ <Navbar />
+ <Switch>
+ <Route exact path="/">
+ <Home />
+ </Route>
+ <Route path="/about">
+ <About />
+ </Route>
+ <Route path="/cocktail/:id">
+ <SingleCocktail />
+ </Route>
+ <Route path="*">
+ <Error />
+ </Route>
+ </Switch>
+ </Router>
  )
 }
 

15-cocktails/setup/src/components/Cocktail.js

@@ -1,11 +1,21 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 
-const Cocktail = () => {
+const Cocktail = ({image,name,id,info,glass}) => {
  return (
- <div>
- <h2>cocktail component</h2>
- </div>
+ <article className='cocktail'>
+ <div className="img-container">
+ <img src={image} alt={name} />
+ </div>
+ <div className="cocktail-footer">
+ <h3>{name}</h3>
+ <h4>{glass}</h4>
+ <p>{info}</p>
+ <Link to={`/cocktail/${id}`} className="btn btn-primary">
+ details
+ </Link>
+ </div>
+ </article>
  )
 }
 

15-cocktails/setup/src/components/CocktailList.js

@@ -1,14 +1,33 @@
-import React from 'react'
-import Cocktail from './Cocktail'
-import Loading from './Loading'
-import { useGlobalContext } from '../context'
+import React from "react";
+import Cocktail from "./Cocktail";
+import Loading from "./Loading";
+import { useGlobalContext } from "../context";
 
 const CocktailList = () => {
+ const { cocktails, loading } = useGlobalContext();
+
+ if (loading) return <Loading />;
+
+ if (cocktails.length < 1) {
+ return (
+ <h2 className="section-title">
+ no cocktails matched your search criteria
+ </h2>
+ );
+ }
+
  return (
- <div>
- <h2>cocktail list component</h2>
- </div>
- )
-}
+ <section className="section">
+ <h2 className="section-title">Cocktails</h2>
+ <div className="cocktails-center">
+ {
+ cocktails.map((item)=>{
+ return <Cocktail key={item.id} {...item}></Cocktail>
+ })
+ }
+ </div>
+ </section>
+ );
+};
 
-export default CocktailList
+export default CocktailList;

15-cocktails/setup/src/components/Navbar.js

@@ -4,9 +4,25 @@ import logo from '../logo.svg'
 
 const Navbar = () => {
  return (
- <div>
- <h2>navbar component</h2>
- </div>
+ <nav className="navbar">
+ <div className="nav-center">
+ <Link to="/">
+ <img src={logo} alt="cocktail db logo" className="logo"/>
+ </Link>
+ <ul className="nav-links">
+ <li>
+ <Link to="/">
+ Home
+ </Link>
+ </li>
+ <li>
+ <Link to="/about">
+ About
+ </Link>
+ </li>
+ </ul>
+ </div>
+ </nav>
  )
 }
 

15-cocktails/setup/src/components/SearchForm.js

@@ -2,10 +2,31 @@ import React from 'react'
 import { useGlobalContext } from '../context'
 
 const SearchForm = () => {
+
+ const {setSearchTerm} = useGlobalContext();
+ const searchValue = React.useRef('');
+
+ React.useEffect(()=>{
+ searchValue.current.focus();
+ },[])
+
+ const searchCocktail = () => {
+ setSearchTerm(searchValue.current.value);
+ }
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ }
+
  return (
- <div>
- <h2>search form component</h2>
- </div>
+ <section className="section search">
+ <form className="search-form" onSubmit={handleSubmit}>
+ <div className="form-control">
+ <label htmlFor="name">Search your favourite cocktail</label>
+ <input type="text" id="name" ref={searchValue} onChange={searchCocktail}/>
+ </div>
+ </form>
+ </section>
  )
 }
 

15-cocktails/setup/src/context.js

@@ -1,15 +1,65 @@
-import React, { useState, useContext, useEffect } from 'react'
-import { useCallback } from 'react'
+import React, { useState, useContext, useEffect } from "react";
+import { useCallback } from "react";
 
-const url = 'https://www.thecocktaildb.com/api/json/v1/1/search.php?s='
-const AppContext = React.createContext()
+const url = "https://www.thecocktaildb.com/api/json/v1/1/search.php?s=";
+const AppContext = React.createContext();
 
 const AppProvider = ({ children }) => {
- return <AppContext.Provider value='hello'>{children}</AppContext.Provider>
-}
+ const [loading, setLoading] = useState(true);
+ const [searchTerm, setSearchTerm] = useState("a");
+ const [cocktails, setCocktails] = 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 newCocktails = drinks.map((item) => {
+ const {
+ idDrink,
+ strDrink,
+ strDrinkThumb,
+ strAlcoholic,
+ strGlass,
+ } = item;
+ return {
+ id: idDrink,
+ name: strDrink,
+ image: strDrinkThumb,
+ info: strAlcoholic,
+ glass: strGlass,
+ };
+ });
+ setCocktails(newCocktails);
+ } else setCocktails([]);
+ setLoading(false);
+ } catch (error) {
+ console.log(error);
+ setLoading(false);
+ }
+ },[searchTerm]);
+
+ useEffect(() => {
+ fetchDrinks();
+ }, [searchTerm,fetchDrinks]);
+
+ return (
+ <AppContext.Provider
+ value={{
+ loading,
+ cocktails,
+ setSearchTerm,
+ }}
+ >
+ {children}
+ </AppContext.Provider>
+ );
+};
 // make sure use
 export const useGlobalContext = () => {
- return useContext(AppContext)
-}
+ return useContext(AppContext);
+};
 
-export { AppContext, AppProvider }
+export { AppContext, AppProvider };

15-cocktails/setup/src/pages/About.js

@@ -2,9 +2,18 @@ import React from 'react'
 
 const About = () => {
  return (
- <div>
- <h2>about page</h2>
- </div>
+ <section className="section about-section">
+ <h1 className="section-title">about us</h1>
+ <p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+ Quasi quis temporibus nisi ducimus laudantium voluptatem.
+ Inventore deleniti explicabo reprehenderit blanditiis natus nam minus voluptatum aliquid vero illum, 
+ autem accusantium sequi.Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+ Quasi quis temporibus nisi ducimus laudantium voluptatem.
+ Inventore deleniti explicabo reprehenderit blanditiis natus nam minus voluptatum aliquid vero illum, 
+ autem accusantium sequi.
+ </p>
+ </section>
  )
 }
 

15-cocktails/setup/src/pages/Error.js

@@ -3,9 +3,14 @@ import { Link } from 'react-router-dom'
 
 const Error = () => {
  return (
- <div>
- <h2>error page</h2>
- </div>
+ <section className="section error-page">
+ <div className="error-container">
+ <h1>Oops! It's dead end</h1>
+ <Link to="/" className="btn btn-primary">
+ back home
+ </Link>
+ </div>
+ </section>
  )
 }
 

15-cocktails/setup/src/pages/Home.js

@@ -4,9 +4,10 @@ import SearchForm from '../components/SearchForm'
 
 const Home = () => {
  return (
- <div>
- <h2>home page</h2>
- </div>
+ <main>
+ <SearchForm />
+ <CocktailList />
+ </main>
  )
 }