Fix editor types

src/app/dashboards/[dashboardId]/sections/[sectionId]/widgets/[widgetId]/edit/page.tsx

@@ -1,10 +1,11 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 
-import type { WidgetWithSectionModel } from "@/types/widget.type";
+import type { WidgetModel } from "@/types/widget.type";
 import { EditWidget } from "@/components/dashboard/editors/Widget";
 import { HomeAssistantProvider } from "@/providers/HomeAssistantProvider";
 import { prisma } from "@/utils/prisma";
+import { widgetGetData } from "@/utils/serverActions/widget";
 
 export const metadata: Metadata = {
  title: "Edit Widget | Home Panel",
@@ -20,20 +21,19 @@ export default async function Page({
 }): Promise<JSX.Element> {
  console.log("Edit Widget:", params);
 
- let data: WidgetWithSectionModel | null = await prisma.widget.findUnique({
+ let widget: WidgetModel | null = (await prisma.widget.findUnique({
  where: {
  id: params.widgetId,
  },
- include: {
- section: true,
- },
- });
+ })) as WidgetModel | null;
+
+ if (!widget) return notFound();
 
- if (!data) return notFound();
+ widget.data = await widgetGetData(widget.id, widget.type);
 
  return (
  <HomeAssistantProvider dashboardId={params.dashboardId}>
- <EditWidget dashboardId={params.dashboardId} data={data} />
+ <EditWidget dashboardId={params.dashboardId} data={widget} />
  </HomeAssistantProvider>
  );
 }

src/components/dashboard/editors/Widget.tsx

@@ -8,7 +8,8 @@ import {
  Unstable_Grid2 as Grid2,
 } from "@mui/material";
 
-import type { WidgetModel, WidgetWithSectionModel } from "@/types/widget.type";
+import type { SectionModel } from "@/types/section.type";
+import type { WidgetModel } from "@/types/widget.type";
 import { EditWidgetBase } from "@/components/dashboard/editors/widgets/Base";
 import { EditWidgetFrame } from "@/components/dashboard/editors/widgets/Frame";
 import { EditWidgetHomeAssistant } from "./widgets/HomeAssistant";
@@ -20,59 +21,62 @@ import { WidgetType } from "@/types/widget.type";
 
 export function EditWidget({
  dashboardId,
- data,
+ section,
+ widget,
 }: {
  dashboardId: string;
- data: WidgetWithSectionModel;
+ section: SectionModel;
+ widget: WidgetModel;
 }): JSX.Element {
+ const { id, type, sectionId } = widget;
  const [widgetData, setWidgetData] = useState<any>(null);
 
  useEffect(() => {
  (async () => {
- const newData = await widgetGetData(data.id, data.type);
+ const newData = await widgetGetData(id, type);
  setWidgetData(newData);
  })();
- }, [data.id, data.type]);
+ }, [id, type]);
 
  const widgetView: JSX.Element = useMemo(() => {
  if (!widgetData) return <Skeleton variant="text" />;
- switch (data.type) {
+ switch (type) {
  case WidgetType.Frame:
  return (
  <EditWidgetFrame
  dashboardId={dashboardId}
- sectionId={data.sectionId}
- data={widgetData}
+ sectionId={sectionId}
+ widgetData={widgetData}
  />
  );
  case WidgetType.HomeAssistant:
  return (
  <EditWidgetHomeAssistant
  dashboardId={dashboardId}
- sectionId={data.sectionId}
- data={widgetData}
+ sectionId={sectionId}
+ widgetData={widgetData}
  />
  );
  case WidgetType.Image:
  return (
  <EditWidgetImage
  dashboardId={dashboardId}
- sectionId={data.sectionId}
- data={widgetData}
+ sectionId={sectionId}
+ widgetData={widgetData}
  />
  );
  case WidgetType.Markdown:
  return (
  <EditWidgetMarkdown
  dashboardId={dashboardId}
- sectionId={data.sectionId}
- data={widgetData}
+ sectionId={sectionId}
+ widgetData={widgetData}
  />
  );
  default:
  return <div>Unknown widget type</div>;
  }
- }, [dashboardId, data.type, data.sectionId, widgetData]);
+ }, [dashboardId, type, sectionId, widgetData]);
 
  return (
  <Grid2
@@ -90,7 +94,7 @@ export function EditWidget({
  <CardContent sx={{ flexGrow: 1 }}>
  <Typography variant="h5">Edit Widget</Typography>
  <Grid2 container direction="column" sx={{ marginTop: "1rem" }}>
- <EditWidgetBase dashboardId={dashboardId} data={data} />
+ <EditWidgetBase dashboardId={dashboardId} widget={widget} />
  {widgetView}
  </Grid2>
  </CardContent>
@@ -99,10 +103,10 @@ export function EditWidget({
  <Grid2 xs>
  <Section
  data={{
- ...data.section,
+ ...section,
  widgets: [
  {
- ...data,
+ ...widget,
  data: widgetData,
  },
  ],

src/components/dashboard/editors/widgets/Base.tsx

@@ -7,43 +7,34 @@ import { WidgetType } from "@/types/widget.type";
 
 export function EditWidgetBase({
  dashboardId,
- data,
+ widget,
 }: {
  dashboardId: string;
- data: Widget;
+ widget: Widget;
 }): JSX.Element {
+ const { id, title, type, width } = widget;
  return (
  <>
  <TextField
  name="title"
  label="Title"
  margin="dense"
- defaultValue={data.title || ""}
+ defaultValue={title || ""}
  onChange={async (e) =>
- await widgetUpdate(
- dashboardId,
- data.id,
- e.target.name,
- e.target.value
- )
+ await widgetUpdate(dashboardId, id, e.target.name, e.target.value)
  }
  />
  <TextField
  name="width"
  label="Width"
  margin="dense"
- defaultValue={data.width || ""}
+ defaultValue={width || ""}
  onChange={async (e) =>
- await widgetUpdate(
- dashboardId,
- data.id,
- e.target.name,
- e.target.value
- )
+ await widgetUpdate(dashboardId, id, e.target.name, e.target.value)
  }
  />
  <Autocomplete
- defaultValue={data.type}
+ defaultValue={type}
  options={Object.values(WidgetType)}
  getOptionLabel={(option) => {
  // Split camelCase to words and capitalize first letter
@@ -62,7 +53,7 @@ export function EditWidgetBase({
  )}
  onChange={async (_, value: string | null) => {
  if (!value) return;
- await widgetUpdate(dashboardId, data.id, "type", value);
+ await widgetUpdate(dashboardId, id, "type", value);
  }}
  />
  </>

src/components/dashboard/editors/widgets/Frame.tsx

@@ -7,24 +7,24 @@ import { widgetFrameUpdate } from "@/utils/serverActions/widget";
 export function EditWidgetFrame({
  dashboardId,
  sectionId,
- data,
+ widgetData,
 }: {
  dashboardId: string;
  sectionId: string;
- data: WidgetFrame;
+ widgetData: WidgetFrame;
 }): JSX.Element {
  return (
  <>
  <TextField
  name="url"
  label="URL"
  margin="dense"
- defaultValue={data.url || ""}
+ defaultValue={widgetData.url || ""}
  onChange={async (e) =>
  await widgetFrameUpdate(
  dashboardId,
  sectionId,
- data.widgetId,
+ widgetData.widgetId,
  e.target.name,
  e.target.value
  )
@@ -34,12 +34,12 @@ export function EditWidgetFrame({
  name="height"
  label="Height"
  margin="dense"
- defaultValue={data.height || ""}
+ defaultValue={widgetData.height || ""}
  onChange={async (e) =>
  await widgetFrameUpdate(
  dashboardId,
  sectionId,
- data.widgetId,
+ widgetData.widgetId,
  e.target.name,
  e.target.value
  )

src/components/dashboard/editors/widgets/HomeAssistant.tsx

@@ -16,11 +16,11 @@ import { useHomeAssistant } from "@/providers/HomeAssistantProvider";
 export function EditWidgetHomeAssistant({
  dashboardId,
  sectionId,
- data,
+ widgetData,
 }: {
  dashboardId: string;
  sectionId: string;
- data: WidgetHomeAssistant;
+ widgetData: WidgetHomeAssistant;
 }): JSX.Element {
  const homeAssistant = useHomeAssistant();
 
@@ -33,8 +33,8 @@ export function EditWidgetHomeAssistant({
 
  const defaultEntity = useMemo<HassEntity | undefined>(() => {
  if (!homeAssistant.entities) return;
- return homeAssistant.entities[data.entityId];
- }, [data.entityId, homeAssistant.entities]);
+ return homeAssistant.entities[widgetData.entityId];
+ }, [widgetData.entityId, homeAssistant.entities]);
 
  const entityAttributes = useMemo<Array<string> | undefined>(() => {
  if (!defaultEntity) return;
@@ -71,7 +71,7 @@ export function EditWidgetHomeAssistant({
  await widgetHomeAssistantUpdate(
  dashboardId,
  sectionId,
- data.widgetId,
+ widgetData.widgetId,
  "entityId",
  value.entity_id
  );
@@ -81,12 +81,12 @@ export function EditWidgetHomeAssistant({
  control={
  <Switch
  name="showName"
- defaultChecked={data.showName || true}
+ defaultChecked={widgetData.showName || true}
  onChange={async (e) =>
  await widgetHomeAssistantUpdate(
  dashboardId,
  sectionId,
- data.widgetId,
+ widgetData.widgetId,
  e.target.name,
  e.target.checked
  )
@@ -99,12 +99,12 @@ export function EditWidgetHomeAssistant({
  control={
  <Switch
  name="showState"
- defaultChecked={data.showState || true}
+ defaultChecked={widgetData.showState || true}
  onChange={async (e) =>
  await widgetHomeAssistantUpdate(
  dashboardId,
  sectionId,
- data.widgetId,
+ widgetData.widgetId,
  e.target.name,
  e.target.checked
  )
@@ -117,12 +117,12 @@ export function EditWidgetHomeAssistant({
  control={
  <Switch
  name="showIcon"
- defaultChecked={data.showIcon || true}
+ defaultChecked={widgetData.showIcon || true}
  onChange={async (e) =>
  await widgetHomeAssistantUpdate(
  dashboardId,
  sectionId,
- data.widgetId,
+ widgetData.widgetId,
  e.target.name,
  e.target.checked
  )
@@ -135,12 +135,12 @@ export function EditWidgetHomeAssistant({
  name="iconColor"
  label="Icon Color"
  margin="dense"
- defaultValue={data.iconColor || ""}
+ defaultValue={widgetData.iconColor || ""}
  onChange={async (e) =>
  await widgetHomeAssistantUpdate(
  dashboardId,
  sectionId,
- data.widgetId,
+ widgetData.widgetId,
  e.target.name,
  e.target.value
  )
@@ -150,19 +150,19 @@ export function EditWidgetHomeAssistant({
  name="iconSize"
  label="Icon Size"
  margin="dense"
- defaultValue={data.iconSize || ""}
+ defaultValue={widgetData.iconSize || ""}
  onChange={async (e) =>
  await widgetHomeAssistantUpdate(
  dashboardId,
  sectionId,
- data.widgetId,
+ widgetData.widgetId,
  e.target.name,
  e.target.value
  )
  }
  />
  <Autocomplete
- defaultValue={data.secondaryInfo}
+ defaultValue={widgetData.secondaryInfo}
  options={entityAttributes || []}
  renderInput={(params) => (
  <TextField
@@ -177,7 +177,7 @@ export function EditWidgetHomeAssistant({
  await widgetHomeAssistantUpdate(
  dashboardId,
  sectionId,
- data.widgetId,
+ widgetData.widgetId,
  "secondaryInfo",
  value
  );