├── .gitignore
├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── maskable.png
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── apple-touch-icon.png
    ├── manifest.json
    ├── index.html
    ├── serviceworker.js
    └── offline.html
├── src
    ├── index.js
    ├── pages
    │   ├── AddDrink.js
    │   ├── index.js
    │   ├── Shakes.js
    │   ├── Coffee.js
    │   ├── Cocktail.js
    │   └── Mocktails.js
    ├── App.css
    ├── components
    │   ├── Home
    │   │   ├── home-style.js
    │   │   └── index.js
    │   ├── DrinkType
    │   │   ├── DrinkType-style.js
    │   │   └── index.js
    │   ├── DrinkContainer.js
    │   ├── AllDrinkList
    │   │   ├── Shakes.js
    │   │   ├── CoffeeList.js
    │   │   ├── CocktailList.js
    │   │   ├── Mocktails.js
    │   │   └── index.js
    │   └── AddDrink
    │   │   ├── AddDrink-style.js
    │   │   └── index.js
    └── App.js
├── README.md
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aziz-AXG/drink-menu-frontend/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aziz-AXG/drink-menu-frontend/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aziz-AXG/drink-menu-frontend/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/maskable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aziz-AXG/drink-menu-frontend/HEAD/public/maskable.png


--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aziz-AXG/drink-menu-frontend/HEAD/public/favicon-16x16.png


--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aziz-AXG/drink-menu-frontend/HEAD/public/favicon-32x32.png


--------------------------------------------------------------------------------
/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aziz-AXG/drink-menu-frontend/HEAD/public/apple-touch-icon.png


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | 
 6 | ReactDOM.render(
 7 | <React.StrictMode>
 8 |     <App />
 9 | </React.StrictMode>,
10 | document.getElementById('root')
11 | );
12 | 
13 | 


--------------------------------------------------------------------------------
/src/pages/AddDrink.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import AddDrink from './../components/AddDrink/index';
 3 | 
 4 | function AddDrinkPage() {
 5 |             return (
 6 |                         <AddDrink />
 7 |             )
 8 | }
 9 | 
10 | export default AddDrinkPage


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import AllDrinkList from '../components/AllDrinkList';
 3 | import DrinkType from '../components/DrinkType';
 4 | import Home from '../components/Home';
 5 | 
 6 | const HomePage = () => {
 7 |     return (
 8 |         <>
 9 |             <Home />
10 |             <DrinkType />
11 |             <AllDrinkList />
12 |         </>
13 |     )
14 | }
15 | 
16 | export default HomePage
17 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Kolker+Brush&family=Roboto:ital,wght@1,300&display=swap');
 2 | 
 3 | 
 4 | html {
 5 |     height: -webkit-fill-available;
 6 |     width: -webkit-fill-available;
 7 | }
 8 | 
 9 | * {
10 |     box-sizing: border-box;
11 |     margin: 0;
12 |     padding: 0;
13 |     font-family: 'Roboto', sans-serif;
14 | }
15 | 
16 | body {
17 |     background: linear-gradient(95deg, rgba(159, 79, 67, 1) 5%, rgba(116, 46, 36, 1) 100%);
18 | }


--------------------------------------------------------------------------------
/src/components/Home/home-style.js:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components';
 2 | 
 3 | 
 4 | 
 5 | export const Container = styled.div`
 6 | 
 7 |             display: flex;
 8 |             justify-content: space-between;
 9 |             margin:20px 10% 0 10%;
10 |             color: #FFFFFF;
11 | `
12 | 
13 | export const CafeName = styled.h1`
14 |             font-family: 'Kolker Brush', cursive;
15 |             font-size: 42px;
16 |             color: #FFFFFF;
17 |             align-self: center;
18 | 
19 | `
20 | 


--------------------------------------------------------------------------------
/src/pages/Shakes.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ShakesList from '../components/AllDrinkList/Shakes'
 3 | import DrinkType from '../components/DrinkType'
 4 | import Home from '../components/Home'
 5 | 
 6 | function ShakesPage() {
 7 |             return (
 8 |                         <>
 9 |                                     <Home />
10 |                                     <DrinkType />
11 |                                     <ShakesList />
12 |                         </>
13 |             )
14 | }
15 | 
16 | export default ShakesPage


