fix: issue with localization url resolution in programs (#431)

Author: axisuru

services/channel/workflows/src/stations/Channels/ProgramManagement/Program/Program.tsx

@@ -14,7 +14,6 @@ import { FormikErrors } from 'formik';
 import moment, { utc } from 'moment';
 import React, { useContext, useEffect, useMemo } from 'react';
 import { DragDropContext, Draggable } from 'react-beautiful-dnd';
-import { useParams } from 'react-router';
 import { ProgramBreakType } from '../../../../generated/graphql';
 import { PortalContext } from '../../../../store/portal-contex';
 import { routes } from '../../routes';
@@ -25,6 +24,7 @@ import {
   ProgramCuePointProps,
   ProgramProps,
 } from '../ProgramManagement.types';
+import { ProgramManagementContext } from '../ProgramManagementProvider/ProgramManagementProvider';
 import classes from './Program.module.scss';
 
 export const Program: React.FC<ProgramProps> = ({
@@ -46,10 +46,8 @@ export const Program: React.FC<ProgramProps> = ({
   onChange,
   onToggle,
 }) => {
-  const { playlistId, channelId } = useParams<{
-    channelId: string;
-    playlistId: string;
-  }>();
+  const { playlistId, channelId } = useContext(ProgramManagementContext);
+
   const { programCuePoints: cpErrors, ...rest } = errors;
   const errMsg = (Object.values(rest) as string[]).join(', ');
   const programLocalizationPath = getLocalizationEntryPoint('program');
@@ -113,7 +111,7 @@ export const Program: React.FC<ProgramProps> = ({
   let cumulativeCuePointDurations = 0;
 
   // Calculate start times for cuepoints
-  for (let i = 0; i < programCuePoints?.nodes?.length ?? []; i++) {
+  for (let i = 0; i < programCuePoints?.nodes?.length; i++) {
     let totalCuePointDuration = 0;
     const node = programCuePoints?.nodes[i];
     if (node?.cuePointSchedules?.nodes?.length) {

services/channel/workflows/src/stations/Channels/ProgramManagement/ProgramManagement.types.ts

@@ -190,12 +190,20 @@ export interface ProgramManagementContextMetadata {
 }
 
 export interface ProgramManagementContextProps {
+  channelId: string;
+  playlistId: string;
   allProviders: FastProviderData[];
   providerTypeMap: ProgramMap;
   metadata: ProgramManagementContextMetadata;
   updateMetadata: (value: ProgramManagementContextMetadata) => void;
 }
 
+export interface ProgramManagementProviderProps
+  extends ProgramManagementContextMetadata {
+  channelId: string;
+  playlistId: string;
+}
+
 export type ProgramEntity = Pick<
   Program,
   'title' | 'videoId' | 'entityId' | 'entityType' | 'imageId'

services/channel/workflows/src/stations/Channels/ProgramManagement/ProgramManagementForm.tsx

@@ -298,7 +298,7 @@ export const ProgramManagementForm: React.FC<ProgramManagementFormProps> = ({
   );
 
   return (
-    <ProgramManagementProvider>
+    <ProgramManagementProvider channelId={channelId} playlistId={playlistId}>
       <Details<FormData>
         defaultTitle="Programs"
         initialData={{

services/channel/workflows/src/stations/Channels/ProgramManagement/ProgramManagementProvider/ProgramManagementProvider.tsx

@@ -4,6 +4,7 @@ import {
   FastProviderData,
   ProgramManagementContextMetadata,
   ProgramManagementContextProps,
+  ProgramManagementProviderProps,
   ProgramMap,
 } from '../ProgramManagement.types';
 
@@ -16,6 +17,8 @@ const defaultMetadata: ProgramManagementContextMetadata = {
 
 export const ProgramManagementContext =
   React.createContext<ProgramManagementContextProps>({
+    channelId: '',
+    playlistId: '',
     metadata: defaultMetadata,
     updateMetadata: () => defaultMetadata,
     allProviders: [],
@@ -24,8 +27,10 @@ export const ProgramManagementContext =
 
 // Responsible for passing metadata to the info panel and all provider info to form
 export const ProgramManagementProvider = ({
+  channelId,
+  playlistId,
   children,
-}: PropsWithChildren<ProgramManagementContextMetadata>): JSX.Element => {
+}: PropsWithChildren<ProgramManagementProviderProps>): JSX.Element => {
   const allProviders = useRef<FastProviderData[]>(
     getProviders('fast-provider') ?? [],
   );
@@ -47,6 +52,8 @@ export const ProgramManagementProvider = ({
   return (
     <ProgramManagementContext.Provider
       value={{
+        channelId,
+        playlistId,
         metadata,
         updateMetadata,
         allProviders: allProviders.current,