https://github.com/yuriyvyatkin/ra-hw-9.2-crud-posts-frontend
ДЗ №2 к лекции «React Router» курса «React» Нетологии
https://github.com/yuriyvyatkin/ra-hw-9.2-crud-posts-frontend
react-router-v6 reactjs usenavigate useparams
Last synced: 8 months ago
JSON representation
ДЗ №2 к лекции «React Router» курса «React» Нетологии
- Host: GitHub
- URL: https://github.com/yuriyvyatkin/ra-hw-9.2-crud-posts-frontend
- Owner: yuriyvyatkin
- Created: 2021-11-29T04:08:33.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-11-30T11:02:49.000Z (almost 4 years ago)
- Last Synced: 2025-01-04T01:38:55.739Z (9 months ago)
- Topics: react-router-v6, reactjs, usenavigate, useparams
- Language: JavaScript
- Homepage: https://yuriyvyatkin.github.io/ra-hw-9.2-crud-posts-frontend/
- Size: 540 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Домашнее задание №2 к лекции «React Router»
[](https://ci.appveyor.com/project/yuriyvyatkin/ra-hw-9-2-crud-posts-frontend)
[Ссылка на Github Pages](https://yuriyvyatkin.github.io/ra-hw-9.2-crud-posts-frontend/)
CRUD
===Вам необходимо реализовать CRUD при работе с HTTP с использование Router'а.
Backend вы можете либо написать сами, либо взять готовый (из каталога `backend`).

Нас интересует только id, content и created, в качестве остальных значений (имя, фото) можете поставить заглушки.
## Общая механика
При нахождении на странице `/` отображается список существующих постов (GET на адрес http://localhost:7777/posts), полученные данные отображаются в виде карточек:

Кнопка "Создать пост" ведёт на страницу добавления (см. ниже) `/posts/new` (помните про регулярные выражения).
При клике на саму карточку происходит переход на страницу просмотра поста (см. ниже) `/posts/{postId}`.
### Страница создания
На странице создания `/posts/new` отображается карточка создания:

При нажатии на кнопку "Опубликовать", пост сохраняется (POST на адрес http://localhost:7777/posts body: `{"id": 0, "content": "То, что введено в поле ввода"}`), после чего осуществляется редирект на главную страницу.
При нажатии на крестик (в верхнем правом углу) происходит редирект на главную без сохранения (advanced: можете сохранить в localStorage и потом вытаскивать оттуда).
### Страница просмотра
На странице просмотра `/posts/{id}` отображается краточка просмотра:

При клике на кнопку "Удалить" происходит удаление поста (DELETE на адрес http://localhost:7777/posts/{id}), после чего осуществляется редирект на главную страницу.
При клике на кнопку "Редактировать" карточка просмотра заменяется карточкой редактирования:

На карточке редактирования:
* кнопка сохранить приводит к сохранению поста (POST на адрес http://localhost:7777/posts body: `{"id": не 0, "content": "То, что введено в поле ввода"}`) и отображению карточки просмотра (с обновлёнными данными).
* кнопка крестик приводит к возврату к карточки просмотра.**Важно**:
1. Не смотрите на то, как это реализовано на фейсбуке - механика изменена
1. Но вы можете подглядеть как пользователю отображается загрузка (сетевые операции добавления/сохранения/удаления)
1. React Router позволяет использовать регулярные выражения в роутах: https://github.com/pillarjs/path-to-regexp/tree/v1.7.0