--------------------------------------------------------------------------------
/src/pages/Coffee.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import CoffeeList from '../components/AllDrinkList/CoffeeList'
 3 | import DrinkType from '../components/DrinkType'
 4 | import Home from '../components/Home'
 5 | 
 6 | function CoffeePage() {
 7 |             return (
 8 |                         <>
 9 |                                     <Home />
10 |                                     <DrinkType />
11 |                                     <CoffeeList />
12 |                         </>
13 |             )
14 | }
15 | 
16 | export default CoffeePage


--------------------------------------------------------------------------------
/src/pages/Cocktail.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import CocktailList from '../components/AllDrinkList/CocktailList'
 3 | import DrinkType from '../components/DrinkType'
 4 | import Home from '../components/Home'
 5 | 
 6 | function CocktailPage() {
 7 |             return (
 8 |                         <>
 9 |                                     <Home />
10 |                                     <DrinkType />
11 |                                     <CocktailList />
12 |                         </>
13 |             )
14 | }
15 | 
16 | export default CocktailPage


--------------------------------------------------------------------------------
/src/pages/Mocktails.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import MocktailsList from '../components/AllDrinkList/Mocktails'
 3 | import DrinkType from '../components/DrinkType'
 4 | import Home from '../components/Home'
 5 | 
 6 | function MocktailsPage() {
 7 |             return (
 8 |                         <>
 9 |                                     <Home />
10 |                                     <DrinkType />
11 |                                     <MocktailsList />
12 |                         </>
13 |             )
14 | }
15 | 
16 | export default MocktailsPage


--------------------------------------------------------------------------------
/src/components/Home/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Container, CafeName } from './home-style'
 3 | import { FaPlus } from 'react-icons/fa'
 4 | import { Link } from 'react-router-dom';
 5 | 
 6 | const Home = () => {
 7 | 
 8 |     return (
 9 |         <Container >
10 |             <Link to='/' style={{ textDecoration: 'none' }}>
11 |                 <CafeName>CAFE BOX</CafeName>
12 |             </Link>
13 |             <Link to='/AddDrink'>
14 |                 <FaPlus style={{ color: "white", fontSize: "36" }} />
15 |             </Link>
16 |         </Container>
17 |     );
18 | };
19 | 
20 | export default Home;
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # This is Drink menu frontend build using React.js,  
 2 | 
 3 | The site was created as a mobile application in first pleas using Progressive Web Apps(PWA)
 4 | 
 5 | ## technology used
 6 | 
 7 | *React.js
 8 | 
 9 | *styled-components
10 | 
11 | *react-icons
12 | 
13 | *react-router-dom
14 | 
15 | *aos
16 | 
17 | *sweetalert2
18 | 
19 | # VIEW The project in Website
20 | 
21 | ## "[View demo](https://drink-menu.netlify.app/)"
22 | ##Node: The problem with the images not showing up is using a free hosting
23 | 
24 | ## To run in 
25 | 
26 | ```
27 | $ npm install
28 | ```
29 | 
30 | ```
31 | $ npm run start
32 | ```
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Drink Menu",
 3 |   "name": "Drink Menu",
 4 |   "icons": [
 5 |     {
 6 |       "src": "maskable.png",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png",
 9 |       "purpose": "any maskable"
10 |     },
11 |     {
12 |       "src": "favicon.ico",
13 |       "sizes": "64x64 32x32 24x24 16x16",
14 |       "type": "image/x-icon"
15 |     },
16 |     {
17 |       "src": "logo192.png",
18 |       "type": "image/png",
19 |       "sizes": "192x192"
20 |     },
21 |     {
22 |       "src": "logo512.png",
23 |       "type": "image/png",
24 |       "sizes": "512x512"
25 |     }
26 |   ],
27 |   "start_url": ".",
28 |   "display": "standalone",
29 |   "theme_color": "#ffffff",
30 |   "background_color": "rgb(159, 79, 67)"
31 | }


--------------------------------------------------------------------------------
/src/components/DrinkType/DrinkType-style.js:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components';
 2 | 
 3 | 
 4 | export const Container = styled.div`
 5 |             display: flex;
 6 |             flex-direction: column;
 7 |             width: 100%;
 8 |             margin-top: 20px;
 9 | `
