- Настроить
.env.local
с апи ключом, пример файла
ASTEROID_URL = http:https://www.neowsapp.com/rest/v1/neo
API_KEY = CURRENT_API_KEY
ASTEROIDS_URL = https://api.nasa.gov/neo/rest/v1
APOD_URL = https://api.nasa.gov/planetary/apod
DAYS_PER_REQUEST=3
npm run start
|npm run dev
для приложенияnpm run styles
для перебилда стилей при измененииnpm run test
для cypress тестов
-
Страницы
- Главная страница
- Пк версия
- Мобильная версия
- Страница заказа уничтожения астероидов
- Пк версия
- Мобильная версия
- Страница описания астероида
- Пк версия
- Мобильная версия
- Главная страница
-
Компоненты
- Частоиспользуемые компоненты
- Кнопка ( + стилизация под
<a>
) - Чекбокс
- ScrollableView
- Компонент svg-иконок
<Image>
с svg - Контекст
- Кнопка ( + стилизация под
- Шапка
- Получение изображения дня
не получилось использовать getInitialProps в _app т.к. после первоначального запроса, при прееходе на другую страницу происходил запрос С фронтенда с несуществующими env
- Переключение между астероидами и заказом
- Получение изображения дня
- Шапка контента
- Заголовок
- Опциональная дата
- Опции
- Переключение метрики расстояния (км/лунные орбиты)
- Опциональный чекбокс показа только потенциально опасных астероидов
- Опциональное использование svg-изображения угрозы астероида
Вместо svg используется JSX.Element
- Заголовок
- Карточка астероида для списка
- Использование svg-изображения угрозы астероида
- Диаметр астероида
- Расстояние до земли в км/лунных орбитах
- Опасность астероида
- Кнопка добавления/удаления из заказа
- Список астероидов
- Список типа "добавить в заказ"
- Список типа "удалить из заказа"
- Infinite scroll
- Характеристики астероида
- Список сближений (ScrollableView)
- Кнопка Отправка бригады им. Брюса Уиллиса
- Футер
- Частоиспользуемые компоненты
-
Карта svg-иконок
Нет смысла переусложнять, всего две svg иконки, хороший пример реализации есть в
22bytetestapp-cancelled
, вместо этого использую<Image>
с svg -
(?) Разделённый контекс для разных частей логики
-
Убрать ошибочный лоадер "нет астероидов в ..." когда они не успели подгрузиться
-
Сохранение заказа в localStorage
-
Покрыть тестами
-
(?) Docker
-
Деплой на Vercel
date.toISOString()
может поставить дату не сходящуюся с текущей локально
-1
от текущего дня необходимо для поулчения астероидов недели исключая последний день прошлой недели
Во время написания кода я столкнулся с тем, что при добавлении астетроида в корзину у меня не менялось его состояние, но в Order дважды могло быть добавлено одно айди
При обновлении order в контексте, HeaderSecondary перерендеривался т.к. используется тот-же контекст (либо разделять контекст на несколько, либо мемоизация)
При инициализации стейта у компонента, localStorage является не объявленным
Выбрасывало варнинг Cannot update a component ('ContextProvider') while rendering a different component ('Order).
Неожиданно для меня оказалось что APOD может быть видео с Youtube
Необходим чтобы не вызвать при скролле handleAsteroids
пока кол-во опасных астероидов меньше чем высота окна (пока кол-во астероидов меньше высоты окна handleAsteroids
вызывается чтобы заполнить окно опасными астероидами)
Если при запросе астероидов не вернуло ни одного астероида (такое случается когда выставлен фильтр опасных астероидов), а скролл уже находился в самом низу, сделать подъём на 1px чтобы стриггерить функцию handleAsteroids
внутри InfiniteScroll
Т.к. AsteroidCard в memo, он не слушает обновление is_potentially_hazardous_asteroid (оно статичное в приложении, в тестах для проверки оно динамичное)
Функция нужна чтобы добавить или удалить элемент из списка, это очевидно.
Эту функцию можно было поставить в контекст и оттуда вызывать, но нет.
Если пользователь заходит на страницу по ссылке без предварительной загрузки астероидов, у него банально не будет этого астероида в списке всех астероидов и добавить новый в список не получится по айди из астеройдов (как по айди удаляется астероид из списка, например). Если подгружать текущий астероид в список всех, если этот астероид очень давний, он банально будет ломать списки по нумерации (идут все от, например, 22 июля, а тот астероид от 09 ферваля). Conclusion в том, что разделение функций на addAsteroid
и removeAsteroid
в данной ситуации является самый оптимальным решением.
E2e тесты напрочь не хотят видеть cypress/support/e2e.ts
Тест ведёт себя непредсказуемо, но чаще всего отрабатывает после первого провала+рестарта теста