✨ Change rendering from id to type

src/components/Dashboard/Wrappers/WrapperContent.tsx

@@ -42,17 +42,18 @@ export function WrapperContent({ apps, refs, widgets }: WrapperContentProps) {
         );
       })}
       {widgets.map((widget) => {
-        const definition = Widgets[widget.id as keyof typeof Widgets] as
+        const definition = Widgets[widget.type as keyof typeof Widgets] as
           | IWidgetDefinition
           | undefined;
         if (!definition) return null;
+        console.log(definition);
 
         return (
           <GridstackTileWrapper
             type="widget"
             key={widget.id}
             itemRef={refs.items.current[widget.id]}
-            id={definition.id}
+            id={widget.id}
             {...definition.gridstack}
             {...widget.shape[shapeSize]?.location}
             {...widget.shape[shapeSize]?.size}
@@ -60,7 +61,7 @@ export function WrapperContent({ apps, refs, widgets }: WrapperContentProps) {
             <WidgetWrapper
               className="grid-stack-item-content"
               widget={widget}
-              widgetId={widget.id}
+              widgetType={widget.type}
               WidgetComponent={definition.component}
             />
           </GridstackTileWrapper>

src/widgets/WidgetWrapper.tsx

@@ -6,7 +6,7 @@ import ErrorBoundary from './boundary';
 import { IWidget } from './widgets';
 
 interface WidgetWrapperProps {
-  widgetId: string;
+  widgetType: string;
   widget: IWidget<string, any>;
   className: string;
   WidgetComponent: ComponentType<{ widget: IWidget<string, any> }>;
@@ -14,7 +14,7 @@ interface WidgetWrapperProps {
 
 // 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];
+  const definition = Widgets[widget.type as keyof typeof Widgets];
 
   return useMemo(() => {
     const newProps = { ...widget.properties };
@@ -33,7 +33,7 @@ const useWidget = <T extends IWidget<string, any>>(widget: T): T => {
 };
 
 export const WidgetWrapper = ({
-  widgetId,
+  widgetType: widgetId,
   widget,
   className,
   WidgetComponent,

src/widgets/widgets.ts

@@ -13,7 +13,8 @@ import { ShapeType } from '../types/shape';
 
 // Type of widgets which are saved to config
 export type IWidget<TKey extends string, TDefinition extends IWidgetDefinition> = {
-  id: TKey;
+  id: string;
+  type: TKey;
   properties: {
     [key in keyof TDefinition['options']]: MakeLessSpecific<
       TDefinition['options'][key]['defaultValue']