10 | 
11 | export const DrinkTypeBox = styled.div`
12 |             display: flex;
13 |             align-items: center;
14 |             justify-content: space-around;
15 | `
16 | 
17 | export const TypeOfDrink = styled.h1`
18 |             font-size: 18px;
19 |             color: #FFFFFF;
20 |             text-decoration: none;
21 | `
22 | 
23 | export const DrinkTypeLen = styled.div`
24 |             display: flex;
25 |             align-self: center;
26 |             margin: 10px;
27 |             width: 90%;
28 |             height: 5px;
29 |             border-radius: 3px;
30 |             background: #FFFFFF;
31 | `


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 3 | import HomePage from './pages';
 4 | import AddDrinkPage from './pages/AddDrink';
 5 | import CoffeePage from './pages/Coffee';
 6 | import CocktailPage from './pages/Cocktail';
 7 | import ShakesPage from './pages/Shakes';
 8 | import MocktailsPage from './pages/Mocktails';
 9 | 
10 | function App() {
11 | 
12 |   return (
13 |     <Router>
14 |       <Switch>
15 |         <Route path="/" component={HomePage} exact />
16 |         <Route path='/AddDrink' component={AddDrinkPage} exact />
17 |         <Route path='/Coffee' component={CoffeePage} exact />
18 |         <Route path='/Cocktail' component={CocktailPage} exact />
19 |         <Route path='/Shakes' component={ShakesPage} exact />
20 |         <Route path='/Mocktails' component={MocktailsPage} exact />
21 |       </Switch>
22 |     </Router>
23 | 
24 | 
25 |   );
26 | }
27 | 
28 | export default App;
29 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |   <meta name="theme-color" content="#742E24" />
 9 |   <meta name="description" content="Web site created using create-react-app" />
10 |   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
12 |   <title>Drink Menu</title>
13 | </head>
14 | 
15 | <body>
16 |   <div id="root"></div>
17 | 
18 |   <script>
19 |     if ("serviceWorker" in navigator) {
20 |       window.addEventListener("load", () => {
21 |         navigator.serviceWorker
22 |           .register("./serviceworker.js")
23 |           .then((reg) => console.log("Success: ", reg.scope))
24 |           .catch((err) => console.log("Failure: ", err));
25 |       });
26 |     }
27 |   </script>
28 | </body>
29 | 
30 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "proxy": "https://mega.nz/",
 3 |   "name": "drink-menu",
 4 |   "version": "0.1.0",
 5 |   "private": true,
 6 |   "dependencies": {
 7 |     "@testing-library/jest-dom": "^5.11.9",
 8 |     "@testing-library/react": "^11.2.5",
 9 |     "@testing-library/user-event": "^12.8.1",
10 |     "aos": "^2.3.4",
11 |     "axios": "^1.1.3",
12 |     "react": "^17.0.1",
13 |     "react-dom": "^17.0.1",
14 |     "react-icons": "^4.2.0",
15 |     "react-router-dom": "^5.2.0",
16 |     "react-scripts": "4.0.3",
17 |     "react-spinners": "^0.13.6",
18 |     "serve-build": "^0.1.0",
19 |     "styled-components": "^5.2.1",
20 |     "sweetalert2": "^11.6.8"
21 |   },
22 |   "scripts": {
23 |     "start": "react-scripts start",
24 |     "build": "react-scripts build",
25 |     "test": "react-scripts test",
26 |     "eject": "react-scripts eject"
27 |   },
28 |   "eslintConfig": {
29 |     "extends": [
30 |       "react-app",
31 |       "react-app/jest"
32 |     ]
33 |   },
34 |   "browserslist": {
35 |     "production": [
36 |       ">0.2%",
37 |       "not dead",
38 |       "not op_mini all"
39 |     ],
40 |     "development": [
41 |       "last 1 chrome version",
42 |       "last 1 firefox version",
43 |       "last 1 safari version"
44 |     ]
45 |   }
46 | }


