feat: add widget server loader (#16)

* wip: Add gridstack board * wip: Centralize board pages, Add board settings page * fix: remove cyclic dependency and rename widget-sort to kind * improve: Add header actions as parallel route * feat: add item select modal, add category edit modal, * feat: add edit item modal * feat: add remove item modal * wip: add category actions * feat: add saving of board, wip: add app widget * Merge branch 'main' into add-board * chore: update turbo dependencies * chore: update mantine dependencies * chore: fix typescript errors, lint and format * feat: add confirm modal to category removal, move items of removed category to above wrapper * feat: remove app widget to continue in another branch * feat: add loading spinner until board is initialized * fix: issue with cellheight of gridstack items * feat: add translations for board * fix: issue with translation for settings page * feat: add widget server loader * fix: typing issue * chore: address pull request feedback * fix: formatting
2024-02-08 07:00:00 +01:00
parent cc52c2ba78
commit 975f9123dd
12 changed files with 286 additions and 47 deletions
--- a/packages/widgets/src/server/provider.tsx
+++ b/packages/widgets/src/server/provider.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Data = Record<
+  string,
+  {
+    data: Record<string, unknown> | undefined;
+    isReady: boolean;
+  }
+>;
+
+interface GlobalItemServerDataContext {
+  setItemServerData: (
+    id: string,
+    data: Record<string, unknown> | undefined,
+  ) => void;
+  data: Data;
+  initalItemIds: string[];
+}
+
+const GlobalItemServerDataContext =
+  createContext<GlobalItemServerDataContext | null>(null);
+
+interface Props {
+  initalItemIds: string[];
+}
+
+export const GlobalItemServerDataProvider = ({
+  children,
+  initalItemIds,
+}: PropsWithChildren<Props>) => {
+  const [data, setData] = useState<Data>({});
+
+  const setItemServerData = (
+    id: string,
+    itemData: Record<string, unknown> | undefined,
+  ) => {
+    setData((prev) => ({
+      ...prev,
+      [id]: {
+        data: itemData,
+        isReady: true,
+      },
+    }));
+  };
+
+  return (
+    <GlobalItemServerDataContext.Provider
+      value={{ setItemServerData, data, initalItemIds }}
+    >
+      {children}
+    </GlobalItemServerDataContext.Provider>
+  );
+};
+
+export const useServerDataFor = (id: string) => {
+  const context = useContext(GlobalItemServerDataContext);
+
+  if (!context) {
+    throw new Error("GlobalItemServerDataProvider is required");
+  }
+
+  // When the item is not in the initial list, it means the data can not come from the server
+  if (!context.initalItemIds.includes(id)) {
+    return {
+      data: undefined,
+      isReady: true,
+    };
+  }
+
+  return context.data[id];
+};
+
+export const useServerDataInitializer = (
+  id: string,
+  serverData: Record<string, unknown> | undefined,
+) => {
+  const context = useContext(GlobalItemServerDataContext);
+
+  if (!context) {
+    throw new Error("GlobalItemServerDataProvider is required");
+  }
+
+  useEffect(() => {
+    context.setItemServerData(id, serverData);
+  }, []);
+};