Anyone tried integrating dragAndDrop with Zustand?

[webcicle]

I have managed to hack together a solution with the useDragAndDrop in a custom hook, using a custom plugin like this:

function useDragAndDropCustom<ParentElement extends HTMLElement>(
  initSegments: StoreSegmentDataWithId[],
  onDragEnd: (newOrder: StoreSegmentDataWithId[]) => void,
): ReturnValues<ParentElement> {
  const moveSegmentPlugin: DNDPlugin = (parent) => {
    const parentData = parents.get(parent);

    if (!parentData) return;

    function dragend() {
      handleDragEnd();
    }

    return {
      setupNode(data) {
        data.nodeData.abortControllers.customPlugin = addEvents(data.node, {
          dragend: dragend,
        });
      },
      tearDownNode(data) {
        if (data.nodeData?.abortControllers?.customPlugin) {
          data.nodeData.abortControllers.customPlugin.abort();
        }
      },
    };
  };

  const [parent, dragDropSegments] = useDragAndDrop<
    ParentElement,
    StoreSegmentDataWithId
  >(initSegments, {
    dragHandle: "#drag-handle",
    plugins: [moveSegmentPlugin],
    disabled: false,
    draggable: () => true,
  });

  const handleDragEnd = useCallback(() => {
    onDragEnd(dragDropSegments);
  }, [onDragEnd, dragDropSegments]);

  return { parent, segments: dragDropSegments };
}

The dragAndDrop is supposed to work directly with state though, but I can't get it working with Zustand myself. Anyone else had any luck with this that can give some pointers?

[webcicle]

Here's how I got it working to be reactive with the state in the end:

export const useDragAndDropWithZustand = (
  id: string,
  dragParent: MutableRefObject<HTMLDivElement | null>,
) => {
  const { segments, setSegments } = useStore(
    (state: Store) => ({
      segments: state.segments,
      setSegments: state.setSegments,
    }),
  );

  const setSegmentsWrapper = useCallback(
    (newSegmentsOrUpdater: string[] | ((prev: string[]) => string[])) => {
      if (typeof newSegmentsOrUpdater === "function") {
        setSegments(id, newSegmentsOrUpdater(segments!));
      } else {
        setSegments(subtopicId, newSegmentsOrUpdater);
      }
    },
    [segments, setSegments, id],
  );

  useEffect(() => {
    if (!dragParent || !segments) return;
    dragAndDrop({
      parent: dragParent,
      state: [segments, setSegmentsWrapper],
      plugins: [animations()],
    });
  }, [segments, setSegmentsWrapper, dragParent]);

  return { segments, setSegments: setSegmentsWrapper };
};

setSegments just takes the entire array with the new order and sets it to the segments state variable. Key was to wrap it in order to "mock" the dispatch type that dragAndDrop expects.