--------------------------------------------------------------------------------
/src/components/DrinkType/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Link } from 'react-router-dom'
 3 | import { Container, DrinkTypeBox, TypeOfDrink, DrinkTypeLen } from './DrinkType-style'
 4 | 
 5 | function DrinkType() {
 6 | 
 7 |             return (
 8 |                         <Container>
 9 |                                     <DrinkTypeBox>
10 |                                                 <Link to='coffee'
11 |                                                             style={{ textDecoration: 'none' }}>
12 |                                                             <TypeOfDrink>Coffee</TypeOfDrink>
13 |                                                 </Link>
14 |                                                 <Link to='Cocktail' style={{ textDecoration: 'none' }}>
15 |                                                             <TypeOfDrink>Cocktail</TypeOfDrink>
16 |                                                 </Link>
17 |                                                 <Link to='Mocktails' style={{ textDecoration: 'none' }}>
18 |                                                             <TypeOfDrink>Mocktails</TypeOfDrink>
19 |                                                 </Link>
20 |                                                 <Link to='Shakes' style={{ textDecoration: 'none' }}>
21 |                                                             <TypeOfDrink>Shakes</TypeOfDrink>
22 |                                                 </Link>
23 |                                     </DrinkTypeBox>
24 |                                     <DrinkTypeLen></DrinkTypeLen>
25 |                         </Container>
26 |             )
27 | }
28 | 
29 | export default DrinkType


--------------------------------------------------------------------------------
/public/serviceworker.js:
--------------------------------------------------------------------------------
 1 | const CACHE_NAME = "version-1";
 2 | const urlsToCache = ["index.html", "offline.html"];
 3 | 
 4 | const self = this;
 5 | 
 6 | // Install SW
 7 | self.addEventListener("install", (event) => {
 8 |             event.waitUntil(
 9 |                         caches.open(CACHE_NAME).then((cache) => {
10 |                                     console.log("Opened cache");
11 | 
12 |                                     return cache.addAll(urlsToCache);
13 |                         })
14 |             );
15 | });
16 | 
17 | // Listen to requests
18 | self.addEventListener("fetch", (event) => {
19 |             event.respondWith(
20 |                         caches.match(event.request).then(async () => {
21 |                                     try {
22 |                                                 return await fetch(event.request);
23 |                                     } catch {
24 |                                                 return await caches.match("offline.html");
25 |                                     }
26 |                         })
27 |             );
28 | });
29 | 
30 | // Activate the SW
31 | self.addEventListener("activate", (event) => {
32 |             const cacheWhitelist = [];
33 |             cacheWhitelist.push(CACHE_NAME);
34 | 
35 |             event.waitUntil(
36 |                         caches.keys().then((cacheNames) =>
37 |                                     Promise.all(
38 |                                                 cacheNames.map((cacheName) => {
39 |                                                             if (!cacheWhitelist.includes(cacheName)) {
40 |                                                                         return caches.delete(cacheName);
41 |                                                             }
42 |                                                 })
43 |                                     )
44 |                         )
45 |             );
46 | })


--------------------------------------------------------------------------------
/src/components/DrinkContainer.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react'
 2 | import styled from 'styled-components'
 3 | import Aos from 'aos';
 4 | import 'aos/dist/aos.css'
 5 | 
 6 | //if u want to make img showup make it like to server port like "localhost:500/{drink.imageName}"
 7 | 
 8 | const DrinkContainer = ({ drink }) => {
 9 |             useEffect(() => {
10 |                         Aos.init({ duration: 1000 })
11 |             }, [])
12 | 
13 |             return (
14 |                         <DrinkBox data-aos="zoom-in">
15 |                                     <ImgAndPrice>
16 |                                                 <DrinkIMG src={drink.imageName} data-aos="fade-right" />
17 |                                                 <Price data-aos="fade-left">{drink.price}$</Price>
18 |                                     </ImgAndPrice>
19 |                                     <DrinkName>{drink.drinkName}</DrinkName>
20 |                         </DrinkBox>
21 |             )
22 | }
23 | 
24 | export default DrinkContainer
25 | 
26 | const DrinkBox = styled.div`
27 |             display: flex;
28 |             justify-content: center;
29 |             align-items: center;
30 |             flex-direction: column;
31 |             margin: 20px 0 20px 0;
32 |             background: #FFFFFF;
33 |             border-radius: 100% 25% 25% 25%/ 80% 25% 25% 25% ;
34 |             width: 160px;
35 | `
36 | 
37 | const ImgAndPrice = styled.div`
38 |             display: flex;
39 | `
40 | 
41 | const Price = styled.h1`
42 |             position: absolute;
43 |             padding-left: 70%;
44 |             font-size: 25px;
45 |             margin: 20px 10px 0  0;
46 | `
47 | 
48 | const DrinkIMG = styled.img`
49 |             width: 120px;
50 |             height: 120px; 
51 |             margin-right: 40px;
52 | `
53 | 
54 | const DrinkName = styled.h1`
55 |             font-size: 25px;
56 |             margin: 10px;
57 |             text-align: center;
58 | `


