From fddcfb3f06b850a4bf575ba8dc1fe014cf45b204 Mon Sep 17 00:00:00 2001
From: Mauz <mauriceprivat98@gmail.com>
Date: Wed, 22 Feb 2023 22:04:09 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=91=20Fix=20Error=20with=20latest=20Da?=
 =?UTF-8?q?shdot=20changes=20(#725)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dashboard/Wrappers/WrapperContent.tsx     |  9 ++--
 src/widgets/WidgetWrapper.tsx                 | 46 +++++++++++++++----
 src/widgets/calendar/CalendarTile.tsx         |  4 +-
 src/widgets/dashDot/DashDotTile.tsx           |  2 +-
 4 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/src/components/Dashboard/Wrappers/WrapperContent.tsx b/src/components/Dashboard/Wrappers/WrapperContent.tsx
index 5a864b6ab..1d1d3ad87 100644
--- a/src/components/Dashboard/Wrappers/WrapperContent.tsx
+++ b/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>
         );
       })}
diff --git a/src/widgets/WidgetWrapper.tsx b/src/widgets/WidgetWrapper.tsx
index da0837307..bb7323073 100644
--- a/src/widgets/WidgetWrapper.tsx
+++ b/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>
+  );
+};
diff --git a/src/widgets/calendar/CalendarTile.tsx b/src/widgets/calendar/CalendarTile.tsx
index f06ca88d2..edd4b6672 100644
--- a/src/widgets/calendar/CalendarTile.tsx
+++ b/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()) ??
diff --git a/src/widgets/dashDot/DashDotTile.tsx b/src/widgets/dashDot/DashDotTile.tsx
index 34175f4b3..522c555c3 100644
--- a/src/widgets/dashDot/DashDotTile.tsx
+++ b/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}