From c2186c2525320895500d121cc27c4f0a831558de Mon Sep 17 00:00:00 2001 From: Meierschlumpf Date: Mon, 19 Dec 2022 18:26:04 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Migrate=20all=20wrapper=20to=20u?= =?UTF-8?q?se=20WidgetWrapper?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Dashboard/Tiles/Apps/AppTile.tsx | 6 +- .../Dashboard/Wrappers/WrapperContent.tsx | 5 +- src/widgets/bitTorrent/BitTorrentTile.tsx | 12 +- src/widgets/calendar/CalendarTile.tsx | 62 +++++----- src/widgets/dashDot/DashDotTile.tsx | 31 +---- src/widgets/date/DateTile.tsx | 27 ++-- .../TorrentNetworkTrafficTile.tsx | 12 +- src/widgets/useNet/UseNetTile.tsx | 115 ++++++++---------- src/widgets/weather/WeatherTile.tsx | 85 ++++++------- 9 files changed, 153 insertions(+), 202 deletions(-) diff --git a/src/components/Dashboard/Tiles/Apps/AppTile.tsx b/src/components/Dashboard/Tiles/Apps/AppTile.tsx index b86dc9f9c..84baba625 100644 --- a/src/components/Dashboard/Tiles/Apps/AppTile.tsx +++ b/src/components/Dashboard/Tiles/Apps/AppTile.tsx @@ -36,11 +36,7 @@ export const AppTile = ({ className, app }: AppTileProps) => { return ( - {/* TODO: add app menu */} - -
- -
+ {!app.url || isEditMode ? ( {...widget.shape.location} {...widget.shape.size} > - + + + ); })} diff --git a/src/widgets/bitTorrent/BitTorrentTile.tsx b/src/widgets/bitTorrent/BitTorrentTile.tsx index db8818a1a..44bb6e7a2 100644 --- a/src/widgets/bitTorrent/BitTorrentTile.tsx +++ b/src/widgets/bitTorrent/BitTorrentTile.tsx @@ -1,6 +1,4 @@ -import { IconClock, IconFileDownload } from '@tabler/icons'; -import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper'; -import { BaseTileProps } from '../../components/Dashboard/Tiles/type'; +import { IconFileDownload } from '@tabler/icons'; import { defineWidget } from '../helper'; import { IWidget } from '../widgets'; @@ -19,12 +17,12 @@ const definition = defineWidget({ export type IBitTorrent = IWidget; -interface BitTorrentTileProps extends BaseTileProps { - widget: IBitTorrent; // TODO: change to new type defined through widgetDefinition +interface BitTorrentTileProps { + widget: IBitTorrent; } -function BitTorrentTile({ className, widget }: BitTorrentTileProps) { - return Bit Torrent; +function BitTorrentTile({ widget }: BitTorrentTileProps) { + return null; } export default definition; diff --git a/src/widgets/calendar/CalendarTile.tsx b/src/widgets/calendar/CalendarTile.tsx index 3d87e387f..d326b7951 100644 --- a/src/widgets/calendar/CalendarTile.tsx +++ b/src/widgets/calendar/CalendarTile.tsx @@ -3,8 +3,6 @@ import { Calendar } from '@mantine/dates'; import { IconCalendarTime } from '@tabler/icons'; import { useQuery } from '@tanstack/react-query'; import { useState } from 'react'; -import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper'; -import { BaseTileProps } from '../../components/Dashboard/Tiles/type'; import { useConfigContext } from '../../config/provider'; import { useColorTheme } from '../../tools/color'; import { isToday } from '../../tools/isToday'; @@ -33,11 +31,11 @@ const definition = defineWidget({ export type ICalendarWidget = IWidget; -interface CalendarTileProps extends BaseTileProps { +interface CalendarTileProps { widget: ICalendarWidget; } -function CalendarTile({ className, widget }: CalendarTileProps) { +function CalendarTile({ widget }: CalendarTileProps) { const { secondaryColor } = useColorTheme(); const { name: configName } = useConfigContext(); const { classes, cx } = useStyles(secondaryColor); @@ -57,35 +55,33 @@ function CalendarTile({ className, widget }: CalendarTileProps) { }); return ( - - {}} - firstDayOfWeek={widget.properties.sundayStart ? 'sunday' : 'monday'} - dayStyle={(date) => ({ - margin: 1, - backgroundColor: isToday(date) - ? colorScheme === 'dark' - ? colors.dark[5] - : colors.gray[0] - : undefined, - })} - styles={{ - calendarHeader: { - marginRight: 40, - marginLeft: 40, - }, - }} - allowLevelChange={false} - dayClassName={(_, modifiers) => cx({ [classes.weekend]: modifiers.weekend })} - renderDay={(date) => ( - - )} - /> - + {}} + firstDayOfWeek={widget.properties.sundayStart ? 'sunday' : 'monday'} + dayStyle={(date) => ({ + margin: 1, + backgroundColor: isToday(date) + ? colorScheme === 'dark' + ? colors.dark[5] + : colors.gray[0] + : undefined, + })} + styles={{ + calendarHeader: { + marginRight: 40, + marginLeft: 40, + }, + }} + allowLevelChange={false} + dayClassName={(_, modifiers) => cx({ [classes.weekend]: modifiers.weekend })} + renderDay={(date) => ( + + )} + /> ); } diff --git a/src/widgets/dashDot/DashDotTile.tsx b/src/widgets/dashDot/DashDotTile.tsx index b114c8e10..531a25313 100644 --- a/src/widgets/dashDot/DashDotTile.tsx +++ b/src/widgets/dashDot/DashDotTile.tsx @@ -2,9 +2,6 @@ import { createStyles, Group, Title } from '@mantine/core'; import { useQuery } from '@tanstack/react-query'; import axios from 'axios'; import { useTranslation } from 'next-i18next'; -import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper'; -import { BaseTileProps } from '../../components/Dashboard/Tiles/type'; -import { WidgetsMenu } from '../../components/Dashboard/Tiles/Widgets/WidgetsMenu'; import { useConfigContext } from '../../config/provider'; import { defineWidget } from '../helper'; import { IWidget } from '../widgets'; @@ -49,11 +46,11 @@ const definition = defineWidget({ export type IDashDotTile = IWidget; -interface DashDotTileProps extends BaseTileProps { - widget: IDashDotTile; // TODO: change to new type defined through widgetDefinition +interface DashDotTileProps { + widget: IDashDotTile; } -function DashDotTile({ widget, className }: DashDotTileProps) { +function DashDotTile({ widget }: DashDotTileProps) { const { classes } = useDashDotTileStyles(); const { t } = useTranslation('modules/dashdot'); @@ -76,23 +73,6 @@ function DashDotTile({ widget, className }: DashDotTileProps) { ); - const menu = ( - // TODO: add widgetWrapper that is generic and uses the definition - - ); - - if (!dashDotUrl) { - return ( - - {menu} -
- {heading} -

{t('card.errors.noApp')}

-
- - ); - } - const isCompact = widget?.properties.useCompactView ?? false; const isCompactStorageVisible = graphs?.some((g) => g.id === 'storage' && isCompact); @@ -104,8 +84,7 @@ function DashDotTile({ widget, className }: DashDotTileProps) { ); return ( - - {menu} + <> {heading} {!info &&

{t('card.errors.noInformation')}

} {info && ( @@ -126,7 +105,7 @@ function DashDotTile({ widget, className }: DashDotTileProps) { )} - + ); } diff --git a/src/widgets/date/DateTile.tsx b/src/widgets/date/DateTile.tsx index 46a7e86c7..c47177813 100644 --- a/src/widgets/date/DateTile.tsx +++ b/src/widgets/date/DateTile.tsx @@ -1,13 +1,10 @@ import { Center, Stack, Text, Title } from '@mantine/core'; +import { IconClock } from '@tabler/icons'; import dayjs from 'dayjs'; import { useEffect, useRef, useState } from 'react'; -import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper'; -import { WidgetsMenu } from '../../components/Dashboard/Tiles/Widgets/WidgetsMenu'; -import { BaseTileProps } from '../../components/Dashboard/Tiles/type'; import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval'; import { defineWidget } from '../helper'; import { IWidget } from '../widgets'; -import { IconClock } from '@tabler/icons'; const definition = defineWidget({ id: 'date', @@ -29,25 +26,21 @@ const definition = defineWidget({ export type IDateWidget = IWidget; -interface DateTileProps extends BaseTileProps { - widget: IDateWidget; // TODO: change to new type defined through widgetDefinition +interface DateTileProps { + widget: IDateWidget; } -function DateTile({ className, widget }: DateTileProps) { +function DateTile({ widget }: DateTileProps) { const date = useDateState(); 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)} - {dayjs(date).format('dddd, MMMM D')} - -
- +
+ + {dayjs(date).format(formatString)} + {dayjs(date).format('dddd, MMMM D')} + +
); } diff --git a/src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx b/src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx index 3c1069523..e87324baa 100644 --- a/src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx +++ b/src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx @@ -1,6 +1,4 @@ -import { IconArrowsUpDown, IconClock } from '@tabler/icons'; -import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper'; -import { BaseTileProps } from '../../components/Dashboard/Tiles/type'; +import { IconArrowsUpDown } from '@tabler/icons'; import { defineWidget } from '../helper'; import { IWidget } from '../widgets'; @@ -20,12 +18,12 @@ const definition = defineWidget({ export type ITorrentNetworkTraffic = IWidget; -interface TorrentNetworkTrafficTileProps extends BaseTileProps { - widget: ITorrentNetworkTraffic; // TODO: change to new type defined through widgetDefinition +interface TorrentNetworkTrafficTileProps { + widget: ITorrentNetworkTraffic; } -function TorrentNetworkTrafficTile({ className, widget }: TorrentNetworkTrafficTileProps) { - return TorrentNetworkTraffic; +function TorrentNetworkTrafficTile({ widget }: TorrentNetworkTrafficTileProps) { + return null; } export default definition; diff --git a/src/widgets/useNet/UseNetTile.tsx b/src/widgets/useNet/UseNetTile.tsx index d012b0ae3..744d6753d 100644 --- a/src/widgets/useNet/UseNetTile.tsx +++ b/src/widgets/useNet/UseNetTile.tsx @@ -16,16 +16,14 @@ import { useElementSize } from '@mantine/hooks'; import dayjs from 'dayjs'; import duration from 'dayjs/plugin/duration'; import { useTranslation } from 'next-i18next'; -import { UsenetQueueList } from './UsenetQueueList'; -import { UsenetHistoryList } from './UsenetHistoryList'; -import { BaseTileProps } from '../../components/Dashboard/Tiles/type'; -import { AppIntegrationType } from '../../types/app'; import { useConfigContext } from '../../config/provider'; import { useGetUsenetInfo, usePauseUsenetQueue, useResumeUsenetQueue } from '../../tools/hooks/api'; -import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper'; import { humanFileSize } from '../../tools/humanFileSize'; +import { AppIntegrationType } from '../../types/app'; import { defineWidget } from '../helper'; import { IWidget } from '../widgets'; +import { UsenetHistoryList } from './UsenetHistoryList'; +import { UsenetQueueList } from './UsenetQueueList'; dayjs.extend(duration); @@ -46,15 +44,14 @@ const definition = defineWidget({ export type IWeatherWidget = IWidget; -interface UseNetTileProps extends BaseTileProps {} +interface UseNetTileProps {} -function UseNetTile({ className }: UseNetTileProps) { +function UseNetTile({}: UseNetTileProps) { const { t } = useTranslation('modules/usenet'); const { config } = useConfigContext(); const downloadApps = - config?.apps.filter( - (x) => x.integration && downloadAppTypes.includes(x.integration.type) - ) ?? []; + config?.apps.filter((x) => x.integration && downloadAppTypes.includes(x.integration.type)) ?? + []; const [selectedAppId, setSelectedApp] = useState(downloadApps[0]?.id); const { data } = useGetUsenetInfo({ appId: selectedAppId! }); @@ -70,14 +67,12 @@ function UseNetTile({ className }: UseNetTileProps) { if (downloadApps.length === 0) { return ( - - - {t('card.errors.noDownloadClients.title')} - - {t('card.errors.noDownloadClients.text')} - - - + + {t('card.errors.noDownloadClients.title')} + + {t('card.errors.noDownloadClients.text')} + + ); } @@ -89,50 +84,48 @@ function UseNetTile({ className }: UseNetTileProps) { const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs; return ( - - - - {t('tabs.queue')} - {t('tabs.history')} - {data && ( - - {width > MIN_WIDTH_MOBILE && ( - <> - {humanFileSize(data?.speed)}/s - - {t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)} - - - )} - - )} - - {downloadApps.length > 1 && ( - ({ value: app.id, label: app.name }))} + /> + )} + + + {!data ? null : data.paused ? ( + + ) : ( + + )} + + + + + ); } diff --git a/src/widgets/weather/WeatherTile.tsx b/src/widgets/weather/WeatherTile.tsx index 004d5042d..b24b3df48 100644 --- a/src/widgets/weather/WeatherTile.tsx +++ b/src/widgets/weather/WeatherTile.tsx @@ -32,16 +32,16 @@ const definition = defineWidget({ export type IWeatherWidget = IWidget; -interface WeatherTileProps extends BaseTileProps { +interface WeatherTileProps { widget: IWeatherWidget; } -function WeatherTile({ className, widget }: WeatherTileProps) { +function WeatherTile({ widget }: WeatherTileProps) { const { data: weather, isLoading, isError } = useWeatherForCity(widget.properties.location); if (isLoading) { return ( - + <> @@ -50,58 +50,53 @@ function WeatherTile({ className, widget }: WeatherTileProps) { - + ); } if (isError) { return ( - -
- An error occured -
- +
+ An error occured +
); } // TODO: add widgetWrapper that is generic and uses the definition return ( - - -
- - - - - {getPerferedUnit( - weather!.current_weather.temperature, - widget.properties.displayInFahrenheit - )} - - -
- - {getPerferedUnit( - weather!.daily.temperature_2m_max[0], - widget.properties.displayInFahrenheit - )} - - -
-
- - {getPerferedUnit( - weather!.daily.temperature_2m_min[0], - widget.properties.displayInFahrenheit - )} - - -
- - - -
- +
+ + + + + {getPerferedUnit( + weather!.current_weather.temperature, + widget.properties.displayInFahrenheit + )} + + +
+ + {getPerferedUnit( + weather!.daily.temperature_2m_max[0], + widget.properties.displayInFahrenheit + )} + + +
+
+ + {getPerferedUnit( + weather!.daily.temperature_2m_min[0], + widget.properties.displayInFahrenheit + )} + + +
+ + + +
); }