added cocktails page

Author: andrii-nastenko

package-lock.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.21.1",
+    "normalize.css": "^8.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",
@@ -35,13 +36,13 @@
   },
   "devDependencies": {
     "@types/axios": "^0.14.0",
+    "@types/node": "^12.19.9",
+    "@types/react": "^16.14.2",
+    "@types/react-dom": "^16.9.10",
     "@types/react-redux": "^7.1.12",
     "@types/react-router-dom": "^5.1.6",
     "@types/redux": "^3.6.0",
     "@types/redux-saga": "^0.10.5",
-    "@types/node": "^12.19.9",
-    "@types/react": "^16.14.2",
-    "@types/react-dom": "^16.9.10",
     "redux-devtools-extension": "^2.13.8",
     "sass": "^1.30.0",
     "typescript": "^4.1.3"

package.json

@@ -1,11 +1,26 @@
-import React from 'react';
+import {useEffect} from "react";
+import {Route, Switch} from "react-router-dom";
 import style from './styles/App.module.scss';
+import {Nav} from "./components/Nav";
+import {Cocktails} from "./pages/Cocktails";
+import {Details} from "./pages/Details";
+import {NotFound} from "./pages/NotFound";
+
+export function App() {
+    useEffect(() => {
+        window.addEventListener("unhandledrejection", (reason: PromiseRejectionEvent) => {
+            alert(reason.reason.message)
+        })
+    }, [])
 
-function App() {
     return (
-        <div className={style.container}>
-        </div>
+        <main className={style.container}>
+            <Nav/>
+            <Switch>
+                <Route exact path={'/'} component={Cocktails}/>
+                <Route path={'/details'} component={Details}/>
+                <Route component={NotFound}/>
+            </Switch>
+        </main>
     )
 }
-
-export default App

src/App.tsx

@@ -0,0 +1,11 @@
+import style from '../styles/Nav.module.scss';
+import {NavLink} from "react-router-dom";
+
+export function Nav() {
+    return (
+        <nav className={style.container}>
+            <NavLink activeClassName={style.active} exact to={'/'}>Cocktails</NavLink>
+            <NavLink activeClassName={style.active} to={'/details'}>Details</NavLink>
+        </nav>
+    )
+}

src/components/Nav.tsx

@@ -1,15 +1,19 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
+import {StrictMode} from "react";
+import 'normalize.css';
 import './styles/index.scss';
-import App from './App';
+import {App} from './App';
 import {Provider} from "react-redux";
 import {store} from "./redux/store";
+import {BrowserRouter} from "react-router-dom";
 
 ReactDOM.render(
-    <React.StrictMode>
+    <StrictMode>
         <Provider store={store}>
-            <App/>
+            <BrowserRouter>
+                <App/>
+            </BrowserRouter>
         </Provider>
-    </React.StrictMode>,
+    </StrictMode>,
     document.getElementById('root')
 )

src/index.tsx

@@ -0,0 +1,43 @@
+import style from '../styles/Cocktails.module.scss';
+import {useDispatch, useSelector} from "react-redux";
+import {stateType} from "../interfaces/stateType";
+import {useEffect, useState} from "react";
+import {requestFilterIsAlcoholic} from "../redux/drinksActions";
+
+export function Cocktails() {
+    const dispatch = useDispatch()
+    const state = useSelector((state: stateType) => state.drinks)
+    const [isAlcoholic, setIsAlcoholic] = useState(false)
+
+    useEffect(() => {
+        dispatch(requestFilterIsAlcoholic(isAlcoholic))
+    }, [isAlcoholic, dispatch])
+
+    return (
+        <div className={style.container}>
+            {isAlcoholic ? <h2>Alcoholic Cocktails</h2> : <h2>Non-Alcoholic Cocktails</h2>}
+            <section className={style.drinksFilter}>
+                <span>
+                    <input type="radio" id="non-alcoholic" name="cocktails" checked={!isAlcoholic}
+                           onChange={() => setIsAlcoholic(!isAlcoholic)}/>
+                    <label htmlFor="non-alcoholic">Non-alcoholic</label>
+                </span>
+                <span>
+                    <input type="radio" id="alcoholic" name="cocktails" checked={isAlcoholic}
+                           onChange={() => setIsAlcoholic(!isAlcoholic)}/>
+                    <label htmlFor="alcoholic">Alcoholic</label>
+                </span>
+            </section>
+            <section className={style.drinksSection}>
+                {state.drinks.length && state.drinks.map(item => {
+                    return (
+                        <div key={item.idDrink} className={style.drinkItem}>
+                            <p>{item.strDrink}</p>
+                            <img src={item.strDrinkThumb} alt={item.strDrink}/>
+                        </div>
+                    )
+                })}
+            </section>
+        </div>
+    )
+}

src/pages/Cocktails.tsx

@@ -0,0 +1,7 @@
+import style from '../styles/Details.module.scss';
+
+export function Details() {
+    return (
+        <div className={style.container}>Details</div>
+    )
+}

src/pages/Details.tsx

@@ -0,0 +1,15 @@
+import style from '../styles/NotFound.module.scss';
+import {NavLink} from "react-router-dom";
+
+export function NotFound() {
+    return (
+        <div className={style.container}>
+            <p>Page was not found :(</p>
+            <NavLink exact to={'/'}>
+                <button>
+                    Back
+                </button>
+            </NavLink>
+        </div>
+    )
+}

src/pages/NotFound.tsx

@@ -10,7 +10,7 @@ export const rootReducer = combineReducers({
 
 const sagaMiddleware = createSagaMiddleware()
 
-export const store = createStore(drinksReducer, compose(
+export const store = createStore(rootReducer, compose(
     applyMiddleware(sagaMiddleware),
     composeWithDevTools() ? composeWithDevTools() : (f: () => void) => f
 ))

src/redux/store.ts

@@ -1 +1,7 @@
-.container {}
+.container {
+  display: grid;
+  grid-template-rows: 70px 1fr;
+  min-height: 100vh;
+  min-width: 320px;
+  background-color: #8080802D;
+}

src/styles/App.module.scss

@@ -0,0 +1,47 @@
+.container {
+  h2 {
+    text-align: center;
+  }
+
+  .drinksFilter {
+    margin: auto;
+    width: fit-content;
+
+    span {
+      padding: 0 10px;
+    }
+
+    input, label {
+      cursor: pointer;
+    }
+
+    label {
+      margin-left: 5px;
+    }
+  }
+
+  .drinksSection {
+    margin: 20px 10%;
+    justify-content: center;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 175px);
+    grid-auto-rows: 250px;
+    grid-gap: 30px;
+
+    .drinkItem {
+      p {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        height: 43px;
+        overflow: hidden;
+      }
+
+      img {
+        width: 175px;
+        height: 175px;
+      }
+    }
+  }
+}

src/styles/Cocktails.module.scss

@@ -0,0 +1 @@
+.container {}

src/styles/Details.module.scss

@@ -0,0 +1,25 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 24px;
+  padding: 0 30px;
+  background-color: #000;
+
+  a {
+    text-decoration: none;
+    color: #fff;
+
+    &:hover {
+      color: #fff;
+    }
+
+    &.active {
+      color: #7fff00;
+
+      &:hover {
+        color: #7fff00;
+      }
+    }
+  }
+}

src/styles/Nav.module.scss

@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 26px;
+  font-weight: 700;
+  height: calc(100vh - 70px);
+
+  button {
+    cursor: pointer;
+    padding: 5px 10px;
+  }
+}

src/styles/NotFound.module.scss

@@ -1,5 +1,4 @@
 body {
-  margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
   'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
   sans-serif;