--------------------------------------------------------------------------------
/public/offline.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |             <meta charset="UTF-8">
 6 |             <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |             <title>Drink Menu</title>
 8 |             <style type="text/css">
 9 |                         html {
10 |                                     height: 100%;
11 |                         }
12 | 
13 |                         body {
14 |                                     height: 100%;
15 |                                     margin: 0;
16 |                                     background: #742E24;
17 |                                     display: flex;
18 |                                     align-items: center;
19 |                                     text-align: center;
20 |                                     justify-content: center;
21 |                         }
22 | 
23 |                         .city {
24 |                                     align-items: center;
25 |                                     width: 80%;
26 |                                     display: flex;
27 |                                     justify-content: center;
28 |                                     flex-direction: column;
29 |                                     padding: 40px 8%;
30 |                                     border-radius: 12px;
31 |                                     text-decoration: none;
32 |                                     background-color: #fff;
33 |                         }
34 | 
35 |                         .city-name {
36 |                                     font-size: 2em;
37 |                                     color: #181818;
38 |                         }
39 |             </style>
40 | </head>
41 | 
42 | <body>
43 |             <div class="city">
44 |                         <h2 class="city-name">
45 |                                     <span>Pls confirm your internet connection</span>
46 |                         </h2>
47 |             </div>
48 | </body>
49 | 
50 | </html>


--------------------------------------------------------------------------------
/src/components/AllDrinkList/Shakes.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react'
 2 | import PulseLoader from "react-spinners/PulseLoader";
 3 | import { Container } from './index'
 4 | import DrinkContainer from '../DrinkContainer';
 5 | 
 6 | function ShakesList() {
 7 |             const [drinkList, setDrinkList] = useState([])
 8 |             const [loading, setLoading] = useState(true)
 9 | 
10 |             useEffect(() => {
11 |                         const fetchDrinklist = async () => {
12 |                                     const res = await fetch('https://drink-menu.adaptable.app/api/drink')
13 |                                     const data = await res.json()
14 |                                     const dataFilter = data.filter(drinkType => drinkType.typOfDrink === 'Shakes')
15 |                                     setDrinkList(dataFilter)
16 |                                     setLoading(false)
17 |                         }
18 |                         fetchDrinklist()
19 |             }, [setDrinkList])
20 |             return (
21 |                         <>
22 |                                     {loading ? (<PulseLoader color='#ffff'
23 |                                                 size={100}
24 |                                                 aria-label="Loading Spinner"
25 |                                                 data-testid="loader"
26 |                                                 style={{
27 |                                                             display: 'grid', justifyItems: "center",
28 |                                                             alignItems: "center", gridTemplateColumns: '1fr 1fr 1fr',
29 |                                                             height: '90vh'
30 |                                                 }}
31 |                                     />) : (<Container>
32 |                                                 {drinkList.map((drink) => {
33 |                                                             return <DrinkContainer key={drink._id} drink={drink} />
34 |                                                 })}
35 |                                     </Container>
36 |                                     )}
37 | 
38 |                         </>
39 |             )
40 | }
41 | 
42 | export default ShakesList


