Страница оформления домашней страницы в админке

План статьи

Вводная часть

Всем привет, меня зовут Александр, я являюсь фронтенд разработчиком с 4-х летним опытом работы. В этой статье решил поделится опытом написания админ панели для своего сайта. В ней мы рассмотрим темы использования общих компонентов для формы, которые можно переиспользовать, дружбу между пакетами работы с формой и react-images-uploading, react-draft-wysiwyg.

Использование общих компонентов

Начнем с предистории, во время написания кода для страниц авторизации и регистрации у меня выходе получилось очень много повторяющегося кода. На тот момент я решил оставить как есть, потому что думал, что у меня этот код больше не будет повторятся нигде. Когда я начал писать к главной странице, то понял, что буду использовать код с ранее описанных страниц. На этом предистория закончена.

Поэтому мною было принято решение переписать код на общие компоненты, чтобы в последствии их переиспользовать. Давайте посмотрим какие компоненты я создал для этого:

Также для простых тегов, для которых я не смог придумать отдельный компонент, я решил просто вынести стили в отдельный файл с общими стилями. Общие стили вынесены для текстового поля (input, textarea), кнопка (button), текстовый редактор (editor).

В итоге хочу здесь добавить, что составить набор повторяемых компонентов не составляет особого труда. На картинке «Пример общих компонентов» можно посмотреть пример вынесения общего кода по компонентам.

Подружить пакеты react-images-uploading и react-hook-form

По началу, когда я начал работать у меня не получалось подружить эти два пакета. В чем заключалась проблема? Изначально я пробовал прокинуть пропсы формы вместе с пропсами самого компонента. К сожалению, из-за того что оба компонента используют реферальную ссылку на текстовое поле, то их подружить не получилось, потому что после того, как я прокидывал пропсы формы после пропсов компонента, то у меня на фронте переставал работать вызов окна системы с выбором картинки. На этом моменте я подумал, что все, эти два компонента не получится подружить и мне придется писать весь функционал по выбору картинок самостоятельно.

Во время написания своего решения мне стало понятно, что можно попробовать зарегистрировать текстовое поле, но не пробрасывать пропсы в input. Эта идея сработала, при инициализации компонента я регистрирую поле и после того, как оно будет изменено вызывается повторная валидация этого поля. Таким образом у меня получилось решить проблему работы с этим в рамках пакета react-hook-form и react-images-uploading.

Пример инициализации текстового поля в рамках вышеописанного функционала можно посмотреть на картинке «Инициализация текстового поля для картинки».

Пример инициализации компонента для загрузки картинок можно увидеть на картинке «Пример инициализация компонента загрузки картинок».

Как можем увидеть по вышеизложенным примерам вся суть решения заключается в разделении инициализации компонентов

Подружить пакеты react-draft-wysiwyg и react-hook-form

Давайте теперь разберем, как получилось подружить между собой react-hook-form и текстовый редактор. Для случая вышеописанный пример также актуален, но со своими нюансами.

Здесь это выражено в двух примерах. Первый – это в том, что для загрузки картинки необходимо дописать обратную функцию, которая будет вызываться после того, как будет выбрана картинка для загрузки. В итоге она превращает картинку в код base64 и возвращает его в ссылку на картинку. Пример можно увидеть на картинке «Функция загрузки картинки для текстового редактора»

Здесь я подумал, что проблема с картинками решена, но ну тут-то было. После сохранения загруженные картинки в текстовом редакторе не отображались, вместо них появлялась просто иконка с картинкой, пример такого случая отображен на картинке «Отображения картинки после сохранения».

Как в итоге оказалось, проблема была в парсинге данных html в структуру для отображения в текстовом редакторе. Если смотреть по коду, то сначала html данные перегоняем в так называемые блоки данных (название придумал самостоятельно, для более простого понимания и чтения кода, поэтому в названии могу ошибаться). После этого из блоков формируем изначальный стейт для текстового редактора. Когда изначальный стейт подготовили, то теперь его необходимо вставить в текстовый редактор. И полученный результат вывести данные в том виде, в котором они были сохранены. Пример реализации можно посмотреть на картинке «Код подготовки содержимого для отображения в текстовом редакторе».

Второй – это обратная функция на изменения содержимого текстового редактора.

Изначально у меня не получалось разобраться почему разные значения в реферальной ссылке текстового редактора, то есть выводим в консоль значение рефа, а он все время разные и найти алгоритм его изменения нельзя. Плюс в тексте содержимого не отображалось наличие картинок.

Одним из решений вопроса попробовал добавить наличие условия, которое будет проверять наличие текста или картинок в текстовом редакторе. В процессе использования стало понятно, что оно не подходит, потому что не всегда стабильно сохраняет содержимое текстового редактора и после сохранения не выводились картинки.

На дальнейшие поиски решения данного вопроса пришлось потратить не один час времени и не один свободный вечер, но в итоге у меня получилось найти причину, почему не корректно выводились данные: как оказалось, не правильно настроил отображение сохраняемых данных, то есть редактор не напрямую кушал html код, а только после его обработки. Решения этой проблемы я описал в этой статье выше.

Также я подумывал использовать такие редакторы как ckeditor, tinymce и подобные, но отказался от этой идеи, так как не хотел заново все в них настраивать в первоначальном редакторе.

Доработка на стороне бекенда

На стороне бекенда был доработан функционал по сохранению, нарезке и шифрованию картинок. Для сохранения и нарезки я выбрал модуль sharp, т. к. у этого модуля был готовый функционал для фреймворка nest.js и, прочитав его документацию и исходный код, мною было принято решение использовать его в своей работе.

Идем далее, чтобы не засорять сервис main page, то вынес работу с картинками в отдельный модуль и сервис, которые потом портирую в нужные модули. В этом сервисе для этой статьи хочу выделить два метода, первый метод сохраняет и нарезает все необходимые картинки, второй метод для админки шифрует файлы в формат base64.

Пример первой функции можно увидеть на картинке «Функция сохранения и нарезки картинки под необходимые размеры». Пример второй функции можно увидеть на картинке «Конвертация картинки в формат base64»

Выводы

По итогу в этой статье мы разобрали, каким образом и когда нужно составлять свои компоненты для админки, каким образом можно подружить библиотеку react-hook-form и другие npm компоненты, разобрали нюансы использования текстового редактора, который был мною выбран, что было доделано на бекенде во время интеграции с фронтом.

Больше статей в моем блоге. Спасибо, что дочитали и до новых встреч в следующих статьях.