Дмитрий Путилов

package main

import (
    "encoding/json"
    "net/http"
)

func main() {
    http.HandleFunc("/api/data", func(w http.ResponseWriter, r *http.Request) {
        data := struct {
            Message string `json:"message"`
        }{
            Message: "Привет, мир!",
        }

        w.Header().Set("Content-Type", "application/json")
        w.WriteHeader(http.StatusOK)

        if err := json.NewEncoder(w).Encode(data); err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
        }
    })

    http.ListenAndServe(":3001", nil)
}

В целом так же как и на node, python, dotnet)
Делаешь небольшой сервер с endpoint, в этом случае /api/data и делаешь на него запрос с react, localhost:3001/api-data, делать запросы можно через fetch, axios. Ну и описываешь route дальше. таких роутов можно делать много, это вариант http запросов. Еще есть gRCP, ну для начала лучше разобраться с этим)

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

Либо как тебе предложили решения использовать
scope.clearTimeout(timeoutID)

Рендеринг компонентов с верху вниз, с начало рендерится у тебя компонент App, а потом его дочерний элемент AuthManager, но так как ты вызываешь useRedirectToInitialPage в App, компонент AuthManager не успевает от рендерится, потому что в App useRedirectToInitialPage редеректит туда, куда ты указал

Чтобы исправить эту ошибку, следует убедиться, что компоненты, которые используются в приложении, ведут себя одинаково как на сервере, так и на клиенте. А у меня мой


Отрисовывался по условию mobile, который присваивается на стороне клиента, поэтому надо это присваивание вынести в useEffect и ошибки не будет. Старый код Sidebar можно посмотреть в комментариях

Нашел вот такой вариант реализации

const mockUseScreenResolution = vi.mocked(useScreenResolution)
mockUseScreenResolution. mockReturnValue("mobile")

И там сразу типизация пробрасывается и создается нормально, юзайте

Для того что бы реализовать drag and drop, нужно реализовать вот ткую вот функцию

const handlerDropAndDrop: DragEventHandler = async (
    event: DragEvent<HTMLDataElement>,
  ) => {
    event.preventDefault();
    const url = event.dataTransfer.getData("URL"); // Получаем src из фото, после чего закидываем его в функцию добавления картинки
    if (url) editorApi.addImage(url);
  };

Но на данном этапе картинка будет просто дублироваться, что бы не было дублирования картинки, нужно добавить функцию удаления картинки, но перед этим обновим шаблон картинки

import { ContentState } from "draft-js";
import * as React from "react";
import classes from "./Image.module.scss";

type LinkProps = {
  contentState: ContentState;
  entityKey: string;
};

const Image: React.FC<LinkProps> = ({ contentState, entityKey }) => {
  /* Получаем url с помощью уникального ключа Entity */
  const { url } = contentState.getEntity(entityKey).getData();

  return (
    <img data-key={entityKey} className={classes.imageStyle} src={url} alt="" />
  );
};
export default Image;

Добавим data-key={entityKey} через который мы будем получать entityKey и через него же будем удалять картинку. Добавим еще одну функцию обработчик

const handlerDragAndDropExit: DragEventHandler = (
    event: DragEvent<HTMLDivElement>,
  ) => {
    event.preventDefault();
    const targetElement = event.target as HTMLElement; // Получаем тег img
    const entityKey = targetElement.getAttribute("data-key"); // Получаем у него наш entityKey
    if (entityKey) editorApi.removeImage(entityKey); передаем его в функцию удаления картинки
  };

Функция удаления картинки которая находится в useEditor

// Удаление картинки по его entityKey
  const removeImage = React.useCallback(
    (entityKey: string) => {
      setState((currentState) => {
        const contentState = currentState.getCurrentContent();
        const blockMap = contentState.getBlockMap();

        // Создаем новый массив блоков, исключая блок с указанным entityKey или блок без типа EntityType.image
        const newBlockMap: ContentBlock[] = [];
        blockMap.forEach((block) => {
          if (
            block &&
            (block.getEntityAt(0) !== entityKey || block.getType() !== "atomic")
          ) {
            newBlockMap.push(block);
          }
        });

        const newContentState = ContentState.createFromBlockArray(newBlockMap);

        return EditorState.push(currentState, newContentState, "remove-range");
      });
    },
    [setState],
  );

Осталось только добавить все это в наши обработчики дива

<div
      className={classes.textArea}
      onDrop={handlerDropAndDrop}
      onDragEnd={handlerDragAndDropExit}
    >
      <Editor
        ref={ref}
        placeholder={"Описание поста"}
        editorState={editorApi.state}
        onChange={editorApi.onChange}
      />
    </div>

Готово, функция drag and drop реализована

решение проблемы было в том, что нужно использовать в родительском элементе, этот тег указывает react, где отображать вложенные элементы, импортируется он из
import {Link, Outlet} from "react-router-dom";

НО у меня почему то react не видит эту функцию, но она работает, так что если будите использовать, не обращайте внимания что реакт не видит его в инпорте, по крайней мере у меня так
В кратце нужно этот Outlet прописать в header

<Routes>
                <Route path='/settings' element={<Header />}>
                    <Route index path='create' element={<CreateFieldProvider/>}/>
                    <Route path='lists' element={<FieldsList/>}/>
                </Route>
                <Route path={'/work'} element={<Work/>}/>

            </Routes>

А вот сам header

<>
        <header>
            <div className="content">
                <div className={classes.header_wrapper}>
                    <div className={classes.wrapper_logo}>
                        <img src="/image/logo.png" alt=""/>
                    </div>

                    <div className={classes.wrapper_list}>
                        <Link to='/settings'>Главная</Link>
                        <Link to='/settings/create'>Создать </Link>
                        <Link to='/settings/lists'>Список </Link>
                    </div>
                </div>
            </div>
        </header>
            {(loading_list || loading_create) && <Preloader />}

            <Outlet />
        </>

Нужно было прописать символьный код для св-ва в инфоблоке