@drawbridge/components 0.0.78 → 0.1.1

package/dist/dashboard/lib/hooks.js

@@ -0,0 +1,426 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var hooks_exports = {};
+__export(hooks_exports, {
+  useCallbacks: () => useCallbacks,
+  useCopyToClipboard: () => useCopyToClipboard,
+  useDrawer: () => useDrawer,
+  useModal: () => useModal,
+  useSocketRoom: () => useSocketRoom,
+  useSort: () => useSort,
+  useUrlFilterState: () => useUrlFilterState
+});
+module.exports = __toCommonJS(hooks_exports);
+var import_react = require("react");
+var import_navigation = require("next/navigation");
+var import_react_query = require("@tanstack/react-query");
+const useCopyToClipboard = ({
+  onClick = () => {
+  },
+  value
+} = {}) => {
+  const [copied, setCopied] = (0, import_react.useState)(false);
+  const onCopy = (0, import_react.useCallback)(
+    () => {
+      navigator.clipboard.writeText(value);
+      setCopied(true);
+      onClick();
+    },
+    [onClick, value]
+  );
+  (0, import_react.useEffect)(
+    () => {
+      if (!copied) return;
+      const timer = setTimeout(
+        () => setCopied(false),
+        2e3
+      );
+      return () => clearTimeout(timer);
+    },
+    [copied]
+  );
+  return {
+    copied,
+    onCopy
+  };
+};
+const useCallbacks = ({
+  query,
+  queryClient
+}) => {
+  const router = (0, import_navigation.useRouter)();
+  const saves = (0, import_react.useRef)({
+    accepted: [],
+    pending: [],
+    queue: Promise.resolve()
+  });
+  const onError = (0, import_react.useCallback)(
+    (response) => {
+      queryClient.setQueryData(
+        ["notice"],
+        {
+          active: true,
+          response
+        }
+      );
+      queryClient.setQueryData(
+        ["modal"],
+        (data) => ({
+          ...data,
+          active: false
+        })
+      );
+    },
+    [queryClient]
+  );
+  return {
+    onError,
+    onSuccess: (0, import_react.useCallback)(
+      async (response, options = {}) => {
+        var _a;
+        await queryClient.setQueryData(
+          ["notice"],
+          {
+            active: true,
+            response
+          }
+        );
+        await queryClient.setQueryData(
+          ["modal"],
+          (data) => ({
+            ...data,
+            active: false
+          })
+        );
+        if (Array.isArray(options == null ? void 0 : options.invalidate) && ((_a = options == null ? void 0 : options.invalidate) == null ? void 0 : _a.length) > 0) {
+          await Promise.all(
+            options.invalidate.map((props) => queryClient.invalidateQueries(props))
+          );
+        }
+        ;
+        if (options == null ? void 0 : options.redirect) {
+          router.push(options.redirect);
+        }
+        ;
+        if ((query == null ? void 0 : query.refetch) instanceof Function) {
+          await query.refetch(response);
+        }
+        ;
+      },
+      [query, queryClient, router]
+    ),
+    // A SAVE THAT CHANGES THE SCREEN BEFORE THE API ANSWERS, a drag to
+    // reorder: `update` draws the new order into the cached list at once and
+    // `save` sends it. The reorders sent it with nothing listening, so a
+    // refusal ( a 429 under rate limiting ) was dropped: no message, and the
+    // new order stayed on screen until a reload ( QA night-pages-links-ads,
+    // 2026-09-25 ).
+    //
+    // A refused save is undone from memory, not by refetching: the refetch
+    // would ask the limiter that has just said no. Saves go one at a time in
+    // the order they were made, so what the api holds is always known; a
+    // refusal puts that back and draws every save still waiting over it again,
+    // which leaves a second list under the same entry ( campaign fields' lead
+    // and additional ) as it was.
+    optimistic: (0, import_react.useCallback)(
+      ({ filters, save, update }) => {
+        const current = saves.current;
+        if (!current.pending.length) {
+          current.accepted = queryClient.getQueriesData(filters).filter(([, data]) => data !== void 0);
+        }
+        ;
+        current.pending.push(update);
+        queryClient.setQueriesData(filters, update);
+        const send = async () => {
+          try {
+            await save();
+          } catch (error) {
+            current.pending.shift();
+            current.accepted.forEach(([queryKey, data]) => queryClient.setQueryData(
+              queryKey,
+              current.pending.reduce((value, next) => next(value), data)
+            ));
+            onError(error);
+            return;
+          }
+          ;
+          current.pending.shift();
+          current.accepted = current.accepted.map(([queryKey, data]) => [queryKey, update(data)]);
+        };
+        current.queue = current.queue.then(send, send);
+        return current.queue;
+      },
+      [onError, queryClient]
+    )
+  };
+};
+const useDrawer = ({
+  queryClient
+}) => {
+  return {
+    close: (0, import_react.useCallback)(
+      () => {
+        queryClient.setQueryData(
+          ["drawer"],
+          (data) => ({
+            ...data,
+            active: false
+          })
+        );
+      },
+      [queryClient]
+    ),
+    open: (0, import_react.useCallback)(
+      (props) => {
+        queryClient.setQueryData(
+          ["drawer"],
+          {
+            active: true,
+            ...props
+          }
+        );
+      },
+      [queryClient]
+    )
+  };
+};
+const useSort = ({
+  sort: defaultSort,
+  onChange
+}, { param = "sort" } = {}) => {
+  const pathname = (0, import_navigation.usePathname)();
+  const searchParams = (0, import_navigation.useSearchParams)();
+  const [sorting, setSorting] = (0, import_react.useState)(
+    () => {
+      const initial = (() => {
+        const owner = searchParams == null ? void 0 : searchParams.get("pathname");
+        if (owner && owner !== pathname) return defaultSort;
+        const encoded = searchParams == null ? void 0 : searchParams.get(param);
+        if (!encoded) return defaultSort;
+        try {
+          return JSON.parse(encoded);
+        } catch {
+          return defaultSort;
+        }
+        ;
+      })();
+      return Object.entries(initial || {}).map(([id, dir]) => ({
+        desc: dir === -1,
+        id
+      }));
+    }
+  );
+  const sort = (0, import_react.useMemo)(
+    () => {
+      if (!sorting.length) return defaultSort;
+      return Object.fromEntries(sorting.map(({ id, desc }) => [id, desc ? -1 : 1]));
+    },
+    [sorting, defaultSort]
+  );
+  const [prevSorting, setPrevSorting] = (0, import_react.useState)(sorting);
+  if (sorting !== prevSorting) {
+    setPrevSorting(sorting);
+    onChange == null ? void 0 : onChange();
+  }
+  ;
+  (0, import_react.useEffect)(
+    () => {
+      if (typeof window === "undefined") return;
+      const url = new URL(window.location.href);
+      if (JSON.stringify(sort) === JSON.stringify(defaultSort)) {
+        url.searchParams.delete(param);
+      } else {
+        url.searchParams.set(param, JSON.stringify(sort));
+        url.searchParams.set("pathname", pathname);
+      }
+      ;
+      if (url.href === window.location.href) return;
+      window.history.replaceState(window.history.state, "", url);
+    },
+    [sort, defaultSort, param, pathname]
+  );
+  (0, import_react.useEffect)(
+    () => {
+      return () => {
+        if (typeof window === "undefined") return;
+        const url = new URL(window.location.href);
+        url.searchParams.delete(param);
+        url.searchParams.delete("pathname");
+        if (url.href === window.location.href) return;
+        window.history.replaceState(window.history.state, "", url);
+      };
+    },
+    [param]
+  );
+  return {
+    manualSorting: true,
+    onSortingChange: setSorting,
+    sort,
+    sorting
+  };
+};
+const useUrlFilterState = (defaults, { param = "filters" } = {}) => {
+  const pathname = (0, import_navigation.usePathname)();
+  const searchParams = (0, import_navigation.useSearchParams)();
+  const [state, setState] = (0, import_react.useState)(
+    () => {
+      const owner = searchParams == null ? void 0 : searchParams.get("pathname");
+      if (owner && owner !== pathname) return defaults;
+      const encoded = searchParams == null ? void 0 : searchParams.get(param);
+      if (!encoded) return defaults;
+      try {
+        return {
+          ...defaults,
+          ...JSON.parse(encoded)
+        };
+      } catch {
+        return defaults;
+      }
+      ;
+    }
+  );
+  const update = (0, import_react.useCallback)(
+    (next) => {
+      const value = next instanceof Function ? next(state) : next;
+      setState(value);
+      if (typeof window === "undefined") return;
+      const url = new URL(window.location.href);
+      const serialized = JSON.stringify(value);
+      if (serialized === JSON.stringify(defaults)) {
+        url.searchParams.delete(param);
+      } else {
+        url.searchParams.set(param, serialized);
+        url.searchParams.set("pathname", pathname);
+      }
+      ;
+      if (url.href === window.location.href) return;
+      window.history.replaceState(window.history.state, "", url);
+    },
+    [defaults, param, pathname, state]
+  );
+  const clearSearchParams = (0, import_react.useCallback)(
+    () => {
+      if (typeof window === "undefined") return;
+      const url = new URL(window.location.href);
+      url.searchParams.delete(param);
+      url.searchParams.delete("pathname");
+      if (url.href === window.location.href) return;
+      window.history.replaceState(window.history.state, "", url);
+    },
+    [param]
+  );
+  (0, import_react.useEffect)(
+    () => () => clearSearchParams(),
+    [clearSearchParams]
+  );
+  return [state, update, clearSearchParams];
+};
+const useModal = ({
+  queryClient
+}) => {
+  return {
+    close: (0, import_react.useCallback)(
+      () => {
+        queryClient.setQueryData(
+          ["modal"],
+          (data) => ({
+            ...data,
+            active: false
+          })
+        );
+      },
+      [queryClient]
+    ),
+    open: (0, import_react.useCallback)(
+      (props) => {
+        queryClient.setQueryData(
+          ["modal"],
+          {
+            active: true,
+            ...props
+          }
+        );
+      },
+      [queryClient]
+    )
+  };
+};
+const useSocketRoom = ({
+  arg,
+  enabled,
+  listeners,
+  resync,
+  room
+}) => {
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const { data: socket } = (0, import_react_query.useQuery)({
+    queryKey: ["socket"],
+    enabled: false,
+    structuralSharing: false
+  });
+  const listenersRef = (0, import_react.useRef)(listeners);
+  const resyncRef = (0, import_react.useRef)(resync);
+  (0, import_react.useEffect)(
+    () => {
+      listenersRef.current = listeners;
+      resyncRef.current = resync;
+    }
+  );
+  const eventsKey = Object.keys(listeners).join(",");
+  (0, import_react.useEffect)(
+    () => {
+      if (!enabled || !socket) return;
+      const onConnect = () => {
+        socket.emit.apply(
+          socket,
+          arg === void 0 ? ["join." + room] : ["join." + room, arg]
+        );
+        (resyncRef.current || []).forEach((queryKey) => {
+          queryClient.invalidateQueries({
+            queryKey
+          });
+        });
+      };
+      const handlers = Object.keys(listenersRef.current).map((event) => {
+        const handler = (...payload) => {
+          var _a, _b;
+          return (_b = (_a = listenersRef.current) == null ? void 0 : _a[event]) == null ? void 0 : _b.call(_a, ...payload);
+        };
+        socket.on(event, handler);
+        return [event, handler];
+      });
+      if (socket.connected) onConnect();
+      socket.on("connect", onConnect);
+      return () => {
+        socket.off("connect", onConnect);
+        handlers.forEach(([event, handler]) => socket.off(event, handler));
+      };
+    },
+    [arg, enabled, eventsKey, queryClient, room, socket]
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useCallbacks,
+  useCopyToClipboard,
+  useDrawer,
+  useModal,
+  useSocketRoom,
+  useSort,
+  useUrlFilterState
+});