work on next13

2023-01-23 01:34:36 +09:00
parent e47bbc966c
commit 9d566330be
20 changed files with 220 additions and 208 deletions
--- a/src/components/About/AboutModal.tsx
+++ b/src/components/About/AboutModal.tsx
@@ -51,7 +51,15 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
      opened={opened}
      title={
        <Group spacing="sm">
-          <Image src="/imgs/logo/logo.png" width={30} height={30} objectFit="contain" />
+          <Image
+            alt="Homarr logo"
+            src="/imgs/logo/logo.png"
+            width={30}
+            height={30}
+            style={{
+              objectFit: 'contain',
+            }}
+          />
          <Title order={3} variant="gradient" gradient={colorGradiant}>
            {t('about')} Homarr
          </Title>
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx
@@ -126,11 +126,11 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
          />
        )
      }
+      {...inputProps}
      onChange={(value) => {
        form.setFieldValue('integration.properties', getNewProperties(value));
        inputProps.onChange(value);
      }}
-      {...inputProps}
    />
  );
 };
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx
@@ -61,7 +61,6 @@ export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererP
              label={`${property} (potentionally unmapped)`}
              secretIsPresent={isPresent}
              setIcon={IconKey}
-              value={formValue.value}
              type={accessabilityType}
              {...form.getInputProps(`integration.properties.${index}.value`)}
            />
@@ -76,7 +75,6 @@ export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererP
            }}
            key={`input-${definition.label}`}
            label={definition.label}
-            value=""
            secretIsPresent={isPresent}
            setIcon={definition.icon}
            type={accessabilityType}
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx
@@ -27,9 +27,9 @@ export const NetworkTab = ({ form }: NetworkTabProps) => {
          data={StatusCodes}
          clearable
          searchable
-          defaultValue={form.values.network.okStatus}
+          defaultValue={form.values.network.statusCodes}
          variant="default"
-          {...form.getInputProps('network.okStatus')}
+          {...form.getInputProps('network.statusCodes')}
        />
      )}
    </Tabs.Panel>
