fix: invalidate channel query after saving edit channel form

Fixes: #1742

web/src/components/channel_config/EditChannelForm.tsx

@@ -5,6 +5,7 @@ import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
+import { useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import type {
   Channel,
@@ -20,6 +21,7 @@ import {
   type SubmitHandler,
 } from 'react-hook-form';
 import type { DeepRequired, NonEmptyArray } from 'ts-essentials';
+import { invalidateTaggedQueries } from '../../helpers/queryUtil.ts';
 import { isNonEmptyString } from '../../helpers/util.ts';
 import { useCreateChannel } from '../../hooks/useCreateChannel.ts';
 import { useUpdateChannel } from '../../hooks/useUpdateChannel.ts';
@@ -129,12 +131,19 @@ export function EditChannelForm({
     defaultValues: getDefaultFormValues(channel),
   });
 
+  const queryClient = useQueryClient();
+
   const createUpdateSuccessCallback = useCallback(
-    (data: Channel) => {
+    async (data: Channel) => {
       formMethods.reset(getDefaultFormValues(data), {
         keepDefaultValues: false,
         keepDirty: false,
       });
+
+      await queryClient.invalidateQueries({
+        predicate: invalidateTaggedQueries('Channels'),
+      });
+
       if (isNew) {
         navigate({
           to: `/channels/$channelId/programming`,
@@ -142,7 +151,7 @@ export function EditChannelForm({
         }).catch(console.warn);
       }
     },
-    [formMethods, isNew, navigate],
+    [formMethods, isNew, navigate, queryClient],
   );
 
   const updateChannelMutation = useUpdateChannel({
@@ -173,8 +182,6 @@ export function EditChannelForm({
             priority: idx,
           }));
 
-    console.log(data);
-
     const dataTransform = {
       ...data,
       // Transform this to milliseconds before we send it over

web/src/components/channels/ChannelOptionsButton.tsx

@@ -21,7 +21,6 @@ export const ChannelOptionsButton = ({ channel, hideItems }: Props) => {
     event: React.MouseEvent<HTMLElement>,
     channel: Channel,
   ) => {
-    console.log(channel);
     setAnchorEl(event.currentTarget);
     setChannelMenu(channel);
   };

web/src/pages/channels/EditChannelPage.tsx

@@ -2,7 +2,7 @@ import type { EditChannelTabs } from '@/components/channel_config/EditChannelTab
 import { ChannelOptionsButton } from '@/components/channels/ChannelOptionsButton.tsx';
 import { useChannelSuspense } from '@/hooks/useChannels.ts';
 import { Route } from '@/routes/channels_/$channelId/edit/index.tsx';
-import { Box, Stack } from '@mui/material';
+import { Box, LinearProgress, Stack } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import Breadcrumbs from '../../components/Breadcrumbs.tsx';
 import { EditChannelForm } from '../../components/channel_config/EditChannelForm.tsx';
@@ -13,29 +13,33 @@ type Props = {
 
 export default function EditChannelPage({ initialTab }: Props) {
   const { channelId } = Route.useParams();
-  const { data: channel } = useChannelSuspense(channelId);
+  const { data: channel, isLoading } = useChannelSuspense(channelId);
 
   return (
     <>
       <Breadcrumbs />
-      <div>
-        <Stack direction="row">
-          <Typography variant="h4" sx={{ mb: 2, flex: 1 }}>
-            {channel.name}
-          </Typography>
-          <Box>
-            <ChannelOptionsButton
-              channel={channel}
-              hideItems={['edit', 'duplicate', 'delete']}
-            />
-          </Box>
-        </Stack>
-        <EditChannelForm
-          channel={channel}
-          isNew={false}
-          initialTab={initialTab}
-        />
-      </div>
+      {isLoading || !channel ? (
+        <LinearProgress />
+      ) : (
+        <Box>
+          <Stack direction="row">
+            <Typography variant="h4" sx={{ mb: 2, flex: 1 }}>
+              {channel.name}
+            </Typography>
+            <Box>
+              <ChannelOptionsButton
+                channel={channel}
+                hideItems={['edit', 'duplicate', 'delete']}
+              />
+            </Box>
+          </Stack>
+          <EditChannelForm
+            channel={channel}
+            isNew={false}
+            initialTab={initialTab}
+          />
+        </Box>
+      )}
     </>
   );
 }