--------------------------------------------------------------------------------
/src/components/AllDrinkList/CoffeeList.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react'
 2 | import PulseLoader from "react-spinners/PulseLoader";
 3 | import { Container } from './index'
 4 | import DrinkContainer from '../DrinkContainer';
 5 | 
 6 | function CoffeeList() {
 7 |             const [drinkList, setDrinkList] = useState([])
 8 |             const [loading, setLoading] = useState(true)
 9 | 
10 |             useEffect(() => {
11 |                         const fetchDrinklist = async () => {
12 |                                     const res = await fetch('https://drink-menu.adaptable.app/api/drink')
13 |                                     const data = await res.json()
14 |                                     const dataFilter = data.filter(drinkType => drinkType.typOfDrink === 'Coffee')
15 |                                     setDrinkList(dataFilter)
16 |                                     setLoading(false)
17 |                         }
18 |                         fetchDrinklist()
19 |             }, [setDrinkList])
20 |             return (
21 |                         <>
22 |                                     {loading ? (<PulseLoader color='#ffff'
23 |                                                 size={100}
24 |                                                 aria-label="Loading Spinner"
25 |                                                 data-testid="loader"
26 |                                                 style={{
27 |                                                             display: 'grid', justifyItems: "center",
28 |                                                             alignItems: "center", gridTemplateColumns: '1fr 1fr 1fr',
29 |                                                             height: '90vh'
30 |                                                 }}
31 |                                     />) : (<Container>
32 |                                                 {drinkList.map((drink) => {
33 |                                                             return <DrinkContainer key={drink._id} drink={drink} />
34 |                                                 })}
35 |                                     </Container>
36 |                                     )}
37 | 
38 |                         </>
39 |             )
40 | }
41 | 
42 | export default CoffeeList


--------------------------------------------------------------------------------
/src/components/AllDrinkList/CocktailList.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react'
 2 | import PulseLoader from "react-spinners/PulseLoader";
 3 | import { Container } from './index'
 4 | import DrinkContainer from '../DrinkContainer';
 5 | 
 6 | function CocktailList() {
 7 |             const [drinkList, setDrinkList] = useState([])
 8 |             const [loading, setLoading] = useState(true)
 9 | 
10 |             useEffect(() => {
11 |                         const fetchDrinklist = async () => {
12 |                                     const res = await fetch('https://drink-menu.adaptable.app/api/drink')
13 |                                     const data = await res.json()
14 |                                     const dataFilter = data.filter(drinkType => drinkType.typOfDrink === 'Cocktail')
15 |                                     setDrinkList(dataFilter)
16 |                                     setLoading(false)
17 |                         }
18 |                         fetchDrinklist()
19 |             }, [setDrinkList])
20 |             return (
21 |                         <>
22 |                                     {loading ? (<PulseLoader color='#ffff'
23 |                                                 size={100}
24 |                                                 aria-label="Loading Spinner"
25 |                                                 data-testid="loader"
26 |                                                 style={{
27 |                                                             display: 'grid', justifyItems: "center",
28 |                                                             alignItems: "center", gridTemplateColumns: '1fr 1fr 1fr',
29 |                                                             height: '90vh'
30 |                                                 }}
31 |                                     />) : (<Container>
32 |                                                 {drinkList.map((drink) => {
33 |                                                             return <DrinkContainer key={drink._id} drink={drink} />
34 |                                                 })}
35 |                                     </Container>
36 |                                     )}
37 | 
38 |                         </>
39 |             )
40 | }
41 | 
42 | export default CocktailList


--------------------------------------------------------------------------------
/src/components/AllDrinkList/Mocktails.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react'
 2 | import PulseLoader from "react-spinners/PulseLoader";
 3 | import { Container } from './index'
 4 | import DrinkContainer from '../DrinkContainer';
 5 | 
 6 | function MocktailsList() {
 7 |             const [drinkList, setDrinkList] = useState([])
 8 |             const [loading, setLoading] = useState(true)
 9 | 
10 |             useEffect(() => {
11 |                         const fetchDrinklist = async () => {
12 |                                     const res = await fetch('https://drink-menu.adaptable.app/api/drink')
13 |                                     const data = await res.json()
14 |                                     const dataFilter = data.filter(drinkType => drinkType.typOfDrink === 'Mocltail')
15 |                                     setDrinkList(dataFilter)
16 |                                     setLoading(false)
17 |                         }
18 |                         fetchDrinklist()
19 |             }, [setDrinkList])
20 |             return (
21 |                         <>
22 |                                     {loading ? (<PulseLoader color='#ffff'
23 |                                                 size={100}
24 |                                                 aria-label="Loading Spinner"
25 |                                                 data-testid="loader"
26 |                                                 style={{
27 |                                                             display: 'grid', justifyItems: "center",
28 |                                                             alignItems: "center", gridTemplateColumns: '1fr 1fr 1fr',
29 |                                                             height: '90vh'
30 |                                                 }}
31 |                                     />) : (<Container>
32 |                                                 {drinkList.map((drink) => {
33 |                                                             return <DrinkContainer key={drink._id} drink={drink} />
34 |                                                 })}
35 |                                     </Container>
36 |                                     )}
37 | 
38 |                         </>
39 |             )
40 | }
41 | 
42 | export default MocktailsList


