Skip to content

Commit c18b238

Browse files
andrii-nastenkoandrii-nastenko
committed
added search drinks page
1 parent 0011eaa commit c18b238

24 files changed

+251
-136
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Cocktails catalog
1+
# Drinks catalog
22

33

44
## Description:

‎package-lock.json

+27-19
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"react-redux": "^7.2.2",
1111
"react-router-dom": "^5.2.0",
1212
"react-scripts": "4.0.1",
13+
"react-scroll-to-top": "^1.0.5",
1314
"redux": "^4.0.5",
1415
"redux-saga": "^1.1.3"
1516
},

‎public/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
<link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
66
<meta name="viewport" content="width=device-width, initial-scale=1"/>
77
<meta name="theme-color" content="#000000"/>
8-
<meta name="description" content="Cocktails catalog"/>
8+
<meta name="description" content="Drinks catalog"/>
99
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
1010
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
11-
<title>Cocktails</title>
11+
<title>Drinks</title>
1212
</head>
1313
<body>
1414
<noscript>You need to enable JavaScript to run this app.</noscript>

‎public/manifest.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"short_name": "Cocktails App",
3-
"name": "Cocktails App",
2+
"short_name": "Drinks App",
3+
"name": "Drinks App",
44
"icons": [
55
{
66
"src": "favicon.ico",

‎src/App.tsx

+13-5
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,17 @@ import {useEffect} from "react";
22
import {Route, Switch} from "react-router-dom";
33
import style from './styles/App.module.scss';
44
import {Nav} from "./components/Nav";
5-
import {Cocktails} from "./pages/Cocktails";
6-
import {Details} from "./pages/Details";
5+
import {Drinks} from "./pages/Drinks";
6+
import {Search} from "./pages/Search";
77
import {NotFound} from "./pages/NotFound";
8+
import {useSelector} from "react-redux";
9+
import {stateType} from "./interfaces/stateType";
10+
import {Preloader} from "./components/Preloader";
11+
import ScrollToTop from "react-scroll-to-top";
812

913
export function App() {
14+
const state = useSelector((state: stateType) => state.drinks)
15+
1016
useEffect(() => {
1117
window.addEventListener("unhandledrejection", (reason: PromiseRejectionEvent) => {
1218
alert(reason.reason.message)
@@ -17,10 +23,12 @@ export function App() {
1723
<main className={style.container}>
1824
<Nav/>
1925
<Switch>
20-
<Route exact path={'/'} component={Cocktails}/>
21-
<Route path={'/details'} component={Details}/>
26+
<Route exact path={'/'} component={Drinks}/>
27+
<Route path={'/search'} component={Search}/>
2228
<Route component={NotFound}/>
2329
</Switch>
30+
<ScrollToTop top={150} smooth style={{right: '20px'}}/>
31+
{state.isFetching ? <Preloader/> : null}
2432
</main>
2533
)
26-
}
34+
}

‎src/api/cocktailsAPI.ts

-39
This file was deleted.

‎src/api/drinksAPI.ts

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import axios from "axios";
2+
import {drinkItemType, drinksType} from "../interfaces/drinksApiType";
3+
4+
const instance = axios.create({
5+
baseURL: 'https://www.thecocktaildb.com/api/json/v1/1/'
6+
})
7+
8+
export const drinksAPI = {
9+
searchByName(name: string) {
10+
return instance.get<drinksType>('search.php', {params: {s: name}})
11+
.then(res => res.data && res.data.drinks
12+
? res.data.drinks.map((drinkItem: drinkItemType) => {
13+
return {
14+
idDrink: drinkItem.idDrink,
15+
strDrink: drinkItem.strDrink,
16+
strDrinkThumb: drinkItem.strDrinkThumb,
17+
strAlcoholic: drinkItem.strAlcoholic
18+
}
19+
})
20+
: null)
21+
.catch(error => alert(error))
22+
},
23+
filterIsAlcoholic(isAlcoholic: boolean) {
24+
return instance.get<drinksType>('filter.php', {params: {a: isAlcoholic ? 'Alcoholic' : 'Non_Alcoholic'}})
25+
.then(res => res.data.drinks)
26+
.catch(error => alert(error))
27+
},
28+
getDetails(id: string) {
29+
return instance.get<drinksType>('lookup.php', {params: {i: id}})
30+
.then(res => res.data && res.data.drinks
31+
? res.data.drinks.map((drinkItem: drinkItemType) => {
32+
return {
33+
idDrink: drinkItem.idDrink,
34+
strDrink: drinkItem.strDrink,
35+
strDrinkThumb: drinkItem.strDrinkThumb,
36+
strAlcoholic: drinkItem.strAlcoholic,
37+
strInstructions: drinkItem.strInstructions
38+
}
39+
})
40+
: null)
41+
.catch(error => alert(error))
42+
}
43+
}

‎src/components/DrinksGrid.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import style from "../styles/DrinksGrid.module.scss";
2+
import {drinksType} from "../interfaces/drinksApiType";
3+
4+
export function DrinksGrid({drinks}: drinksType) {
5+
return (
6+
<section className={style.drinksSection}>
7+
{drinks
8+
? drinks.map(item => {
9+
return (
10+
<div key={item.idDrink} className={style.drinkItem}>
11+
<p>{item.strDrink}</p>
12+
<img src={item.strDrinkThumb} alt={item.strDrink}/>
13+
</div>
14+
)
15+
})
16+
: null}
17+
</section>
18+
)
19+
}

‎src/components/Nav.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import {NavLink} from "react-router-dom";
44
export function Nav() {
55
return (
66
<nav className={style.container}>
7-
<NavLink activeClassName={style.active} exact to={'/'}>Cocktails</NavLink>
8-
<NavLink activeClassName={style.active} to={'/details'}>Details</NavLink>
7+
<NavLink activeClassName={style.active} exact to={'/'}>Drinks</NavLink>
8+
<NavLink activeClassName={style.active} to={'/search'}>Search</NavLink>
99
</nav>
1010
)
1111
}

‎src/components/Preloader.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import style from '../styles/Preloader.module.scss';
2+
3+
export function Preloader() {
4+
return (
5+
<div className={style.container}>
6+
<div/>
7+
</div>
8+
)
9+
}

‎src/interfaces/actionsType.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {
22
SET_DETAILS, SET_FILTER_IS_ALCOHOLIC, IS_FETCHING, SET_SEARCH_BY_NAME,
33
REQUEST_SEARCH_BY_NAME, REQUEST_FILTER_IS_ALCOHOLIC, REQUEST_DETAILS
44
} from "../redux/drinksActions";
5-
import {drinkItem} from "./cocktailsType";
5+
import {drinkItemType} from "./drinksApiType";
66

77
export interface isFetchingType {
88
type: typeof IS_FETCHING
@@ -16,7 +16,7 @@ export interface requestFilterIsAlcoholicType {
1616

1717
export interface setFilterIsAlcoholicType {
1818
type: typeof SET_FILTER_IS_ALCOHOLIC
19-
drinks: Array<drinkItem>
19+
drinks: Array<drinkItemType>
2020
}
2121

2222
export interface requestSearchByNameType {
@@ -26,7 +26,7 @@ export interface requestSearchByNameType {
2626

2727
export interface setSearchByNameType {
2828
type: typeof SET_SEARCH_BY_NAME
29-
drinks: Array<drinkItem>
29+
drinks: Array<drinkItemType>
3030
}
3131

3232
export interface requestDetailsType {
@@ -36,7 +36,7 @@ export interface requestDetailsType {
3636

3737
export interface setDetailsType {
3838
type: typeof SET_DETAILS
39-
drinkDetails: drinkItem
39+
drinkDetails: drinkItemType
4040
}
4141

4242
export type reducerActionsType =

0 commit comments

Comments
 (0)