Merge pull request #360 from revoltchat/rework/categories-kanban

src/lib/debounce.ts

@@ -1,3 +1,7 @@
+import isEqual from "lodash.isequal";
+
+import { Inputs, useCallback, useEffect, useRef } from "preact/hooks";
+
 export function debounce(cb: (...args: unknown[]) => void, duration: number) {
     // Store the timer variable.
     let timer: NodeJS.Timeout;
@@ -13,3 +17,60 @@ export function debounce(cb: (...args: unknown[]) => void, duration: number) {
         }, duration);
     };
 }
+
+export function useDebounceCallback(
+    cb: (...args: unknown[]) => void,
+    inputs: Inputs,
+    duration = 1000,
+) {
+    // eslint-disable-next-line
+    return useCallback(
+        debounce(cb as (...args: unknown[]) => void, duration),
+        inputs,
+    );
+}
+
+export function useAutosaveCallback(
+    cb: (...args: unknown[]) => void,
+    inputs: Inputs,
+    duration = 1000,
+) {
+    const ref = useRef(cb);
+
+    // eslint-disable-next-line
+    const callback = useCallback(
+        debounce(() => ref.current(), duration),
+        [],
+    );
+
+    useEffect(() => {
+        ref.current = cb;
+        callback();
+        // eslint-disable-next-line
+    }, [cb, callback, ...inputs]);
+}
+
+export function useAutosave<T>(
+    cb: () => void,
+    dependency: T,
+    initialValue: T,
+    onBeginChange?: () => void,
+    duration?: number,
+) {
+    if (onBeginChange) {
+        // eslint-disable-next-line
+        useEffect(
+            () => {
+                !isEqual(dependency, initialValue) && onBeginChange();
+            },
+            // eslint-disable-next-line
+            [dependency],
+        );
+    }
+
+    return useAutosaveCallback(
+        () => !isEqual(dependency, initialValue) && cb(),
+        [dependency],
+        duration,
+    );
+}

src/lib/dnd.ts

@@ -0,0 +1,56 @@
+import {
+    Draggable as rbdDraggable,
+    DraggableProps as rbdDraggableProps,
+    DraggableProvided as rbdDraggableProvided,
+    DraggableProvidedDraggableProps as rbdDraggableProvidedDraggableProps,
+    DraggableProvidedDragHandleProps as rbdDraggableProvidedDragHandleProps,
+    DraggableRubric,
+    DraggableStateSnapshot,
+    Droppable as rbdDroppable,
+    DroppableProps,
+    DroppableProvided,
+    DroppableStateSnapshot,
+} from "react-beautiful-dnd";
+
+export type DraggableProvidedDraggableProps = Omit<
+    rbdDraggableProvidedDraggableProps,
+    "style" | "onTransitionEnd"
+> & {
+    style?: string;
+    onTransitionEnd?: JSX.TransitionEventHandler<HTMLElement>;
+};
+
+export type DraggableProvidedDragHandleProps = Omit<
+    rbdDraggableProvidedDragHandleProps,
+    "onDragStart"
+> & {
+    onDragStart?: JSX.DragEventHandler<HTMLElement>;
+};
+
+export type DraggableProvided = rbdDraggableProvided & {
+    draggableProps: DraggableProvidedDraggableProps;
+    dragHandleProps?: DraggableProvidedDragHandleProps | undefined;
+};
+
+export type DraggableChildrenFn = (
+    provided: DraggableProvided,
+    snapshot: DraggableStateSnapshot,
+    rubric: DraggableRubric,
+) => JSX.Element;
+
+export type DraggableProps = Omit<rbdDraggableProps, "children"> & {
+    children: DraggableChildrenFn;
+};
+
+export const Draggable = rbdDraggable as unknown as (
+    props: DraggableProps,
+) => JSX.Element;
+
+export const Droppable = rbdDroppable as unknown as (
+    props: Omit<DroppableProps, "children"> & {
+        children(
+            provided: DroppableProvided,
+            snapshot: DroppableStateSnapshot,
+        ): JSX.Element;
+    },
+) => JSX.Element;