From 8f7a3111ca2a1efb051a21953d0cfd30fab1fa44 Mon Sep 17 00:00:00 2001 From: Meierschlumpf Date: Mon, 19 Dec 2022 17:03:39 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Change=20integration=20structure=20?= =?UTF-8?q?to=20array=20and=20rename=20to=20widgets=20in=20config?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data/configs/default.json | 25 +++++++- .../ChangeIntegrationPositionModal.tsx | 14 ++--- .../Dashboard/Tiles/TileWrapper.tsx | 2 +- .../Tiles/Widgets/WidgetsEditModal.tsx | 10 +-- .../Dashboard/Tiles/Widgets/WidgetsMenu.tsx | 14 ++--- .../Dashboard/Wrappers/Category/Category.tsx | 26 ++++---- .../Dashboard/Wrappers/Sidebar/Sidebar.tsx | 26 ++++---- .../Dashboard/Wrappers/Wrapper/Wrapper.tsx | 26 ++++---- .../Wrappers/gridstack/init-gridstack.ts | 11 ++-- .../Wrappers/gridstack/use-gridstack.ts | 62 ++++++++----------- src/pages/api/modules/dashdot/info.ts | 2 +- src/pages/api/modules/dashdot/storage.ts | 2 +- src/tools/config/getFallbackConfig.ts | 2 +- src/types/config.ts | 4 +- src/widgets/bitTorrent/BitTorrentTile.tsx | 4 +- src/widgets/calendar/CalendarTile.tsx | 6 +- src/widgets/dashDot/DashDotCompactStorage.tsx | 2 +- src/widgets/dashDot/DashDotTile.tsx | 24 +++---- src/widgets/date/DateTile.tsx | 8 +-- .../TorrentNetworkTrafficTile.tsx | 4 +- src/widgets/weather/WeatherTile.tsx | 14 ++--- 21 files changed, 154 insertions(+), 134 deletions(-) diff --git a/data/configs/default.json b/data/configs/default.json index 865067a42..9f7552956 100644 --- a/data/configs/default.json +++ b/data/configs/default.json @@ -164,7 +164,28 @@ } } ], - "integrations": [], + "widgets": [{ + "id": "date", + "properties": { + "display24HourFormat": true + }, + "area": { + "type": "wrapper", + "properties": { + "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33e" + } + }, + "shape": { + "location": { + "x": 0, + "y": 3 + }, + "size": { + "width": 4, + "height": 2 + } + } + }], "settings": { "common": { "searchEngine": { @@ -193,4 +214,4 @@ "appOpacity": 100 } } -} \ No newline at end of file +} diff --git a/src/components/Dashboard/Modals/ChangePosition/ChangeIntegrationPositionModal.tsx b/src/components/Dashboard/Modals/ChangePosition/ChangeIntegrationPositionModal.tsx index a9dcbfcce..03245e0b1 100644 --- a/src/components/Dashboard/Modals/ChangePosition/ChangeIntegrationPositionModal.tsx +++ b/src/components/Dashboard/Modals/ChangePosition/ChangeIntegrationPositionModal.tsx @@ -22,10 +22,10 @@ export const ChangeIntegrationPositionModal = ({ updateConfig(configName, (prev) => ({ ...prev, - integrations: { - ...prev.integrations, + widgets: { + ...prev.widgets, [innerProps.integration]: { - ...prev.integrations[innerProps.integration], + ...prev.widgets[innerProps.integration], shape: { location: { x, @@ -55,10 +55,10 @@ export const ChangeIntegrationPositionModal = ({ onCancel={handleCancel} heightData={heightData} widthData={widthData} - initialX={innerProps.module.shape.location.x} - initialY={innerProps.module.shape.location.y} - initialWidth={innerProps.module.shape.size.width} - initialHeight={innerProps.module.shape.size.height} + initialX={innerProps.widget.shape.location.x} + initialY={innerProps.widget.shape.location.y} + initialWidth={innerProps.widget.shape.size.width} + initialHeight={innerProps.widget.shape.size.height} /> ); }; diff --git a/src/components/Dashboard/Tiles/TileWrapper.tsx b/src/components/Dashboard/Tiles/TileWrapper.tsx index 68d16d397..78bb754ea 100644 --- a/src/components/Dashboard/Tiles/TileWrapper.tsx +++ b/src/components/Dashboard/Tiles/TileWrapper.tsx @@ -2,7 +2,7 @@ import { ReactNode, RefObject } from 'react'; interface GridstackTileWrapperProps { id: string; - type: 'app' | 'module'; + type: 'app' | 'widget'; x?: number; y?: number; width?: number; diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx index 980c48427..23e3ecdaf 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx @@ -47,15 +47,15 @@ export const WidgetsEditModal = ({ const handleSave = () => { updateConfig(configName, (prev) => ({ ...prev, - integrations: { - ...prev.integrations, + widgets: { + ...prev.widgets, [innerProps.integration]: - 'properties' in (prev.integrations[innerProps.integration] ?? {}) + 'properties' in (prev.widgets[innerProps.integration] ?? {}) ? { - ...prev.integrations[innerProps.integration], + ...prev.widgets[innerProps.integration], properties: moduleProperties, } - : prev.integrations[innerProps.integration], + : prev.widgets[innerProps.integration], }, })); context.closeModal(id); diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx index 3f5576731..cf696d318 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx @@ -8,18 +8,18 @@ import { WidgetsRemoveModalInnerProps } from './WidgetsRemoveModal'; export type WidgetChangePositionModalInnerProps = { integration: string; - module: IWidget; + widget: IWidget; }; interface WidgetsMenuProps { integration: string; - module: IWidget | undefined; + widget: IWidget | undefined; } -export const WidgetsMenu = ({ integration, module }: WidgetsMenuProps) => { +export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => { const { t } = useTranslation(`modules/${integration}`); - if (!module) return null; + if (!widget) return null; const handleDeleteClick = () => { openContextModalGeneric({ @@ -38,7 +38,7 @@ export const WidgetsMenu = ({ integration, module }: WidgetsMenuProps) => { title: null, innerProps: { integration, - module, + widget: widget, }, }); }; @@ -49,7 +49,7 @@ export const WidgetsMenu = ({ integration, module }: WidgetsMenuProps) => { title: {t('descriptor.settings.title')}, innerProps: { integration, - options: module.properties, + options: widget.properties, }, }); }; @@ -59,7 +59,7 @@ export const WidgetsMenu = ({ integration, module }: WidgetsMenuProps) => { handleClickEdit={handleEditClick} handleClickChangePosition={handleChangeSizeClick} handleClickDelete={handleDeleteClick} - displayEdit={module.properties !== undefined} + displayEdit={widget.properties !== undefined} /> ); }; diff --git a/src/components/Dashboard/Wrappers/Category/Category.tsx b/src/components/Dashboard/Wrappers/Category/Category.tsx index 293882075..e04617166 100644 --- a/src/components/Dashboard/Wrappers/Category/Category.tsx +++ b/src/components/Dashboard/Wrappers/Category/Category.tsx @@ -14,7 +14,7 @@ interface DashboardCategoryProps { } export const DashboardCategory = ({ category }: DashboardCategoryProps) => { - const { refs, items, integrations } = useGridstack('category', category.id); + const { refs, items, widgets } = useGridstack('category', category.id); const isEditMode = useEditModeStore((x) => x.enabled); return ( @@ -45,21 +45,23 @@ export const DashboardCategory = ({ category }: DashboardCategoryProps) => { ); })} - {Object.entries(integrations).map(([k, v]) => { - const widget = Widgets[k as keyof typeof Widgets] as IWidgetDefinition | undefined; - if (!widget) return null; + {widgets.map((widget) => { + const definition = Widgets[widget.id as keyof typeof Widgets] as + | IWidgetDefinition + | undefined; + if (!definition) return null; return ( - + ); })} diff --git a/src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx b/src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx index f5916cbfa..605df53ff 100644 --- a/src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx +++ b/src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx @@ -11,7 +11,7 @@ interface DashboardSidebarProps { } export const DashboardSidebar = ({ location }: DashboardSidebarProps) => { - const { refs, items, integrations } = useGridstack('sidebar', location); + const { refs, items, widgets } = useGridstack('sidebar', location); const minRow = useMinRowForFullHeight(refs.wrapper); @@ -47,21 +47,23 @@ export const DashboardSidebar = ({ location }: DashboardSidebarProps) => { ); })} - {Object.entries(integrations).map(([k, v]) => { - const widget = Widgets[k as keyof typeof Widgets] as IWidgetDefinition | undefined; - if (!widget) return null; + {widgets.map((widget) => { + const definition = Widgets[widget.id as keyof typeof Widgets] as + | IWidgetDefinition + | undefined; + if (!definition) return null; return ( - + ); })} diff --git a/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx b/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx index 59228eb3a..2c3996a04 100644 --- a/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx +++ b/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx @@ -10,7 +10,7 @@ interface DashboardWrapperProps { } export const DashboardWrapper = ({ wrapper }: DashboardWrapperProps) => { - const { refs, items, integrations } = useGridstack('wrapper', wrapper.id); + const { refs, items, widgets } = useGridstack('wrapper', wrapper.id); return (
{ ); })} - {Object.entries(integrations).map(([k, v]) => { - const widget = Widgets[k as keyof typeof Widgets] as IWidgetDefinition | undefined; - if (!widget) return null; + {widgets.map((widget) => { + const definition = Widgets[widget.id as keyof typeof Widgets] as + | IWidgetDefinition + | undefined; + if (!definition) return null; return ( - + ); })} diff --git a/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts b/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts index 4949c73eb..77fddcd72 100644 --- a/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts +++ b/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts @@ -1,7 +1,7 @@ import { GridStack, GridStackNode } from 'fily-publish-gridstack'; import { MutableRefObject, RefObject } from 'react'; -import { IntegrationsType } from '../../../../types/integration'; import { AppType } from '../../../../types/app'; +import { IWidget } from '../../../../widgets/widgets'; export const initializeGridstack = ( areaType: 'wrapper' | 'category' | 'sidebar', @@ -10,7 +10,7 @@ export const initializeGridstack = ( itemRefs: MutableRefObject>>, areaId: string, items: AppType[], - integrations: IntegrationsType, + widgets: IWidget[], isEditMode: boolean, events: { onChange: (changedNode: GridStackNode) => void; @@ -60,9 +60,10 @@ export const initializeGridstack = ( ({ id }) => itemRefs.current[id] && grid.makeWidget(itemRefs.current[id].current as HTMLDivElement) ); - Object.keys(integrations).forEach( - (key) => - itemRefs.current[key] && grid.makeWidget(itemRefs.current[key].current as HTMLDivElement) + console.log('widgets', widgets, itemRefs.current); + widgets.forEach( + ({ id }) => + itemRefs.current[id] && grid.makeWidget(itemRefs.current[id].current as HTMLDivElement) ); grid.batchUpdate(false); }; diff --git a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts index 7cc02f9f8..b75e0bede 100644 --- a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts +++ b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts @@ -11,15 +11,14 @@ import { import { useConfigContext } from '../../../../config/provider'; import { useConfigStore } from '../../../../config/store'; import { useResize } from '../../../../hooks/use-resize'; -import { IntegrationsType } from '../../../../types/integration'; import { AppType } from '../../../../types/app'; -import { TileBaseType } from '../../../../types/tile'; +import { IWidget } from '../../../../widgets/widgets'; import { useEditModeStore } from '../../Views/useEditModeStore'; import { initializeGridstack } from './init-gridstack'; interface UseGristackReturnType { items: AppType[]; - integrations: Partial; + widgets: IWidget[]; refs: { wrapper: RefObject; items: MutableRefObject>>; @@ -54,32 +53,24 @@ export const useGridstack = ( ) ?? [], [config] ); - const integrations = useMemo(() => { - if (!config) return; - return (Object.entries(config.integrations) as [keyof IntegrationsType, TileBaseType][]) - .filter( - ([k, v]) => - v.area.type === areaType && - (v.area.type === 'sidebar' - ? v.area.properties.location === areaId - : v.area.properties.id === areaId) - ) - .reduce((prev, [k, v]) => { - prev[k] = v as unknown as any; - return prev; - }, {} as IntegrationsType); + const widgets = useMemo(() => { + if (!config) return []; + return config.widgets.filter( + (w) => + w.area.type === areaType && + (w.area.type === 'sidebar' + ? w.area.properties.location === areaId + : w.area.properties.id === areaId) + ); }, [config]); // define items in itemRefs for easy access and reference to items - if ( - Object.keys(itemRefs.current).length !== - items.length + Object.keys(integrations ?? {}).length - ) { + if (Object.keys(itemRefs.current).length !== items.length + (widgets ?? []).length) { items.forEach(({ id }: { id: keyof typeof itemRefs.current }) => { itemRefs.current[id] = itemRefs.current[id] || createRef(); }); - Object.keys(integrations ?? {}).forEach((k) => { - itemRefs.current[k] = itemRefs.current[k] || createRef(); + (widgets ?? []).forEach(({ id }) => { + itemRefs.current[id] = itemRefs.current[id] || createRef(); }); } @@ -102,7 +93,7 @@ export const useGridstack = ( const currentItem = itemType === 'app' ? previous.apps.find((x) => x.id === itemId) - : previous.integrations[itemId as keyof typeof previous.integrations]; + : previous.widgets.find((x) => x.id === itemId); if (!currentItem) return previous; currentItem.shape = { @@ -126,11 +117,12 @@ export const useGridstack = ( }; } - const integrationsCopy = { ...previous.integrations }; - integrationsCopy[itemId as keyof typeof integrationsCopy] = currentItem as any; return { ...previous, - integrations: integrationsCopy, + widgets: [ + ...previous.widgets.filter((x) => x.id !== itemId), + { ...(currentItem as IWidget) }, + ], }; }); } @@ -149,8 +141,7 @@ export const useGridstack = ( const currentItem = itemType === 'app' ? previous.apps.find((x) => x.id === itemId) - : previous.integrations[itemId as keyof typeof previous.integrations]; - + : previous.widgets.find((x) => x.id === itemId); if (!currentItem) return previous; if (areaType === 'sidebar') { @@ -190,11 +181,12 @@ export const useGridstack = ( }; } - const integrationsCopy = { ...previous.integrations }; - integrationsCopy[itemId as keyof typeof integrationsCopy] = currentItem as any; return { ...previous, - integrations: integrationsCopy, + widgets: [ + ...previous.widgets.filter((x) => x.id !== itemId), + { ...(currentItem as IWidget) }, + ], }; }); } @@ -209,18 +201,18 @@ export const useGridstack = ( itemRefs, areaId, items, - integrations ?? {}, + widgets ?? [], isEditMode, { onChange, onAdd, } ); - }, [items.length, wrapperRef.current, Object.keys(integrations ?? {}).length]); + }, [items.length, wrapperRef.current, (widgets ?? []).length]); return { items, - integrations: integrations ?? {}, + widgets: widgets ?? [], refs: { items: itemRefs, wrapper: wrapperRef, diff --git a/src/pages/api/modules/dashdot/info.ts b/src/pages/api/modules/dashdot/info.ts index 7712a5337..46ae92a9e 100644 --- a/src/pages/api/modules/dashdot/info.ts +++ b/src/pages/api/modules/dashdot/info.ts @@ -13,7 +13,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) { const config = getConfig(configName); - const dashDotUrl = config.integrations.dashdot?.properties.url; + const dashDotUrl = config.widgets.dashdot?.properties.url; if (!dashDotUrl) { return res.status(400).json({ diff --git a/src/pages/api/modules/dashdot/storage.ts b/src/pages/api/modules/dashdot/storage.ts index 5c25299b6..f8faee3e3 100644 --- a/src/pages/api/modules/dashdot/storage.ts +++ b/src/pages/api/modules/dashdot/storage.ts @@ -13,7 +13,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) { const config = getConfig(configName); - const dashDotUrl = config.integrations.dashdot?.properties.url; + const dashDotUrl = config.widgets.dashdot?.properties.url; if (!dashDotUrl) { return res.status(400).json({ diff --git a/src/tools/config/getFallbackConfig.ts b/src/tools/config/getFallbackConfig.ts index 0d3a2227d..51507d9ac 100644 --- a/src/tools/config/getFallbackConfig.ts +++ b/src/tools/config/getFallbackConfig.ts @@ -6,7 +6,7 @@ export const getFallbackConfig = (name?: string): BackendConfigType => ({ name: name ?? 'default', }, categories: [], - integrations: {}, + widgets: {}, apps: [], settings: { common: { diff --git a/src/types/config.ts b/src/types/config.ts index 778c97fff..293fdd9e4 100644 --- a/src/types/config.ts +++ b/src/types/config.ts @@ -1,8 +1,8 @@ import { CategoryType } from './category'; import { WrapperType } from './wrapper'; import { ConfigAppType, AppType } from './app'; -import { IntegrationsType } from './integration'; import { SettingsType } from './settings'; +import { IWidget } from '../widgets/widgets'; export interface ConfigType { schemaVersion: string; @@ -10,7 +10,7 @@ export interface ConfigType { categories: CategoryType[]; wrappers: WrapperType[]; apps: AppType[]; - integrations: IntegrationsType; + widgets: IWidget[]; settings: SettingsType; } diff --git a/src/widgets/bitTorrent/BitTorrentTile.tsx b/src/widgets/bitTorrent/BitTorrentTile.tsx index 9ad15ef3c..db8818a1a 100644 --- a/src/widgets/bitTorrent/BitTorrentTile.tsx +++ b/src/widgets/bitTorrent/BitTorrentTile.tsx @@ -20,10 +20,10 @@ const definition = defineWidget({ export type IBitTorrent = IWidget; interface BitTorrentTileProps extends BaseTileProps { - module: IBitTorrent; // TODO: change to new type defined through widgetDefinition + widget: IBitTorrent; // TODO: change to new type defined through widgetDefinition } -function BitTorrentTile({ className, module }: BitTorrentTileProps) { +function BitTorrentTile({ className, widget }: BitTorrentTileProps) { return Bit Torrent; } diff --git a/src/widgets/calendar/CalendarTile.tsx b/src/widgets/calendar/CalendarTile.tsx index eff60fa2d..3d87e387f 100644 --- a/src/widgets/calendar/CalendarTile.tsx +++ b/src/widgets/calendar/CalendarTile.tsx @@ -34,10 +34,10 @@ const definition = defineWidget({ export type ICalendarWidget = IWidget; interface CalendarTileProps extends BaseTileProps { - module: ICalendarWidget; + widget: ICalendarWidget; } -function CalendarTile({ className, module }: CalendarTileProps) { +function CalendarTile({ className, widget }: CalendarTileProps) { const { secondaryColor } = useColorTheme(); const { name: configName } = useConfigContext(); const { classes, cx } = useStyles(secondaryColor); @@ -64,7 +64,7 @@ function CalendarTile({ className, module }: CalendarTileProps) { size="xs" fullWidth onChange={() => {}} - firstDayOfWeek={module.properties.sundayStart ? 'sunday' : 'monday'} + firstDayOfWeek={widget.properties.sundayStart ? 'sunday' : 'monday'} dayStyle={(date) => ({ margin: 1, backgroundColor: isToday(date) diff --git a/src/widgets/dashDot/DashDotCompactStorage.tsx b/src/widgets/dashDot/DashDotCompactStorage.tsx index f990a7960..6a11531ec 100644 --- a/src/widgets/dashDot/DashDotCompactStorage.tsx +++ b/src/widgets/dashDot/DashDotCompactStorage.tsx @@ -58,7 +58,7 @@ const useDashDotStorage = () => { 'dashdot/storage', { configName, - url: config?.integrations.dashDot?.properties.url, + url: config?.widgets.dashDot?.properties.url, }, ], queryFn: () => fetchDashDotStorageLoad(configName), diff --git a/src/widgets/dashDot/DashDotTile.tsx b/src/widgets/dashDot/DashDotTile.tsx index 3fdc98423..b114c8e10 100644 --- a/src/widgets/dashDot/DashDotTile.tsx +++ b/src/widgets/dashDot/DashDotTile.tsx @@ -50,24 +50,24 @@ const definition = defineWidget({ export type IDashDotTile = IWidget; interface DashDotTileProps extends BaseTileProps { - module: IDashDotTile; // TODO: change to new type defined through widgetDefinition + widget: IDashDotTile; // TODO: change to new type defined through widgetDefinition } -function DashDotTile({ module, className }: DashDotTileProps) { +function DashDotTile({ widget, className }: DashDotTileProps) { const { classes } = useDashDotTileStyles(); const { t } = useTranslation('modules/dashdot'); - const dashDotUrl = module?.properties.url; + const dashDotUrl = widget?.properties.url; - const { data: info } = useDashDotInfo(); + const { data: info } = useDashDotInfo({ dashDotUrl }); - const graphs = module?.properties.graphs.map((g) => ({ + const graphs = widget?.properties.graphs.map((g) => ({ id: g, name: t(`card.graphs.${g}.title`), twoSpan: ['network', 'gpu'].includes(g), isMultiView: - (g === 'cpu' && module.properties.cpuMultiView) || - (g === 'storage' && module.properties.storageMultiView), + (g === 'cpu' && widget.properties.cpuMultiView) || + (g === 'storage' && widget.properties.storageMultiView), })); const heading = ( @@ -78,7 +78,7 @@ function DashDotTile({ module, className }: DashDotTileProps) { const menu = ( // TODO: add widgetWrapper that is generic and uses the definition - + ); if (!dashDotUrl) { @@ -93,7 +93,7 @@ function DashDotTile({ module, className }: DashDotTileProps) { ); } - const isCompact = module?.properties.useCompactView ?? false; + const isCompact = widget?.properties.useCompactView ?? false; const isCompactStorageVisible = graphs?.some((g) => g.id === 'storage' && isCompact); @@ -130,14 +130,14 @@ function DashDotTile({ module, className }: DashDotTileProps) { ); } -const useDashDotInfo = () => { - const { name: configName, config } = useConfigContext(); +const useDashDotInfo = ({ dashDotUrl }: { dashDotUrl: string }) => { + const { name: configName } = useConfigContext(); return useQuery({ queryKey: [ 'dashdot/info', { configName, - url: config?.integrations.dashDot?.properties.url, + dashDotUrl, }, ], queryFn: () => fetchDashDotInfo(configName), diff --git a/src/widgets/date/DateTile.tsx b/src/widgets/date/DateTile.tsx index a36c1cc89..46a7e86c7 100644 --- a/src/widgets/date/DateTile.tsx +++ b/src/widgets/date/DateTile.tsx @@ -30,17 +30,17 @@ const definition = defineWidget({ export type IDateWidget = IWidget; interface DateTileProps extends BaseTileProps { - module: IDateWidget; // TODO: change to new type defined through widgetDefinition + widget: IDateWidget; // TODO: change to new type defined through widgetDefinition } -function DateTile({ className, module }: DateTileProps) { +function DateTile({ className, widget }: DateTileProps) { const date = useDateState(); - const formatString = module.properties.display24HourFormat ? 'HH:mm' : 'h:mm A'; + const formatString = widget.properties.display24HourFormat ? 'HH:mm' : 'h:mm A'; // TODO: add widgetWrapper that is generic and uses the definition return ( - +
{dayjs(date).format(formatString)} diff --git a/src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx b/src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx index 22bd4f36c..3c1069523 100644 --- a/src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx +++ b/src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx @@ -21,10 +21,10 @@ const definition = defineWidget({ export type ITorrentNetworkTraffic = IWidget; interface TorrentNetworkTrafficTileProps extends BaseTileProps { - module: ITorrentNetworkTraffic; // TODO: change to new type defined through widgetDefinition + widget: ITorrentNetworkTraffic; // TODO: change to new type defined through widgetDefinition } -function TorrentNetworkTrafficTile({ className, module }: TorrentNetworkTrafficTileProps) { +function TorrentNetworkTrafficTile({ className, widget }: TorrentNetworkTrafficTileProps) { return TorrentNetworkTraffic; } diff --git a/src/widgets/weather/WeatherTile.tsx b/src/widgets/weather/WeatherTile.tsx index 4684a38da..004d5042d 100644 --- a/src/widgets/weather/WeatherTile.tsx +++ b/src/widgets/weather/WeatherTile.tsx @@ -33,11 +33,11 @@ const definition = defineWidget({ export type IWeatherWidget = IWidget; interface WeatherTileProps extends BaseTileProps { - module: IWeatherWidget; + widget: IWeatherWidget; } -function WeatherTile({ className, module }: WeatherTileProps) { - const { data: weather, isLoading, isError } = useWeatherForCity(module.properties.location); +function WeatherTile({ className, widget }: WeatherTileProps) { + const { data: weather, isLoading, isError } = useWeatherForCity(widget.properties.location); if (isLoading) { return ( @@ -67,7 +67,7 @@ function WeatherTile({ className, module }: WeatherTileProps) { // TODO: add widgetWrapper that is generic and uses the definition return ( - +
@@ -75,7 +75,7 @@ function WeatherTile({ className, module }: WeatherTileProps) { {getPerferedUnit( weather!.current_weather.temperature, - module.properties.displayInFahrenheit + widget.properties.displayInFahrenheit )} @@ -83,7 +83,7 @@ function WeatherTile({ className, module }: WeatherTileProps) { {getPerferedUnit( weather!.daily.temperature_2m_max[0], - module.properties.displayInFahrenheit + widget.properties.displayInFahrenheit )} @@ -92,7 +92,7 @@ function WeatherTile({ className, module }: WeatherTileProps) { {getPerferedUnit( weather!.daily.temperature_2m_min[0], - module.properties.displayInFahrenheit + widget.properties.displayInFahrenheit )}