havart / learning-quiz Goto Github PK

В проекте есть места где данные подвержены мутации, это такие места как push или splice или мутация объекта a.name = 'что-то там'.
Нужно использовать только иммутабельные структуры данный. В борьбе с мутабельностью нам сильно поможет дуструктуризация.
Вот пример
Задача, добавить елемент 5 в массив.

мутабельный - от чего нам нужно избавиться
var arr = [1,2,3,4]
arr.push(5);

иммутабельный - должно быть вот так.
var arr = [1,2,3,4]
arr = [...arr, 5]

Основные задачи:

1. Повторить деструктуризацию (https://learn.javascript.ru/destructuring)

2. Избавиться от мутабельности в проекте.

Сейчас в приложении кругом используется подписка

someMethod.subcribe(() ={
 // тут манипуляции с данными. 
})

Таких ситуаций нужно избегать.
Нужно переписать подписки на работу с потоком и использованием пайпа asyncPipe.
Начнем с компонента AdminAllQuestionsComponent.
listQuestions: IQuestion[]; - сейчас этио массив IQuestion.
Нужно приветси его к виду:
listQuestions$: Observable<IQuestion[]>;

Далее получить поток:
this.listQuestions$ = this.questionService.getAll();

и отобразить его в шаблоне через asyncPipe

Требуется разработать дополнительный функционал для виджета звонков.
Нам нужно чтоб во время звонка у нас была возможность сохранять какие-то данные. Во время звонка мы хотим согласовать добавление нового варианта ответа на какой-то из вопросов. Для этого требуется добавить в виджет новую кнопку, по нажатию которой будет открываться dropdown с формой у которой 3 поля, кнопки сохранить и отменить.
В сам виджет вносить изменений не нужно, кнопка должна быть отдельным компонентом.
Вот пример:

Нам нужно сделать что-то похожее.

Первое поле категории вопросов,
второе - вопросы,
третье - добавить вариант ответа.

Создать компонент telephony-widget в котором есть кнопка положить трубку, и который может принимать любой компонент в этом поможет ng-content (прочесть про него, в скринкасте по ангуляру рассматривают ng-content)
Дизайн для компонента виджета любой.

Сейчас в компоненте Main через ngFor репитятся кнопки, так не должно быть. Имя компонента должно говорить о нем, отражать сущность. Для тренировки работы с компонентами предлагаю создать новый компонент Category и использовать его в компоненте Main.
Компонент должен содержать инпут в который будет принимать категорию.
Принять решение нужно ли в нашем случае использовать стратегию OnPush.
Файлы стилей тоже должны быть в компоненте Category.

Поменять таблицу в компоненте admin-all-questions, на список.
Список должен иметь вид как на скриншоте

У нас должен быть смарт компонент например blabla-list который будет содержать dumb компонет blabla-item.
Получать данные должен компонент blabla-list и через async пробрасывать каждый вопрос в blabla-item

Переходим на другую структуру проекта.
В папке components должны находиться только компоненты которые будут переиспользоваться, и расположены по папкам smart и dumb
smart - это умные компоненты которые должны что-то делать, возможно тянут данные из сервисов.
dumb - задача dumb компонентов, просто отобразить данные, или прокинуть данные в другие компоненты.
Папка pages или modules содержат модули с помпонентами как пример страница home, login, user и тд... Компоненты которые отображают много других компонент, обычно выносят в модули.

Добавить настроки притиера в проект и применить их, чтоб избежать в дальнейшем лишних изменений

Сейчас когда пользователь открывает форму для редактирования вопроса, она всегда пустая. Это не подходит, нужно чтоб при открытии формы подтягивались предыдущие значения в рамках текущего звонка, пока не положили трубку.

Вариант решения:
Создать сервис, который будет отвечать за звонки, в нем будет храниться информация по текущему звонку, interface c полем phone (это липовый, мы его ради прикола будем пробрасывать когда будем, делать звонок).
Итого сервис содержит
приватную переменную _currentCall$
метод makeCall$
метод completeCall$
getter currentCall$ для возврата _currentCall$

для генерации телефона можно использовать Math.random