Enhance table header interfaces with optional render methods for improved flexibility; refactor router component structure for better readability and maintainability; ensure newline at end of file in url-routes.ts.

.npmrc

@@ -1,3 +1,3 @@
 save-exact=true
 package-lock=false
-@techniker-me:registry=https://registry-node.techniker.me
+@techniker-me:registry=https://npm.techniker.me

bun.lock

@@ -16,7 +16,7 @@
         "react-router-dom": "7.8.2",
         "redux-persist": "6.0.0",
         "styled-components": "6.1.19",
-        "uuid": "11.1.0",
+        "uuid": "11.1.0"
       },
       "devDependencies": {
         "@eslint/js": "9.34.0",

package.json

@@ -15,42 +15,43 @@
   "dependencies": {
     "@phenixrts/sdk": "2025.2.2",
     "@reduxjs/toolkit": "2.9.0",
-    "@techniker-me/pcast-api": "2025.1.5",
+    "@techniker-me/pcast-api": "2025.1.8",
     "@techniker-me/tools": "2025.0.16",
     "moment": "2.30.1",
+    "phenix-edge-auth": "1.2.7",
     "phenix-web-proto": "2020.0.3",
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "react-redux": "9.2.0",
-    "react-router-dom": "7.8.2",
+    "react-router-dom": "7.9.1",
     "redux-persist": "6.0.0",
     "styled-components": "6.1.19",
-    "uuid": "11.1.0"
+    "uuid": "13.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "9.34.0",
+    "@eslint/js": "9.35.0",
     "@fortawesome/fontawesome-svg-core": "7.0.1",
     "@fortawesome/free-regular-svg-icons": "7.0.1",
     "@fortawesome/free-solid-svg-icons": "7.0.1",
     "@fortawesome/react-fontawesome": "3.0.2",
-    "@types/node": "24.3.0",
+    "@types/node": "24.5.0",
-    "@types/react": "19.1.12",
+    "@types/react": "19.1.13",
     "@types/react-dom": "19.1.9",
     "@vitejs/plugin-react-swc": "4.0.1",
     "babel-plugin-styled-components": "2.1.4",
     "babel-plugin-transform-amd-to-commonjs": "1.6.0",
-    "eslint": "9.34.0",
+    "eslint": "9.35.0",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-react-refresh": "0.4.20",
-    "globals": "16.3.0",
+    "globals": "16.4.0",
     "prettier": "3.6.2",
     "react-datepicker": "8.7.0",
     "react-toastify": "11.0.5",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.42.0",
+    "typescript-eslint": "8.44.0",
     "typescript-plugin-styled-components": "3.0.0",
-    "vite": "7.1.4",
+    "vite": "7.1.5",
     "vite-plugin-babel": "1.3.2",
     "vite-plugin-commonjs": "0.10.4"
   }

src/components/index.ts

@@ -1,7 +1,7 @@
 export * from './buttons';
 export * from './channel-icon-menu';
 export * from './error-renderer';
-export * from './ui/header'
+export * from './ui/header';
 export * from './layout';
 export * from './loaders';
 export * from './modal';

src/components/menu/index.tsx

@@ -33,13 +33,10 @@ const Menu = (props: IMenu) => {
         const active = currentLocation === path;
 
         return (
-          <MenuItem
+          <MenuItem className={active ? 'active' : ''} onClick={toggleShowMenu} key={menuItem} to={`/${applicationId}/${path}`}>
-            className={active ? 'active' : ''}
+            <span>
-            onClick={toggleShowMenu}
+              <FontAwesomeIcon icon={icon} />
-            key={menuItem}
+            </span>
-            to={`/${applicationId}/${path}`}
-          >
-            <span><FontAwesomeIcon icon={icon} /></span>
             <p>{menuItem}</p>
           </MenuItem>
         );

src/components/menu/style.ts

@@ -5,10 +5,7 @@ import * as styled from 'styled-components';
 import {Link} from 'components/ui';
 import {theme, paddings} from 'components/shared/theme';
 
-const {
+const {colors, primaryThemeColor} = theme;
-  colors,
-  primaryThemeColor
-} = theme;
 
 export const MenuLayout = styled.default.div`
   display: flex;

src/components/side-menu/index.tsx

@@ -12,15 +12,10 @@ import Menu from 'components/menu';
 import NewTabLink from 'components/new-tab-link';
 import Toggle from 'components/toggle';
 
-import {
+import {Overlay, MenuView, SnapToBottom, FooterContainer} from './style';
-  Overlay,
-  MenuView,
-  SnapToBottom,
-  FooterContainer
-} from './style';
 import config from 'config';
 
-export const SideMenu = ({showMenu}: {showMenu: () => void }): JSX.Element => {
+export const SideMenu = ({showMenu}: {showMenu: () => void}): JSX.Element => {
   const dispatch = useAppDispatch();
   const timeFormat = useAppSelector((state: RootState) => state.preferredTimeFormat.timeFormat);
   const handleToggleChange = () => {
@@ -38,16 +33,8 @@ export const SideMenu = ({showMenu}: {showMenu: () => void }): JSX.Element => {
         <Menu toggleShowMenu={showMenu} />
         <SnapToBottom>
           <FooterContainer>
-            <Toggle
+            <Toggle onTitle="UTC" offTitle="Local Time" handleChange={handleToggleChange} position={timeFormat === TimeFormats.Utc ? 'on' : 'off'} />
-              onTitle="UTC"
+            <NewTabLink link={documentationLinks.releaseNotes} text={config.controlCenterVersion} />
-              offTitle="Local Time"
-              handleChange={handleToggleChange}
-              position={timeFormat === TimeFormats.Utc ? 'on' : 'off'}
-            />
-            <NewTabLink
-              link={documentationLinks.releaseNotes}
-              text={config.controlCenterVersion}
-            />
           </FooterContainer>
         </SnapToBottom>
       </MenuView>

src/components/side-menu/style.ts

@@ -5,7 +5,11 @@ import * as styled from 'styled-components';
 import {theme, paddings} from 'components/shared/theme';
 import {ToggleContainer} from 'components/toggle/style';
 
-const {colors, footerHeight, typography: {fontSizeS}} = theme;
+const {
+  colors,
+  footerHeight,
+  typography: {fontSizeS}
+} = theme;
 
 export const Overlay = styled.default.div`
   position: fixed;

src/components/table-screen-header/table-screen-header.tsx

@@ -11,7 +11,7 @@ export interface ITableScreenHeader {
   title: string;
   subtitle?: string;
   screenHeader: ScreenHeaderProps;
-  renderControl: (screenHeader: ScreenHeaderProps, key: TableHeaderKey) => JSX.Element | null;
+  renderControl?: (key: TableHeaderKey) => JSX.Element | null;
 }
 
 export const TableScreenHeader = ({title, subtitle = '', screenHeader, renderControl}: ITableScreenHeader): JSX.Element => {
@@ -23,7 +23,7 @@ export const TableScreenHeader = ({title, subtitle = '', screenHeader, renderCon
       </HeaderTitle>
       <ScreenHeaderControls>
         {Object.keys(screenHeader).map(key => {
-          const headerControl = screenHeader[key].render ? screenHeader[key].render(key) : renderControl(screenHeader, key as TableHeaderKey);
+          const headerControl = screenHeader[key].render ? screenHeader[key].render(key) : renderControl?.(key as TableHeaderKey);
 
           return headerControl ? <HeaderControlWrapper key={key}>{headerControl}</HeaderControlWrapper> : null;
         })}

src/components/table-with-pagination/table-with-pagination.tsx

@@ -1,7 +1,7 @@
 /**
  * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
  */
-import {useEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 
 import {DataRowType, Table, TableHeaderKey, ITable, ITableWithPaginationHeader, ITableSort} from 'components/table';
 import {isEqual} from 'utility/validators';
@@ -17,7 +17,7 @@ import {useSort, useSearch} from 'utility/custom-hooks';
 interface ITableWithPagination extends ITable {
   screenHeader: ITableWithPaginationHeader;
   paginationItemText?: string;
-  getCurrentDisplayList?: (data: Record<string, string | number | null>[]) => void;
+  getCurrentDisplayList?: (data: Record<string, string | number | null | undefined>[]) => void;
 }
 
 const TableWithPagination = ({
@@ -34,7 +34,7 @@ const TableWithPagination = ({
   changeSortProps,
   searchValue: propsSearchValue = '',
   changeSearch
-}: ITableWithPagination): JSX.Element => {
+}: ITableWithPagination): React.JSX.Element => {
   const [currentPageNumber, setCurrentPageNumber] = useState<number>(1);
   const [currentData, setCurrentData] = useState<DataRowType[]>([]);
   const [filteredData, setFilteredData] = useState<DataRowType[]>(data || []);
@@ -78,9 +78,9 @@ const TableWithPagination = ({
   useEffect(() => {
     let pxRatioBeforeZoom = window.devicePixelRatio;
     let windowHeightBeforeResize = window.innerHeight;
-    const trackResize = e => {
+    const trackResize = () => {
-      const pxRatioAfterZoom = e.devicePixelRatio;
+      const pxRatioAfterZoom = window.devicePixelRatio;
-      const windowHeightAfterResize = e.target.innerHeight;
+      const windowHeightAfterResize = window.innerHeight;
 
       if (pxRatioAfterZoom !== pxRatioBeforeZoom || windowHeightAfterResize !== windowHeightBeforeResize) {
         pxRatioBeforeZoom = pxRatioAfterZoom;
@@ -153,27 +153,53 @@ const TableWithPagination = ({
     }
   };
 
-  const renderControl = (screenHeader: ITableWithPaginationHeader, key: TableHeaderKey) => {
+  // Create enhanced screenHeader with render methods
-    switch (key) {
+  const enhancedScreenHeader = React.useMemo(() => {
-      case TableHeaderKey.Search:
+    const result = {...screenHeader};
-        return <SearchInput search={search} defaultValue={searchValue} />;
+
-      case TableHeaderKey.AddRow:
+    // Add render methods for controls that need them
-        return <AddButton onClick={screenHeader[key]?.openAddRowModal} className="testId-hashAddButton" />;
+    if (result[TableHeaderKey.Search]) {
-      case TableHeaderKey.SelectType:
+      result[TableHeaderKey.Search] = {
-        return <Select {...screenHeader[key]} />;
+        ...result[TableHeaderKey.Search],
-      default:
+        render: () => <SearchInput search={search} defaultValue={searchValue} />
-        return null;
+      };
     }
-  };
+
+    if (result[TableHeaderKey.AddRow]) {
+      const addRowConfig = result[TableHeaderKey.AddRow];
+      result[TableHeaderKey.AddRow] = {
+        ...addRowConfig,
+        render: () => <AddButton onClick={addRowConfig.openAddRowModal} className="testId-hashAddButton" />
+      };
+    }
+
+    if (result[TableHeaderKey.SelectType]) {
+      const selectTypeConfig = result[TableHeaderKey.SelectType];
+      result[TableHeaderKey.SelectType] = {
+        ...selectTypeConfig,
+        render: () => <Select {...selectTypeConfig} />
+      };
+    }
+
+    return result;
+  }, [screenHeader, search, searchValue]);
 
   return (
     <div style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
       <div style={{flexShrink: 0}}>
-        <TableScreenHeader title={title} screenHeader={screenHeader} renderControl={renderControl} />
+        <TableScreenHeader title={title} screenHeader={enhancedScreenHeader} />
       </div>
       <div style={{flex: 1, overflow: 'auto', minHeight: 0, position: 'relative'}}>
         <div style={{overflow: 'visible'}}>
-          <Table columns={columns} data={currentData} sortColumn={sortColumn} sortDirection={sortDirection} style={style} sort={sort} errorMessage={errorMessage} />
+          <Table
+            columns={columns}
+            data={currentData}
+            sortColumn={sortColumn}
+            sortDirection={sortDirection}
+            style={style}
+            sort={sort}
+            errorMessage={errorMessage}
+          />
         </div>
       </div>
       <div style={{flexShrink: 0}} className="pagination-container">

src/components/table/props.ts

@@ -42,6 +42,7 @@ export interface ITableColumn {
   isHidden?: boolean;
   width?: number;
   path?: string;
+  applicationId?: string;
 }
 
 export type ColumnsType = Record<string, ITableColumn>;

src/components/table/table-row.tsx

@@ -18,7 +18,7 @@ export const TableRow = ({columns, row}: ITableRow): React.JSX.Element | null =>
   return (
     <tr className="table-row">
       {Object.keys(columns).map((key, idx) => {
-        const {isHidden, renderCell, dropdownCell, textCell, type, path = '', tdStyle, width} = columns[key];
+        const {isHidden, renderCell, dropdownCell, textCell, type, path = '', tdStyle, width, applicationId} = columns[key];
 
         if (isHidden) {
           return null;
@@ -60,12 +60,13 @@ export const TableRow = ({columns, row}: ITableRow): React.JSX.Element | null =>
               </td>
             );
           } else if (type === CellType.Link) {
-            let link = path || '';
+            // For channel names, use channelId for the URL but display the name
+            const channelId = globalThis.encodeURIComponent(row.channelId || value);
+            let link = path ? `${path}/${channelId}` : `/channels/${channelId}`;
 
             if (row.extraPath) {
               link += `${path ? '/' : ''}${row.extraPath}`;
             }
-
             return (
               <td key={`tableData${idx}`} style={tdStyle}>
                 <div>

src/components/toggle/index.tsx

@@ -1,14 +1,7 @@
 /**
  * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
  */
-import {
+import {ToggleContainer, ToggleHiddenInput, ToggleSwitchContainer, ToggleSwitch, ToggleTitleOn, ToggleTitleOff} from './style';
-  ToggleContainer,
-  ToggleHiddenInput,
-  ToggleSwitchContainer,
-  ToggleSwitch,
-  ToggleTitleOn,
-  ToggleTitleOff
-} from './style';
 
 interface IToggle {
   handleChange: () => void;
@@ -17,18 +10,13 @@ interface IToggle {
   position?: 'on' | 'off';
 }
 const Toggle = (props: IToggle): JSX.Element => {
-  const {
+  const {onTitle, offTitle, handleChange, position} = props;
-    onTitle,
-    offTitle,
-    handleChange,
-    position
-  } = props;
 
   return (
     <ToggleContainer>
       <ToggleHiddenInput type="checkbox" name="" id="toggle" checked={position === 'on'} onChange={handleChange} />
       {offTitle && <ToggleTitleOff>{offTitle}</ToggleTitleOff>}
-      <ToggleSwitchContainer htmlFor="toggle" >
+      <ToggleSwitchContainer htmlFor="toggle">
         <ToggleSwitch />
       </ToggleSwitchContainer>
       {onTitle && <ToggleTitleOn>{onTitle}</ToggleTitleOn>}

src/components/toggle/style.ts

@@ -5,7 +5,10 @@ import * as styled from 'styled-components';
 
 import {theme} from 'components/shared/theme';
 
-const {colors, typography: {fontSizeS}} = theme;
+const {
+  colors,
+  typography: {fontSizeS}
+} = theme;
 
 export const ToggleContainer = styled.default.div`
   display: flex;

src/components/ui/header/index.tsx

@@ -1,12 +1,7 @@
 /**
  * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
  */
-import {
+import {useState, useEffect, useRef, JSX} from 'react';
-  useState,
-  useEffect,
-  useRef,
-  JSX
-} from 'react';
 import {useNavigate, useLocation} from 'react-router-dom';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons';
@@ -19,14 +14,7 @@ import text from './text';
 import {SideMenu} from 'components/side-menu';
 import urlRoutes from 'routers/url-routes';
 
-import {
+import {TopNavigation, User, ApplicationId, UserInitials, MenuIcon, NavigationLeftSide} from './style';
-  TopNavigation,
-  User,
-  ApplicationId,
-  UserInitials,
-  MenuIcon,
-  NavigationLeftSide
-} from './style';
 
 import logo from 'assets/images/phenix-logo-101x41.png';
 import menuIcon from 'assets/images/icon/menu.svg';
@@ -53,14 +41,14 @@ const Header = (): JSX.Element => {
     }
   };
 
-  const checkAndRedirect = async(): Promise<void> => {
+  const checkAndRedirect = async (): Promise<void> => {
-    const applicationId = await UserStoreService.get('applicationId') as string;
+    const applicationId = (await UserStoreService.get('applicationId')) as string;
 
     if (!applicationId) {
       return navigate(`/login/${search}`);
     }
 
-    const lastVisitedRoutes = await UserStoreService.get<Record<string, string>>('lastVisitedRouteByApplicationId') as Record<string, string>;
+    const lastVisitedRoutes = (await UserStoreService.get<Record<string, string>>('lastVisitedRouteByApplicationId')) as Record<string, string>;
     const lastVisitedRoute = lastVisitedRoutes[applicationId];
     const channelsPath = `/${urlRoutes.channels.path}/`;
 
@@ -73,24 +61,10 @@ const Header = (): JSX.Element => {
     }
   };
 
-  // const setLastVisitedRoute = async(): Promise<void> => {
-  //   const applicationId = await userStore.get('applicationId');
-  //   const lastVisitedRoutes = await userStore.get('lastVisitedRouteByApplicationId') || {};
-
-  //   await userStore.set('lastVisitedRouteByApplicationId', {
-  //     ...lastVisitedRoutes,
-  //     [applicationId]: pathname
-  //   });
-  // };
-
   useEffect(() => {
     checkAndRedirect();
   }, [isLoggedIn]);
 
-  // useEffect(() => {
-  //   setLastVisitedRoute();
-  // }, [pathname]);
-
   useEffect(() => {
     document.addEventListener('click', handleClickOutside, true);
 
@@ -99,27 +73,19 @@ const Header = (): JSX.Element => {
     };
   });
 
-  const handleLogout = async(): Promise<void> => {
+  const handleLogout = async (): Promise<void> => {
     dispatch(signoutThunk());
   };
 
   const handleCaretClick = () => setViewUserDetails(!viewUserDetails);
 
-  console.log('isLoggedIn', isLoggedIn);
-
   return (
     <TopNavigation isLoggedIn={isLoggedIn}>
       <NavigationLeftSide>
-        {(isLoggedIn && applicationId) &&
+        {isLoggedIn && applicationId && <MenuIcon onClick={() => setShowMenu(!showMenu)} src={menuIcon} alt="menuIcon" />}
-          <MenuIcon
-            onClick={() => setShowMenu(!showMenu)}
-            src={menuIcon}
-            alt="menuIcon"
-          />
-        }
         <img src={logo} alt={phenixText} />
       </NavigationLeftSide>
-      {(isLoggedIn && applicationId) &&
+      {isLoggedIn && applicationId && (
         <>
           <User ref={ref} onClick={handleCaretClick} className="user-info">
             <UserInitials>{userInitials}</UserInitials>
@@ -128,11 +94,9 @@ const Header = (): JSX.Element => {
               <FontAwesomeIcon icon={faSignOutAlt} size="lg" />
             </div>
           </User>
-          {showMenu &&
+          {showMenu && <SideMenu showMenu={() => setShowMenu(!showMenu)} />}
-            <SideMenu showMenu={() => setShowMenu(!showMenu)} />
-          }
         </>
-      }
+      )}
     </TopNavigation>
   );
 };

src/components/ui/header/style.tsx

@@ -19,10 +19,12 @@ export const TopNavigation = styled.default.div<{isLoggedIn: boolean}>`
   left: 0;
   right: 0;
   z-index: 1000;
-  ${({isLoggedIn}) => isLoggedIn && styled.css`
+  ${({isLoggedIn}) =>
-    background-color: ${colors.headerColor};
+    isLoggedIn &&
-    padding: ${paddings.small} ${paddings.xlarge};
+    styled.css`
-  `}
+      background-color: ${colors.headerColor};
+      padding: ${paddings.small} ${paddings.xlarge};
+    `}
 `;
 
 export const NavigationLeftSide = styled.default.div`

src/interfaces/tableProps.ts

@@ -22,14 +22,18 @@ export enum TableHeaderKey {
 interface ICommonTableHeader {
   [TableHeaderKey.Search]?: {
     searchProps?: string[];
+    render?: (key: string) => React.JSX.Element;
   };
 }
 
 export interface ITableWithPaginationHeader extends ICommonTableHeader {
   [TableHeaderKey.AddRow]?: {
     openAddRowModal: () => void;
+    render?: (key: string) => React.JSX.Element;
+  };
+  [TableHeaderKey.SelectType]?: ISelectComponent & {
+    render?: (key: string) => React.JSX.Element;
   };
-  [TableHeaderKey.SelectType]?: ISelectComponent;
 }
 
 export interface ITableWithLoadMoreHeader extends ICommonTableHeader {

src/routers/index.tsx

@@ -13,14 +13,35 @@ export default function Router() {
       <Header />
       <Routes>
         {/* Public routes */}
-        <Route path="/login" element={<Suspense fallback={null}><LoginForm /></Suspense>} />
+        <Route
+          path="/login"
+          element={
+            <Suspense fallback={null}>
+              <LoginForm />
+            </Suspense>
+          }
+        />
 
         {/* Protected routes */}
         <Route path="/" element={<Navigate to="/channels" replace />} />
-        <Route path="/channels" element={<Suspense fallback={null}><ProtectedRoute component={<ChannelList />} /></Suspense>} />
+        <Route
-        <Route path="/channels/:channelId" element={<Suspense fallback={null}><ProtectedRoute component={<ChannelDetail />} /></Suspense>} />
+          path="/:applicationId/channels"
+          element={
+            <Suspense fallback={null}>
+              <ProtectedRoute component={<ChannelList />} />
+            </Suspense>
+          }
+        />
+        <Route
+          path="/channels/:channelId"
+          element={
+            <Suspense fallback={null}>
+              <ProtectedRoute component={<ChannelDetail />} />
+            </Suspense>
+          }
+        />
         {/* Fallback route */}
-        <Route path="*" element={<Navigate to="/login" replace />} />
+        {/* <Route path="*" element={<Navigate to="/login" replace />} /> */}
       </Routes>
     </BrowserRouter>
   );

src/services/EdgeAuth.service.ts

@@ -0,0 +1,18 @@
+// @ts-ignore - phenix-edge-auth doesn't have TypeScript definitions
+import TokenBuilder from 'phenix-edge-auth';
+
+export default class PhenixEdgeAuthService {
+    private constructor() {
+      throw new Error('PhenixEdgeAuthService is a static class that may not be instantiated');
+    }
+  
+    public static createChannelToken({id, secret, channelId}: {id: string; secret: string; channelId: string}): string {
+      return new TokenBuilder()
+        .expiresIn(3600)
+        .withUri('https://pcast-stg.phenixrts.com')
+        .withApplicationId(id)
+        .withSecret(secret)
+        .forChannel(channelId)
+        .build();
+    }
+  }

src/services/PhenixChannel.service.ts

@@ -0,0 +1,24 @@
+import {Channels} from '@phenixrts/sdk';
+import type PhenixChannel from '@phenixrts/sdk/types/sdk/channels/Channel';
+import {ApplicationCredentials, Channel} from '@techniker-me/pcast-api';
+import PhenixEdgeAuthService from './EdgeAuth.service';
+
+
+
+export default class PhenixChannelService {
+  private constructor() {
+    throw new Error('PhenixChannelService is a static class that may not be instantiated');
+  }
+
+  public static subscribeToChannel({id, secret}: ApplicationCredentials, channel: Channel, videoElement: HTMLVideoElement): PhenixChannel {
+    const token = PhenixEdgeAuthService.createChannelToken({id, secret, channelId: channel.channelId});
+
+    console.log('token', token);
+    console.log('channel', channel);
+    
+    return Channels.createChannel({
+      token,
+      videoElement
+    });
+  }
+}

src/services/files/countries_mapping.json

@@ -1,4 +1,5 @@
-{"AF": "Afghanistan",
+{
+  "AF": "Afghanistan",
   "AO": "Angola",
   "AL": "Albania",
   "AE": "United Arab Emirates",
@@ -174,4 +175,5 @@
   "YE": "Yemen",
   "ZA": "South Africa",
   "ZM": "Zambia",
-  "ZW": "Zimbabwe"}
+  "ZW": "Zimbabwe"
+}

src/store/action/preferred-time-format.ts

@@ -49,12 +49,12 @@ export type SetPreferredTimeFormatActionType = IRequestSetPreferredTimeFormat |
 
 interface IGetPreferredTimeFormatActions {
   request: () => GetPreferredTimeFormatActionType;
-  receive: (payload) => GetPreferredTimeFormatActionType;
+  receive: (payload: {data: TimeFormats}) => GetPreferredTimeFormatActionType;
   failed: (error: null | string) => GetPreferredTimeFormatActionType;
 }
 interface ISetPreferredTimeFormatActions {
   request: () => SetPreferredTimeFormatActionType;
-  receive: (payload) => SetPreferredTimeFormatActionType;
+  receive: (payload: {data: TimeFormats}) => SetPreferredTimeFormatActionType;
   failed: (error: null | string) => SetPreferredTimeFormatActionType;
 }
 
@@ -74,30 +74,28 @@ const getPreferredTimeFormatActions: IGetPreferredTimeFormatActions = {
   })
 };
 
-export const getPreferredTimeFormat = () => async(dispatch: Dispatch<GetPreferredTimeFormatActionType>): Promise<void> => {
+export const getPreferredTimeFormat =
-  const {
+  () =>
-    request,
+  async (dispatch: Dispatch<GetPreferredTimeFormatActionType>): Promise<void> => {
-    receive,
+    const {request, receive, failed} = getPreferredTimeFormatActions;
-    failed
-  } = getPreferredTimeFormatActions;
 
-  dispatch(request());
+    dispatch(request());
 
-  try {
+    try {
-    let preferredTimeFormat = await userStore.get('timeFormat');
+      let preferredTimeFormat = await userStore.get('timeFormat');
 
-    if (!preferredTimeFormat) {
+      if (!preferredTimeFormat) {
-      await userStore.set('timeFormat', TimeFormats.Utc);
+        await userStore.set('timeFormat', TimeFormats.Utc);
-      preferredTimeFormat = await userStore.get('timeFormat');
+        preferredTimeFormat = await userStore.get('timeFormat');
+      }
+
+      dispatch(receive({data: preferredTimeFormat as TimeFormats}));
+    } catch (e) {
+      const {message} = transformToPortalError(e);
+
+      dispatch(failed(message || 'An error occurred while getting the preferred time format'));
     }
-
+  };
-    dispatch(receive({data: preferredTimeFormat}));
-  } catch (e) {
-    const {message} = transformToPortalError(e);
-
-    dispatch(failed(message || 'An error occurred while getting the preferred time format'));
-  }
-};
 
 const setPreferredTimeFormatActions: ISetPreferredTimeFormatActions = {
   request: () => ({type: SET_PREFERRED_TIME_FORMAT}),
@@ -111,22 +109,20 @@ const setPreferredTimeFormatActions: ISetPreferredTimeFormatActions = {
   })
 };
 
-export const setPreferredTimeFormat = (format: TimeFormats) => async(dispatch: Dispatch<SetPreferredTimeFormatActionType>): Promise<void> => {
+export const setPreferredTimeFormat =
-  const {
+  (format: TimeFormats) =>
-    request,
+  async (dispatch: Dispatch<SetPreferredTimeFormatActionType>): Promise<void> => {
-    receive,
+    const {request, receive, failed} = setPreferredTimeFormatActions;
-    failed
-  } = setPreferredTimeFormatActions;
 
-  dispatch(request());
+    dispatch(request());
 
-  try {
+    try {
-    await userStore.set('timeFormat', format);
+      await userStore.set('timeFormat', format);
 
-    dispatch(receive({data: format}));
+      dispatch(receive({data: format}));
-  } catch (e) {
+    } catch (e) {
-    const {message} = transformToPortalError(e);
+      const {message} = transformToPortalError(e);
 
-    dispatch(failed(message || 'An error occurred while setting the preferred time format'));
+      dispatch(failed(message || 'An error occurred while setting the preferred time format'));
-  }
+    }
-};
+  };

src/store/slices/PreferredTimeFormat.slice.ts

@@ -1,27 +1,27 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import {createSlice, PayloadAction} from '@reduxjs/toolkit';
-import { TimeFormats } from "utility";
+import {TimeFormats} from 'utility';
 
 export interface IPreferredTimeFormatState {
-    isLoading: boolean;
+  isLoading: boolean;
-    error: null | string;
+  error: null | string;
-    timeFormat: TimeFormats;
+  timeFormat: TimeFormats;
 }
 
 export const initialPreferredTimeFormatState: IPreferredTimeFormatState = {
-    isLoading: false,
+  isLoading: false,
-    error: null,
+  error: null,
-    timeFormat: TimeFormats.Utc
+  timeFormat: TimeFormats.Utc
-}
+};
 
 export const preferredTimeFormatSlice = createSlice({
-    name: 'preferredTimeFormat',
+  name: 'preferredTimeFormat',
-    initialState: initialPreferredTimeFormatState,
+  initialState: initialPreferredTimeFormatState,
-    reducers: {
+  reducers: {
-        setPreferredTimeFormat: (state: IPreferredTimeFormatState, action: PayloadAction<TimeFormats>) => {
+    setPreferredTimeFormat: (state: IPreferredTimeFormatState, action: PayloadAction<TimeFormats>) => {
-            state.timeFormat = action.payload;
+      state.timeFormat = action.payload;
-        }
     }
-})
+  }
+});
 
-export const { setPreferredTimeFormat } = preferredTimeFormatSlice.actions;
+export const {setPreferredTimeFormat} = preferredTimeFormatSlice.actions;
 export default preferredTimeFormatSlice.reducer;

src/utility/date.ts

@@ -46,11 +46,7 @@ export const getAdjustedTime = (): Moment => {
 };
 
 export const getTimezoneAbbreviation = (date: Date): string => {
-  const timezone = date
+  const timezone = date.toString().match(/\(.+\)/g)?.[0] ?? ''.replace('(', '') ?? ''.replace(')', '');
-    .toString()
-    .match(/\(.+\)/g)?.[0] ?? ''
-    .replace('(', '') ?? ''
-    .replace(')', '');
   let abbreviation = '';
 
   timezone.split(' ').forEach(word => {

src/views/ChannelList/ChannelList.tsx

@@ -1,11 +1,10 @@
 /**
  * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
  */
-import React, {useEffect, useRef, useState, useCallback} from 'react';
+import React, {useEffect, useState} from 'react';
 import {channelListErrorMessages} from 'constants/index';
-import {ITableSortSearch} from 'interfaces/tableProps';
 
-import {AppDispatch, useAppDispatch, useAppSelector} from 'store';
+import {useAppDispatch, useAppSelector} from 'store';
 import {selectChannelList, selectChannelsLoading, selectChannelsError, listChannels} from 'store/action/channels';
 
 import {LoadingWheel as Loader} from 'components/loaders';
@@ -14,31 +13,12 @@ import {TableHeaderKey, ITableWithPaginationHeader} from 'components/table';
 import {TableWithPagination} from 'components';
 
 import {Error} from 'components/error-renderer/style';
-import {columns} from './columns-config';
+import {createColumnsWithContext} from './columns-data';
 import {CreateChannelModal} from './create-channel';
 
-const POLLING_INTERVAL = 5000; // 5 seconds
-const ChannelListLoading = () => (
-  <Main>
-    <Loader />
-  </Main>
-);
-
-const ChannelListError = ({error, dispatch}: {error: string, dispatch: AppDispatch}) => (
-  <Body className="table-container">
-    <Error>
-      {(channelListErrorMessages as Record<string, string>)[error] || error}
-      <button onClick={() => dispatch(listChannels())} style={{marginLeft: '10px', padding: '5px 10px'}}>
-        Retry
-      </button>
-    </Error>
-  </Body>
-);
-
-
 export const ChannelList = (): React.JSX.Element => {
   const dispatch = useAppDispatch();
-  const interval = useRef<NodeJS.Timeout | null>(null);
+  const [hasLoaded, setHasLoaded] = useState(false);
 
   // Redux state
   const channels = useAppSelector(selectChannelList);
@@ -48,80 +28,57 @@ export const ChannelList = (): React.JSX.Element => {
   // Local state
   const [isCreateChannelModalOpened, setCreateChannelModalOpened] = useState(false);
 
-  // Memoized columns to prevent unnecessary re-renders
+  // Create columns with React context for channel name navigation
-  const channelsColumns = React.useMemo(() => ({...columns}), []);
+  const columns = React.useMemo(() => createColumnsWithContext(), []);
 
   // Load channels on component mount
   useEffect(() => {
     dispatch(listChannels());
   }, [dispatch]);
 
-  // // Set up polling for channel updates
+  // Screen header configuration
-  // useEffect(() => {
+  const screenHeader: ITableWithPaginationHeader = {
-  //   if (interval.current) {
+    [TableHeaderKey.Search]: {},
-  //     clearInterval(interval.current);
+    [TableHeaderKey.AddRow]: {
-  //   }
+      openAddRowModal: () => setCreateChannelModalOpened(true)
+    }
+  };
 
-  //   // Only start polling if we have channels and not currently fetching
+  // Handle loading state
-  //   if (channels.length > 0 && !isFetching) {
+  if (isFetching && !hasLoaded) {
-  //     interval.current = setInterval(() => {
+    setHasLoaded(true);
-  //       dispatch(listChannels());
+    return (
-  //     }, POLLING_INTERVAL);
+      <Main>
-  //   }
+        <Loader />
+      </Main>
+    );
+  }
 
-  //   return () => {
+  // Handle error state
-  //     if (interval.current) {
-  //       clearInterval(interval.current);
-  //     }
-  //   };
-  // }, [dispatch, channels.length, isFetching]);
-
-  // Memoized screen header to prevent unnecessary re-renders
-  const screenHeader: ITableWithPaginationHeader = React.useMemo(
-    () => ({
-      [TableHeaderKey.Search]: {},
-      [TableHeaderKey.AddRow]: {
-        openAddRowModal: () => {
-          setCreateChannelModalOpened(true);
-        }
-      }
-    }),
-    []
-  );
-
-  // Callback for handling search and sort changes (no-op since TableWithPagination handles internally)
-  const changeScreenProps = useCallback((_data: Partial<ITableSortSearch>) => {
-    // TableWithPagination handles search and sort internally
-    // This is kept for compatibility with the component interface
-  }, []);
-
-  // Memoized callback for refreshing channel list
-  const refreshChannelList = useCallback(async (): Promise<void> => {
-    await dispatch(listChannels());
-  }, [dispatch]);
-
-  // Early return for error state
   if (error) {
-    return <ChannelListError error={error} dispatch={dispatch} />;
+    return (
+      <Body className="table-container">
+        <Error>
+          {(channelListErrorMessages as Record<string, string>)[error] || error}
+          <button onClick={() => dispatch(listChannels())} style={{marginLeft: '10px', padding: '5px 10px'}}>
+            Retry
+          </button>
+        </Error>
+      </Body>
+    );
   }
 
-  if (isFetching) {
+  return (
-    return <ChannelListLoading />;
-  }
-
-  return (<>
     <Body className="table-container">
-      <TableWithPagination
+      <TableWithPagination title="Channels" screenHeader={screenHeader} columns={columns} data={channels as any[]} paginationItemText="channels" />
-        title="Channels"
+      {isCreateChannelModalOpened && (
-        screenHeader={screenHeader}
+        <CreateChannelModal
-        columns={channelsColumns}
+          getChannelList={async () => {
-        data={channels as any[]}
+            await dispatch(listChannels());
-        paginationItemText="channels"
+          }}
-        changeSortProps={changeScreenProps}
+          setCreateChannelModalOpened={setCreateChannelModalOpened}
-        changeSearch={changeScreenProps}
+        />
-      />
+      )}
-      {isCreateChannelModalOpened && <CreateChannelModal getChannelList={refreshChannelList} setCreateChannelModalOpened={setCreateChannelModalOpened} />}
     </Body>
-  </>
   );
 };

src/views/ChannelList/columns-config.tsx

@@ -1,5 +0,0 @@
-/**
- * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
- */
-
-export {columns} from './columns-data';

src/views/ChannelList/columns-data.tsx

@@ -1,14 +1,50 @@
 /**
  * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
  */
+import React from 'react';
 import {faEllipsisV} from '@fortawesome/free-solid-svg-icons';
-import {CellType, ColumnsType} from 'components/table';
+import {CellType, ColumnsType, DataRowType} from 'components/table';
 import {ChannelIconMenu} from 'components/channel-icon-menu';
 import {IconMenuPosition} from 'components/icon-menu/types';
 import {ChannelPublishingStateIndicator} from './channel-publishing-state-indicator';
 import {theme} from 'theme';
+import {useAppDispatch} from 'store';
+import {setSelectedChannel} from 'store/slices/Channels.slice';
+import {useNavigate} from 'react-router-dom';
+import styled from 'styled-components';
 
-export const columns: ColumnsType = {
+const ChannelNameLink = styled.a`
+  color: ${theme.colors.linkBlue};
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+// Component that needs to be rendered within a React context
+const ChannelNameCellComponent = (row?: DataRowType) => {
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (row?.channelId && row?.name) {
+      dispatch(setSelectedChannel(row as any));
+      navigate(`/channels/${row.channelId}`);
+    }
+  };
+
+  return (
+    <ChannelNameLink onClick={handleClick}>
+      {row?.name || 'N/A'}
+    </ChannelNameLink>
+  );
+};
+
+// Factory function to create columns with React context
+export const createColumnsWithContext = (): ColumnsType => ({
   indicator: {
     title: '',
     hasBorder: false,
@@ -18,8 +54,8 @@ export const columns: ColumnsType = {
   },
   name: {
     title: 'Channel Name',
-    type: CellType.Link,
+    type: CellType.Component,
-    textCell: {propName: 'name'},
+    renderCell: ChannelNameCellComponent,
     thStyle: {
       textAlign: 'left',
       paddingLeft: 16
@@ -60,4 +96,4 @@ export const columns: ColumnsType = {
       }
     }
   }
-};
+});

src/views/LoginForm/LoginForm.tsx

@@ -38,7 +38,7 @@ export const LoginForm: FC = () => {
 
   useEffect(() => {
     if (isAuthenticated) {
-      navigate('/channels', {replace: true});
+      navigate(`/${applicationId}/channels`, {replace: true});
     }
   }, [isAuthenticated, navigate]);
 
@@ -59,7 +59,6 @@ export const LoginForm: FC = () => {
   };
 
   const handleInputChange = (setter: (value: string) => void) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    // Clear error when user starts typing
     if (error) {
       dispatch(setError(null));
     }