alex.zinn/WebControlCenter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update package dependencies; refactor ChannelList component to use context for column rendering and improve error handling in LoginForm

Browse Source
This commit is contained in:
Alexander Zinn
2025-10-30 04:53:59 -04:00
parent 1134674c31
commit 4e8abcabfd
5 changed files with 96 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
package.json
View File

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

129
src/views/ChannelList/ChannelList.tsx
View File

@@ -1,11 +1,10 @@
/** /**
* Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved. * 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 {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 {selectChannelList, selectChannelsLoading, selectChannelsError, listChannels} from 'store/action/channels';
import {LoadingWheel as Loader} from 'components/loaders'; import {LoadingWheel as Loader} from 'components/loaders';
@@ -14,31 +13,12 @@ import {TableHeaderKey, ITableWithPaginationHeader} from 'components/table';
import {TableWithPagination} from 'components'; import {TableWithPagination} from 'components';
import {Error} from 'components/error-renderer/style'; import {Error} from 'components/error-renderer/style';
import {columns} from './columns-config'; import {createColumnsWithContext} from './columns-data';
import {CreateChannelModal} from './create-channel'; 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 => { export const ChannelList = (): React.JSX.Element => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const interval = useRef<NodeJS.Timeout | null>(null); const [hasLoaded, setHasLoaded] = useState(false);
// Redux state // Redux state
const channels = useAppSelector(selectChannelList); const channels = useAppSelector(selectChannelList);
@@ -48,80 +28,57 @@ export const ChannelList = (): React.JSX.Element => {
// Local state // Local state
const [isCreateChannelModalOpened, setCreateChannelModalOpened] = useState(false); 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 // Load channels on component mount
useEffect(() => { useEffect(() => {
dispatch(listChannels()); dispatch(listChannels());
}, [dispatch]); }, [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) { 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"> <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> </Body>
</>
); );
}; };

5
src/views/ChannelList/columns-config.tsx
View File

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

46
src/views/ChannelList/columns-data.tsx
View File

@@ -1,14 +1,50 @@
/** /**
* Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved. * 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 {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 {ChannelIconMenu} from 'components/channel-icon-menu';
import {IconMenuPosition} from 'components/icon-menu/types'; import {IconMenuPosition} from 'components/icon-menu/types';
import {ChannelPublishingStateIndicator} from './channel-publishing-state-indicator'; import {ChannelPublishingStateIndicator} from './channel-publishing-state-indicator';
import {theme} from 'theme'; 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: { indicator: {
title: '', title: '',
hasBorder: false, hasBorder: false,
@@ -18,8 +54,8 @@ export const columns: ColumnsType = {
}, },
name: { name: {
title: 'Channel Name', title: 'Channel Name',
type: CellType.Link, type: CellType.Component,
textCell: {propName: 'name'}, renderCell: ChannelNameCellComponent,
thStyle: { thStyle: {
textAlign: 'left', textAlign: 'left',
paddingLeft: 16 paddingLeft: 16
@@ -60,4 +96,4 @@ export const columns: ColumnsType = {
} }
} }
} }
}; });

3
src/views/LoginForm/LoginForm.tsx
View File

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