#9: 🍕 React Pizza v2 — Делаем функционал сортировки и фильтрации пицц

React Pizza V2 — Это обновлённый курс на 2022 год, одного из самых популярных курсов 🔥 по ReactJS для начинающих.

❤️ Поддержка:

📝 Полный стек:
- ReactJS 18
- TypeScript
- Redux Toolkit (хранение данных / пицц)
- React Router v6 (навигация)
- Axios + Fetch (отправка запроса на бэкенд)
- React Hooks (хуки)
- Prettier (форматирование кода)
- CSS-Modules / SCSS (стилизация)
- React Content Loader (скелетон)
- React Pagination (пагинация)
- Lodash.Debounce
- Code Splitting, React Loadable, useWhyDidYouUpdate

Таймкоды: еще не готовы

🔗 Следите за обновлениями и информацией в:

[Shved_.]

0:00 Вступление, Запугивание сложностями, Подбадривание
3:55 Формулируем задачу с сортировкой
5:31 Изучаем запросы и сортировку в Mockapi
12:40 В чем проблемма со state
19:10 Записываем в state выбранную категории
30:52 Логика вывода на страницу товар по категориям
37:02 Логика вывода на страницу товар по сортировке
53:00 Более точная настройка вывода по сортировке
1:02:01 Резюмируем

[klogachev]

Делаю сейчас маленький проект по твоему уроку. Застрял на этом видосе. Спасибо!!! тебе большое за подробное объяснение. Посмотрел его 4 раза. Наконец то дошло как пробрасывать функцию. С начало думал, зачем так подробно объясняешь и так вроде все понятно. Но на этом видосе, до меня реально доходило как до жирафа)))) Еще раз спасибо тебе за годный контент. +100500 так как ты его преподносишь!!!

[СергейЦарелунг]

И хотел бы порекомендовать прикольные расширения для VS code.
"auto import" для автоматического добавления импорта в компоненте.
"html to jsx" для конвертации верстки в jsx.
еще раз спасибо за науку и удачи Вам во всем.

[ГеннадийГорохов-цн]

Превосходное видео))) Получаю удовольствие когда обучаюсь)))

[ЛусінеАтаджанян]

Лучшие курс по react! Продолжай а том же духе!

[_mikser]

Для сортировки по категориям, лучше в БД в массив категорий добавить несколько значений.
Я добавил все пиццы категорию "0" и другую катерию подходящую пицце.
Так как одна пицца может быть как "мясная" так и "острая".
При таком добавлении нескольких категорий, сортировка всегда возвращает правильный список.
"category": [0, 2, 5],

[jenek]

Круто) не знал некоторых вещей, спасибо 🤘🤘😌🤗🤗

[rickbacker]

Спасибо огромное за прекрасное объяснение!

[serhiikhotsyk]

55:47 я просто добавил свойтсво 'order' = asc или desc в обьекты. А при запросе на сервер просто вставил нужный ордер и не нужно делать лишние условия и манипуляции со строками.

[алексполян-як]

Денис спасибо за подробное объяснение этого сложного момента, впервые увидел как делается фильтрация во взаимодействии с бекендом. Единственное что мне кажется не хватает, добавить функции, закрытие попап, при клике вне области. Но это не проблема, в первой версии Pizza ты это реализовал, поэтому от туда взял инфу и прикрутил и все стало круто. Жду дальше от тебя следующих уроков. Спасибо!!!

[ДимаИванов-иь]

Спасибо за урок. Объяснение очень доходчиво.

[MaksTrueman]

Я просто добавил 2 маленькие кнопки сортировки по возрастанию и убыванию (↑, ↓) как во многих мобильных приложениях.
const [orderType, setOrderType] = useState("asc");

<button onClick={() => setOrderType('asc')}> ↑ </button>
<button onClick={() => setOrderType('desc')}> ↓ </button>

в фетч запросе в конце &order=${orderType}

[АсманНарынбекУулу-уя]

Угарнул отдуши когда он сказал что я такой фингней занимаюсь ты не понимаешь, а я вслух сказал что я понимаю по этому я делаю чутка по другому. Классный курс спасибо!

[Евгений-хпс]

Отличная сортировка, тож долго не смог разобраться, но получилось. Спасибо

[sernowodsk]

59:44 - я чего то не понимаю или тут можно было сделать вот так, и упростить себе жизнь :

const list = [
{ name: 'популярности (DESC)', sortProperty: 'rating&order=desc' },
{ name: 'популярности (ASC)', sortProperty: 'rating' },
{ name: 'цене (DESC)', sortProperty: 'price&order=desc' },
{ name: 'цене (ASC)', sortProperty: 'price' },
{ name: 'алфавиту (DESC)', sortProperty: 'title&order=desc' },
{ name: 'алфавиту (ASC)', sortProperty: 'title' },
];

не добавляя никаких минусов и не убирая их потом

[YulVilaya]

очень-очень рада что нашла ваши уроки. это первое приложение, которое я не просто повторяю за учителем, а делаю осознанно, эксперементирую по своему и не боюсь сломать приложение, потому что я тнаконец-то понимаю, что проиходит. ВЫ самый лучший учитель, я удивлена почему остальные блогеры-реакт не могут так просто обьяснить ? почему программисты так любят кидаться в новичков терминами чтоб последние ничего не понимали и думали 'блин, это очень сложно, я не смогу как он'. ВЫ ЧУДО 🤗 жаль нет вебки, хотелось бы видеть как вы выглядете

[JavaScriptcher]

Охренительно как это работает, но это работает!!!

[Boobnovslava]

уже писал подобный комент, но очень нравится подход проблематика=>решение=> понимание

[Курманский]

Спасибо продолжай в том же духи а с нас ❤

[Виталий-нуо]

1:02:10
здесь для sortType -> useState я вытащил из файла Sort.jsx экспортом список list (где лежат варианты сортировок), и прикрутил в sortType -> useState первый элемент list[0], тем самым берем сразу данные оттуда, а не указываем явно

1. Файл Home.jsx

import Sort, { list } from "../components/Sort";
...
const [sortType, setSortType] = useState(list[0]);

2. Файл Sort.jsx

Вставляем до функции:
export const list = [
{ name: "популярности DESC", sortProperty: "rating" },
{ name: "популярности ASC", sortProperty: "-rating" },
{ name: "цене DESC", sortProperty: "price" },
{ name: "цене ASC", sortProperty: "-price" },
{ name: "алфавиту DESC", sortProperty: "title" },
{ name: "алфавиту ASC", sortProperty: "-title" },
];

Насколько данный подход верный?