# HomeWork: React basics 

Перевести чат на рельсы React. Ниже поэтапное описание процесса для тех, кто еще не до конца освоился и не знает что для чего использовать в процессе решения задачи.

## Верстка.

Создать 4 компонента:

###  Chat
Композитный компонент истории чата, который использует `ChatMessage` для отображения каждого сообщения (передав объект сообщения в `props` каждого `ChatMessage`). Используйте массив для сообщений (например через `map`)
### ChatMessage
Одно сообщение чата. Из `Chat` в `props` надо передать объект сообщения что бы его отрисовать в этом компоненте.
### Inputs
Просто компонент для отображения полей ввода nick, message и кнопки отправки. Используйте ref для сохранения ссылок на объекты полей ввода в объекте компонента.
### ChatRooms
`Select` для чат-комнат.


## React to Backend.

- Асинхронность получения данных предполагает что компонент может быть как минимум в двух состояниях - **LOADING** (**PENDING**), состояние когда компонент
  *уже* существует, а данные *еще* не пришли; и в состоянии когда данные уже есть. `render` должен это понимать по `state` или `props` и выдавать разное отображение
  компонента.
- Самое время для первичных обращений к серверу в `componentWillMount`. Тут вы можете считать чатрумы или инициировать `setInterval` для опроса истории сообщений.
- Функции, переданные в `then` промиса запроса к серверу, должны вызывать `setState` для обновления представления.

### Отправка сообщений

- По кнопке выковыриваем заботливо сохраненные с помощью `ref` ссылки на поля ввода
- Из полей ввода достаем тексты ника и сообщения
- берем номер чатрума из глобальной переменной `let chatRoomId = 1`.
- Мужественно копипастим код `fetch` из старой версии.

и это почти всё, но в идеале:
- при запуске `fetch` ставим поля ввода `disabled`
- по окончанию промиса очищаем поле текста в случае успеха, disabled = false
- или оставляем текст если отправить не удалось, также разблокируя поля ввода. 

### Чатрумы

- Делаем `<select>`
- В `componentWillMount` делаем `fetch` за чатрумами.
- В `then` делаем `setState` с массивом объектов `ChatRoom` 
- В `render` пишем loading...
- В `render` учитываем `state` и вставляем массив с `<option value={room.id}>{room.title}</option>` в `<select>`
- В `onChange` сохраняем в глобальную переменную `chatRoomId` id текущего чатрума.

### История чата.

- В `componentWillMount` делаем `setInterval`
- В `setInterval` делаем `fetch` из текущего ChatRoom (`chatRoomId`)
- В `then` отправляем полученные данные в `setState`
- В `render` берем массив сообщений из `this.state` и формируем массив компонентов `<ChatMessage msg={msg} />`. Можно `for` перед `return`, можно `map` в JSX.
- Аналогично для `messageId` можно использовать глобальную переменную.