Замечания и рекомендации по lw5 - Telegraph

ivklgn commented 6 years ago

Архитектура приложения Так как выбран React для разработки интерфейса - имеет смысл использовать силу его компонентного подхода и не делать всё приложение в одном контейнере. В данном случае неверно сделана обработка логики роутов - мы зависим от состояния внутри контейнера.

Разбить приложение на 2 контейнера - контейнер который представляет страницу для создания публикации и контейнер для вывода публикации.
Форму с полями для ввода публикации стоит вынести в компонент (не в контейнер!). Таким образом один и тот же компонент вы сможете использовать и в контейнере создания публикации и при редактировании, находясь в публикации.

При разбивке на 2 контейнера - подобная логика должна уйти:

getInitialState() {
console.log(this.storyId)
if (this.storyId === '') {
  return ({
    title: '',
    author: '' ,
    discription: '',
    dateTime: null,
    buttonText: 'PUBLISH',
    canEdit: true,
    momentVisibility: 'moment-hidden'
  });
}
return {...this.storyList.get(this.storyId), 
  buttonText: 'EDIT', 
  canEdit: false,
  momentVisibility: 'moment-visible'
}
}

initial state - это начальное состояние которое не зависит от внешних условий.

Формат даты в хранилище сейчас невалидно отражается (пример: загаловок-9-2-1). Придерживаться примера http://telegra.ph/
Сделать более красивым отображение даты публикации (см. telegra.ph)

kQ=0.5

ivklgn commented 6 years ago

[x] Формат даты в хранилище сейчас невалидно отражается (пример: загаловок-9-2-1). Придерживаться примера http://telegra.ph/
[x] Сделать более красивым отображение даты публикации (см. telegra.ph)
[x] В компонентах вместо присваиванию state как объекту значений - использовать this.setState
[x] В роутах:
```
...
<Route exact path = '/' component={App}/>
...
```
на индексный маршрут повесить NewStory. App в текущей версии не имеет смысла вообще исопльзовать. (так же можно использовать IndexRoute)
[x] для грамотной реализации работы с localStorage и server api - создать класс-обертку для работу с источниками данных (пр. StorySource). В StorySource есть единый интерфейс для работы с историями.
```
class StorySource {
private sourceType;
constructor(sourceType) {
 this.sourceType = sourceType;
}
createStory(data) {...}
getStory(id) {...}
setSourceType {...} // для переключения источников данных

addStoryToLocalStorage(data) {...}
addStoryToServer(data) {...}
```

}


сделать механизм определения доступности сервера.

- [x] посмотреть обработку ошибок в запросах

ivklgn commented 6 years ago

[ ] - поправить ошибки в консоли devtools (браузер), поправить правила eslint

artes2517 / Telegraph

Замечания и рекомендации по lw5 - Telegraph #1