Fixes Fillers & Custom Shows Preloading (#505)

web/src/external/api.ts

@@ -27,7 +27,9 @@ import {
   makeErrors,
   parametersBuilder,
 } from '@zodios/core';
+import { isEmpty } from 'lodash-es';
 import { z } from 'zod';
+import { getFfmpegInfoEndpoint } from './ffmpegApi.ts';
 import {
   createPlexServerEndpoint,
   deletePlexServerEndpoint,
@@ -45,8 +47,6 @@ import {
   updateSystemSettings,
   updateXmlTvSettings,
 } from './settingsApi.ts';
-import { isEmpty } from 'lodash-es';
-import { getFfmpegInfoEndpoint } from './ffmpegApi.ts';
 
 export const api = makeApi([
   {

web/src/helpers/constants.ts

@@ -1 +1,4 @@
 export const OneDayMillis = 1000 * 60 * 60 * 24;
+
+// Special ID to use for in-progress entity operations
+export const UnsavedId = 'unsaved';

web/src/hooks/useCustomShows.ts

@@ -1,10 +1,12 @@
 import {
   DataTag,
   DefinedInitialDataOptions,
+  QueriesResults,
+  UseQueryResult,
   useQueries,
   useQuery,
 } from '@tanstack/react-query';
-import { CustomShow } from '@tunarr/types';
+import { CustomProgram, CustomShow } from '@tunarr/types';
 import { ApiClient } from '../external/api.ts';
 import { ZodiosAliasReturnType } from '../types/index.ts';
 import { makeQueryOptionsInitialData } from './useQueryHelpers.ts';
@@ -56,19 +58,51 @@ export const customShowProgramsQuery = (apiClient: ApiClient, id: string) => ({
   queryFn: () => apiClient.getCustomShowPrograms({ params: { id } }),
 });
 
-export const useCustomShow = (
+// Tried to do a clever overload here but it's easier to just blow out the  method
+// and get the rid type inference...
+export function useCustomShowWithInitialData(
+  apiClient: ApiClient,
+  id: string,
+  enabled: boolean,
+  initialData: { customShow: CustomShow; programs: CustomProgram[] },
+) {
+  return useQueries({
+    queries: [
+      {
+        ...customShowQuery(apiClient, id),
+        enabled,
+        initialData: initialData?.customShow,
+      },
+      {
+        ...customShowProgramsQuery(apiClient, id),
+        enabled: enabled,
+        initialData: initialData?.programs,
+      },
+    ],
+  });
+}
+
+export function useCustomShow(
   apiClient: ApiClient,
   id: string,
   enabled: boolean,
   includePrograms: boolean,
-) => {
+  initialData: { customShow?: CustomShow; programs?: CustomProgram[] } = {},
+): QueriesResults<
+  [UseQueryResult<CustomShow>, UseQueryResult<CustomProgram[]>]
+> {
   return useQueries({
     queries: [
-      { ...customShowQuery(apiClient, id), enabled },
+      {
+        ...customShowQuery(apiClient, id),
+        enabled,
+        initialData: initialData?.customShow,
+      },
       {
         ...customShowProgramsQuery(apiClient, id),
         enabled: enabled && includePrograms,
+        initialData: initialData?.programs,
       },
     ],
   });
-};
+}

web/src/hooks/useFillerLists.ts

@@ -1,7 +1,8 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQueries, useQuery } from '@tanstack/react-query';
+import { FillerList, FillerListProgramming } from '@tunarr/types';
+import { ApiClient } from '../external/api.ts';
 import useStore from '../store/index.ts';
 import { makeQueryOptions } from './useQueryHelpers.ts';
-import { ApiClient } from '../external/api.ts';
 import { useTunarrApi } from './useTunarrApi.ts';
 
 export const fillerListsQuery = (apiClient: ApiClient) =>
@@ -23,3 +24,30 @@ export const fillerListProgramsQuery = (apiClient: ApiClient, id: string) =>
   makeQueryOptions(['fillers', id, 'programs'], () =>
     apiClient.getFillerListPrograms({ params: { id } }),
   );
+
+// Tried to do a clever overload here but it's easier to just blow out the  method
+// and get the rid type inference...
+export function useFillersWithInitialData(
+  apiClient: ApiClient,
+  id: string,
+  enabled: boolean,
+  initialData: {
+    filler: FillerList;
+    fillerListPrograms: FillerListProgramming;
+  },
+) {
+  return useQueries({
+    queries: [
+      {
+        ...fillerListQuery(apiClient, id),
+        enabled,
+        initialData: initialData?.filler,
+      },
+      {
+        ...fillerListProgramsQuery(apiClient, id),
+        enabled: enabled,
+        initialData: initialData?.fillerListPrograms,
+      },
+    ],
+  });
+}

web/src/hooks/usePreloadedCustomShow.ts

@@ -0,0 +1,31 @@
+import { useLoaderData } from 'react-router-dom';
+import { UnsavedId } from '../helpers/constants';
+import { CustomShowPreload } from '../preloaders/customShowLoaders';
+import { setCurrentCustomShow } from '../store/channelEditor/actions';
+import { useCustomShowEditor } from '../store/selectors';
+import { useCustomShowWithInitialData } from './useCustomShows';
+import { useTunarrApi } from './useTunarrApi';
+
+export const usePreloadedCustomShow = () => {
+  const apiClient = useTunarrApi();
+  const { show: preloadShow, programs: preloadPrograms } =
+    useLoaderData() as CustomShowPreload;
+
+  const [customShow, customPrograms] = useCustomShowWithInitialData(
+    apiClient,
+    preloadShow.id,
+    preloadShow.id !== UnsavedId,
+    {
+      customShow: preloadShow,
+      programs: preloadPrograms,
+    },
+  );
+
+  const customShowEditor = useCustomShowEditor();
+
+  if (customShowEditor.currentEntity?.id !== customShow.data.id) {
+    setCurrentCustomShow(customShow.data, customPrograms.data);
+  }
+
+  return customShowEditor;
+};

web/src/hooks/usePreloadedFiller.ts

@@ -0,0 +1,31 @@
+import { FillerPreload } from '@/preloaders/fillerListLoader';
+import { setCurrentFillerList } from '@/store/channelEditor/actions';
+import { useLoaderData } from 'react-router-dom';
+import { UnsavedId } from '../helpers/constants';
+import { useFillerListEditor } from '../store/selectors';
+import { useFillersWithInitialData } from './useFillerLists';
+import { useTunarrApi } from './useTunarrApi';
+
+export const usePreloadedFiller = () => {
+  const apiClient = useTunarrApi();
+  const { filler: preloadFiller, programs: preloadPrograms } =
+    useLoaderData() as FillerPreload;
+
+  const [filler, fillerPrograms] = useFillersWithInitialData(
+    apiClient,
+    preloadFiller.id,
+    preloadFiller.id !== UnsavedId,
+    {
+      filler: preloadFiller,
+      fillerListPrograms: preloadPrograms,
+    },
+  );
+
+  const fillerListEditor = useFillerListEditor();
+
+  if (fillerListEditor.currentEntity?.id !== filler.data.id) {
+    setCurrentFillerList(filler.data, fillerPrograms.data);
+  }
+
+  return fillerListEditor;
+};

web/src/pages/channels/ProgrammingSelectorPage.tsx

@@ -1,22 +1,48 @@
 import SelectedProgrammingList from '@/components/channel_config/SelectedProgrammingList.tsx';
+import {
+  addMediaToCurrentChannel,
+  addMediaToCurrentCustomShow,
+  addMediaToCurrentFillerList,
+} from '@/store/channelEditor/actions.ts';
+import useStore from '@/store/index.ts';
+import { useLocation, useNavigate } from 'react-router-dom';
 import Breadcrumbs from '../../components/Breadcrumbs.tsx';
 import PaddedPaper from '../../components/base/PaddedPaper.tsx';
 import ProgrammingSelector from '../../components/channel_config/ProgrammingSelector.tsx';
-import { useNavigate } from 'react-router-dom';
-import { addMediaToCurrentChannel } from '@/store/channelEditor/actions.ts';
-import useStore from '@/store/index.ts';
 
 export default function ProgrammingSelectorPage() {
   const selectedLibrary = useStore((s) => s.currentLibrary);
-  console.log(selectedLibrary);
   const navigate = useNavigate();
+  const location = useLocation();
+
+  const displayPaths = [
+    {
+      path: 'fillers/programming/add',
+      onMediaAdd: addMediaToCurrentFillerList,
+    },
+    {
+      path: 'custom-shows/programming/add',
+      onMediaAdd: addMediaToCurrentCustomShow,
+    },
+    {
+      path: 'channels/:id/programming/add',
+      onMediaAdd: addMediaToCurrentChannel,
+    },
+  ];
+  const displaySelectedProgramming = displayPaths.find((pathObject) => {
+    const { path } = pathObject; // Destructure path from the object
+    return location.pathname.match(new RegExp(path));
+  });
+
   return (
     <>
       <Breadcrumbs />
       <PaddedPaper>
         <ProgrammingSelector />
         <SelectedProgrammingList
-          onAddSelectedMedia={addMediaToCurrentChannel}
+          onAddSelectedMedia={
+            displaySelectedProgramming?.onMediaAdd || addMediaToCurrentChannel
+          }
           onAddMediaSuccess={() => navigate(-1)}
           selectAllEnabled={selectedLibrary?.type === 'plex'}
         />