feat(settings): add simple-ping settings (#2118)

packages/boards/src/context.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useContext, useEffect } from "react";
+import { usePathname } from "next/navigation";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+
+import { updateBoardName } from "./updater";
+
+const BoardContext = createContext<{
+  board: RouterOutputs["board"]["getHomeBoard"];
+} | null>(null);
+
+export const BoardProvider = ({
+  children,
+  initialBoard,
+}: PropsWithChildren<{
+  initialBoard: RouterOutputs["board"]["getBoardByName"];
+}>) => {
+  const { data } = clientApi.board.getBoardByName.useQuery(
+    { name: initialBoard.name },
+    {
+      initialData: initialBoard,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  );
+
+  // Update the board name so it can be used within updateBoard method
+  updateBoardName(initialBoard.name);
+
+  const pathname = usePathname();
+  const utils = clientApi.useUtils();
+
+  // Invalidate the board when the pathname changes
+  // This allows to refetch the board when it might have changed - e.g. if someone else added an item
+  useEffect(() => {
+    return () => {
+      void utils.board.getBoardByName.invalidate({ name: initialBoard.name });
+    };
+  }, [pathname, utils, initialBoard.name]);
+
+  return (
+    <BoardContext.Provider
+      value={{
+        board: data,
+      }}
+    >
+      {children}
+    </BoardContext.Provider>
+  );
+};
+
+export const useRequiredBoard = () => {
+  const optionalBoard = useOptionalBoard();
+
+  if (!optionalBoard) {
+    throw new Error("Board is required");
+  }
+
+  return optionalBoard;
+};
+
+export const useOptionalBoard = () => {
+  const context = useContext(BoardContext);
+
+  return context?.board ?? null;
+};

packages/boards/src/edit-mode.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useContext } from "react";
+import { useDisclosure } from "@mantine/hooks";
+
+const EditModeContext = createContext<ReturnType<typeof useDisclosure> | null>(null);
+
+export const EditModeProvider = ({ children }: PropsWithChildren) => {
+  const editModeDisclosure = useDisclosure(false);
+
+  return <EditModeContext.Provider value={editModeDisclosure}>{children}</EditModeContext.Provider>;
+};
+
+export const useEditMode = () => {
+  const context = useContext(EditModeContext);
+
+  if (!context) {
+    throw new Error("EditMode is required");
+  }
+
+  return context;
+};

packages/boards/src/updater.ts

@@ -0,0 +1,34 @@
+"use client";
+
+import { useCallback } from "react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+
+let boardName: string | null = null;
+
+export const updateBoardName = (name: string | null) => {
+  boardName = name;
+};
+
+type UpdateCallback = (prev: RouterOutputs["board"]["getHomeBoard"]) => RouterOutputs["board"]["getHomeBoard"];
+
+export const useUpdateBoard = () => {
+  const utils = clientApi.useUtils();
+
+  const updateBoard = useCallback(
+    (updaterWithoutUndefined: UpdateCallback) => {
+      if (!boardName) {
+        throw new Error("Board name is not set");
+      }
+      utils.board.getBoardByName.setData({ name: boardName }, (previous) =>
+        previous ? updaterWithoutUndefined(previous) : previous,
+      );
+    },
+    [utils],
+  );
+
+  return {
+    updateBoard,
+  };
+};