An open API service indexing awesome lists of open source software.

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» Нетологии

Awesome Lists containing this project

README

          

# Домашнее задание №2 к лекции «React Router»

[![Build status](https://ci.appveyor.com/api/projects/status/8ro6i2rxr31hp7k7?svg=true)](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`).

![CRUD](./assets/main.png)

Нас интересует только id, content и created, в качестве остальных значений (имя, фото) можете поставить заглушки.

## Общая механика

При нахождении на странице `/` отображается список существующих постов (GET на адрес http://localhost:7777/posts), полученные данные отображаются в виде карточек:

![List](./assets/main.png)

Кнопка "Создать пост" ведёт на страницу добавления (см. ниже) `/posts/new` (помните про регулярные выражения).

При клике на саму карточку происходит переход на страницу просмотра поста (см. ниже) `/posts/{postId}`.

### Страница создания

На странице создания `/posts/new` отображается карточка создания:

![New](./assets/new.png)

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

При нажатии на крестик (в верхнем правом углу) происходит редирект на главную без сохранения (advanced: можете сохранить в localStorage и потом вытаскивать оттуда).

### Страница просмотра

На странице просмотра `/posts/{id}` отображается краточка просмотра:

![View](./assets/view.png)

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

При клике на кнопку "Редактировать" карточка просмотра заменяется карточкой редактирования:

![Edit](./assets/edit.png)

На карточке редактирования:
* кнопка сохранить приводит к сохранению поста (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