added alert to programming page

web/src/components/settings/UnsavedNavigationAlert.tsx

@@ -12,13 +12,14 @@ import { BlockerFunction, matchPath, useBlocker } from 'react-router-dom';
 type Props = {
   isDirty: boolean;
   exemptPath?: string;
+  onProceed?: CallableFunction;
 };
 
 // Exempt paths are used in situations where the form spans multiple tabs or pages.
 // This ensures the Alert is not activated in the middle of a form navigation.
 
 export default function UnsavedNavigationAlert(props: Props) {
-  const { isDirty, exemptPath } = props;
+  const { isDirty, exemptPath, onProceed } = props;
 
   let shouldBlock = React.useCallback<BlockerFunction>(
     ({ currentLocation, nextLocation }) => {
@@ -34,6 +35,13 @@ export default function UnsavedNavigationAlert(props: Props) {
   );
   let blocker = useBlocker(shouldBlock);
 
+  const handleProceed = () => {
+    blocker.proceed?.();
+    if (onProceed) {
+      onProceed();
+    }
+  };
+
   return blocker && blocker.state === 'blocked' ? (
     <Dialog
       open={blocker.state === 'blocked'}
@@ -52,11 +60,7 @@ export default function UnsavedNavigationAlert(props: Props) {
       </DialogContent>
       <DialogActions>
         <Button onClick={() => blocker.reset?.()}>Cancel</Button>
-        <Button
-          onClick={() => blocker.proceed?.()}
-          autoFocus
-          variant="contained"
-        >
+        <Button onClick={handleProceed} autoFocus variant="contained">
           Proceed
         </Button>
       </DialogActions>

web/src/pages/channels/ChannelProgrammingPage.tsx

@@ -14,15 +14,17 @@ import { chain, findIndex, first, isUndefined, map } from 'lodash-es';
 import { useState } from 'react';
 import Breadcrumbs from '../../components/Breadcrumbs.tsx';
 import { ChannelProgrammingConfig } from '../../components/channel_config/ChannelProgrammingConfig.tsx';
+import UnsavedNavigationAlert from '../../components/settings/UnsavedNavigationAlert.tsx';
 import { channelProgramUniqueId } from '../../helpers/util.ts';
 import { usePreloadedChannelEdit } from '../../hooks/usePreloadedChannel.ts';
+import { useTunarrApi } from '../../hooks/useTunarrApi.ts';
 import { useUpdateChannel } from '../../hooks/useUpdateChannel.ts';
 import {
   resetCurrentLineup,
   resetLineup,
 } from '../../store/channelEditor/actions.ts';
 import useStore from '../../store/index.ts';
-import { useTunarrApi } from '../../hooks/useTunarrApi.ts';
+w;
 
 type MutateArgs = {
   channelId: string;
@@ -157,7 +159,10 @@ export default function ChannelProgrammingPage() {
       </Typography>
       <Paper sx={{ p: 2 }}>
         <ChannelProgrammingConfig />
-
+        <UnsavedNavigationAlert
+          isDirty={programsDirty}
+          onProceed={() => resetLineup()}
+        />
         <Box
           sx={{ display: 'flex', justifyContent: 'end', pt: 1, columnGap: 1 }}
         >