Fix/contacts - Исправление раздела "Контакты"

[IvannaBalanyuk]

• Реализовала получение данных о контактах с бэка.
  Коллекция для тестирования:
  ya-pomogau-db.contacts.json

• Редактирование доступно только для root-администратора (обеспечено сокрытием блоков от остальных пользователей + дублирующая проверка на этапе сабмита).

• Не нашла ручку для редактирования контактов (есть метод сервиса, но нет соответствующего метода в контроллере, скрины ниже), поэтому реализовала на фронте пока в черновом варианте.

В ContactsService есть метод для редактирования:

В контроллере только GET-метод для роута /contacts:

• Вёрстку поправила, адаптивность обеспечила.

[kspshnik]

В контроллере только GET-метод для роута /contacts:

Создал задачу #99 в репозитории бэкенда.

[INextYP]

Привет! Хорошая работа!

По верстке есть ещё косяк на этой странице

[INextYP]

По-хорошему, тут должен быть хук useForm

[IvannaBalanyuk]

• переписала код с использованием хука useForm

Не смогла решить такую проблему - при обновлении страницы инпуты опустошаются и значения снова отображаются только после ререндера (например, после нажатия на кнопку редактирования или перехода между вкладками)

[INextYP]

• переписала код с использованием хука useForm

Не смогла решить такую проблему - при обновлении страницы инпуты опустошаются и значения снова отображаются только после ререндера (например, после нажатия на кнопку редактирования или перехода между вкладками)

Проблема актуальна?

[IvannaBalanyuk]

Да, корректно в этом плане работало только когда обращение за данными на бэк и setContsctsData были обернуты в UseEffect (по отдельности). Тогда при обновлении происходил запрос к бэку и после этого отрабатывал второй useEffect (с setContsctsData), так как у него в зависимостях были данные, получаемые с бэка.

Может из хука useForm ёще setValues возвращать?

Вот так всё работает корректно:

[INextYP]

Да, так в принципе можно сделать, только вынести за пределы компонента:

const initialContactsValues = {
    email: null,
    socialNetwork: null,
  }

export function ContactsPage() {
...
,...
....
const { values, handleChange, isValid, setValues } = useForm<TContacts>(initialContactsValues);

Чуть позже мы перейдем на нормальный хук)

Как исправишь - пингани, я апрувну

[kspshnik]

Да, корректно в этом плане работало только когда обращение за данными на бэк и setContsctsData были обернуты в UseEffect (по отдельности). Тогда при обновлении происходил запрос к бэку и после этого отрабатывал второй useEffect (с setContsctsData), так как у него в зависимостях были данные, получаемые с бэка.

@INextYP слушай, а может просто завести слайс system в хранилище, и туда прям на монтировании App затягивать конфиденциальность, контакты и всё прочее такое?

А потом по WS сделаем апдейты при изменении.

[IvannaBalanyuk]

вынести за пределы компонента

@INextYP , готово)

• вынесла начальное значение за пределы компонента
• добавила возврат setValue из useForm
• поместила в useEffect присвоение values значений, полученных с бэка

[INextYP]

Отлично;)