-
Notifications
You must be signed in to change notification settings - Fork 1
/
Content.tsx
121 lines (112 loc) · 4.45 KB
/
Content.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import { Sort } from "./CustomSort/Sort";
import { filterFields } from "../data/filterFields";
import { FiltersTop } from "./Filters/FiltersTop";
import { useTypedSelector } from "../hooks/useTypedSelector";
import { useTypedDispatch } from "../hooks/useTypedDispatch";
import { Products } from "./Products";
import { SidebarFilters } from "./Filters/SidebarFilters";
import { setCareTypesFilter } from "../store/slices/filtersSlice";
import { SelectedFilters } from "./UI/SelectedFilters";
import { Pagination } from "./Pagination";
import { fetchFilteredProducts, fetchPageProducts, sortProducts } from "../store/slices/productSlice";
import { useEffect, useState } from "react";
import { useWindowSize } from "../hooks/useWindowSize";
import { Breadcrumbs } from "./UI/Breadcrumbs";
export function Content(props: {breadcrumbs?: string}) {
const productsState = useTypedSelector(state => state.products);
const filters = useTypedSelector(state => state.filters);
const pagination = useTypedSelector(state => state.pagination);
const sort = useTypedSelector(state => state.sort);
const isDropDownOpen = useTypedSelector(state => state.dropDown.isOpen);
const dispatch = useTypedDispatch();
const [firstRenderDone, setFirstRenderDone] = useState(false);
const [firstRenderDoneFiltered, setFirstRenderDoneFiltered] = useState(false);
const [width, height] = useWindowSize();
useEffect(() => {
if (firstRenderDone) {
dispatch(fetchFilteredProducts({
maxPrice: filters.price_max,
minPrice: filters.price_min,
selectedManufacturers: filters.manufacturersList,
careTypes: filters.careTypes,
shownProductsNumber: pagination.visibleProductsNumber,
page: pagination.currentPage,
sortParams: {
order: sort.order,
param: sort.param
}
}));
} else {
setFirstRenderDone(true);
}
}, [filters]);
useEffect(() => {
dispatch(sortProducts({
sortParam: sort.param,
sortOrder: sort.order
}));
}, [sort]);
useEffect(() => {
if (firstRenderDoneFiltered) {
dispatch(fetchPageProducts({
page: pagination.currentPage,
productsNumber: pagination.visibleProductsNumber
}));
} else {
setFirstRenderDoneFiltered(true);
}
}, [pagination]);
function handleCareTypeFilterClick(e: { target: HTMLInputElement }) {
const clickedFilter = e.target;
const filterValue = clickedFilter.dataset.value;
const careTypes = filters.careTypes;
if (filterValue) {
const isActive = careTypes.includes(filterValue);
if (isActive) {
const index = careTypes.findIndex(el => el === filterValue);
if (index === 0) {
dispatch(setCareTypesFilter(careTypes.slice(1, careTypes.length)));
} else if (index === careTypes.length - 1) {
dispatch(setCareTypesFilter(careTypes.slice(0, careTypes.length - 1)));
} else {
dispatch(setCareTypesFilter(careTypes.slice(0, index).concat(careTypes.slice(index + 1, careTypes.length))));
}
} else {
dispatch(setCareTypesFilter([...careTypes, filterValue]));
}
}
}
return(
<main className="content">
<Breadcrumbs page='catalog' />
<div className="content__catalog catalog-content">
<div className="container">
<div className="catalog-content__menu">
<div className="catalog-content__top">
{width <= 768 && productsState.status === 'loading' ?
null : <div className="catalog-content__title">Косметика и гигиена <span>{}</span></div>
}
{width <= 768 ? null : <Sort />}
</div>
{(width <= 768 && productsState.status === 'loading') || isDropDownOpen ?
null : <FiltersTop top={true} className='catalog-content__filters-top'
clickHandler={handleCareTypeFilterClick} list={filterFields} />
}
{width <= 768 && !isDropDownOpen && productsState.status !== 'loading' ? <Sort /> : null}
<SelectedFilters />
<SidebarFilters clickHandler={handleCareTypeFilterClick} />
{isDropDownOpen ? null : <Products />}
{isDropDownOpen ? null : <Pagination />}
{!isDropDownOpen ? <div className="catalog-content__bottom-info bottom-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum ut justo,
vestibulum sagittis iaculis iaculis. Quis mattis vulputate feugiat massa vestibulum duis.
Faucibus consectetur aliquet sed pellentesque consequat consectetur congue mauris venenatis.
Nunc elit, dignissim sed nulla ullamcorper enim, malesuada.
</div> : null
}
</div>
</div>
</div>
</main>
)
}