--- a/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx
+++ b/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx
@@ -24,7 +24,9 @@ export const GenericAvailableElementType = ({
  const { t } = useTranslation('layout/modals/about');

  const Icon =
-    typeof image === 'string' ? () => <Image src={image} width={24} height={24} /> : image;
+    typeof image === 'string'
+      ? () => <Image alt={name} src={image} width={24} height={24} />
+      : image;

  return (
    <Grid.Col span={3}>
--- a/src/components/Dashboard/Tiles/Apps/AppTile.tsx
+++ b/src/components/Dashboard/Tiles/Apps/AppTile.tsx
@@ -1,7 +1,8 @@
-import { Box, Stack, Title, UnstyledButton } from '@mantine/core';
+import { Anchor, Box, Stack, Title, UnstyledButton } from '@mantine/core';
 import { NextLink } from '@mantine/next';
 import { createStyles } from '@mantine/styles';
 import { motion } from 'framer-motion';
+import Link from 'next/link';
 import { AppType } from '../../../../types/app';
 import { useCardStyles } from '../../../layout/useCardStyles';
 import { useEditModeStore } from '../../Views/useEditModeStore';
@@ -71,7 +72,7 @@ export const AppTile = ({ className, app }: AppTileProps) => {
      ) : (
        <UnstyledButton
          style={{ pointerEvents: isEditMode ? 'none' : 'auto' }}
-          component={NextLink}
+          component={Link}
          href={app.behaviour.externalUrl.length > 0 ? app.behaviour.externalUrl : app.url}
          target={app.behaviour.isOpeningNewTab ? '_blank' : '_self'}
          className={cx(classes.button)}
--- a/src/modules/Docker/ContainerActionBar.tsx
+++ b/src/modules/Docker/ContainerActionBar.tsx
@@ -20,7 +20,6 @@ import { useConfigContext } from '../../config/provider';
 import { tryMatchService } from '../../tools/addToHomarr';
 import { openContextModalGeneric } from '../../tools/mantineModalManagerExtensions';
 import { AppType } from '../../types/app';
-import { appTileDefinition } from '../../components/Dashboard/Tiles/Apps/AppTile';

 let t: TFunction<'modules/docker', undefined>;

--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -11,6 +11,7 @@ import {
 import { NextLink } from '@mantine/next';

 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import Link from 'next/link';

 const useStyles = createStyles((theme) => ({
  root: {
@@ -85,9 +86,9 @@ export default function Custom404() {
            The config you are trying to access does not exist. Please check the URL and try again.
          </Text>
          <Group position="center">
-            <NextLink href="/">
+            <Link href="/">
              <Button size="md">Take me back to home page</Button>
-            </NextLink>
+            </Link>
          </Group>
        </div>
      </div>
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,6 +10,8 @@ import { getServerSideTranslations } from '../tools/getServerSideTranslations';
 import { dashboardNamespaces } from '../tools/translation-namespaces';
 import { DashboardServerSideProps } from '../types/dashboardPageType';
 import { LoadConfigComponent } from '../components/Config/LoadConfig';
+import dayjs from 'dayjs';
+import { useTranslation } from 'next-i18next';

 export async function getServerSideProps({
  req,
--- a/src/tools/addToHomarr.ts
+++ b/src/tools/addToHomarr.ts
@@ -1,5 +1,5 @@
 import Dockerode from 'dockerode';
-import { Config, MatchingImages, ServiceType, tryMatchPort } from './types';
+import { MatchingImages, ServiceType, tryMatchPort } from './types';

 async function MatchIcon(name: string) {
  const res = await fetch(
--- a/src/tools/bytesHelper.ts
+++ b/src/tools/bytesHelper.ts
@@ -1,3 +1,6 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-plusplus */
+/* eslint-disable consistent-return */
 export const bytes = {
  toPerSecondString: (bytes?: number) => {
    if (!bytes) return '-';
--- a/src/tools/config/mutations/useDeleteConfigMutation.tsx
+++ b/src/tools/config/mutations/useDeleteConfigMutation.tsx
@@ -1,5 +1,5 @@
 import { showNotification } from '@mantine/notifications';
-import { IconCheck, IconX } from '@tabler/icons';
+import { IconX } from '@tabler/icons';
 import { useMutation } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';

--- a/src/tools/isToday.ts
+++ b/src/tools/isToday.ts
@@ -3,6 +3,6 @@ export const isToday = (date: Date) => {
  return (
    today.getDate() === date.getDate() &&
    today.getMonth() === date.getMonth() &&
-    date.getFullYear() === date.getFullYear()
+    today.getFullYear() === date.getFullYear()
  );
 };
--- a/src/tools/percentage.ts
+++ b/src/tools/percentage.ts
@@ -1,3 +1,2 @@
-export const percentage = (partialValue: number, totalValue: number) => {
-  return ((100 * partialValue) / totalValue).toFixed(1);
-};
+export const percentage = (partialValue: number, totalValue: number) =>
+  ((100 * partialValue) / totalValue).toFixed(1);
--- a/src/widgets/calendar/CalendarTile.tsx
+++ b/src/widgets/calendar/CalendarTile.tsx
@@ -73,6 +73,7 @@ function CalendarTile({ widget }: CalendarTileProps) {
        style={{ position: 'relative', top: -15 }}
        onMonthChange={setMonth}
        size="xs"
+        locale={i18n.resolvedLanguage}
        fullWidth
        onChange={() => {}}
        firstDayOfWeek={widget.properties.sundayStart ? 'sunday' : 'monday'}
--- a/src/widgets/useNet/UsenetQueueList.tsx
+++ b/src/widgets/useNet/UsenetQueueList.tsx
@@ -1,13 +1,11 @@
 import {
  ActionIcon,
  Alert,
-  Button,
  Center,
  Code,
  Group,
  Pagination,
  Progress,
-  ScrollArea,
  Skeleton,
  Stack,
  Table,
--- a/src/widgets/weather/WeatherTile.tsx
+++ b/src/widgets/weather/WeatherTile.tsx
@@ -76,7 +76,7 @@ function WeatherTile({ widget }: WeatherTileProps) {
      align="center"
      style={{ height: '100%', width: '100%' }}
    >
-      <Group align={'center'} position="center" spacing="xs">
+      <Group align="center" position="center" spacing="xs">
        <WeatherIcon code={weather!.current_weather.weathercode} />
        <Title>
          {getPerferedUnit(
--- a/src/widgets/weather/useWeatherForCity.ts
+++ b/src/widgets/weather/useWeatherForCity.ts
@@ -47,6 +47,7 @@ const fetchWeather = async (coordinates?: Coordinates) => {
  const res = await fetch(
    `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=weathercode,temperature_2m_max,temperature_2m_min&current_weather=true&timezone=Europe%2FLondon`
  );
+  // eslint-disable-next-line consistent-return
  return (await res.json()) as WeatherResponse;
 };