Это продолжение истории о создании проекта планировщик, предыдущие части: часть 1, часть 2
Я начала с реализации списка категорий и сделала статичный список, об этом я писала в предыдущей истории. Следующим шагом было отображение этого списка на фронтенде.
Я подключила к фронтенду библиотеку appolo, с помощью которой можно достаточно просто делать запросы к бекенду, написанному на GraphQL.
А для начала опишу как будут хранится файлы в проекте фронтенда:
Весь основной код будет располагаться в каталоге src. Входная точка - src/index.tsx, который отображает единственный компонент из файла src/pages/main.tsx. А уже в main.tsx с помощью еще одной библиотеки react-router происходит рендер необходимого компонента в зависимости от адресной строки. На каждый вид URL в адресной строки есть свой каталог со своими компонентами в pages. Все что нужно для отображения той или иной страницы будет внутри этого каталога. Общие элементы вынесены в каталог src/ui.
В чем преимущество такого подхода - если нам какой-то компонент больше не нужен, можно удалить все папку целиком, и меньше вероятность что когда какой-либо компонент больше не нужен мы удалим все ненужное.
В старых проекта у меня было правило именования каталогов - camel case и название должно совпадать с названием компонента. Но в другом проекте я увидела другой подход, где названия были без заглавных букв и как разделитель слов использовалось тире. Объяснялось это тем, что проще писать все строчными буквами. И это оказалось действительно удобным. Поэтому во всех следующих моих проектах использовала именно такое именование каталогов и файлов.
Все что касается отображения списка категорий расположено в src/pages/plan-categories
И вот что тут есть:
- plan-categories.tsx - это основной файл компонента
- index.tsx - файл который позволит нам сократить импорт компонента, вместо того чтобы писать pages/plan-categoreis/plan-categories можно писать pages/plan-categoreis (файл просто экспортирует компонент из plan-categories.tsx)
- category - в этой папке будет хранится все что связано с отображением категории
- new-category - это компонент для добавления новой категории
И теперь важный вопрос - как получать данные с бекенда. Так как список категорий нужен будет во многих местах, я вынесла его в hook. Но это все я уже добавляла позже, изначально это все было внутри одного компонента. А потом уже, когда я начала делать следующую страницу я вынесла то, что необходимо будет на обеих страницах, в общее место.
Сначала описывается сам запрос на GraphQL
Потом вызывается hook из Appolo
Переменная query будет содержать статус запроса а также данные, которые будут получены в результате его выполнения.
Сами категории я вывела с помощью сетки (Grid, Container) и карточки (Card) от material-ui
В карточке категории отображается название и кнопка для удаления категории
Сделала компонент для добавления новой категории
Для реализации ввода я использовала компонент InputController. Это компонент для ввода текста, с логикой, позволяющей его использовать с библиотекой react-hook-form.
Далее я переключилась на бекенд для реализации всего того функционала который нужен был - список категорий, добавление и удаление. Пока без редактирования. Об этом будет в следующей статье.