From 9903f0b75d1ea46e47916fecd185f3e18fce6fa4 Mon Sep 17 00:00:00 2001
From: Five Boroughs <40718516+FiveBoroughs@users.noreply.github.com>
Date: Fri, 22 May 2026 17:55:54 +0200
Subject: [PATCH] refactor(frontend): extract useEpgPreview to its own hook
 file

---
 .../__tests__/ProgramPreview.test.jsx         |  1 -
 frontend/src/components/forms/Channel.jsx     | 73 +------------------
 .../__tests__/ChannelEpgPreview.test.jsx      |  2 +-
 frontend/src/hooks/useEpgPreview.jsx          | 72 ++++++++++++++++++
 4 files changed, 74 insertions(+), 74 deletions(-)
 create mode 100644 frontend/src/hooks/useEpgPreview.jsx

diff --git a/frontend/src/components/__tests__/ProgramPreview.test.jsx b/frontend/src/components/__tests__/ProgramPreview.test.jsx
index 5b0d44e4..46b744cb 100644
--- a/frontend/src/components/__tests__/ProgramPreview.test.jsx
+++ b/frontend/src/components/__tests__/ProgramPreview.test.jsx
@@ -4,7 +4,6 @@ import ProgramPreview from '../ProgramPreview';
 
 // Mock Mantine components as lightweight stubs
 vi.mock('@mantine/core', () => {
-  const React = require('react');
   return {
     ActionIcon: ({ children, onClick, ...props }) => (
       <button onClick={onClick} {...props}>
diff --git a/frontend/src/components/forms/Channel.jsx b/frontend/src/components/forms/Channel.jsx
index c032e3b4..9f7eb25c 100644
--- a/frontend/src/components/forms/Channel.jsx
+++ b/frontend/src/components/forms/Channel.jsx
@@ -8,6 +8,7 @@ import useStreamProfilesStore from '../../store/streamProfiles';
 import ChannelGroupForm from './ChannelGroup';
 import logo from '../../images/logo.png';
 import { useChannelLogoSelection } from '../../hooks/useSmartLogos';
+import { useEpgPreview } from '../../hooks/useEpgPreview';
 import useLogosStore from '../../store/logos';
 import LazyLogo from '../LazyLogo';
 import LogoForm from './Logo';
@@ -92,78 +93,6 @@ const ProviderHintRow = ({ channel, field, formValue, hintText, onReset }) => {
   );
 };
 
-export const useEpgPreview = (epgDataId) => {
-  const [currentProgram, setCurrentProgram] = useState(null);
-  const [isLoadingProgram, setIsLoadingProgram] = useState(false);
-  const [hasFetchedProgram, setHasFetchedProgram] = useState(false);
-
-  useEffect(() => {
-    if (!epgDataId || epgDataId === '0' || epgDataId === '') {
-      setCurrentProgram(null);
-      setIsLoadingProgram(false);
-      setHasFetchedProgram(false);
-      return;
-    }
-
-    let cancelled = false;
-    setIsLoadingProgram(true);
-    setHasFetchedProgram(false);
-
-    const fetchWithRetry = async () => {
-      const maxRetries = 5;
-      const deadlineMs = 3 * 60 * 1000; // 3 minutes
-      const startTime = Date.now();
-      let delay = 3000; // 3s initial
-
-      for (let attempt = 0; attempt <= maxRetries; attempt++) {
-        if (cancelled || Date.now() - startTime > deadlineMs) break;
-
-        try {
-          const program = await API.getCurrentProgramForEpg(epgDataId);
-          if (cancelled) return;
-
-          if (program && program.parsing && attempt < maxRetries) {
-            // Index still building, retry with backoff
-            await new Promise((resolve) => setTimeout(resolve, delay));
-            delay = Math.min(delay * 1.5, 15000); // 1.5x multiplier, 15s cap
-            continue;
-          }
-
-          if (!cancelled) {
-            setCurrentProgram(program && !program.parsing ? program : null);
-            setIsLoadingProgram(false);
-            setHasFetchedProgram(true);
-          }
-          return;
-        } catch (error) {
-          if (!cancelled) {
-            console.error('Failed to fetch current program:', error);
-          }
-          if (attempt < maxRetries) {
-            await new Promise((resolve) => setTimeout(resolve, delay));
-            delay = Math.min(delay * 1.5, 15000);
-          }
-        }
-      }
-
-      // Exhausted retries or deadline
-      if (!cancelled) {
-        setCurrentProgram(null);
-        setIsLoadingProgram(false);
-        setHasFetchedProgram(true);
-      }
-    };
-
-    fetchWithRetry();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [epgDataId]);
-
-  return { currentProgram, isLoadingProgram, hasFetchedProgram };
-};
-
 const ChannelForm = ({ channel: channelProp = null, isOpen, onClose }) => {
   const theme = useMantineTheme();
 
diff --git a/frontend/src/components/forms/__tests__/ChannelEpgPreview.test.jsx b/frontend/src/components/forms/__tests__/ChannelEpgPreview.test.jsx
index c8ac8ea3..49986de2 100644
--- a/frontend/src/components/forms/__tests__/ChannelEpgPreview.test.jsx
+++ b/frontend/src/components/forms/__tests__/ChannelEpgPreview.test.jsx
@@ -11,7 +11,7 @@ vi.mock('../../../api', () => ({
 }));
 
 import API from '../../../api';
-import { useEpgPreview } from '../Channel';
+import { useEpgPreview } from '../../../hooks/useEpgPreview';
 
 describe('Channel EPG preview hook', () => {
   beforeEach(() => {
diff --git a/frontend/src/hooks/useEpgPreview.jsx b/frontend/src/hooks/useEpgPreview.jsx
new file mode 100644
index 00000000..a64571f7
--- /dev/null
+++ b/frontend/src/hooks/useEpgPreview.jsx
@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react';
+import API from '../api';
+
+export const useEpgPreview = (epgDataId) => {
+  const [currentProgram, setCurrentProgram] = useState(null);
+  const [isLoadingProgram, setIsLoadingProgram] = useState(false);
+  const [hasFetchedProgram, setHasFetchedProgram] = useState(false);
+
+  useEffect(() => {
+    if (!epgDataId || epgDataId === '0' || epgDataId === '') {
+      setCurrentProgram(null);
+      setIsLoadingProgram(false);
+      setHasFetchedProgram(false);
+      return;
+    }
+
+    let cancelled = false;
+    setIsLoadingProgram(true);
+    setHasFetchedProgram(false);
+
+    const fetchWithRetry = async () => {
+      const maxRetries = 5;
+      const deadlineMs = 3 * 60 * 1000;
+      const startTime = Date.now();
+      let delay = 3000;
+
+      for (let attempt = 0; attempt <= maxRetries; attempt++) {
+        if (cancelled || Date.now() - startTime > deadlineMs) break;
+
+        try {
+          const program = await API.getCurrentProgramForEpg(epgDataId);
+          if (cancelled) return;
+
+          if (program && program.parsing && attempt < maxRetries) {
+            await new Promise((resolve) => setTimeout(resolve, delay));
+            delay = Math.min(delay * 1.5, 15000);
+            continue;
+          }
+
+          if (!cancelled) {
+            setCurrentProgram(program && !program.parsing ? program : null);
+            setIsLoadingProgram(false);
+            setHasFetchedProgram(true);
+          }
+          return;
+        } catch (error) {
+          if (!cancelled) {
+            console.error('Failed to fetch current program:', error);
+          }
+          if (attempt < maxRetries) {
+            await new Promise((resolve) => setTimeout(resolve, delay));
+            delay = Math.min(delay * 1.5, 15000);
+          }
+        }
+      }
+
+      if (!cancelled) {
+        setCurrentProgram(null);
+        setIsLoadingProgram(false);
+        setHasFetchedProgram(true);
+      }
+    };
+
+    fetchWithRetry();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [epgDataId]);
+
+  return { currentProgram, isLoadingProgram, hasFetchedProgram };
+};