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

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.
*/
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
const channelsColumns = React.useMemo(() => ({...columns}), []);
// Create columns with React context for channel name navigation
const columns = React.useMemo(() => createColumnsWithContext(), []);
// Load channels on component mount
useEffect(() => {
dispatch(listChannels());
}, [dispatch]);
// // Set up polling for channel updates
// useEffect(() => {
// if (interval.current) {
// clearInterval(interval.current);
// }
// Screen header configuration
const screenHeader: ITableWithPaginationHeader = {
[TableHeaderKey.Search]: {},
[TableHeaderKey.AddRow]: {
openAddRowModal: () => setCreateChannelModalOpened(true)
}
};
// // Only start polling if we have channels and not currently fetching
// if (channels.length > 0 && !isFetching) {
// interval.current = setInterval(() => {
// dispatch(listChannels());
// }, POLLING_INTERVAL);
// }
// Handle loading state
if (isFetching && !hasLoaded) {
setHasLoaded(true);
return (
<Main>
<Loader />
</Main>
);
}
// return () => {
// 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
// Handle 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 <ChannelListLoading />;
}
return (<>
return (
<Body className="table-container">
<TableWithPagination
title="Channels"
screenHeader={screenHeader}
columns={channelsColumns}
data={channels as any[]}
paginationItemText="channels"
changeSortProps={changeScreenProps}
changeSearch={changeScreenProps}
/>
{isCreateChannelModalOpened && <CreateChannelModal getChannelList={refreshChannelList} setCreateChannelModalOpened={setCreateChannelModalOpened} />}
<TableWithPagination title="Channels" screenHeader={screenHeader} columns={columns} data={channels as any[]} paginationItemText="channels" />
{isCreateChannelModalOpened && (
<CreateChannelModal
getChannelList={async () => {
await dispatch(listChannels());
}}
setCreateChannelModalOpened={setCreateChannelModalOpened}
/>
)}
</Body>
</>
);
};