import React, { useState } from "react";
import Json from "../JSON/Salad";
import styles from "../Drawer.module.scss";
import Pagination from "./Pagination";
function Salad(props) {
const [json, setJson] = useState(Json);
const [currentPage, setCurrentPage] = useState(0);
const [countriesPerPage] = useState(6);
const page = (pageNumber) => setCurrentPage(pageNumber);
const nextPage = () => {
setCurrentPage((prev) =>
prev < json[0].length / countriesPerPage - 1 ? prev + 1 : prev
);
};
const prevPage = () => {
setCurrentPage((prev) =>
prev > json[0].length / json[0].length - 1 ? prev - 1 : prev
);
};
function changeMinus(a, b) {
if (a.price > b.price) return -1;
if (a.price == b.price) return 0;
if (a.price < b.price) return 1;
}
function changePlus(a, b) {
if (a.price > b.price) return 1;
if (a.price == b.price) return 0;
if (a.price < b.price) return -1;
}
function changePopular(a, b) {
if (a.price > b.price) return 1;
if (a.price == b.price) return 0;
if (a.price < b.price) return -1;
}
function changeDiscussed(a, b) {
if (a.price > b.price) return -1;
if (a.price == b.price) return 0;
if (a.price < b.price) return 1;
}
function changeBest(a, b) {
if (a.name > b.name) return -1;
if (a.name == b.name) return 1;
if (a.name < b.name) return 0;
}
React.useEffect(() => {
const newArr = [...json];
if (props.selected === "По популярности") {
for (let i = 0; i < newArr.length; i++) {
newArr[i].sort(changePopular);
}
} else if (props.selected === "По возрастанию цены") {
for (let i = 0; i < newArr.length; i++) {
newArr[i].sort(changePlus);
}
} else if (props.selected === "По уменьшению цены") {
for (let i = 0; i < newArr.length; i++) {
newArr[i].sort(changeMinus);
}
} else if (props.selected === "Сначала обсуждаемые") {
for (let i = 0; i < newArr.length; i++) {
newArr[i].sort(changeDiscussed);
}
} else if (props.selected === "Сначала с лучшей оценкой") {
for (let i = 0; i < newArr.length; i++) {
newArr[i].sort(changeBest);
}
}
setJson(newArr);
}, [props]);
function division(arr, chunkSize) {
const res = [];
while (arr.length > 0) {
const chunk = arr.splice(0, chunkSize);
res.push(chunk);
}
return res;
}
const f = [...json[0]];
const arrX = division(f, 6);
let block = arrX[currentPage].map((item, index) => (
<div className={styles.item_description} key={index}>
<img
className={styles.salad}
src={item.image}
height="200px"
width="305px"
/>
<div className={styles.double}>
<p className={styles.quantity}>{item.quantity}</p>
<p className={styles.priceLow}>{item.price}</p>
</div>
<p className={styles.name}>{item.name}</p>
<p className={styles.price}>{item.price}</p>
</div>
));
let z = [];
arrX.forEach((item, index) => {
z.push(index);
});
return (
<div className={styles.ItemsAndFlip}>
<div className={styles.items}>{block}</div>
<div className={styles.flipping}>
<button className={styles.btn_primary_Prev} onClick={prevPage}>
{"<"}
</button>
<Pagination
currentPage={currentPage}
countriesPerPage={countriesPerPage}
totalCountries={json[0].length}
page={page}
/>
<button className={styles.btn_primary_Next} onClick={nextPage}>
{">"}
</button>
</div>
</div>
);
}
export default Salad;import React, { useEffect, useState } from "react";
import styles from "../Drawer.module.scss";
const Pagination = ({
countriesPerPage,
totalCountries,
currentPage,
page,
}) => {
const pageNumbers = [];
for (let i = 0; i < Math.ceil(totalCountries / countriesPerPage); i++) {
pageNumbers.push(i);
}
const [arrOfCurrButtons, setArrOfCurrButtons] = useState([]);
useEffect(() => {
let tempNumberOfPages = [...pageNumbers];
let dotsInitial = "...";
let dotsLeft = "... ";
let dotsRight = " ...";
if (currentPage >= 0 && currentPage <= 3) {
tempNumberOfPages = [0, 1, 2, 3, 4, dotsLeft, pageNumbers.length - 1];
} else if (currentPage === 4) {
const sliced = pageNumbers.slice(1, 6);
tempNumberOfPages = [...sliced, dotsInitial, pageNumbers.length - 1];
} else if (currentPage > 4 && currentPage < pageNumbers.length - 2) {
// from 5 to 8 -> (10 - 2)
const sliced1 = pageNumbers.slice(currentPage - 2, currentPage); // sliced1 (5-2, 5) -> [4,5]
const sliced2 = pageNumbers.slice(currentPage, currentPage + 1); // sliced1 (5, 5+1) -> [6]
tempNumberOfPages = [
1,
dotsInitial,
...sliced1,
...sliced2,
dotsInitial,
pageNumbers.length - 1,
]; // [1, '...', 4, 5, 6, '...', 10]
} else if (currentPage > pageNumbers.length - 3) {
// > 7
const sliced = pageNumbers.slice(pageNumbers.length - 4); // slice(10-4)
tempNumberOfPages = [1, dotsRight, ...sliced];
} else if (currentPage === dotsInitial) {
// [1, 2, 3, 4, "...", 10].length = 6 - 3 = 3
// arrOfCurrButtons[3] = 4 + 1 = 5
// or
// [1, 2, 3, 4, 5, "...", 10].length = 7 - 3 = 4
// [1, 2, 3, 4, 5, "...", 10][4] = 5 + 1 = 6
page(arrOfCurrButtons[arrOfCurrButtons.length - 3] + 1);
} else if (currentPage === dotsRight) {
page(arrOfCurrButtons[3] + 2);
} else if (currentPage === dotsLeft) {
page(arrOfCurrButtons[3] - 2);
}
setArrOfCurrButtons(tempNumberOfPages);
page(currentPage);
}, [currentPage]);
return (
<div className={styles.pagination}>
{arrOfCurrButtons.map((number, index) => (
<p key={index} onClick={() => page(number)}>
{number}
</p>
))}
</div>
);
};
export default Pagination;const Json = [
[
{
image: "../img/Салаты/Ананас, курица, сыр и чеснок.jpg",
name: "Салат с ананасом, курицей, сыром и чесноком",
price: "59 руб",
basket: "В корзину",
},
{
image: "../img/Салаты/Винегрет.jpg",
name: "Салат Винегрет",
price: "49 руб",
basket: "В корзину",
},
{
image: "../img/Салаты/Крабовые палочки.jpg",
name: "Салат с крабовыми палочками",
price: "44 руб",
basket: "В корзину",
},
{
image: "../img/Салаты/Морковь, майонез и чеснок.jpg",
name: "Салат с марковью, майонезом и чесноком",
price: "41 руб",
basket: "В корзину",
},
{
image: "../img/Салаты/Оливье.jpg",
name: "Салат Ольвие",
price: "44 руб",
basket: "В корзину",
},
{
image: "../img/Салаты/Цезарь.jpg",
name: "Салат Цезарь",
price: "59 руб",
basket: "В корзину",
},
{
image: "../img/Салаты/Оливье.jpg",
name: "Салат Ольвие",
price: "44 руб",
basket: "В корзину",
},
{
image: "../img/Салаты/Цезарь.jpg",
name: "Салат Цезарь",
price: "59 руб",
basket: "В корзину",
},
{
image: "../img/Салаты/Ананас, курица, сыр и чеснок.jpg",
name: "Салат с ананасом, курицей, сыром и чесноком",
price: "59 руб",
basket: "В корзину",
},
{
image: "../img/Салаты/Винегрет.jpg",
name: "Салат Винегрет",
price: "49 руб",
basket: "В корзину",
},
{
image: "../img/Салаты/Крабовые палочки.jpg",
name: "Салат с крабовыми палочками",
price: "44 руб",
basket: "В корзину",
},
{
image: "../img/Салаты/Морковь, майонез и чеснок.jpg",
name: "Салат с марковью, майонезом и чесноком",
price: "41 руб",
basket: "В корзину",
},
{
image: "../img/Салаты/Оливье.jpg",
name: "Салат Ольвие",
price: "44 руб",
basket: "В корзину",
}
];
export default Json;"..."у меня появляется белый экран, хотя я сделал так, чтобы по нажатию'...'происходили другие действия, а именно эти:let dotsInitial = "...";
let dotsLeft = "...";
let dotsRight = "...";
else if (currentPage === dotsInitial) {
// [1, 2, 3, 4, "...", 10].length = 6 - 3 = 3
// arrOfCurrButtons[3] = 4 + 1 = 5
// or
// [1, 2, 3, 4, 5, "...", 10].length = 7 - 3 = 4
// [1, 2, 3, 4, 5, "...", 10][4] = 5 + 1 = 6
page(arrOfCurrButtons[arrOfCurrButtons.length - 3] + 1);
} else if (currentPage === dotsRight) {
page(arrOfCurrButtons[3] + 2);
} else if (currentPage === dotsLeft) {
page(arrOfCurrButtons[3] - 2);
}
Простой
Простой
Средний
Средний
