Edit Channel Page Fixes (#472)

* Fix touch area of channels page * rearrange edit location on channes page * fix broken edit channel navigation * clean up code
chrisbenincasa · Jun 3, 2024 · c7fbfc7 · c7fbfc7
1 parent 330637e
commit c7fbfc7
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 21 deletions.
diff --git a/web/src/pages/channels/ChannelsPage.tsx b/web/src/pages/channels/ChannelsPage.tsx
@@ -66,12 +66,14 @@ export default function ChannelsPage() {
     event: React.MouseEvent<HTMLElement>,
     channel: Channel,
   ) => {
+    event.stopPropagation();
     setOpen(true);
     setChannelMenu(channel);
     setAnchorEl(event.currentTarget);
   };
 
-  const handleClose = () => {
+  const handleClose = (e: React.SyntheticEvent) => {
+    e.stopPropagation();
     setOpen(false);
   };
 
@@ -151,11 +153,26 @@ export default function ChannelsPage() {
             'aria-labelledby': 'channel-options-button',
           }}
         >
+          <MenuItem
+            to={`/channels/${channelMenu.id}/edit`}
+            component={RouterLink}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <ListItemIcon>
+              <EditIcon />
+            </ListItemIcon>
+            <ListItemText>Edit Channel Settings</ListItemText>
+          </MenuItem>
           <MenuItem
             to={`${
               isNonEmptyString(backendUri) ? `${backendUri}/` : ''
             }media-player/${channelMenu.number}.m3u`}
             component={RouterLink}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
           >
             <ListItemIcon>
               <TextSnippetIcon />
@@ -165,21 +182,15 @@ export default function ChannelsPage() {
           <MenuItem
             component={RouterLink}
             to={`/channels/${channelMenu.id}/watch`}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
           >
             <ListItemIcon>
               <WatchIcon />
             </ListItemIcon>
             <ListItemText>Watch Channel</ListItemText>
           </MenuItem>
-          <MenuItem
-            to={`/channels/${channelMenu.id}/edit`}
-            component={RouterLink}
-          >
-            <ListItemIcon>
-              <EditIcon />
-            </ListItemIcon>
-            <ListItemText>Edit Channel Settings</ListItemText>
-          </MenuItem>
           <MenuItem
             onClick={(e) => {
               e.stopPropagation();
@@ -235,6 +246,15 @@ export default function ChannelsPage() {
             </>
           ) : (
             <>
+              <Tooltip title="Edit Channel Settings" placement="top">
+                <IconButton
+                  to={`/channels/${channel.id}/edit`}
+                  component={RouterLink}
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <EditIcon />
+                </IconButton>
+              </Tooltip>
               <Tooltip title="Get Channel M3U File" placement="top">
                 <IconButton
                   href={`${
@@ -254,15 +274,6 @@ export default function ChannelsPage() {
                   <WatchIcon />
                 </IconButton>
               </Tooltip>
-              <Tooltip title="Edit Channel Settings" placement="top">
-                <IconButton
-                  to={`/channels/${channel.id}/edit`}
-                  component={RouterLink}
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <EditIcon />
-                </IconButton>
-              </Tooltip>
               <Tooltip title="Delete Channel" placement="top">
                 <IconButton
                   onClick={(e) => {

diff --git a/web/src/pages/channels/EditChannelPage.tsx b/web/src/pages/channels/EditChannelPage.tsx
@@ -15,7 +15,7 @@ import {
   SubmitHandler,
   useForm,
 } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
+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';
@@ -103,13 +103,31 @@ export default function EditChannelPage({ isNew, initialTab }: Props) {
   const { currentEntity: workingChannel } = useStore((s) => s.channelEditor);
   const previousChannel = usePrevious(workingChannel);
   const navigate = useNavigate();
+  const location = useLocation();
 
   const [channelEditorState, setChannelEditorState] =
     useState<ChannelEditContextState>({
       currentTabValid: true,
       isNewChannel: isNew,
     });
 
+  function getLastPathSegment(url: string) {
+    const pathSegments = url.split('/');
+    return pathSegments[pathSegments.length - 1];
+  }
+
+  // This is a workaround
+  // Previously when you would navigate to the "Edit" page via the breadcrumb it would stay on the same tab and break future navigation
+  // see https://github.com/chrisbenincasa/tunarr/issues/466
+  useEffect(() => {
+    const currentPath = location.pathname;
+    const lastSegment = getLastPathSegment(currentPath);
+
+    if (lastSegment === 'edit' && currentTab !== 'properties') {
+      setCurrentTab('properties');
+    }
+  }, [location]);
+
   const handleChange = (_: React.SyntheticEvent, newValue: TabValues) => {
     if (newValue !== currentTab) {
       setCurrentTab(newValue);

diff --git a/web/src/router.tsx b/web/src/router.tsx
@@ -1,4 +1,5 @@
 import { QueryClient } from '@tanstack/react-query';
+import { map } from 'lodash-es';
 import { createBrowserRouter } from 'react-router-dom';
 import { Root } from './App.tsx';
 import { ErrorPage } from './pages/ErrorPage.tsx';
@@ -39,7 +40,6 @@ import {
   newFillerListLoader,
 } from './preloaders/fillerListLoader.ts';
 import { queryCache } from './queryClient.ts';
-import { map } from 'lodash-es';
 
 const queryClient = new QueryClient({ queryCache });