From fdefdbd12ebb3e18ab2e1f25bd78c73d5cf37a32 Mon Sep 17 00:00:00 2001 From: Alexander Zinn Date: Fri, 5 Sep 2025 03:05:41 -0400 Subject: [PATCH] format --- src/components/buttons/icon-buttons/style.ts | 5 +- src/components/buttons/radio-button/style.ts | 6 +- .../fork-channel/fork-channel-form.tsx | 12 +- .../kill-channel/kill-channel-form.tsx | 10 +- .../create-token-components/capabilities.tsx | 8 +- .../create-token-components/index.ts | 2 +- .../create-token-components/index.tsx | 19 +-- .../label-icon-tooltip.tsx | 8 +- .../create-token-components/styles.ts | 7 +- .../create-token-components/validity-time.tsx | 8 +- .../date-render-component/index.tsx | 17 +- src/components/drop-down/index.tsx | 26 ++- src/components/drop-down/style.ts | 14 +- src/components/forms/Checkbox.tsx | 26 ++- src/components/forms/Checkbox/index.tsx | 20 +-- src/components/forms/SearchInput.tsx | 8 +- .../indicator-component/indicators/index.ts | 2 +- .../indicators/indicators.tsx | 24 ++- .../indicator-component/indicators/style.ts | 2 +- .../publishing-state-indicator.tsx | 8 +- src/components/label/index.ts | 2 +- src/components/modal/modal.tsx | 6 +- src/components/pagination/index.ts | 2 +- src/components/pagination/pagination.tsx | 37 ++--- src/components/pagination/style.tsx | 15 +- src/components/restricted-text/index.ts | 2 +- .../restricted-text-with-label.tsx | 14 +- .../restricted-text/restricted-text.tsx | 19 +-- src/components/restricted-text/style.ts | 8 +- src/components/table-screen-header/index.ts | 2 +- src/components/table-screen-header/style.tsx | 2 +- .../table-screen-header.tsx | 23 +-- src/components/table-with-pagination/index.ts | 2 +- .../table-with-pagination.tsx | 33 +--- src/components/table/style.tsx | 2 +- src/constant-data/capabilities.ts | 2 +- src/constant-data/error-messages.ts | 2 +- src/constant-data/links.ts | 2 +- src/index.css | 5 +- src/services/Authentication.service.ts | 4 +- src/services/Channel.service.ts | 54 +++--- src/services/PlatformDetection.service.ts | 2 +- src/store/action/channels-publishing.ts | 26 ++- src/store/action/channels.ts | 157 +++++++----------- src/store/action/screens.ts | 46 ++--- .../middlewares/authenticationMiddleware.ts | 4 +- src/store/reducers/screens.ts | 2 +- src/store/slices/Channels.slice.ts | 1 - src/theme/index.ts | 2 +- src/views/ChannelList/ChannelList.tsx | 85 +++++----- 50 files changed, 327 insertions(+), 468 deletions(-) diff --git a/src/components/buttons/icon-buttons/style.ts b/src/components/buttons/icon-buttons/style.ts index cc04f6d..f71d8ba 100644 --- a/src/components/buttons/icon-buttons/style.ts +++ b/src/components/buttons/icon-buttons/style.ts @@ -4,7 +4,10 @@ import * as styled from 'styled-components'; import {theme} from 'components/shared/theme'; -const {typography: {fontSizeL}, colors} = theme; +const { + typography: {fontSizeL}, + colors +} = theme; export const IconButton = styled.default.button` border: none; diff --git a/src/components/buttons/radio-button/style.ts b/src/components/buttons/radio-button/style.ts index c05a463..3821e85 100644 --- a/src/components/buttons/radio-button/style.ts +++ b/src/components/buttons/radio-button/style.ts @@ -4,7 +4,11 @@ import * as styled from 'styled-components'; import {theme, Theme} from 'components/shared/theme'; -const {spacing, typography: {primaryFontSize}, colors} = theme; +const { + spacing, + typography: {primaryFontSize}, + colors +} = theme; const paddings = Theme.paddings; export const RadioGroup = styled.default.div` diff --git a/src/components/channel-icon-menu/fork-channel/fork-channel-form.tsx b/src/components/channel-icon-menu/fork-channel/fork-channel-form.tsx index b372fc5..4329eff 100644 --- a/src/components/channel-icon-menu/fork-channel/fork-channel-form.tsx +++ b/src/components/channel-icon-menu/fork-channel/fork-channel-form.tsx @@ -15,7 +15,17 @@ import {Capabilities} from 'components/create-token-components'; import Theme from 'theme'; const forkChannelOption = ['force', 'additive']; -const ForkChannelForm = ({setFormData, setIsValid, channelList, alias}: {setFormData: (data: any) => void; setIsValid: (isValid: boolean) => void; channelList: any[]; alias: string}): React.JSX.Element => { +const ForkChannelForm = ({ + setFormData, + setIsValid, + channelList, + alias +}: { + setFormData: (data: any) => void; + setIsValid: (isValid: boolean) => void; + channelList: any[]; + alias: string; +}): React.JSX.Element => { const [error, setError] = useState(null); const [tags, setTags] = useState([]); const [forkOptions, setForkOptions] = useState([]); diff --git a/src/components/channel-icon-menu/kill-channel/kill-channel-form.tsx b/src/components/channel-icon-menu/kill-channel/kill-channel-form.tsx index d88382a..c1946ee 100644 --- a/src/components/channel-icon-menu/kill-channel/kill-channel-form.tsx +++ b/src/components/channel-icon-menu/kill-channel/kill-channel-form.tsx @@ -19,7 +19,15 @@ const keepStreamsTooltipMessage = 'Keeps the removed streams alive'; const destroyRequired = 'destroy-required'; const destroyRequiredTooltipMessage = 'Returns an error if destroying of a stream fails'; const defaultReason = 'portal:killed'; -const KillChannelForm = ({setFormData, setIsValid, alias}: {setFormData: (data: any) => void; setIsValid: (isValid: boolean) => void; alias: string}): React.JSX.Element => { +const KillChannelForm = ({ + setFormData, + setIsValid, + alias +}: { + setFormData: (data: any) => void; + setIsValid: (isValid: boolean) => void; + alias: string; +}): React.JSX.Element => { const [error, setError] = useState(null); const [enteredAlias, setEnteredAlias] = useState(''); const [reason, setReason] = useState(defaultReason); diff --git a/src/components/create-token-components/capabilities.tsx b/src/components/create-token-components/capabilities.tsx index ae0de22..cfb70c7 100644 --- a/src/components/create-token-components/capabilities.tsx +++ b/src/components/create-token-components/capabilities.tsx @@ -50,7 +50,11 @@ export const Capabilities = ({ allowMultiple={allowMultiple} label={label} labelColor={labelColor} - labelIcon={capabilitiesSetTitle !== CapabilitiesType.Quality ? : undefined} + labelIcon={ + capabilitiesSetTitle !== CapabilitiesType.Quality ? ( + + ) : undefined + } data={capabilitiesSet} selectedItems={selectedItems} setSelectedItems={setSelectedItems} @@ -59,4 +63,4 @@ export const Capabilities = ({ ); }; -export default Capabilities; \ No newline at end of file +export default Capabilities; diff --git a/src/components/create-token-components/index.ts b/src/components/create-token-components/index.ts index 2f9503d..fc66fbc 100644 --- a/src/components/create-token-components/index.ts +++ b/src/components/create-token-components/index.ts @@ -5,4 +5,4 @@ export {default as Capabilities} from './capabilities'; export {default as ValidityTimeComponent} from './validity-time'; export * from './validity-time'; export {default as LabelIconTooltip} from './label-icon-tooltip'; -export * from './styles'; \ No newline at end of file +export * from './styles'; diff --git a/src/components/create-token-components/index.tsx b/src/components/create-token-components/index.tsx index 64dee45..8ae541a 100644 --- a/src/components/create-token-components/index.tsx +++ b/src/components/create-token-components/index.tsx @@ -14,20 +14,13 @@ interface CapabilitiesProps { setSelectedItems: (items: IAdvancedSelectItem[]) => void; } -export const Capabilities: React.FC = ({ - label, - labelColor, - iconColor, - capabilitiesSetTitle, - selectedItems, - setSelectedItems -}) => { +export const Capabilities: React.FC = ({label, labelColor, iconColor, capabilitiesSetTitle, selectedItems, setSelectedItems}) => { // Mock capabilities data - in a real app this would come from constants/capabilities const mockCapabilities: IAdvancedSelectItem[] = [ - { value: 'streaming', text: 'Streaming' }, - { value: 'recording', text: 'Recording' }, - { value: 'analytics', text: 'Analytics' }, - { value: 'transcoding', text: 'Transcoding' } + {value: 'streaming', text: 'Streaming'}, + {value: 'recording', text: 'Recording'}, + {value: 'analytics', text: 'Analytics'}, + {value: 'transcoding', text: 'Transcoding'} ]; return ( @@ -41,4 +34,4 @@ export const Capabilities: React.FC = ({ /> ); -}; \ No newline at end of file +}; diff --git a/src/components/create-token-components/label-icon-tooltip.tsx b/src/components/create-token-components/label-icon-tooltip.tsx index ee7916c..723f828 100644 --- a/src/components/create-token-components/label-icon-tooltip.tsx +++ b/src/components/create-token-components/label-icon-tooltip.tsx @@ -14,13 +14,9 @@ interface ILabelIconTooltip { } export const LabelIconTooltip = ({message, icon, position}: ILabelIconTooltip): React.JSX.Element => ( - + ); -export default LabelIconTooltip; \ No newline at end of file +export default LabelIconTooltip; diff --git a/src/components/create-token-components/styles.ts b/src/components/create-token-components/styles.ts index e382a3e..0a5254d 100644 --- a/src/components/create-token-components/styles.ts +++ b/src/components/create-token-components/styles.ts @@ -7,10 +7,7 @@ import {theme} from 'components/shared/theme'; import {RadioGroup} from 'components/buttons/radio-button/style'; // import Input from 'components/forms/Input'; -const { - spacing, - colors -} = theme; +const {spacing, colors} = theme; export const CreateTokenContainer = styled.default.div` margin: 0.5rem 0 0; @@ -57,4 +54,4 @@ export const RowsWrapper = styled.default.div` width: 100%; display: flex; justify-content: space-between; -`; \ No newline at end of file +`; diff --git a/src/components/create-token-components/validity-time.tsx b/src/components/create-token-components/validity-time.tsx index 3a37e79..d2b72f9 100644 --- a/src/components/create-token-components/validity-time.tsx +++ b/src/components/create-token-components/validity-time.tsx @@ -48,13 +48,9 @@ export const ValidityTimeComponent = ({currentValue, onChange}: IValidityTimeCom ); -export default ValidityTimeComponent; \ No newline at end of file +export default ValidityTimeComponent; diff --git a/src/components/date-render-component/index.tsx b/src/components/date-render-component/index.tsx index 929bedc..df332f2 100644 --- a/src/components/date-render-component/index.tsx +++ b/src/components/date-render-component/index.tsx @@ -7,13 +7,7 @@ import {Moment} from 'moment'; import {AppStore} from 'store'; import {getTimezoneAbbreviation, isoTimeFormat} from 'utility/date'; -export const DateComponent = ({ - date, - className -}: { - date: Moment; - className?: string; -}): JSX.Element => { +export const DateComponent = ({date, className}: {date: Moment; className?: string}): JSX.Element => { const preferredTimeFormat = useSelector((state: AppStore) => state.preferredTimeFormat.timeFormat); const isUTC = preferredTimeFormat === 'utc'; const utcDate = date.isValid() ? date.format(`${isoTimeFormat} UTC`) : ''; @@ -39,13 +33,8 @@ export const DateComponent = ({ }; return ( -

+

{currentDate}

); -}; \ No newline at end of file +}; diff --git a/src/components/drop-down/index.tsx b/src/components/drop-down/index.tsx index cedc8f7..2dbb14e 100644 --- a/src/components/drop-down/index.tsx +++ b/src/components/drop-down/index.tsx @@ -48,12 +48,12 @@ export const Dropdown = (props: IDropdown): React.JSX.Element => { } const isOutOfUpperView = menuItem.offsetTop < dropdownMenu.scrollTop; - const isOutOfLowerView = (menuItem.offsetTop + menuItem.clientHeight) > (dropdownMenu.scrollTop + dropdownMenu.clientHeight); + const isOutOfLowerView = menuItem.offsetTop + menuItem.clientHeight > dropdownMenu.scrollTop + dropdownMenu.clientHeight; if (isOutOfUpperView) { dropdownMenu.scrollTop = menuItem.offsetTop; } else if (isOutOfLowerView) { - dropdownMenu.scrollTop = (menuItem.offsetTop + menuItem.clientHeight) - dropdownMenu.clientHeight; + dropdownMenu.scrollTop = menuItem.offsetTop + menuItem.clientHeight - dropdownMenu.clientHeight; } }; @@ -153,8 +153,8 @@ export const Dropdown = (props: IDropdown): React.JSX.Element => { }; const generateMenuOptions = () => { - return filteredItems.length - ? filteredItems.slice(0, maxNumOfItemsShown).map((item, index) => { + return filteredItems.length ? ( + filteredItems.slice(0, maxNumOfItemsShown).map((item, index) => { return ( { @@ -162,17 +162,14 @@ export const Dropdown = (props: IDropdown): React.JSX.Element => { }} selected={selectedIndex === index} key={`dropdown-menu-item-${index}`} - onClick={() => selectItem(index)} - > + onClick={() => selectItem(index)}> {(item as any)[itemKey]} ); }) - : ( - - No results found - - ); + ) : ( + No results found + ); }; const handleInput = (event: React.ChangeEvent) => { @@ -188,10 +185,7 @@ export const Dropdown = (props: IDropdown): React.JSX.Element => { return ( - ); -}; \ No newline at end of file +}; diff --git a/src/components/drop-down/style.ts b/src/components/drop-down/style.ts index 55c734b..e9262af 100644 --- a/src/components/drop-down/style.ts +++ b/src/components/drop-down/style.ts @@ -14,11 +14,13 @@ export const DropdownContainer = styled.default.div` `; export const DropdownInput = styled.default(Input)<{showMenu?: boolean}>` - ${({showMenu}) => showMenu && styled.css` - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; - border-bottom-width: 0; - `} + ${({showMenu}) => + showMenu && + styled.css` + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + border-bottom-width: 0; + `} `; export const DropdownMenu = styled.default.div` @@ -56,4 +58,4 @@ export const DropdownMenuItem = styled.default.div<{ cursor: ${disabled ? 'text' : 'pointer'}; } `} -`; \ No newline at end of file +`; diff --git a/src/components/forms/Checkbox.tsx b/src/components/forms/Checkbox.tsx index e16e9a9..4083198 100644 --- a/src/components/forms/Checkbox.tsx +++ b/src/components/forms/Checkbox.tsx @@ -44,31 +44,29 @@ const StyledCheckbox = styled.div<{checked?: boolean}>` display: inline-block; width: 1rem; height: 1rem; - background: ${({checked}) => checked ? colors.red : colors.transparent}; + background: ${({checked}) => (checked ? colors.red : colors.transparent)}; border-radius: 3px; transition: all 150ms; outline: none; - border: 1px solid ${({checked}) => checked ? 'none' : colors.gray400}; + border: 1px solid ${({checked}) => (checked ? 'none' : colors.gray400)}; ${Icon} { - visibility: ${({checked}) => checked ? 'visible' : 'hidden'} + visibility: ${({checked}) => (checked ? 'visible' : 'hidden')}; } `; -const Checkbox = ( - props: { - value: string; - id?: string; - checked?: boolean; - onChange: (event: ChangeEvent | MouseEvent) => void; - label?: string; - } -): React.JSX.Element => { +const Checkbox = (props: { + value: string; + id?: string; + checked?: boolean; + onChange: (event: ChangeEvent | MouseEvent) => void; + label?: string; +}): React.JSX.Element => { const {checked, onChange, label, id} = props; return ( - + @@ -80,4 +78,4 @@ const Checkbox = ( ); }; -export default Checkbox; \ No newline at end of file +export default Checkbox; diff --git a/src/components/forms/Checkbox/index.tsx b/src/components/forms/Checkbox/index.tsx index 216f3c7..fd8c4ee 100644 --- a/src/components/forms/Checkbox/index.tsx +++ b/src/components/forms/Checkbox/index.tsx @@ -61,28 +61,14 @@ interface CheckboxProps { className?: string; } -const Checkbox: React.FC = ({ - id, - checked, - onChange, - label, - value, - disabled = false, - className -}) => { +const Checkbox: React.FC = ({id, checked, onChange, label, value, disabled = false, className}) => { return ( - + {label && } ); }; -export default Checkbox; \ No newline at end of file +export default Checkbox; diff --git a/src/components/forms/SearchInput.tsx b/src/components/forms/SearchInput.tsx index 9ccb416..6aa42c1 100644 --- a/src/components/forms/SearchInput.tsx +++ b/src/components/forms/SearchInput.tsx @@ -40,11 +40,7 @@ export const SearchInputWrapper = styled.default.div` } `; -export const Search = ({ - search, - defaultValue = '', - minLengthForSearch = 2 -}: ISearchInput): JSX.Element => { +export const Search = ({search, defaultValue = '', minLengthForSearch = 2}: ISearchInput): JSX.Element => { const [currentSearchTerm, setCurrentSearchTerm] = useState(defaultValue); const onChange = (event: ChangeEvent): void => { setCurrentSearchTerm(event.target.value); @@ -74,4 +70,4 @@ export const Search = ({ ); }; -export default Search; \ No newline at end of file +export default Search; diff --git a/src/components/indicator-component/indicators/index.ts b/src/components/indicator-component/indicators/index.ts index 9216d82..d5c57e3 100644 --- a/src/components/indicator-component/indicators/index.ts +++ b/src/components/indicator-component/indicators/index.ts @@ -1,4 +1,4 @@ /** * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved. */ -export * from './indicators'; \ No newline at end of file +export * from './indicators'; diff --git a/src/components/indicator-component/indicators/indicators.tsx b/src/components/indicator-component/indicators/indicators.tsx index c64a5cb..69c4051 100644 --- a/src/components/indicator-component/indicators/indicators.tsx +++ b/src/components/indicator-component/indicators/indicators.tsx @@ -5,7 +5,23 @@ import {JSX} from 'react'; import {LoadingWheel as Loader} from 'components/loaders'; import {SingleStreamSymbol, OfflineSymbol, MultipleStreamSymbol, Indicator} from './style'; -export const OfflineIndicator = (): JSX.Element => ; -export const SingleStreamIndicator = (): JSX.Element => ; -export const MultiStreamIndicator = (): JSX.Element => ; -export const LoadingIndicator = (): JSX.Element => ; \ No newline at end of file +export const OfflineIndicator = (): JSX.Element => ( + + + +); +export const SingleStreamIndicator = (): JSX.Element => ( + + + +); +export const MultiStreamIndicator = (): JSX.Element => ( + + + +); +export const LoadingIndicator = (): JSX.Element => ( + + + +); diff --git a/src/components/indicator-component/indicators/style.ts b/src/components/indicator-component/indicators/style.ts index 3376622..5f5b87a 100644 --- a/src/components/indicator-component/indicators/style.ts +++ b/src/components/indicator-component/indicators/style.ts @@ -40,4 +40,4 @@ export const MultipleStreamSymbol = styled.default(SingleStreamSymbol)` height: 1rem; margin-left: -2px; box-shadow: 9px 0 0 0 #08BD0B; -`; \ No newline at end of file +`; diff --git a/src/components/indicator-component/publishing-state-indicator.tsx b/src/components/indicator-component/publishing-state-indicator.tsx index ce16536..6a5d620 100644 --- a/src/components/indicator-component/publishing-state-indicator.tsx +++ b/src/components/indicator-component/publishing-state-indicator.tsx @@ -14,11 +14,7 @@ interface IPublishingStateIndicator { idKey: string; } -const PublishingStateIndicator = ({ - row, - publishingStateKey, - idKey -}: IPublishingStateIndicator): JSX.Element => { +const PublishingStateIndicator = ({row, publishingStateKey, idKey}: IPublishingStateIndicator): JSX.Element => { const id = row[idKey]; const publishingState = useSelector((state: AppStore) => publishingStateKey && state[publishingStateKey as keyof AppStore]?.publishingState); const rowPublishingState = publishingState.find((record: Record) => record[idKey] === id); @@ -38,4 +34,4 @@ const PublishingStateIndicator = ({ return ; }; -export default PublishingStateIndicator; \ No newline at end of file +export default PublishingStateIndicator; diff --git a/src/components/label/index.ts b/src/components/label/index.ts index 3c36259..3dfd152 100644 --- a/src/components/label/index.ts +++ b/src/components/label/index.ts @@ -1 +1 @@ -export * from '../forms/label'; \ No newline at end of file +export * from '../forms/label'; diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx index a5210f0..a4efcd6 100644 --- a/src/components/modal/modal.tsx +++ b/src/components/modal/modal.tsx @@ -70,7 +70,11 @@ const Modal = (props: IModal): React.JSX.Element => { {children} - {submitButton.onClick && {submitButton.label}} + {submitButton.onClick && ( + + {submitButton.label} + + )} {!props.cancelButton || (!cancelButton.disabled && ( diff --git a/src/components/pagination/index.ts b/src/components/pagination/index.ts index 912d7ca..cf4c332 100644 --- a/src/components/pagination/index.ts +++ b/src/components/pagination/index.ts @@ -2,4 +2,4 @@ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved. */ export * from './pagination'; -export {default as Pagination} from './pagination'; \ No newline at end of file +export {default as Pagination} from './pagination'; diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx index b446f35..93ef0ac 100644 --- a/src/components/pagination/pagination.tsx +++ b/src/components/pagination/pagination.tsx @@ -2,12 +2,7 @@ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved. */ import {Fragment} from 'react'; -import { - PaginationWrapper, - ItemRange, - PaginationContainer, - PageButton -} from './style'; +import {PaginationWrapper, ItemRange, PaginationContainer, PageButton} from './style'; interface IPagination { currentPageNumber: number; @@ -27,8 +22,8 @@ export const Pagination = (props: IPagination): JSX.Element => { setCurrentPage(page); }; - const minimumItemBoundPerPage = ((currentPageNumber - 1) * itemsPerPage) + 1; - const maximumItemBoundPerPage = (currentPageNumber) * itemsPerPage; + const minimumItemBoundPerPage = (currentPageNumber - 1) * itemsPerPage + 1; + const maximumItemBoundPerPage = currentPageNumber * itemsPerPage; const generateButtons = (bounds = 1): JSX.Element[] => { const buttonToShow = maxNumberOfButtonsToShow > totalNumberOfPages ? totalNumberOfPages : maxNumberOfButtonsToShow; const buttons = []; @@ -36,7 +31,7 @@ export const Pagination = (props: IPagination): JSX.Element => { if (currentPageNumber <= bounds) { count = 1; - } else if ((currentPageNumber + bounds) > totalNumberOfPages) { + } else if (currentPageNumber + bounds > totalNumberOfPages) { count = currentPageNumber - (buttonToShow - (totalNumberOfPages - currentPageNumber + 1)); } else { count = currentPageNumber - bounds; @@ -44,10 +39,7 @@ export const Pagination = (props: IPagination): JSX.Element => { for (let y = 0; y < buttonToShow; y++) { buttons.push( - setPage(count + y)} - active={currentPageNumber === count + y}> + setPage(count + y)} active={currentPageNumber === count + y}> {count + y} ); @@ -60,28 +52,29 @@ export const Pagination = (props: IPagination): JSX.Element => { {numberOfItems ? ( - {(currentPageNumber >= LowerBoundLimit) && ( + {currentPageNumber >= LowerBoundLimit && ( {currentPageNumber > 2 && totalNumberOfPages !== 3 && setPage(1)}>1} - {(currentPageNumber > LowerBoundLimit) && currentPageNumber !== 3 &&

...

} + {currentPageNumber > LowerBoundLimit && currentPageNumber !== 3 &&

...

} )} {generateButtons()} - {(currentPageNumber <= totalNumberOfPages - higherBoundLimit) && ( + {currentPageNumber <= totalNumberOfPages - higherBoundLimit && ( - {(currentPageNumber < totalNumberOfPages - higherBoundLimit) && currentPageNumber + 2 !== totalNumberOfPages &&

...

} - {currentPageNumber + 1 !== totalNumberOfPages && totalNumberOfPages !== 3 && setPage(totalNumberOfPages)}> - {totalNumberOfPages} - } + {currentPageNumber < totalNumberOfPages - higherBoundLimit && currentPageNumber + 2 !== totalNumberOfPages &&

...

} + {currentPageNumber + 1 !== totalNumberOfPages && totalNumberOfPages !== 3 && ( + setPage(totalNumberOfPages)}>{totalNumberOfPages} + )} )} ) : null} - {numberOfItems > 0 ? minimumItemBoundPerPage : 0} - {maximumItemBoundPerPage > numberOfItems ? numberOfItems : maximumItemBoundPerPage} of {numberOfItems} {itemText ? itemText : `channels`} + {numberOfItems > 0 ? minimumItemBoundPerPage : 0} - {maximumItemBoundPerPage > numberOfItems ? numberOfItems : maximumItemBoundPerPage} of{' '} + {numberOfItems} {itemText ? itemText : `channels`} ); }; -export default Pagination; \ No newline at end of file +export default Pagination; diff --git a/src/components/pagination/style.tsx b/src/components/pagination/style.tsx index 5b9d99e..fe73228 100644 --- a/src/components/pagination/style.tsx +++ b/src/components/pagination/style.tsx @@ -4,12 +4,7 @@ import * as styled from 'styled-components'; import {theme, paddings} from 'components/shared/theme'; -const { - colors, - fontSizeS, - spacing, - primaryThemeColor -} = theme; +const {colors, fontSizeS, spacing, primaryThemeColor} = theme; export const PaginationContainer = styled.default.div` display: flex; @@ -32,7 +27,7 @@ export const ItemRange = styled.default.div` color: ${colors.lightBlue}; `; -export const PageButton = styled.default.button <{active?: boolean}>` +export const PageButton = styled.default.button<{active?: boolean}>` margin: 0 ${paddings.xsmall} ${paddings.xsmall} 0; font-size: ${fontSizeS}; border: 1px solid ${primaryThemeColor}; @@ -40,6 +35,6 @@ export const PageButton = styled.default.button <{active?: boolean}>` height: 28px; width: 36px; cursor: pointer; - background-color: ${({active}) => active ? primaryThemeColor : 'transparent'}; - color: ${({active}) => active ? colors.white : primaryThemeColor}; -`; \ No newline at end of file + background-color: ${({active}) => (active ? primaryThemeColor : 'transparent')}; + color: ${({active}) => (active ? colors.white : primaryThemeColor)}; +`; diff --git a/src/components/restricted-text/index.ts b/src/components/restricted-text/index.ts index 2402e4f..a3b7aa8 100644 --- a/src/components/restricted-text/index.ts +++ b/src/components/restricted-text/index.ts @@ -3,4 +3,4 @@ */ export {default as RestrictedTextWithLabel} from './restricted-text-with-label'; export {default as RestrictedText} from './restricted-text'; -export * from './restricted-text'; \ No newline at end of file +export * from './restricted-text'; diff --git a/src/components/restricted-text/restricted-text-with-label.tsx b/src/components/restricted-text/restricted-text-with-label.tsx index 2b1b9c9..19c69e0 100644 --- a/src/components/restricted-text/restricted-text-with-label.tsx +++ b/src/components/restricted-text/restricted-text-with-label.tsx @@ -14,16 +14,12 @@ interface IRestrictedTextWithLabel { labelIcon?: JSX.Element; } -const RestrictedTextWithLabel = ({ - label, - text, - labelIcon, - isLink = false, - linkClassName = '' -}: IRestrictedTextWithLabel): JSX.Element => { +const RestrictedTextWithLabel = ({label, text, labelIcon, isLink = false, linkClassName = ''}: IRestrictedTextWithLabel): JSX.Element => { return ( - {label} {labelIcon} + + {label} {labelIcon} + @@ -31,4 +27,4 @@ const RestrictedTextWithLabel = ({ ); }; -export default RestrictedTextWithLabel; \ No newline at end of file +export default RestrictedTextWithLabel; diff --git a/src/components/restricted-text/restricted-text.tsx b/src/components/restricted-text/restricted-text.tsx index f59b04c..399add4 100644 --- a/src/components/restricted-text/restricted-text.tsx +++ b/src/components/restricted-text/restricted-text.tsx @@ -66,21 +66,12 @@ export const RestrictedText = ({ const handleShowValueChange = () => setShowValue(!showValue); const CurrentTextView = (): JSX.Element => { if (isLink && !linkValue) { - return ( - - ); + return ; } if (isLink && linkValue) { return ( - + {text} ); @@ -104,12 +95,10 @@ export const RestrictedText = ({ className={`${isLink ? 'testId-permalink' : ''} testId-viewDetails`} /> )} - {hasCopyOption && ( - - )} + {hasCopyOption && } ); }; -export default RestrictedText; \ No newline at end of file +export default RestrictedText; diff --git a/src/components/restricted-text/style.ts b/src/components/restricted-text/style.ts index 13d2173..1b09979 100644 --- a/src/components/restricted-text/style.ts +++ b/src/components/restricted-text/style.ts @@ -5,11 +5,7 @@ import * as styled from 'styled-components'; import Theme from 'theme'; -const { - colors, - typography, - spacing, -} = Theme; +const {colors, typography, spacing} = Theme; export const RestrictedDiv = styled.default.div` display: flex; @@ -93,4 +89,4 @@ export const RestrictedRowText = styled.default.div` text-decoration: none; font-size: ${typography.fontSizeS}; } -`; \ No newline at end of file +`; diff --git a/src/components/table-screen-header/index.ts b/src/components/table-screen-header/index.ts index 230cbc2..1f19bfa 100644 --- a/src/components/table-screen-header/index.ts +++ b/src/components/table-screen-header/index.ts @@ -1,4 +1,4 @@ /** * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved. */ -export {default as TableScreenHeader} from './table-screen-header'; \ No newline at end of file +export {default as TableScreenHeader} from './table-screen-header'; diff --git a/src/components/table-screen-header/style.tsx b/src/components/table-screen-header/style.tsx index 76a45b8..ed441a2 100644 --- a/src/components/table-screen-header/style.tsx +++ b/src/components/table-screen-header/style.tsx @@ -34,4 +34,4 @@ export const HeaderTitle = styled.default.div` p { color: ${colors.gray200}; } -`; \ No newline at end of file +`; diff --git a/src/components/table-screen-header/table-screen-header.tsx b/src/components/table-screen-header/table-screen-header.tsx index cf1c39f..f202c3d 100644 --- a/src/components/table-screen-header/table-screen-header.tsx +++ b/src/components/table-screen-header/table-screen-header.tsx @@ -2,11 +2,7 @@ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved. */ import {JSX} from 'react'; -import { - ITableWithLoadMoreHeader, - ITableWithPaginationHeader, - TableHeaderKey -} from 'interfaces/tableProps'; +import {ITableWithLoadMoreHeader, ITableWithPaginationHeader, TableHeaderKey} from 'interfaces/tableProps'; import {ScreenHeader, ScreenHeaderControls, HeaderControlWrapper, HeaderTitle} from './style'; type ScreenHeaderProps = ITableWithLoadMoreHeader | ITableWithPaginationHeader; @@ -18,12 +14,7 @@ export interface ITableScreenHeader { renderControl: (screenHeader: ScreenHeaderProps, key: TableHeaderKey) => JSX.Element | null; } -export const TableScreenHeader = ({ - title, - subtitle = '', - screenHeader, - renderControl -}: ITableScreenHeader): JSX.Element => { +export const TableScreenHeader = ({title, subtitle = '', screenHeader, renderControl}: ITableScreenHeader): JSX.Element => { return ( @@ -32,17 +23,13 @@ export const TableScreenHeader = ({ {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(screenHeader, key as TableHeaderKey); - return headerControl ? ( - {headerControl} - ) : null; + return headerControl ? {headerControl} : null; })} ); }; -export default TableScreenHeader; \ No newline at end of file +export default TableScreenHeader; diff --git a/src/components/table-with-pagination/index.ts b/src/components/table-with-pagination/index.ts index ce59abe..43e627d 100644 --- a/src/components/table-with-pagination/index.ts +++ b/src/components/table-with-pagination/index.ts @@ -3,4 +3,4 @@ */ export * from 'components/table'; export {default as TableWithPagination} from './table-with-pagination'; -export {default as Pagination} from '../pagination/pagination'; \ No newline at end of file +export {default as Pagination} from '../pagination/pagination'; diff --git a/src/components/table-with-pagination/table-with-pagination.tsx b/src/components/table-with-pagination/table-with-pagination.tsx index ea4fe7e..b1a091c 100644 --- a/src/components/table-with-pagination/table-with-pagination.tsx +++ b/src/components/table-with-pagination/table-with-pagination.tsx @@ -3,20 +3,13 @@ */ import {useEffect, useState} from 'react'; -import { - DataRowType, - Table, - TableHeaderKey, - ITable, - ITableWithPaginationHeader, - ITableSort -} from 'components/table'; +import {DataRowType, Table, TableHeaderKey, ITable, ITableWithPaginationHeader, ITableSort} from 'components/table'; import {isEqual} from 'utility/validators'; import SearchInput from 'components/forms/SearchInput'; import {compare} from 'utility/sort'; import {TableScreenHeader} from 'components/table-screen-header/table-screen-header'; import {AddButton} from 'components/buttons/icon-buttons'; -import {Pagination} from 'components/pagination/pagination' ; +import {Pagination} from 'components/pagination/pagination'; import {Select} from 'components/ui/select'; import {useSort, useSearch} from 'utility/custom-hooks'; @@ -128,9 +121,7 @@ const TableWithPagination = ({ useEffect(() => { const start = (currentPageNumber - 1) * rowsCount; - const sortedData = sortData - ? filteredData.sort((a, b) => compare(a, b, sortData.sortDirection, sortData.sortColumn)) - : filteredData; + const sortedData = sortData ? filteredData.sort((a, b) => compare(a, b, sortData.sortDirection, sortData.sortColumn)) : filteredData; const newCurrentData = sortedData.slice(start, start + rowsCount); if (!isEqual(newCurrentData, currentData)) { @@ -177,20 +168,8 @@ const TableWithPagination = ({ return ( <> - - + +
{ try { logger.debug('Fetching channel list'); - + if (!this.phenixChannelService) { return PCastApiService.channels.list(); } - + return await this.phenixChannelService.list(); } catch (error) { logger.error('Failed to list channels', error); @@ -83,7 +81,7 @@ class ChannelService { async createChannel(params: CreateChannelParams): Promise { try { logger.debug('Creating channel', params); - + const channelData = { name: params.name, alias: params.alias, @@ -95,7 +93,7 @@ class ChannelService { if (!this.phenixChannelService) { return PCastApiService.channels.create(name, description, options); } - + return await this.phenixChannelService.create(channelData); } catch (error) { logger.error('Failed to create channel', error); @@ -109,19 +107,19 @@ class ChannelService { async updateChannel(params: UpdateChannelParams): Promise { try { logger.debug('Updating channel', params); - + const updateData = { - ...params.name && { name: params.name }, - ...params.alias && { alias: params.alias }, - ...params.description && { description: params.description }, - ...params.tags && { tags: params.tags }, - ...params.capabilities && { capabilities: params.capabilities } + ...(params.name && {name: params.name}), + ...(params.alias && {alias: params.alias}), + ...(params.description && {description: params.description}), + ...(params.tags && {tags: params.tags}), + ...(params.capabilities && {capabilities: params.capabilities}) }; if (!this.phenixChannelService) { return PCastApiService.channels.update(params.channelId, updateData); } - + return await this.phenixChannelService.update(params.channelId, updateData); } catch (error) { logger.error('Failed to update channel', error); @@ -135,11 +133,11 @@ class ChannelService { async deleteChannel(params: DeleteChannelParams): Promise { try { logger.debug('Deleting channel', params); - + if (!this.phenixChannelService) { return PCastApiService.channels.delete(params.channelId); } - + await this.phenixChannelService.delete(params.channelId); } catch (error) { logger.error('Failed to delete channel', error); @@ -153,7 +151,7 @@ class ChannelService { async forkChannel(params: ForkChannelParams): Promise { try { logger.debug('Forking channel', params); - + const forkData = { destinationChannelId: params.destinationChannelId, streamCapabilities: params.streamCapabilities || [], @@ -165,7 +163,7 @@ class ChannelService { if (!this.phenixChannelService) { return PCastApiService.channels.fork(params.sourceChannelId, forkData); } - + await this.phenixChannelService.fork(params.sourceChannelId, forkData); } catch (error) { logger.error('Failed to fork channel', error); @@ -179,7 +177,7 @@ class ChannelService { async killChannel(params: KillChannelParams): Promise { try { logger.debug('Killing channel', params); - + const killData = { reason: params.reason || 'portal:killed', options: params.options || [] @@ -188,7 +186,7 @@ class ChannelService { if (!this.phenixChannelService) { return PCastApiService.channels.kill(params.channelId, killData); } - + await this.phenixChannelService.kill(params.channelId, killData); } catch (error) { logger.error('Failed to kill channel', error); @@ -201,12 +199,12 @@ class ChannelService { */ async getChannel(channelId: string): Promise { try { - logger.debug('Getting channel', { channelId }); - + logger.debug('Getting channel', {channelId}); + if (!this.phenixChannelService) { return PCastApiService.channels.get(channelId); } - + return await this.phenixChannelService.get(channelId); } catch (error) { logger.error('Failed to get channel', error); @@ -219,12 +217,12 @@ class ChannelService { */ async getPublisherCount(channelId: string): Promise { try { - logger.debug('Getting publisher count', { channelId }); - + logger.debug('Getting publisher count', {channelId}); + if (!this.phenixChannelService) { return PCastApiService.channels.getPublisherCount(channelId); } - + return await this.phenixChannelService.getPublisherCount(channelId); } catch (error) { logger.error('Failed to get publisher count', error); @@ -246,4 +244,4 @@ export const killChannel = channelService.killChannel.bind(channelService); export const getChannel = channelService.getChannel.bind(channelService); export const getPublisherCount = channelService.getPublisherCount.bind(channelService); -export default channelService; \ No newline at end of file +export default channelService; diff --git a/src/services/PlatformDetection.service.ts b/src/services/PlatformDetection.service.ts index aac00a4..0bee036 100644 --- a/src/services/PlatformDetection.service.ts +++ b/src/services/PlatformDetection.service.ts @@ -188,4 +188,4 @@ export default class PlatformDetectionService { return match ? match[1] : null; } -} \ No newline at end of file +} diff --git a/src/store/action/channels-publishing.ts b/src/store/action/channels-publishing.ts index cded6e0..09cc78e 100644 --- a/src/store/action/channels-publishing.ts +++ b/src/store/action/channels-publishing.ts @@ -30,8 +30,7 @@ const initialState: ChannelsPublishingState = { }; // Selectors -export const channelsPublishingSelector = (state: RootState): ChannelsPublishingState => - state.channelsPublishing; +export const channelsPublishingSelector = (state: RootState): ChannelsPublishingState => state.channelsPublishing; export const selectChannelsPublishingState = createSelector( [channelsPublishingSelector], @@ -45,8 +44,7 @@ export const selectChannelsPublishingLoading = createSelector( export const selectChannelPublishingState = createSelector( [selectChannelsPublishingState, (_: RootState, channelId: string) => channelId], - (publishingStates: ChannelPublishingState[], channelId: string) => - publishingStates.find(state => state.channelId === channelId) + (publishingStates: ChannelPublishingState[], channelId: string) => publishingStates.find(state => state.channelId === channelId) ); // Async thunks @@ -108,7 +106,7 @@ const channelsPublishingSlice = createSlice({ name: 'channelsPublishing', initialState, reducers: { - clearPublishingState: (state) => { + clearPublishingState: state => { state.publishingState = []; state.error = null; }, @@ -116,10 +114,8 @@ const channelsPublishingSlice = createSlice({ state.error = action.payload; }, updateChannelState: (state, action: PayloadAction) => { - const index = state.publishingState.findIndex( - item => item.channelId === action.payload.channelId - ); - + const index = state.publishingState.findIndex(item => item.channelId === action.payload.channelId); + if (index >= 0) { state.publishingState[index] = action.payload; } else { @@ -127,9 +123,9 @@ const channelsPublishingSlice = createSlice({ } } }, - extraReducers: (builder) => { + extraReducers: builder => { builder - .addCase(fetchChannelsPublishingState.pending, (state) => { + .addCase(fetchChannelsPublishingState.pending, state => { state.isLoading = true; state.error = null; }) @@ -144,10 +140,8 @@ const channelsPublishingSlice = createSlice({ state.error = action.payload as string; }) .addCase(updateChannelPublishingState.fulfilled, (state, action) => { - const index = state.publishingState.findIndex( - item => item.channelId === action.payload.channelId - ); - + const index = state.publishingState.findIndex(item => item.channelId === action.payload.channelId); + if (index >= 0) { state.publishingState[index] = action.payload; } else { @@ -161,4 +155,4 @@ const channelsPublishingSlice = createSlice({ }); export const {clearPublishingState, setPublishingError, updateChannelState} = channelsPublishingSlice.actions; -export default channelsPublishingSlice.reducer; \ No newline at end of file +export default channelsPublishingSlice.reducer; diff --git a/src/store/action/channels.ts b/src/store/action/channels.ts index e7873e6..bad0fce 100644 --- a/src/store/action/channels.ts +++ b/src/store/action/channels.ts @@ -9,118 +9,85 @@ import {IChannelsState} from '../slices/Channels.slice'; // Selectors export const channelsSelector = (state: RootState): IChannelsState => state.channels; -export const selectChannelList = createSelector( - [channelsSelector], - (channels: IChannelsState) => channels.channels -); +export const selectChannelList = createSelector([channelsSelector], (channels: IChannelsState) => channels.channels); -export const selectChannelsLoading = createSelector( - [channelsSelector], - (channels: IChannelsState) => channels.isLoading -); +export const selectChannelsLoading = createSelector([channelsSelector], (channels: IChannelsState) => channels.isLoading); -export const selectChannelsError = createSelector( - [channelsSelector], - (channels: IChannelsState) => channels.error -); +export const selectChannelsError = createSelector([channelsSelector], (channels: IChannelsState) => channels.error); -export const selectSelectedChannel = createSelector( - [channelsSelector], - (channels: IChannelsState) => channels.selectedChannel -); +export const selectSelectedChannel = createSelector([channelsSelector], (channels: IChannelsState) => channels.selectedChannel); // Async thunks for channel operations -export const listChannels = createAsyncThunk( - 'channels/listChannels', - async (_, {rejectWithValue}) => { - try { - const channels = await channelService.listChannels(); - return channels; - } catch (error) { - return rejectWithValue(error instanceof Error ? error.message : 'Failed to fetch channels'); - } +export const listChannels = createAsyncThunk('channels/listChannels', async (_, {rejectWithValue}) => { + try { + const channels = await channelService.listChannels(); + return channels; + } catch (error) { + return rejectWithValue(error instanceof Error ? error.message : 'Failed to fetch channels'); } -); +}); -export const createChannelThunk = createAsyncThunk( - 'channels/createChannel', - async (params: CreateChannelParams, {rejectWithValue, dispatch}) => { - try { - const newChannel = await channelService.createChannel(params); - // Refresh the channel list after creation - dispatch(listChannels()); - return newChannel; - } catch (error) { - return rejectWithValue(error instanceof Error ? error.message : 'Failed to create channel'); - } +export const createChannelThunk = createAsyncThunk('channels/createChannel', async (params: CreateChannelParams, {rejectWithValue, dispatch}) => { + try { + const newChannel = await channelService.createChannel(params); + // Refresh the channel list after creation + dispatch(listChannels()); + return newChannel; + } catch (error) { + return rejectWithValue(error instanceof Error ? error.message : 'Failed to create channel'); } -); +}); -export const deleteChannelThunk = createAsyncThunk( - 'channels/deleteChannel', - async (params: DeleteChannelParams, {rejectWithValue, dispatch}) => { - try { - await channelService.deleteChannel(params); - // Refresh the channel list after deletion - dispatch(listChannels()); - return params.channelId; - } catch (error) { - return rejectWithValue(error instanceof Error ? error.message : 'Failed to delete channel'); - } +export const deleteChannelThunk = createAsyncThunk('channels/deleteChannel', async (params: DeleteChannelParams, {rejectWithValue, dispatch}) => { + try { + await channelService.deleteChannel(params); + // Refresh the channel list after deletion + dispatch(listChannels()); + return params.channelId; + } catch (error) { + return rejectWithValue(error instanceof Error ? error.message : 'Failed to delete channel'); } -); +}); -export const forkChannelThunk = createAsyncThunk( - 'channels/forkChannel', - async (params: ForkChannelParams, {rejectWithValue, dispatch}) => { - try { - await channelService.forkChannel(params); - // Refresh the channel list after forking - dispatch(listChannels()); - return params; - } catch (error) { - return rejectWithValue(error instanceof Error ? error.message : 'Failed to fork channel'); - } +export const forkChannelThunk = createAsyncThunk('channels/forkChannel', async (params: ForkChannelParams, {rejectWithValue, dispatch}) => { + try { + await channelService.forkChannel(params); + // Refresh the channel list after forking + dispatch(listChannels()); + return params; + } catch (error) { + return rejectWithValue(error instanceof Error ? error.message : 'Failed to fork channel'); } -); +}); -export const killChannelThunk = createAsyncThunk( - 'channels/killChannel', - async (params: KillChannelParams, {rejectWithValue, dispatch}) => { - try { - await channelService.killChannel(params); - // Refresh the channel list after killing - dispatch(listChannels()); - return params.channelId; - } catch (error) { - return rejectWithValue(error instanceof Error ? error.message : 'Failed to kill channel'); - } +export const killChannelThunk = createAsyncThunk('channels/killChannel', async (params: KillChannelParams, {rejectWithValue, dispatch}) => { + try { + await channelService.killChannel(params); + // Refresh the channel list after killing + dispatch(listChannels()); + return params.channelId; + } catch (error) { + return rejectWithValue(error instanceof Error ? error.message : 'Failed to kill channel'); } -); +}); -export const getChannelThunk = createAsyncThunk( - 'channels/getChannel', - async (channelId: string, {rejectWithValue}) => { - try { - const channel = await channelService.getChannel(channelId); - return channel; - } catch (error) { - return rejectWithValue(error instanceof Error ? error.message : 'Failed to get channel'); - } +export const getChannelThunk = createAsyncThunk('channels/getChannel', async (channelId: string, {rejectWithValue}) => { + try { + const channel = await channelService.getChannel(channelId); + return channel; + } catch (error) { + return rejectWithValue(error instanceof Error ? error.message : 'Failed to get channel'); } -); +}); -export const getPublisherCountThunk = createAsyncThunk( - 'channels/getPublisherCount', - async (channelId: string, {rejectWithValue}) => { - try { - const count = await channelService.getPublisherCount(channelId); - return {channelId, count}; - } catch (error) { - return rejectWithValue(error instanceof Error ? error.message : 'Failed to get publisher count'); - } +export const getPublisherCountThunk = createAsyncThunk('channels/getPublisherCount', async (channelId: string, {rejectWithValue}) => { + try { + const count = await channelService.getPublisherCount(channelId); + return {channelId, count}; + } catch (error) { + return rejectWithValue(error instanceof Error ? error.message : 'Failed to get publisher count'); } -); +}); // Export all actions and selectors -export * from '../slices/Channels.slice'; \ No newline at end of file +export * from '../slices/Channels.slice'; diff --git a/src/store/action/screens.ts b/src/store/action/screens.ts index 38272ad..cd00879 100644 --- a/src/store/action/screens.ts +++ b/src/store/action/screens.ts @@ -10,7 +10,7 @@ export enum StoreScreensType { ChannelDetail = 'channelDetail', Settings = 'settings', Login = 'login', - Channels = "Channels" + Channels = 'Channels' } // Screen state interface @@ -35,25 +35,13 @@ const initialState: ScreenState = { // Selectors export const screensSelector = (state: RootState): ScreenState => state.screens; -export const selectCurrentScreen = createSelector( - [screensSelector], - (screens: ScreenState) => screens.currentScreen -); +export const selectCurrentScreen = createSelector([screensSelector], (screens: ScreenState) => screens.currentScreen); -export const selectScreenProps = createSelector( - [screensSelector], - (screens: ScreenState) => screens.screenProps -); +export const selectScreenProps = createSelector([screensSelector], (screens: ScreenState) => screens.screenProps); -export const selectPreviousScreen = createSelector( - [screensSelector], - (screens: ScreenState) => screens.previousScreen -); +export const selectPreviousScreen = createSelector([screensSelector], (screens: ScreenState) => screens.previousScreen); -export const selectNavigationHistory = createSelector( - [screensSelector], - (screens: ScreenState) => screens.navigationHistory -); +export const selectNavigationHistory = createSelector([screensSelector], (screens: ScreenState) => screens.navigationHistory); // Slice const screensSlice = createSlice({ @@ -63,7 +51,7 @@ const screensSlice = createSlice({ setCurrentScreen: (state, action: PayloadAction) => { state.previousScreen = state.currentScreen; state.currentScreen = action.payload; - + // Add to navigation history (keep last 10) state.navigationHistory.push(action.payload); if (state.navigationHistory.length > 10) { @@ -82,28 +70,28 @@ const screensSlice = createSlice({ navigateToScreen: (state, action: PayloadAction<{screen: StoreScreensType; props?: ScreenProps}>) => { state.previousScreen = state.currentScreen; state.currentScreen = action.payload.screen; - + if (action.payload.props) { state.screenProps = action.payload.props; } - + // Add to navigation history state.navigationHistory.push(action.payload.screen); if (state.navigationHistory.length > 10) { state.navigationHistory.shift(); } }, - navigateBack: (state) => { + navigateBack: state => { if (state.previousScreen) { const temp = state.currentScreen; state.currentScreen = state.previousScreen; state.previousScreen = temp; } }, - clearScreenProps: (state) => { + clearScreenProps: state => { state.screenProps = {}; }, - resetNavigation: (state) => { + resetNavigation: state => { state.currentScreen = StoreScreensType.Login; state.previousScreen = null; state.screenProps = {}; @@ -112,14 +100,6 @@ const screensSlice = createSlice({ } }); -export const { - setCurrentScreen, - setScreenProps, - updateScreenProps, - navigateToScreen, - navigateBack, - clearScreenProps, - resetNavigation -} = screensSlice.actions; +export const {setCurrentScreen, setScreenProps, updateScreenProps, navigateToScreen, navigateBack, clearScreenProps, resetNavigation} = screensSlice.actions; -export default screensSlice.reducer; \ No newline at end of file +export default screensSlice.reducer; diff --git a/src/store/middlewares/authenticationMiddleware.ts b/src/store/middlewares/authenticationMiddleware.ts index 76253ab..7f83955 100644 --- a/src/store/middlewares/authenticationMiddleware.ts +++ b/src/store/middlewares/authenticationMiddleware.ts @@ -56,13 +56,13 @@ export const authenticateRequestMiddleware: Middleware = store => next => async try { console.log('[authenticateRequest] Attempting auto-authentication'); // Use the Redux thunk to properly update the state - const authResult = await store.dispatch(authenticateCredentialsThunk({ applicationId, secret }) as any); + const authResult = await store.dispatch(authenticateCredentialsThunk({applicationId, secret}) as any); if (authResult.type.endsWith('/rejected') || authResult.payload === 'Authentication failed') { console.log('[authenticateRequest] Authentication failed'); return next(setUnauthorized()); } - + console.log('[authenticateRequest] Auto-authentication successful, proceeding with action'); return next(action); } catch (error) { diff --git a/src/store/reducers/screens.ts b/src/store/reducers/screens.ts index 5fa9817..e60e4cc 100644 --- a/src/store/reducers/screens.ts +++ b/src/store/reducers/screens.ts @@ -4,4 +4,4 @@ // Re-export from the action module for backwards compatibility export {StoreScreensType} from '../action/screens'; -export type {ScreenState, ScreenProps} from '../action/screens'; \ No newline at end of file +export type {ScreenState, ScreenProps} from '../action/screens'; diff --git a/src/store/slices/Channels.slice.ts b/src/store/slices/Channels.slice.ts index c4890e2..fc86c2d 100644 --- a/src/store/slices/Channels.slice.ts +++ b/src/store/slices/Channels.slice.ts @@ -24,7 +24,6 @@ export const selectChannelList = createSelector([selectChannels], channels => ch export const fetchChannelList = createAsyncThunk('channels/fetchChannelList', async (_, {rejectWithValue}) => { try { return PCastApiService.channels.list(); - } catch (error) { return rejectWithValue(error); } diff --git a/src/theme/index.ts b/src/theme/index.ts index 95250c7..2be3593 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -57,7 +57,7 @@ export class Theme { } static get background() { - return Theme + return Theme; } } diff --git a/src/views/ChannelList/ChannelList.tsx b/src/views/ChannelList/ChannelList.tsx index ce9454d..a87f799 100644 --- a/src/views/ChannelList/ChannelList.tsx +++ b/src/views/ChannelList/ChannelList.tsx @@ -18,9 +18,11 @@ import {columns} from './columns-config'; import {CreateChannelModal} from './create-channel'; const POLLING_INTERVAL = 5000; // 5 seconds -const ChannelListLoading = () =>
- -
+const ChannelListLoading = () => ( +
+ +
+); export const ChannelList = (): React.JSX.Element => { const dispatch = useAppDispatch(); @@ -37,7 +39,6 @@ export const ChannelList = (): React.JSX.Element => { // Memoized columns to prevent unnecessary re-renders const channelsColumns = React.useMemo(() => ({...columns}), []); - // Load channels on component mount useEffect(() => { dispatch(listChannels()); @@ -64,14 +65,17 @@ export const ChannelList = (): React.JSX.Element => { }, [dispatch, channels.length, isFetching]); // Memoized screen header to prevent unnecessary re-renders - const screenHeader: ITableWithPaginationHeader = React.useMemo(() => ({ - [TableHeaderKey.Search]: {}, - [TableHeaderKey.AddRow]: { - openAddRowModal: () => { - setCreateChannelModalOpened(true); + 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) => { @@ -90,10 +94,7 @@ export const ChannelList = (): React.JSX.Element => { {(channelListErrorMessages as Record)[error] || error} - @@ -104,37 +105,31 @@ export const ChannelList = (): React.JSX.Element => { return (
- {isFetching ? : channels.length === 0 ? ( -
-
-

No channels found

-

Get started by creating your first channel.

- -
-
- ) : ( - - )} + {isFetching ? ( + + ) : channels.length === 0 ? ( +
+
+

No channels found

+

Get started by creating your first channel.

+ +
+
+ ) : ( + + )} - {isCreateChannelModalOpened && ( - - )} + {isCreateChannelModalOpened && }
); };