Проект: https://codeedocc.github.io/translator-app/
В этом проекте несколько страниц. Для взаимодействия с ними я использую react-router-dom:
Для перемещения между страницами реализована навигационная панель. В зависимости от текущей страницы иконка будет подсвечиваться синим цветом:
Эти иконки я храню в отдельном файле внутри массива. Каждый элемент массива - это объект с необходимым набором данных:
Ссылка на файл с массивом иконок:
https://github.com/codeedocc/translator-app/blob/main/src/assets/constants/index.tsx
В этом проекте идёт обращение к двум разным API:
- Первое предоставляет список стран (а также детальную информацию о каждой конкретной стране).
- Второе даёт нам список языков, доступных для перевода.
Всю логику по взаимодействию с этими данными и стейты, которые к ним относятся, я распределил по соответствующим папкам:
Здесь создаётся эндпоинт, позволяющий получить список стран с конкретной информацией:
https://github.com/codeedocc/translator-app/blob/main/src/store/country/country.api.ts
Здесь создаются эндпоинты для запросов на получение доступных языков и их перевод:
https://github.com/codeedocc/translator-app/blob/main/src/store/language/language.api.ts
Теперь, когда у нас есть все необходимые данные, я помещаю страны с языком, доступным для перевода, в react-select:
Для удобства поиска в выпадающих списках есть возможность ручного ввода:
Вся логика по сортировке стран описана в функции getCountries на строке 71:
https://github.com/codeedocc/translator-app/blob/main/src/pages/Home.tsx
Для того, чтобы визуализировать процесс загрузки, я создал компонент Loader, который выглядит следующим образом:
Ссылка на Loader:
https://github.com/codeedocc/translator-app/blob/main/src/components/Loader.tsx
Полученный текст можно либо скопировать, либо добавить в избранное. И в том, и в другом варианте после выполнения действия мы увидим соответсвующее уведомление:
Логика для уведомления о копировании описана в функции handleCopy на строке 39:
https://github.com/codeedocc/translator-app/blob/main/src/components/TextInput.tsx
Весь текст, попадающий и в историю, и в избранное, хранится по уникальным ключам в LocalStorage. Текст сортируется и выводится по порядку:
На строке 184 внутри useEffect можно увидеть логику, которая позволяет добавлять переведённый текст в историю:
https://github.com/codeedocc/translator-app/blob/main/src/pages/Home.tsx
В проекте большая часть логики завязана на взаимодействии с модальными окнами. Для этого я создал отдельный переиспользуемый компонент:
https://github.com/codeedocc/translator-app/blob/main/src/components/Modal.tsx
Например, если мы захотим очистить всю историю, мы увидим такое окошко:
Если мы захотим добавить текст из истории в избранное, мы также увидим модальное окно:
Если мы попытаемся добавить в избранное текст с пустым названием или с уже существующим названием, то мы увидим соответствующее сообщение.
Например, вот попытка добавить в избранное текст без названия:
Все стили написаны с помощью SCSS, проект выглядит хорошо на любом устройстве, с которого вы будете его открывать.
К примеру, так выглядит главная страница с телефона:
Проект максимально типизирован для удобства разработки и дальнейшего масштабирования.