Files
Homarr/packages/widgets/src/server/runner.tsx
Meier Lukas fc317840a7 refactor: use suspense query instead of serverdata for app widget (#1143)
* refactor: use suspense query instead of serverdata for app widget

* chore: add missing translation for loading tooltip
2024-09-17 19:30:14 +02:00

52 lines
1.6 KiB
TypeScript

import type { PropsWithChildren } from "react";
import { Suspense } from "react";
import type { RouterOutputs } from "@homarr/api";
import { reduceWidgetOptionsWithDefaultValues, widgetImports } from "..";
import { ClientServerDataInitalizer } from "./client";
import { GlobalItemServerDataProvider } from "./provider";
type Board = RouterOutputs["board"]["getHomeBoard"];
type Props = PropsWithChildren<{
shouldRun: boolean;
board: Board;
}>;
export const GlobalItemServerDataRunner = ({ board, shouldRun, children }: Props) => {
if (!shouldRun) return children;
const allItems = board.sections.flatMap((section) => section.items);
return (
<GlobalItemServerDataProvider initalItemIds={allItems.map(({ id }) => id)}>
{allItems.map((item) => (
<Suspense key={item.id}>
<ItemDataLoader item={item} />
</Suspense>
))}
{children}
</GlobalItemServerDataProvider>
);
};
interface ItemDataLoaderProps {
item: Board["sections"][number]["items"][number];
}
const ItemDataLoader = async ({ item }: ItemDataLoaderProps) => {
const widgetImport = widgetImports[item.kind];
if (!("serverDataLoader" in widgetImport) || !widgetImport.serverDataLoader) {
return <ClientServerDataInitalizer id={item.id} serverData={undefined} />;
}
const loader = await widgetImport.serverDataLoader();
const optionsWithDefault = reduceWidgetOptionsWithDefaultValues(item.kind, item.options);
const data = await loader.default({
...item,
options: optionsWithDefault as never,
itemId: item.id,
});
return <ClientServerDataInitalizer id={item.id} serverData={data} />;
};