🚑 Fix Error with latest Dashdot changes (#725)

src/components/Dashboard/Wrappers/WrapperContent.tsx

@@ -57,9 +57,12 @@ export function WrapperContent({ apps, refs, widgets }: WrapperContentProps) {
             {...widget.shape[shapeSize]?.location}
             {...widget.shape[shapeSize]?.size}
           >
-            <WidgetWrapper className="grid-stack-item-content" widget={widget} widgetId={widget.id}>
-              <definition.component className="grid-stack-item-content" widget={widget} />
-            </WidgetWrapper>
+            <WidgetWrapper
+              className="grid-stack-item-content"
+              widget={widget}
+              widgetId={widget.id}
+              WidgetComponent={definition.component}
+            />
           </GridstackTileWrapper>
         );
       })}

src/widgets/WidgetWrapper.tsx

@@ -1,4 +1,5 @@
-import { ReactNode } from 'react';
+import { ComponentType, useMemo } from 'react';
+import Widgets from '.';
 import { HomarrCardWrapper } from '../components/Dashboard/Tiles/HomarrCardWrapper';
 import { WidgetsMenu } from '../components/Dashboard/Tiles/Widgets/WidgetsMenu';
 import { IWidget } from './widgets';
@@ -7,12 +8,41 @@ interface WidgetWrapperProps {
   widgetId: string;
   widget: IWidget<string, any>;
   className: string;
-  children: ReactNode;
+  WidgetComponent: ComponentType<{ widget: IWidget<string, any> }>;
 }
 
-export const WidgetWrapper = ({ widgetId, widget, className, children }: WidgetWrapperProps) => (
-  <HomarrCardWrapper className={className}>
-    <WidgetsMenu integration={widgetId} widget={widget} />
-    {children}
-  </HomarrCardWrapper>
-);
+// If a property has no value, set it to the default value
+const useWidget = <T extends IWidget<string, any>>(widget: T): T => {
+  const definition = Widgets[widget.id as keyof typeof Widgets];
+
+  return useMemo(() => {
+    const newProps = { ...widget.properties };
+
+    Object.entries(definition.options).forEach(([key, option]) => {
+      if (newProps[key] == null) {
+        newProps[key] = option.defaultValue;
+      }
+    });
+
+    return {
+      ...widget,
+      properties: newProps,
+    };
+  }, [widget]);
+};
+
+export const WidgetWrapper = ({
+  widgetId,
+  widget,
+  className,
+  WidgetComponent,
+}: WidgetWrapperProps) => {
+  const widgetWithDefaultProps = useWidget(widget);
+
+  return (
+    <HomarrCardWrapper className={className}>
+      <WidgetsMenu integration={widgetId} widget={widgetWithDefaultProps} />
+      <WidgetComponent widget={widgetWithDefaultProps} />
+    </HomarrCardWrapper>
+  );
+};

src/widgets/calendar/CalendarTile.tsx

@@ -43,7 +43,7 @@ const definition = defineWidget({
   component: CalendarTile,
 });
 
-export type ICalendarWidget = IWidget<typeof definition['id'], typeof definition>;
+export type ICalendarWidget = IWidget<(typeof definition)['id'], typeof definition>;
 
 interface CalendarTileProps {
   widget: ICalendarWidget;
@@ -124,7 +124,7 @@ const getReleasedMediasForDate = (
   date: Date,
   widget: ICalendarWidget
 ): MediasType => {
-  const radarrReleaseType = widget.properties.radarrReleaseType ?? 'inCinemas';
+  const { radarrReleaseType } = widget.properties;
 
   const books =
     medias?.books.filter((b) => new Date(b.releaseDate).toDateString() === date.toDateString()) ??

src/widgets/dashDot/DashDotTile.tsx

@@ -188,7 +188,7 @@ function DashDotTile({ widget }: DashDotTileProps) {
             {graphsOrder
               .filter((g) => g.subValues.enabled)
               .map((g) => (
-                <Grid.Col span={Math.min(columns, g.subValues.span)}>
+                <Grid.Col key={g.key} span={Math.min(columns, g.subValues.span)}>
                   <DashDotGraph
                     dashDotUrl={dashDotUrl}
                     info={info}