fix: allow navigation to add more programs when there are unsaved pro…

…grams
chrisbenincasa · Jan 10, 2025 · b7d05df · b7d05df
1 parent de5cd1d
commit b7d05df
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/web/src/components/settings/UnsavedNavigationAlert.tsx b/web/src/components/settings/UnsavedNavigationAlert.tsx
@@ -1,22 +1,48 @@
+import { router } from '@/main.tsx';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
-import { useBlocker } from '@tanstack/react-router';
+import { AnyRoute, ParseRoute, useBlocker } from '@tanstack/react-router';
+import { isEmpty } from 'lodash-es';
+
+type AvailablePaths<
+  TRoute extends AnyRoute = ParseRoute<(typeof router)['routeTree']>,
+> = TRoute['fullPath'];
 
 type Props = {
   isDirty: boolean;
+  exceptTargetPaths?: AvailablePaths[];
   onProceed?: () => void;
 };
 
 // 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({ isDirty, onProceed }: Props) {
+export default function UnsavedNavigationAlert({
+  isDirty,
+  exceptTargetPaths,
+  onProceed,
+}: Props) {
   const { proceed, status, reset } = useBlocker({
-    shouldBlockFn: () => {
+    shouldBlockFn: ({ next }) => {
+      if (exceptTargetPaths && !isEmpty(exceptTargetPaths)) {
+        for (const excludedTarget of exceptTargetPaths) {
+          if (next.fullPath === excludedTarget) {
+            return false;
+          }
+          // if (isRegExp(excludedTarget) && excludedTarget.test(next.fullPath)) {
+          //   return false;
+          // } else if (
+          //   isString(excludedTarget) &&
+          //   next.fullPath.startsWith(excludedTarget)
+          // ) {
+          //   return false;
+          // }
+        }
+      }
       return isDirty;
     },
     withResolver: true,

diff --git a/web/src/pages/channels/ChannelProgrammingPage.tsx b/web/src/pages/channels/ChannelProgrammingPage.tsx
@@ -1,4 +1,6 @@
+import Breadcrumbs from '@/components/Breadcrumbs.tsx';
 import { useChannelAndProgramming } from '@/hooks/useChannelLineup.ts';
+import { Route } from '@/routes/channels_/$channelId/programming/index.tsx';
 import Edit from '@mui/icons-material/Edit';
 import {
   Box,
@@ -8,15 +10,13 @@ import {
   Stack,
   Typography,
 } from '@mui/material';
+import { Link } from '@tanstack/react-router';
 import { isUndefined } from 'lodash-es';
 import { useEffect } from 'react';
 import { ChannelProgrammingConfig } from '../../components/channel_config/ChannelProgrammingConfig.tsx';
 import UnsavedNavigationAlert from '../../components/settings/UnsavedNavigationAlert.tsx';
 import { resetLineup } from '../../store/channelEditor/actions.ts';
 import useStore from '../../store/index.ts';
-import { Route } from '@/routes/channels_/$channelId/programming/index.tsx';
-import { Link } from '@tanstack/react-router';
-import Breadcrumbs from '@/components/Breadcrumbs.tsx';
 
 export default function ChannelProgrammingPage() {
   const { channelId } = Route.useParams();
@@ -60,6 +60,7 @@ export default function ChannelProgrammingPage() {
         <ChannelProgrammingConfig />
         <UnsavedNavigationAlert
           isDirty={programsDirty}
+          exceptTargetPaths={['/channels/$channelId/programming/add']}
           onProceed={() => resetLineup()}
         />
       </Paper>