--------------------------------------------------------------------------------
/src/components/AddDrink/AddDrink-style.js:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | export const Container = styled.div`
 4 |             display: flex;
 5 |             flex-direction: column;
 6 |             justify-content: center;
 7 | `
 8 | 
 9 | export const BackLogBox = styled.div`
10 |             display: flex;
11 |             align-items: center;
12 |             justify-content: space-between;
13 |             padding: 20px;
14 | `
15 | 
16 | export const Form = styled.form`
17 |             display: flex;
18 |             flex-direction: column;
19 |             align-items: center;
20 |             justify-content: center;
21 | `
22 | 
23 | export const Input = styled.input`
24 |             width: 200px;
25 |             height: 30px;
26 |             border-radius: 25px;
27 |             border: none;
28 |             margin: 10px 0 20px 0;
29 |             text-align: center;
30 |             box-shadow: none;
31 |             outline: none;
32 |             &:focus{
33 |                         width:250px;
34 |                         transition: 0.25s;
35 |             }
36 | `
37 | 
38 | export const Select = styled.select`
39 |             -webkit-appearance: none;
40 |             -moz-appearance: none;
41 |             -ms-appearance: none;
42 |             appearance: none;
43 |             outline: 0;
44 |             box-shadow: none;
45 |             border: 0 !important;
46 |             background: #FFFFFF;
47 |             background-image: none;
48 |             flex: 1;
49 |             width: 200px;
50 |             font-size: 24px;
51 |             border-radius: 25px;
52 |             text-align: center;
53 |             padding: 0 0.5em;
54 |             cursor: pointer;
55 |             margin: 10px 0 20px 0;
56 |             -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
57 | `
58 | 
59 | export const InputIMG = styled.input`
60 |             width: 200px;
61 |             background: #FFFFFF;
62 |             border-radius: 25px;
63 |             border: none;
64 |             margin: 10px 0 20px 0;
65 |             text-align: center;
66 |             box-shadow: none;
67 |             outline: none;
68 | `
69 | 
70 | export const Button = styled.button`
71 |             box-sizing: none;
72 |             outline: none;
73 |             border: none;
74 |             font-size: 24px;
75 |             border-radius: 20px;
76 |             padding: 5px;
77 | `


--------------------------------------------------------------------------------
/src/components/AllDrinkList/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react'
 2 | import PulseLoader from "react-spinners/PulseLoader";
 3 | import styled from 'styled-components'
 4 | import DrinkContainer from '../DrinkContainer';
 5 | 
 6 | 
 7 | const AllDrinkList = () => {
 8 | 
 9 |             const [drinkList, setDrinkList] = useState([])
10 |             const [loading, setLoading] = useState(true)
11 | 
12 |             useEffect(() => {
13 |                         const fetchDrinklist = async () => {
14 |                                     const res = await fetch('https://drink-menu.adaptable.app/api/drink')
15 |                                     const data = await res.json()
16 |                                     setDrinkList(data)
17 |                                     setLoading(false)
18 |                         }
19 |                         fetchDrinklist()
20 |             }, [setDrinkList])
21 |             return (
22 |                         <>
23 |                                     {loading ? (<PulseLoader color='#ffff'
24 |                                                 size={100}
25 |                                                 aria-label="Loading Spinner"
26 |                                                 data-testid="loader"
27 |                                                 style={{
28 |                                                             display: 'grid', justifyItems: "center",
29 |                                                             alignItems: "center", gridTemplateColumns: '1fr 1fr 1fr',
30 |                                                             height: '90vh'
31 |                                                 }}
32 |                                     />) : (<Container>
33 |                                                 {drinkList.map((drink) => {
34 |                                                             return <DrinkContainer key={drink._id} drink={drink} />
35 |                                                 })}
36 |                                     </Container>
37 |                                     )}
38 | 
39 |                         </>
40 |             )
41 | }
42 | 
43 | export default AllDrinkList
44 | 
45 | export const Container = styled.div`
46 |             display:  grid;
47 |             justify-items: center;
48 |             align-content: center;
49 |             min-height: 80vh;
50 |             grid-template-columns: 1fr 1fr;
51 |             background: linear-gradient(95deg, rgba(159, 79, 67, 1) 5%, rgba(116, 46, 36, 1) 100%);
52 | 
53 |             @media screen and (max-width: 330px) {
54 |                         grid-template-columns: 1fr;
55 |             }
56 |             @media screen and (min-width: 800px) {
57 |                         grid-template-columns: 1fr 1fr 1fr;
58 |             }
59 |             @media screen and (min-width: 1200px) {
60 |                         grid-template-columns: 1fr 1fr 1fr 1fr;
61 |             }
62 | 
63 | `


