From f5681507ebb8b2190ed53ab3ed806ba3f907c608 Mon Sep 17 00:00:00 2001
From: Christian Benincasa <chrisbenincasa@gmail.com>
Date: Tue, 11 Jun 2024 08:20:41 -0400
Subject: [PATCH] Only validate existing channel numbers if it was changed.
 Fixes #502 (#503)

---
 .../channel_config/ChannelEditActions.tsx     |  6 +++-
 .../ChannelPropertiesEditor.tsx               | 34 +++++++++++++------
 web/src/pages/channels/EditChannelPage.tsx    |  2 +-
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/web/src/components/channel_config/ChannelEditActions.tsx b/web/src/components/channel_config/ChannelEditActions.tsx
index f9d95b7b6..f84c12780 100644
--- a/web/src/components/channel_config/ChannelEditActions.tsx
+++ b/web/src/components/channel_config/ChannelEditActions.tsx
@@ -37,7 +37,11 @@ export default function ChannelEditActions() {
         color: theme.palette.success.main,
       });
     }
-  }, [isSubmitSuccessful, theme.palette.success.main]);
+  }, [
+    channelEditorState.isNewChannel,
+    isSubmitSuccessful,
+    theme.palette.success.main,
+  ]);
 
   const handleSnackClose = () => {
     setSnackStatus({ display: false, message: '', color: '' });
diff --git a/web/src/components/channel_config/ChannelPropertiesEditor.tsx b/web/src/components/channel_config/ChannelPropertiesEditor.tsx
index 3c8efd560..ab5257dfa 100644
--- a/web/src/components/channel_config/ChannelPropertiesEditor.tsx
+++ b/web/src/components/channel_config/ChannelPropertiesEditor.tsx
@@ -17,15 +17,19 @@ type Props = {
   isNew: boolean;
 };
 
-export default function ChannelPropertiesEditor({ isNew }: Props) {
+export function ChannelPropertiesEditor({ isNew }: Props) {
   const imgRef = useRef<HTMLImageElement | null>(null);
   const channel = useStore((s) => s.channelEditor.currentEntity);
-  const { control, watch, getValues, setValue } = useFormContext<Channel>();
+  const {
+    control,
+    watch,
+    getValues,
+    setValue,
+    formState: { defaultValues },
+  } = useFormContext<Channel>();
   const { data: channels } = useChannels();
 
-  const onloadstart = () => {
-    console.log('on load start');
-  };
+  const onloadstart = () => {};
 
   useEffect(() => {
     if (imgRef.current) {
@@ -91,12 +95,22 @@ export default function ChannelPropertiesEditor({ isNew }: Props) {
   };
 
   const validateNumber = (value: number) => {
-    if (!value || !isNaN(value)) {
-      // Check if value is a number
-      return channels.find((channel) => channel.number === Number(value))
-        ? 'This channel number has already been used'
-        : undefined;
+    if (isNaN(value)) {
+      return 'Not a valid number';
+    }
+
+    if (value <= 0) {
+      return 'Cannot use a channel number <= 0';
     }
+
+    // TODO: We could probably use the touched fields property of the form here.
+    if (value === defaultValues?.number) {
+      return;
+    }
+
+    return channels.find((channel) => channel.number === Number(value))
+      ? 'This channel number has already been used'
+      : undefined;
   };
 
   return (
diff --git a/web/src/pages/channels/EditChannelPage.tsx b/web/src/pages/channels/EditChannelPage.tsx
index 5fe3597cc..36af26b5b 100644
--- a/web/src/pages/channels/EditChannelPage.tsx
+++ b/web/src/pages/channels/EditChannelPage.tsx
@@ -19,7 +19,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import Breadcrumbs from '../../components/Breadcrumbs.tsx';
 import ChannelEpgConfig from '../../components/channel_config/ChannelEpgConfig.tsx';
 import { ChannelFlexConfig } from '../../components/channel_config/ChannelFlexConfig.tsx';
-import ChannelPropertiesEditor from '../../components/channel_config/ChannelPropertiesEditor.tsx';
+import { ChannelPropertiesEditor } from '../../components/channel_config/ChannelPropertiesEditor.tsx';
 import ChannelTranscodingConfig from '../../components/channel_config/ChannelTranscodingConfig.tsx';
 import UnsavedNavigationAlert from '../../components/settings/UnsavedNavigationAlert.tsx';
 import { isNonEmptyString } from '../../helpers/util.ts';