feat: remove location based timezone resolving (#1680)

src/widgets/date/DateTile.tsx

@@ -8,10 +8,8 @@ import utc from 'dayjs/plugin/utc';
 import { useSession } from 'next-auth/react';
 import { useEffect, useState } from 'react';
 import { getLanguageByCode } from '~/tools/language';
-import { api } from '~/utils/api';
 
 import { defineWidget } from '../helper';
-import { WidgetLoading } from '../loading';
 import { IWidget } from '../widgets';
 
 dayjs.extend(advancedFormat);
@@ -22,6 +20,17 @@ const definition = defineWidget({
   id: 'date',
   icon: IconClock,
   options: {
+    timezone: {
+      type: 'select',
+      data: () => Intl.supportedValuesOf('timeZone').map((value) => ({ value, label: value })),
+      defaultValue: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      info: true,
+      infoLink: "https://www.timeanddate.com/time/map/",
+    },
+    customTitle: {
+      type: 'text',
+      defaultValue: '',
+    },
     display24HourFormat: {
       type: 'switch',
       defaultValue: false,
@@ -41,18 +50,6 @@ const definition = defineWidget({
         { value: 'MM/DD', label: dayjs().format('MM/DD') },
       ],
     },
-    enableTimezone: {
-      type: 'switch',
-      defaultValue: false,
-    },
-    timezoneLocation: {
-      type: 'location',
-      defaultValue: {
-        name: 'Paris',
-        latitude: 48.85341,
-        longitude: 2.3488,
-      },
-    },
     titleState: {
       type: 'select',
       defaultValue: 'both',
@@ -81,16 +78,7 @@ function DateTile({ widget }: DateTileProps) {
   const { cx, classes } = useStyles();
   const { data: sessionData } = useSession();
   const [now, setDate] = useState(new Date());
-  const { data, isFetching } = api.timezone.at.useQuery(
-    {
-      latitude: widget.properties.timezoneLocation.latitude,
-      longitude: widget.properties.timezoneLocation.longitude,
-    },
-    {
-      enabled: location !== undefined && widget.properties.enableTimezone,
-      retry: false,
-    }
-  );
+
   useEffect(() => {
     // Refresh the time every second
     const interval = setInterval(() => setDate(new Date()), 1000);
@@ -100,22 +88,21 @@ function DateTile({ widget }: DateTileProps) {
   const language = getLanguageByCode(sessionData?.user.language ?? 'en');
   dayjs.locale(language.locale);
 
-  if (isFetching) return <WidgetLoading />;
-
   return (
     <Stack ref={ref} className={cx(classes.wrapper, 'dashboard-tile-clock-wrapper')}>
-      {widget.properties.enableTimezone && widget.properties.titleState !== 'none' && (
-        <Text
-          size={width < 150 ? 'sm' : 'lg'}
-          className={cx(classes.extras, 'dashboard-tile-clock-city')}
-        >
-          {isFetching}
-          {widget.properties.timezoneLocation.name}
-          {widget.properties.titleState === 'both' && dayjs(now).tz(data).format(' (z)')}
-        </Text>
-      )}
+      {widget.properties.titleState !== 'none' &&
+        (widget.properties.customTitle.length > 0 || widget.properties.titleState === 'both') && (
+          <Text
+            size={width < 150 ? 'sm' : 'lg'}
+            className={cx(classes.extras, 'dashboard-tile-clock-city')}
+          >
+            {widget.properties.customTitle.length > 0 && widget.properties.customTitle}
+            {widget.properties.titleState === 'both' &&
+              dayjs(now).tz(widget.properties.timezone).format(' (z)')}
+          </Text>
+        )}
       <Text className={cx(classes.clock, 'dashboard-tile-clock-hour')}>
-        {dayjs(now).tz(data).format(formatString)}
+        {dayjs(now).tz(widget.properties.timezone).format(formatString)}
       </Text>
       {!widget.properties.dateFormat.includes('hide') && (
         <Text
@@ -123,7 +110,7 @@ function DateTile({ widget }: DateTileProps) {
           pt="0.2rem"
           className={cx(classes.extras, 'dashboard-tile-clock-date')}
         >
-          {dayjs(now).tz(data).format(widget.properties.dateFormat)}
+          {dayjs(now).tz(widget.properties.timezone).format(widget.properties.dateFormat)}
         </Text>
       )}
     </Stack>