--------------------------------------------------------------------------------
/src/components/AddDrink/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import { Container, BackLogBox, Form, Input, Select, InputIMG, Button } from './AddDrink-style'
 3 | import { FaBackspace, FaDoorOpen } from 'react-icons/fa'
 4 | import { Link } from 'react-router-dom'
 5 | import { CafeName } from '../Home/home-style'
 6 | import axios from 'axios'
 7 | import Swal from "sweetalert2";
 8 | 
 9 | 
10 | function AddDrink() {
11 | 
12 |             const [drinkName, setDrinkName] = useState('')
13 |             const [price, setPrice] = useState()
14 |             const [typOfDrink, setTypOfDrink] = useState('')
15 |             const [image, setImage] = useState()
16 | 
17 |             const onChangeImageName = (e) => {
18 |                         setImage(e.target.files[0])
19 |             }
20 |             const handleSubmit = (e) => {
21 |                         e.preventDefault()
22 |                         const formData = new FormData();
23 | 
24 |                         formData.append('drinkName', drinkName)
25 |                         formData.append('price', price)
26 |                         formData.append('typOfDrink', typOfDrink)
27 |                         formData.append('image', image)
28 | 
29 |                         axios.post('https://drink-menu.adaptable.app/api/drink', formData)
30 |                                     .then(() => {
31 |                                                 Swal.fire(
32 |                                                             'Add drink',
33 |                                                             'New Drink has been added.',
34 |                                                             'success')
35 |                                     })
36 |                                     .catch(() => {
37 |                                                 Swal.fire({
38 |                                                             icon: 'error',
39 |                                                             title: 'Oops...',
40 |                                                             text: 'Please put all requirements in the form.'
41 |                                                 })
42 |                                     })
43 | 
44 |                         setDrinkName('')
45 |                         setPrice('')
46 |                         setTypOfDrink('')
47 |                         document.forms[0].reset()
48 |             }
49 | 
50 |             return (
51 |                         <Container>
52 |                                     <BackLogBox>
53 |                                                 <Link to='/' >
54 |                                                             <FaBackspace style={{ color: "white", fontSize: "36" }} />
55 |                                                 </Link>
56 |                                                 <FaDoorOpen style={{ color: "white", fontSize: "36" }} />
57 |                                     </BackLogBox>
58 |                                     <CafeName style={{ fontSize: '62px' }}>CAFE BOX</CafeName>
59 |                                     <Form onSubmit={handleSubmit} encType='multipart/form-data'>
60 |                                                 <Input type='text' placeholder='Name the Drink'
61 |                                                             onChange={(e) => setDrinkName(e.target.value)}
62 |                                                             value={drinkName} />
63 |                                                 <Input type='number' placeholder='Price'
64 |                                                             onChange={(e) => setPrice(e.target.value)}
65 |                                                             value={price} />
66 |                                                 <Select onChange={(e) => setTypOfDrink(e.target.value)}
67 |                                                             value={typOfDrink}>
68 |                                                             <option >Select Type:</option>
69 |                                                             <option value='Coffee'>Coffee</option>
70 |                                                             <option value='Cocktail'>Cocktail</option>
71 |                                                             <option value='Shakes'>Shakes</option>
72 |                                                             <option value='Mocltail'>Mocltail</option>
73 |                                                 </Select>
74 |                                                 <InputIMG type="file"
75 |                                                             accept="image/png, image/jpeg , image/gif"
76 |                                                             image='image'
77 |                                                             onChange={onChangeImageName}
78 |                                                 />
79 |                                                 <Button>Add Drink</Button>
80 |                                     </Form>
81 |                         </Container>
82 |             )
83 | }
84 | 
85 | export default AddDrink


--------------------------------------------------------------------------------