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

Refactor component imports for consistency; streamline Menu and SideMenu components; enhance TableRow and TableWithPagination for better data handling; update Header component for improved user experience.

Browse Source
This commit is contained in:
Alexander Zinn
2025-10-30 04:54:16 -04:00
parent 4e8abcabfd
commit 5a86c5e578
14 changed files with 99 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/index.ts
View File

@@ -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';

11
src/components/menu/index.tsx
View File

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

5
src/components/menu/style.ts
View File

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

21
src/components/side-menu/index.tsx
View File

@@ -12,15 +12,10 @@ import Menu from 'components/menu';
import NewTabLink from 'components/new-tab-link';
import Toggle from 'components/toggle';
import {
Overlay,
MenuView,
SnapToBottom,
FooterContainer
} from './style';
import {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
onTitle="UTC"
offTitle="Local Time"
handleChange={handleToggleChange}
position={timeFormat === TimeFormats.Utc ? 'on' : 'off'}
/>
<NewTabLink
link={documentationLinks.releaseNotes}
text={config.controlCenterVersion}
/>
<Toggle onTitle="UTC" offTitle="Local Time" handleChange={handleToggleChange} position={timeFormat === TimeFormats.Utc ? 'on' : 'off'} />
<NewTabLink link={documentationLinks.releaseNotes} text={config.controlCenterVersion} />
</FooterContainer>
</SnapToBottom>
</MenuView>

6
src/components/side-menu/style.ts
View File

@@ -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;

4
src/components/table-screen-header/table-screen-header.tsx
View File

@@ -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;
})}

64
src/components/table-with-pagination/table-with-pagination.tsx
View File

@@ -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 pxRatioAfterZoom = e.devicePixelRatio;
const windowHeightAfterResize = e.target.innerHeight;
const trackResize = () => {
const pxRatioAfterZoom = window.devicePixelRatio;
const windowHeightAfterResize = window.innerHeight;
if (pxRatioAfterZoom !== pxRatioBeforeZoom || windowHeightAfterResize !== windowHeightBeforeResize) {
pxRatioBeforeZoom = pxRatioAfterZoom;
@@ -153,27 +153,53 @@ const TableWithPagination = ({
}
};
const renderControl = (screenHeader: ITableWithPaginationHeader, key: TableHeaderKey) => {
switch (key) {
case TableHeaderKey.Search:
return <SearchInput search={search} defaultValue={searchValue} />;
case TableHeaderKey.AddRow:
return <AddButton onClick={screenHeader[key]?.openAddRowModal} className="testId-hashAddButton" />;
case TableHeaderKey.SelectType:
return <Select {...screenHeader[key]} />;
default:
return null;
}
// Create enhanced screenHeader with render methods
const enhancedScreenHeader = React.useMemo(() => {
const result = {...screenHeader};
// Add render methods for controls that need them
if (result[TableHeaderKey.Search]) {
result[TableHeaderKey.Search] = {
...result[TableHeaderKey.Search],
render: () => <SearchInput search={search} defaultValue={searchValue} />
};
}
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">

1
src/components/table/props.ts
View File

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

7
src/components/table/table-row.tsx
View File

@@ -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>

18
src/components/toggle/index.tsx
View File

@@ -1,14 +1,7 @@
/**
* Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
*/
import {
ToggleContainer,
ToggleHiddenInput,
ToggleSwitchContainer,
ToggleSwitch,
ToggleTitleOn,
ToggleTitleOff
} from './style';
import {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 {
onTitle,
offTitle,
handleChange,
position
} = props;
const {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>}

5
src/components/toggle/style.ts
View File

@@ -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;

56
src/components/ui/header/index.tsx
View File

@@ -1,12 +1,7 @@
/**
* Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
*/
import {
useState,
useEffect,
useRef,
JSX
} from 'react';
import {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 {
TopNavigation,
User,
ApplicationId,
UserInitials,
MenuIcon,
NavigationLeftSide
} from './style';
import {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 applicationId = await UserStoreService.get('applicationId') as string;
const checkAndRedirect = async (): Promise<void> => {
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) &&
<MenuIcon
onClick={() => setShowMenu(!showMenu)}
src={menuIcon}
alt="menuIcon"
/>
}
{isLoggedIn && applicationId && <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 &&
<SideMenu showMenu={() => setShowMenu(!showMenu)} />
}
{showMenu && <SideMenu showMenu={() => setShowMenu(!showMenu)} />}
</>
}
)}
</TopNavigation>
);
};

4
src/components/ui/header/style.tsx
View File

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