Fix Fillers and Custom Show editing / creation with new router setup (c…

…hrisbenincasa#560)

* Fixes to filler list editing and creation due to navigation issues

* Fix custom shows too

web/src/components/custom-shows/EditCustomShowForm.tsx

@@ -170,7 +170,7 @@ export function EditCustomShowsForm({
             <Button
               disableRipple
               component={Link}
-              to="/library/custom-shows/programming/add"
+              to={isNew ? './programming' : '../programming'}
               startIcon={<Tv />}
               variant="contained"
             >

web/src/components/filler/EditFillerListForm.tsx

@@ -169,7 +169,7 @@ export function EditFillerListForm({
             <Button
               disableRipple
               component={Link}
-              to="/library/fillers/programming/add"
+              to={isNew ? './programming' : '../programming'}
               startIcon={<Tv />}
               variant="contained"
             >

web/src/helpers/routeLoaders.ts

@@ -1,15 +1,29 @@
 import { channelProgrammingQuery } from '@/hooks/useChannelLineup';
 import { channelQuery } from '@/hooks/useChannels';
+import {
+  customShowProgramsQuery,
+  customShowQuery,
+} from '@/hooks/useCustomShows.ts';
+import {
+  fillerListProgramsQuery,
+  fillerListQuery,
+} from '@/hooks/useFillerLists.ts';
 import useStore from '@/store';
 import { safeSetCurrentChannel } from '@/store/channelEditor/actions';
+import { setCurrentCustomShow } from '@/store/customShowEditor/actions.ts';
+import { setCurrentFillerList } from '@/store/fillerListEditor/action.ts';
 import { RouterContext } from '@/types/RouterContext';
 import { notFound } from '@tanstack/react-router';
 
-type Args = {
+type ChannelArgs = {
   params: { channelId: string };
   context: RouterContext;
 };
-export async function preloadChannelAndProgramming({ params, context }: Args) {
+
+export async function preloadChannelAndProgramming({
+  params,
+  context,
+}: ChannelArgs) {
   const currentProgram = useStore.getState().channelEditor.currentEntity;
 
   if (currentProgram?.id === params.channelId) {
@@ -37,3 +51,66 @@ export async function preloadChannelAndProgramming({ params, context }: Args) {
 
   safeSetCurrentChannel(channel.value, programming.value);
 }
+
+type FillerArgs = {
+  params: { fillerId: string };
+  context: RouterContext;
+};
+
+export async function preloadFillerAndProgramming({
+  context: { queryClient, tunarrApiClientProvider },
+  params: { fillerId },
+}: FillerArgs) {
+  const apiClient = tunarrApiClientProvider();
+
+  // TODO if this is too slow we can use the router defer method
+  const [fillerList, programming] = await Promise.all([
+    queryClient.ensureQueryData(fillerListQuery(apiClient, fillerId)),
+    queryClient.ensureQueryData(fillerListProgramsQuery(apiClient, fillerId)),
+  ]);
+
+  // TODO handle not found
+
+  // Set state
+  const currentList = useStore.getState().fillerListEditor.currentEntity;
+  if (currentList?.id !== fillerList.id) {
+    setCurrentFillerList(fillerList, programming);
+  }
+
+  return {
+    fillerList,
+    programming,
+  };
+}
+
+type CustomShowArgs = {
+  params: { showId: string };
+  context: RouterContext;
+};
+
+export async function preloadCustomShowAndProgramming({
+  context: { queryClient, tunarrApiClientProvider },
+  params: { showId },
+}: CustomShowArgs) {
+  const apiClient = tunarrApiClientProvider();
+
+  // TODO if this is too slow we can use the router defer method
+  const [customShow, programming] = await Promise.all([
+    queryClient.ensureQueryData(customShowQuery(apiClient, showId)),
+    queryClient.ensureQueryData(customShowProgramsQuery(apiClient, showId)),
+  ]);
+
+  // TODO handle not found
+
+  // Set state
+  const currentShow = useStore.getState().customShowEditor.currentEntity;
+  if (currentShow?.id !== customShow.id) {
+    console.log('srtting');
+    setCurrentCustomShow(customShow, programming);
+  }
+
+  return {
+    customShow,
+    programming,
+  };
+}

web/src/helpers/util.ts

@@ -132,9 +132,9 @@ export const zipWithIndex = <T extends object>(
   seq: readonly T[],
   start: number = 0,
 ): (T & { originalIndex: number })[] => {
-  return zipWith(seq, range(start, seq.length), (s, i) => ({
+  return zipWith(seq, range(0, seq.length), (s, i) => ({
     ...s,
-    originalIndex: i,
+    originalIndex: start + i,
   }));
 };
 

web/src/pages/library/EditCustomShowPage.tsx

@@ -1,6 +1,6 @@
 import { EditCustomShowsForm } from '@/components/custom-shows/EditCustomShowForm.tsx';
 import { useCustomShowWithProgramming } from '@/hooks/useCustomShows.ts';
-import { Route } from '@/routes/library/custom-shows_.$showId.edit.tsx';
+import { Route } from '@/routes/library/custom-shows_/$showId/edit.tsx';
 import useStore from '@/store/index.ts';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';

web/src/pages/library/NewCustomShowPage.tsx

@@ -1,13 +1,13 @@
 import { EditCustomShowsForm } from '@/components/custom-shows/EditCustomShowForm.tsx';
-import { Route } from '@/routes/library/custom-shows_.new';
+import { useSuspendedStore } from '@/hooks/useSuspendedStore.ts';
 import useStore from '@/store/index.ts';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Breadcrumbs from '../../components/Breadcrumbs.tsx';
 import PaddedPaper from '../../components/base/PaddedPaper.tsx';
 
 export function NewCustomShowPage() {
-  const { customShow } = Route.useLoaderData();
+  const customShow = useSuspendedStore((s) => s.customShowEditor.currentEntity);
   const customShowPrograms = useStore((s) => s.customShowEditor.programList);
 
   return (

web/src/pages/library/NewFillerPage.tsx

@@ -1,12 +1,15 @@
 import Breadcrumbs from '@/components/Breadcrumbs';
 import PaddedPaper from '@/components/base/PaddedPaper';
 import { EditFillerListForm } from '@/components/filler/EditFillerListForm';
-import { Route } from '@/routes/library/fillers_.new';
+import { useSuspendedStore } from '@/hooks/useSuspendedStore.ts';
+import useStore from '@/store/index.ts';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 
 export function NewFillerPage() {
-  const { fillerList, programming: fillerListPrograms } = Route.useLoaderData();
+  const fillerList = useSuspendedStore((s) => s.fillerListEditor.currentEntity);
+  const fillerListPrograms = useStore((s) => s.fillerListEditor.programList);
+
   return (
     <Box>
       <Breadcrumbs />