Мини проект на React. API. Или «Санкции-сосанкции».
Изучая React, и почувствовав, что пора написать уже что-то поинтереснее простых компонентов с useState, я решил написать небольшое приложение с API (REST API).
Для этой задачи подошёл бы апи с любой тематикой, но я выбрал FreeToPlayGames. Не большой (предоставляет информацию о 400+ играх), есть что посортировать, пофильтровать, запагинировать. Много картинок, можно сделать карточки с кратким описанием и «странички» с полной информацией и слайдером. Ну и, конечно, основной критерий - он бесплатный.
Поставил я перед собой следующие задачи: Общие: 1. Адаптивный интерфейс (desktop, mobile); 2. Роутинг (навигация без перезагрузки страницы); 3. Использована UI библиотека компонентов; 4. При загрузке данных показывается индикатор загрузки (preloader); 5. При ошибках получения данных происходит информирование пользователя; 6. При неудачном запросе происходит три попытки повторного запроса через 5, 10 и 15 секунд соответственно. (При переходе на другую страницу этот процесс прерывается); 7. После открытия карточки игры, данные о ней сохраняются и доступны при повторном входе в неё (или при перезагрузке страницы) в течении 5 минут без дополнительного запроса к API. Посещённые карточки меняют свой цвет. Если информация стала неактуальной (прошло 5 минут), карточка восстанавливает свой цвет; 8. При переходе между страницами запросы, относящиеся к старой странице, прерываются (отменяются), о чём сообщается пользователю; 9. При переходе между страницами позиция скролла сохраняется для главной страницы (список игр) и всегда в нулевой позиции на остальных страницах. Главная страница: 1. Показывает список игр (карточки). Каждая карточка содержит постер, название, жанр, издатель, дата релиза (в ru формате); 2. Возможность фильтрации по платформе и жанру; 3. Возможность сортировки по алфавиту (дефолт), дате релиза и популярности; 4. При клике на карточку игры происходит переход на страницу игры; 5. Пагинация списка игр с возможностью выбрать отображаемое на странице количество карточек. Страница выбранной игры: 1. Содержит помимо информации в каточке данные о разработчике, системных требованиях и карусель скриншотов, если таковые имеются; 2. Кнопка возврата к списку игр (с сохранением фильтрации, сортировки и пагинации); 3. Возврат к списку игр происходит без нового обращения к API.
Для реализации всего вышеописанного были использованы следующие инструменты: npm, Vite, React, React Router, Redux Toolkit, Ant Design, Styled components, ум и сообразительность.
Написав, собрав и задеплоив проект на GitHub Pages (пришлось ещё 404 страничку для переадресации сделать, что бы при F5 не возникало проблем и роутинги срабатывали) я был доволен результатом, т.к. всё работало именно так было задумано. Но спустя пару месяцев я обнаружил что приложение не работает. 😭
Оказалось, что против нас ввели санкции и API просто перестал отвечать на запросы из РФ. Под VPN всё работало хорошо, как и прежде. А я тут попутно ещё у себя дома ремонт делаю, и понадобились мне незадолго до этого розетки Legrand, но на рынке у нас их уже не было. Опять же санкции. Пришлось заказывать. Ехали они ко мне, вроде, через Армению, точно не помню. Ну я и подумал: «А какая разница? Чем JSON хуже розеток? Параллельный импорт он и в Африке параллельный.» Пришлось вспомнить, что я ещё немножко питонист и написать прослойку (использовал Flask). Смысл её существования, думаю, понятен. Я отправляю запрос не напрямую к API, а к своей прослойке, которая живёт где-то в европах и прошу её достать мне данные. Она составляет свой запрос, опираясь на те параметры, которые я ей передал, получает данные и переправляет результат мне.
В итоге, если пользователь заходит под буржуйским IP (или под VPN), то приложение работает в штатном режиме. Если же IP наш (родной и скрепный), то приложение ловит ошибку и предлагает включить «Санкционный режим». После включения этого режима Стасик ползёт обходить санкции и дальше приложение работает через прослойку. (О Стасике я в прошлом посте писал, тут он прелоадером подрабатывает).
А живёт оно тут
