format

- Removed the dropdown component and its associated styles, as well as the publishing state indicator and related files, to streamline the codebase and eliminate unused features

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;

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`

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<string | null>(null);
   const [tags, setTags] = useState<string[]>([]);
   const [forkOptions, setForkOptions] = useState<string[]>([]);

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<string | null>(null);
   const [enteredAlias, setEnteredAlias] = useState('');
   const [reason, setReason] = useState(defaultReason);

src/components/create-token-components/capabilities.tsx

@@ -50,7 +50,11 @@ export const Capabilities = ({
       allowMultiple={allowMultiple}
       label={label}
       labelColor={labelColor}
-      labelIcon={capabilitiesSetTitle !== CapabilitiesType.Quality ? <NewTabLink link={documentationLinks.supportedStreamCapabilities} icon={faQuestionCircle} iconColor={iconColor} /> : undefined}
+      labelIcon={
+        capabilitiesSetTitle !== CapabilitiesType.Quality ? (
+          <NewTabLink link={documentationLinks.supportedStreamCapabilities} icon={faQuestionCircle} iconColor={iconColor} />
+        ) : undefined
+      }
       data={capabilitiesSet}
       selectedItems={selectedItems}
       setSelectedItems={setSelectedItems}

src/components/create-token-components/index.tsx

@@ -14,14 +14,7 @@ interface CapabilitiesProps {
   setSelectedItems: (items: IAdvancedSelectItem[]) => void;
 }
 
-export const Capabilities: React.FC<CapabilitiesProps> = ({
+export const Capabilities: React.FC<CapabilitiesProps> = ({label, labelColor, iconColor, capabilitiesSetTitle, selectedItems, setSelectedItems}) => {
-  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'},

src/components/create-token-components/label-icon-tooltip.tsx

@@ -14,11 +14,7 @@ interface ILabelIconTooltip {
 }
 
 export const LabelIconTooltip = ({message, icon, position}: ILabelIconTooltip): React.JSX.Element => (
-  <Tooltip
+  <Tooltip position={position || Position.Right} message={message} width={300}>
-    position={position || Position.Right}
-    message={message}
-    width={300}
-  >
     <FontAwesomeIcon icon={icon || faQuestionCircle} />
   </Tooltip>
 );

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 {
+const {spacing, colors} = theme;
-  spacing,
-  colors
-} = theme;
 
 export const CreateTokenContainer = styled.default.div`
   margin: 0.5rem 0 0;

src/components/create-token-components/validity-time.tsx

@@ -48,11 +48,7 @@ export const ValidityTimeComponent = ({currentValue, onChange}: IValidityTimeCom
   <Fragment>
     <Label text="Valid For:" color="white" />
     <RadioButtonContainer className="testId-expirationTime">
-      <RadioButtonGroup
+      <RadioButtonGroup items={Object.values(validityTimeOptions)} currentValue={currentValue} handleOnChange={onChange} />
-        items={Object.values(validityTimeOptions)}
-        currentValue={currentValue}
-        handleOnChange={onChange}
-      />
     </RadioButtonContainer>
   </Fragment>
 );

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 = ({
+export const DateComponent = ({date, className}: {date: Moment; className?: string}): JSX.Element => {
-  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,12 +33,7 @@ export const DateComponent = ({
   };
 
   return (
-    <p
+    <p onMouseEnter={onMouseEnter} onMouseOut={onMouseOut} onBlur={onBlur} className={className}>
-      onMouseEnter={onMouseEnter}
-      onMouseOut={onMouseOut}
-      onBlur={onBlur}
-      className={className}
-    >
       {currentDate}
     </p>
   );

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
+    return filteredItems.length ? (
-      ? filteredItems.slice(0, maxNumOfItemsShown).map((item, index) => {
+      filteredItems.slice(0, maxNumOfItemsShown).map((item, index) => {
         return (
           <DropdownMenuItem
             ref={ref => {
@@ -162,16 +162,13 @@ 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]}
           </DropdownMenuItem>
         );
       })
-      : (
+    ) : (
-        <DropdownMenuItem disabled={true}>
+      <DropdownMenuItem disabled={true}>No results found</DropdownMenuItem>
-          No results found
-        </DropdownMenuItem>
     );
   };
 
@@ -188,10 +185,7 @@ export const Dropdown = (props: IDropdown): React.JSX.Element => {
 
   return (
     <DropdownContainer>
-      <Label
+      <Label htmlFor="autocomplete" text={label} />
-        htmlFor="autocomplete"
-        text={label}
-      />
       <DropdownInput
         onKeyDown={handleOnKeyDown}
         showMenu={showDropdownMenu}

src/components/drop-down/style.ts

@@ -14,7 +14,9 @@ export const DropdownContainer = styled.default.div`
 `;
 
 export const DropdownInput = styled.default(Input)<{showMenu?: boolean}>`
-  ${({showMenu}) => showMenu && styled.css`
+  ${({showMenu}) =>
+    showMenu &&
+    styled.css`
       border-bottom-left-radius: 0px;
       border-bottom-right-radius: 0px;
       border-bottom-width: 0;

src/components/forms/Checkbox.tsx

@@ -44,25 +44,23 @@ 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 = (
+const Checkbox = (props: {
-  props: {
   value: string;
   id?: string;
   checked?: boolean;
   onChange: (event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLDivElement>) => void;
   label?: string;
-  }
+}): React.JSX.Element => {
-): React.JSX.Element => {
   const {checked, onChange, label, id} = props;
 
   return (

src/components/forms/Checkbox/index.tsx

@@ -61,24 +61,10 @@ interface CheckboxProps {
   className?: string;
 }
 
-const Checkbox: React.FC<CheckboxProps> = ({
+const Checkbox: React.FC<CheckboxProps> = ({id, checked, onChange, label, value, disabled = false, className}) => {
-  id,
-  checked,
-  onChange,
-  label,
-  value,
-  disabled = false,
-  className
-}) => {
   return (
     <CheckboxContainer className={className}>
-      <HiddenCheckbox
+      <HiddenCheckbox id={id} checked={checked} onChange={onChange} value={value} disabled={disabled} />
-        id={id}
-        checked={checked}
-        onChange={onChange}
-        value={value}
-        disabled={disabled}
-      />
       <StyledCheckbox checked={checked} />
       {label && <Label htmlFor={id}>{label}</Label>}
     </CheckboxContainer>

src/components/forms/SearchInput.tsx

@@ -40,11 +40,7 @@ export const SearchInputWrapper = styled.default.div`
   }
 `;
 
-export const Search = ({
+export const Search = ({search, defaultValue = '', minLengthForSearch = 2}: ISearchInput): JSX.Element => {
-  search,
-  defaultValue = '',
-  minLengthForSearch = 2
-}: ISearchInput): JSX.Element => {
   const [currentSearchTerm, setCurrentSearchTerm] = useState<string>(defaultValue);
   const onChange = (event: ChangeEvent<HTMLInputElement>): void => {
     setCurrentSearchTerm(event.target.value);

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 => <Indicator><OfflineSymbol /></Indicator>;
+export const OfflineIndicator = (): JSX.Element => (
-export const SingleStreamIndicator = (): JSX.Element => <Indicator className="single-stream-indicator"><SingleStreamSymbol className="testId-singleStreamIndicator" /></Indicator>;
+  <Indicator>
-export const MultiStreamIndicator = (): JSX.Element => <Indicator className="multi-stream-indicator"><MultipleStreamSymbol className="testId-multiStreamIndicator" /></Indicator>;
+    <OfflineSymbol />
-export const LoadingIndicator = (): JSX.Element => <Indicator><Loader size="medium" /></Indicator>;
+  </Indicator>
+);
+export const SingleStreamIndicator = (): JSX.Element => (
+  <Indicator className="single-stream-indicator">
+    <SingleStreamSymbol className="testId-singleStreamIndicator" />
+  </Indicator>
+);
+export const MultiStreamIndicator = (): JSX.Element => (
+  <Indicator className="multi-stream-indicator">
+    <MultipleStreamSymbol className="testId-multiStreamIndicator" />
+  </Indicator>
+);
+export const LoadingIndicator = (): JSX.Element => (
+  <Indicator>
+    <Loader size="medium" />
+  </Indicator>
+);

src/components/indicator-component/publishing-state-indicator.tsx

@@ -14,11 +14,7 @@ interface IPublishingStateIndicator {
   idKey: string;
 }
 
-const PublishingStateIndicator = ({
+const PublishingStateIndicator = ({row, publishingStateKey, idKey}: IPublishingStateIndicator): JSX.Element => {
-  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<string, any>) => record[idKey] === id);

src/components/modal/modal.tsx

@@ -70,7 +70,11 @@ const Modal = (props: IModal): React.JSX.Element => {
         <CloseButton onClick={close} />
         {children}
         <ModalButtonsContaier>
-          {submitButton.onClick && <ConfirmButton {...submitButton} onClick={submitButton.onClick}>{submitButton.label}</ConfirmButton>}
+          {submitButton.onClick && (
+            <ConfirmButton {...submitButton} onClick={submitButton.onClick}>
+              {submitButton.label}
+            </ConfirmButton>
+          )}
           {!props.cancelButton ||
             (!cancelButton.disabled && (
               <ConfirmButton className="testId-cancel" {...cancelButton} onClick={handleCancel}>

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 {
+import {PaginationWrapper, ItemRange, PaginationContainer, PageButton} from './style';
-  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 minimumItemBoundPerPage = (currentPageNumber - 1) * itemsPerPage + 1;
-  const maximumItemBoundPerPage = (currentPageNumber) * itemsPerPage;
+  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(
-        <PageButton
+        <PageButton key={`page-button-${y}`} onClick={() => setPage(count + y)} active={currentPageNumber === count + y}>
-          key={`page-button-${y}`}
-          onClick={() => setPage(count + y)}
-          active={currentPageNumber === count + y}>
           {count + y}
         </PageButton>
       );
@@ -60,25 +52,26 @@ export const Pagination = (props: IPagination): JSX.Element => {
     <PaginationContainer className="pagination-container">
       {numberOfItems ? (
         <PaginationWrapper>
-          {(currentPageNumber >= LowerBoundLimit) && (
+          {currentPageNumber >= LowerBoundLimit && (
             <Fragment>
               {currentPageNumber > 2 && totalNumberOfPages !== 3 && <PageButton onClick={() => setPage(1)}>1</PageButton>}
-              {(currentPageNumber > LowerBoundLimit) && currentPageNumber !== 3 && <p>...</p>}
+              {currentPageNumber > LowerBoundLimit && currentPageNumber !== 3 && <p>...</p>}
             </Fragment>
           )}
           {generateButtons()}
-          {(currentPageNumber <= totalNumberOfPages - higherBoundLimit) && (
+          {currentPageNumber <= totalNumberOfPages - higherBoundLimit && (
             <Fragment>
-              {(currentPageNumber < totalNumberOfPages - higherBoundLimit) && currentPageNumber + 2 !== totalNumberOfPages && <p>...</p>}
+              {currentPageNumber < totalNumberOfPages - higherBoundLimit && currentPageNumber + 2 !== totalNumberOfPages && <p>...</p>}
-              {currentPageNumber + 1 !== totalNumberOfPages && totalNumberOfPages !== 3 && <PageButton onClick={() => setPage(totalNumberOfPages)}>
+              {currentPageNumber + 1 !== totalNumberOfPages && totalNumberOfPages !== 3 && (
-                {totalNumberOfPages}
+                <PageButton onClick={() => setPage(totalNumberOfPages)}>{totalNumberOfPages}</PageButton>
-              </PageButton>}
+              )}
             </Fragment>
           )}
         </PaginationWrapper>
       ) : null}
       <ItemRange>
-        {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`}
       </ItemRange>
     </PaginationContainer>
   );

src/components/pagination/style.tsx

@@ -4,12 +4,7 @@
 import * as styled from 'styled-components';
 import {theme, paddings} from 'components/shared/theme';
 
-const {
+const {colors, fontSizeS, spacing, primaryThemeColor} = theme;
-  colors,
-  fontSizeS,
-  spacing,
-  primaryThemeColor
-} = theme;
 
 export const PaginationContainer = styled.default.div`
   display: flex;
@@ -40,6 +35,6 @@ export const PageButton = styled.default.button <{active?: boolean}>`
   height: 28px;
   width: 36px;
   cursor: pointer;
-  background-color: ${({active}) => active ? primaryThemeColor : 'transparent'};
+  background-color: ${({active}) => (active ? primaryThemeColor : 'transparent')};
-  color: ${({active}) => active ? colors.white : primaryThemeColor};
+  color: ${({active}) => (active ? colors.white : primaryThemeColor)};
 `;

src/components/restricted-text/restricted-text-with-label.tsx

@@ -14,16 +14,12 @@ interface IRestrictedTextWithLabel {
   labelIcon?: JSX.Element;
 }
 
-const RestrictedTextWithLabel = ({
+const RestrictedTextWithLabel = ({label, text, labelIcon, isLink = false, linkClassName = ''}: IRestrictedTextWithLabel): JSX.Element => {
-  label,
-  text,
-  labelIcon,
-  isLink = false,
-  linkClassName = ''
-}: IRestrictedTextWithLabel): JSX.Element => {
   return (
     <RestrictedRowWrapper>
-      <RestrictedRowLabel>{label} {labelIcon}</RestrictedRowLabel>
+      <RestrictedRowLabel>
+        {label} {labelIcon}
+      </RestrictedRowLabel>
       <RestrictedRowText>
         <RestrictedText text={text} isLink={isLink} linkClassName={linkClassName} />
       </RestrictedRowText>

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 <NewTabLink link={text} className={linkClassName} text={text} />;
-        <NewTabLink
-          link={text}
-          className={linkClassName}
-          text={text}
-        />
-      );
     }
 
     if (isLink && linkValue) {
       return (
-        <Link
+        <Link to={linkValue} className={linkClassName}>
-          to={linkValue}
-          className={linkClassName}
-        >
           {text}
         </Link>
       );
@@ -104,9 +95,7 @@ export const RestrictedText = ({
             className={`${isLink ? 'testId-permalink' : ''} testId-viewDetails`}
           />
         )}
-        {hasCopyOption && (
+        {hasCopyOption && <CopyIconButton text={text} displayText={false} className="testId-copyDetails" />}
-          <CopyIconButton text={text} displayText={false} className="testId-copyDetails" />
-        )}
       </div>
     </RestrictedDiv>
   );

src/components/restricted-text/style.ts

@@ -5,11 +5,7 @@ import * as styled from 'styled-components';
 
 import Theme from 'theme';
 
-const {
+const {colors, typography, spacing} = Theme;
-  colors,
-  typography,
-  spacing,
-} = Theme;
 
 export const RestrictedDiv = styled.default.div`
   display: flex;

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 {
+import {ITableWithLoadMoreHeader, ITableWithPaginationHeader, TableHeaderKey} from 'interfaces/tableProps';
-  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 = ({
+export const TableScreenHeader = ({title, subtitle = '', screenHeader, renderControl}: ITableScreenHeader): JSX.Element => {
-  title,
-  subtitle = '',
-  screenHeader,
-  renderControl
-}: ITableScreenHeader): JSX.Element => {
   return (
     <ScreenHeader className="table-header">
       <HeaderTitle>
@@ -32,13 +23,9 @@ export const TableScreenHeader = ({
       </HeaderTitle>
       <ScreenHeaderControls>
         {Object.keys(screenHeader).map(key => {
-          const headerControl = screenHeader[key].render
+          const headerControl = screenHeader[key].render ? screenHeader[key].render(key) : renderControl(screenHeader, key as TableHeaderKey);
-            ? screenHeader[key].render(key)
-            : renderControl(screenHeader, key as TableHeaderKey);
 
-          return headerControl ? (
+          return headerControl ? <HeaderControlWrapper key={key}>{headerControl}</HeaderControlWrapper> : null;
-            <HeaderControlWrapper key={key}>{headerControl}</HeaderControlWrapper>
-          ) : null;
         })}
       </ScreenHeaderControls>
     </ScreenHeader>

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

@@ -3,14 +3,7 @@
  */
 import {useEffect, useState} from 'react';
 
-import {
+import {DataRowType, Table, TableHeaderKey, ITable, ITableWithPaginationHeader, ITableSort} from 'components/table';
-  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';
@@ -128,9 +121,7 @@ const TableWithPagination = ({
 
   useEffect(() => {
     const start = (currentPageNumber - 1) * rowsCount;
-    const sortedData = sortData
+    const sortedData = sortData ? filteredData.sort((a, b) => compare(a, b, sortData.sortDirection, sortData.sortColumn)) : filteredData;
-      ? 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 (
     <>
-      <TableScreenHeader
+      <TableScreenHeader title={title} screenHeader={screenHeader} renderControl={renderControl} />
-        title={title}
+      <Table columns={columns} data={currentData} sortColumn={sortColumn} sortDirection={sortDirection} style={style} sort={sort} errorMessage={errorMessage} />
-        screenHeader={screenHeader}
-        renderControl={renderControl}
-      />
-      <Table
-        columns={columns}
-        data={currentData}
-        sortColumn={sortColumn}
-        sortDirection={sortDirection}
-        style={style}
-        sort={sort}
-        errorMessage={errorMessage}
-      />
       <Pagination
         currentPageNumber={currentPageNumber}
         setCurrentPage={setCurrentPageNumber}

src/components/table/style.tsx

@@ -13,7 +13,7 @@ export const Table = styled.default.table`
   border-collapse: collapse;
   margin: 0;
   table-layout: fixed;
-  background-color: ${Theme.blackWithOpacity};
+  background-color: ${Theme.colors.gray900};
 `;
 
 export const Thead = styled.default.thead`

src/drop-down/index.tsx

@@ -1,209 +0,0 @@
-/**
- * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
- */
-import {useState, useEffect, useRef} from 'react';
-
-import {IChannel} from 'interfaces';
-import {Label} from 'components/label';
-
-import {DropdownContainer, DropdownInput, DropdownMenu, DropdownMenuItem} from './style';
-
-const keys = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
-
-interface IDropdown {
-  itemKey: string;
-  searchTerm?: string;
-  onSelect: (key: string) => void;
-  items: IChannel[];
-  label: string;
-  name: string;
-  className?: string;
-}
-const maxNumOfItemsShown = 30;
-
-export const Dropdown = (props: IDropdown): JSX.Element => {
-  const {itemKey, searchTerm, onSelect, items, label, name, className} = props;
-  const [showDropdownMenu, setShowDropdownMenu] = useState(false);
-  const [input, setInput] = useState(searchTerm || '');
-  const [filteredItems, setFilteredItems] = useState(items);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const allItemsRef = useRef([]);
-  const parentElementRef = useRef(null);
-  const scrollSelectedItemInView = index => {
-    if (!parentElementRef.current) {
-      return;
-    }
-
-    const dropdownMenu = parentElementRef.current;
-    const menuItems = allItemsRef.current;
-
-    if (!menuItems) {
-      return;
-    }
-
-    const menuItem = menuItems[index];
-
-    if (!menuItem) {
-      return;
-    }
-
-    const isOutOfUpperView = menuItem.offsetTop < dropdownMenu.scrollTop;
-    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;
-    }
-  };
-
-  const setSelectInput = value => {
-    setInput(value);
-    onSelect(value);
-  };
-
-  const handleClickOutside = event => {
-    if (!parentElementRef.current || parentElementRef.current.contains(event.target)) {
-      return;
-    }
-
-    if (!filteredItems.length) {
-      setSelectInput('');
-    }
-
-    setShowDropdownMenu(false);
-    onSelect(input);
-  };
-
-  useEffect(() => {
-    scrollSelectedItemInView(selectedIndex);
-  }, [selectedIndex]);
-
-  useEffect(() => {
-    document.addEventListener('click', handleClickOutside, true);
-
-    return () => {
-      document.removeEventListener('click', handleClickOutside, true);
-    };
-  });
-
-  useEffect(() => {
-    const filteredItems = items.filter(item => {
-      if (item[itemKey].toLowerCase().indexOf(input.toLowerCase()) > -1) {
-        return true;
-      }
-
-      return false;
-    });
-
-    if (filteredItems.length > 0) {
-      setSelectedIndex(0);
-    }
-
-    setFilteredItems(filteredItems);
-  }, [input, items, itemKey]);
-
-  const selectItemInFocusBy = offset => {
-    const lastIndex = filteredItems.length - 1;
-    const nextIndex = selectedIndex + offset;
-
-    if (nextIndex > lastIndex) {
-      setSelectedIndex(0);
-    } else if (nextIndex < 0) {
-      setSelectedIndex(lastIndex);
-    } else {
-      setSelectedIndex(nextIndex);
-    }
-  };
-
-  const handleOnKeyDown = event => {
-    if (keys.indexOf(event.key) === -1) {
-      return;
-    }
-
-    const [arrDown, arrUp, enter, escape] = keys;
-    const moves = {
-      [arrDown]: 1,
-      [arrUp]: -1
-    };
-    const move = moves[event.key];
-
-    if (move !== undefined) {
-      event.preventDefault();
-      selectItemInFocusBy(move);
-    }
-
-    if (event.key === enter) {
-      if (filteredItems[selectedIndex]) {
-        setSelectInput(filteredItems[selectedIndex][itemKey]);
-        setShowDropdownMenu(false);
-      }
-    }
-
-    if (event.key === escape) {
-      event.preventDefault();
-      setShowDropdownMenu(false);
-    }
-  };
-
-  const selectItem = (index: number) => {
-    setSelectInput(filteredItems[index][itemKey]);
-    setSelectedIndex(index);
-    setShowDropdownMenu(false);
-  };
-
-  const generateMenuOptions = () => {
-    return filteredItems.length
-      ? filteredItems.slice(0, maxNumOfItemsShown).map((item, index) => {
-        return (
-          <DropdownMenuItem
-            ref={ref => allItemsRef.current[index] = ref}
-            selected={selectedIndex === index}
-            key={`dropdown-menu-item-${index}`}
-            onClick={() => selectItem(index)}
-          >
-            {item[itemKey]}
-          </DropdownMenuItem>
-        );
-      })
-      : (
-        <DropdownMenuItem disabled={true}>
-          No results found
-        </DropdownMenuItem>
-      );
-  };
-
-  const handleInput = ({target}) => {
-    setInput(target.value);
-
-    if (!showDropdownMenu) {
-      setShowDropdownMenu(true);
-    }
-  };
-
-  const toggleDropdownMenu = () => setShowDropdownMenu(!showDropdownMenu);
-
-  return (
-    <DropdownContainer>
-      <Label
-        htmlFor="autocomplete"
-        text={label}
-      />
-      <DropdownInput
-        onKeyDown={handleOnKeyDown}
-        showMenu={showDropdownMenu}
-        autoComplete="off"
-        name={name}
-        onChange={handleInput}
-        value={input}
-        onClick={toggleDropdownMenu}
-        className={className}
-      />
-      {showDropdownMenu && (
-        <DropdownMenu ref={parentElementRef} className="testId-generatedMenuOptions">
-          {generateMenuOptions()}
-        </DropdownMenu>
-      )}
-    </DropdownContainer>
-  );
-};

src/drop-down/style.ts

@@ -1,59 +0,0 @@
-/**
- * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
- */
-import * as styled from 'styled-components';
-import Input from 'components/forms/Input';
-import Theme from 'theme';
-
-const {spacing, colors, typography, primaryBorderRadius} = Theme;
-
-export const DropdownContainer = styled.default.div`
-  width: 100%;
-  position: relative;
-  margin: ${spacing.xSmall} 0;
-`;
-
-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;
-  `}
-`;
-
-export const DropdownMenu = styled.default.div`
-  width: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  top: calc(100% - 4px);
-  position: absolute;
-  height: auto;
-  max-height: 210px;
-  border: 1px solid ${colors.gray400};
-  border-top-width: 0;
-  z-index: 4;
-  background-color: ${colors.white};
-  border-bottom-left-radius: ${primaryBorderRadius};
-  border-bottom-right-radius: ${primaryBorderRadius};
-`;
-
-export const DropdownMenuItem = styled.default.div<{
-  active?: boolean;
-  disabled?: boolean;
-  selected?: boolean;
-}>`
-  line-height: ${spacing.large};
-  padding: ${spacing.xsmall} ${spacing.medium};
-  font-size: ${typography.fontSizeS};
-  word-wrap: break-word;
-  ${({active, selected, disabled}) => styled.css`
-    background-color: ${active || selected ? colors.gray300 : 'transparent'};
-    font-weight: ${selected ? 'bold' : 'normal'};
-    color: ${disabled ? colors.gray500 : colors.gray900}
-
-    :hover{
-      background-color: ${disabled ? colors.white : colors.gray300};
-      cursor: ${disabled ? 'text' : 'pointer'};
-    }
-  `}
-`;

src/index.css

@@ -3,9 +3,8 @@ body {
   padding: 0;
   background: #f8f9fa;
   min-height: 100vh;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family:
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

src/indicator-component/indicators/index.ts

@@ -1,4 +0,0 @@
-/**
- * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
- */
-export * from './indicators';

src/indicator-component/indicators/indicators.tsx

@@ -1,27 +0,0 @@
-/**
- * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
- */
-import React from 'react';
-import {LoadingWheel as Loader} from 'components';
-import {SingleStreamSymbol, OfflineSymbol, MultipleStreamSymbol, Indicator} from './style';
-
-export const OfflineIndicator = (): React.JSX.Element => (
-  <Indicator>
-    <OfflineSymbol />
-  </Indicator>
-);
-export const SingleStreamIndicator = (): React.JSX.Element => (
-  <Indicator className="single-stream-indicator">
-    <SingleStreamSymbol className="testId-singleStreamIndicator" />
-  </Indicator>
-);
-export const MultiStreamIndicator = (): React.JSX.Element => (
-  <Indicator className="multi-stream-indicator">
-    <MultipleStreamSymbol className="testId-multiStreamIndicator" />
-  </Indicator>
-);
-export const LoadingIndicator = (): React.JSX.Element => (
-  <Indicator>
-    <Loader size={'medium'} className="loading-wheel" />
-  </Indicator>
-);

src/indicator-component/indicators/style.ts

@@ -1,42 +0,0 @@
-/**
- * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
- */
-import * as styled from 'styled-components';
-
-export const Indicator = styled.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  /* Target LoadingWheel component by class name */
-  .loading-wheel {
-    flex: 0;
-    margin: 0;
-
-    & span {
-      margin: 0;
-    }
-  }
-`;
-
-export const IndicatorOutline = styled.default.div`
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-`;
-
-export const OfflineSymbol = styled.default(IndicatorOutline)`
-  border: 3px solid #707070;
-  background-color: transparent;
-`;
-
-export const SingleStreamSymbol = styled.default(IndicatorOutline)`
-  background-color: #08BD0B;
-`;
-
-export const MultipleStreamSymbol = styled.default(SingleStreamSymbol)`
-  width: 1rem;
-  height: 1rem;
-  margin-left: -2px;
-  box-shadow: 9px 0 0 0 #08BD0B;
-`;

src/indicator-component/publishing-state-indicator.tsx

@@ -1,39 +0,0 @@
-/**
- * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
- */
-import {JSX} from 'react';
-import {useSelector} from 'react-redux';
-import {AppStore} from 'store';
-import {SingleStreamIndicator, OfflineIndicator, MultiStreamIndicator, LoadingIndicator} from './indicators';
-
-interface IPublishingStateIndicator {
-  row: any;
-  publishingStateKey: string;
-  idKey: string;
-}
-
-const PublishingStateIndicator = ({row, publishingStateKey, idKey}: IPublishingStateIndicator): JSX.Element => {
-  const id = row[idKey] as string;
-  const publishingState = useSelector((state: AppStore) => publishingStateKey && state[publishingStateKey as keyof AppStore]?.publishingState);
-  const rowPublishingState = publishingState.find((record: any) => record[idKey] === id);
-
-  if (!publishingState) {
-    return <LoadingIndicator />;
-  }
-
-  if (!rowPublishingState) {
-    return <LoadingIndicator />;
-  }
-
-  if (!rowPublishingState.isOnline) {
-    return <OfflineIndicator />;
-  }
-
-  if (rowPublishingState.multipleStreams) {
-    return <MultiStreamIndicator />;
-  }
-
-  return <SingleStreamIndicator />;
-};
-
-export default PublishingStateIndicator;

src/services/Channel.service.ts

@@ -48,12 +48,10 @@ export interface KillChannelParams {
 class ChannelService {
   private phenixChannelService: PhenixChannelService | null = null;
 
-
   public async initializeWithPCastApi(channels: Channels) {
     try {
       // Wait for PCastApiService to be initialized
       this.phenixChannelService = channels;
-
     } catch (error) {
       logger.error('Failed to initialize ChannelService', error);
     }
@@ -111,11 +109,11 @@ class ChannelService {
       logger.debug('Updating channel', params);
 
       const updateData = {
-        ...params.name && { name: params.name },
+        ...(params.name && {name: params.name}),
-        ...params.alias && { alias: params.alias },
+        ...(params.alias && {alias: params.alias}),
-        ...params.description && { description: params.description },
+        ...(params.description && {description: params.description}),
-        ...params.tags && { tags: params.tags },
+        ...(params.tags && {tags: params.tags}),
-        ...params.capabilities && { capabilities: params.capabilities }
+        ...(params.capabilities && {capabilities: params.capabilities})
       };
 
       if (!this.phenixChannelService) {

src/store/action/channels-publishing.ts

@@ -30,8 +30,7 @@ const initialState: ChannelsPublishingState = {
 };
 
 // Selectors
-export const channelsPublishingSelector = (state: RootState): ChannelsPublishingState => 
+export const channelsPublishingSelector = (state: RootState): ChannelsPublishingState => state.channelsPublishing;
-  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: ChannelPublishingState[], channelId: string) => publishingStates.find(state => state.channelId === channelId)
-    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,9 +114,7 @@ const channelsPublishingSlice = createSlice({
       state.error = action.payload;
     },
     updateChannelState: (state, action: PayloadAction<ChannelPublishingState>) => {
-      const index = state.publishingState.findIndex(
+      const index = state.publishingState.findIndex(item => item.channelId === action.payload.channelId);
-        item => item.channelId === action.payload.channelId
-      );
 
       if (index >= 0) {
         state.publishingState[index] = action.payload;
@@ -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,9 +140,7 @@ const channelsPublishingSlice = createSlice({
         state.error = action.payload as string;
       })
       .addCase(updateChannelPublishingState.fulfilled, (state, action) => {
-        const index = state.publishingState.findIndex(
+        const index = state.publishingState.findIndex(item => item.channelId === action.payload.channelId);
-          item => item.channelId === action.payload.channelId
-        );
 
         if (index >= 0) {
           state.publishingState[index] = action.payload;

src/store/action/channels.ts

@@ -9,42 +9,25 @@ import {IChannelsState} from '../slices/Channels.slice';
 // Selectors
 export const channelsSelector = (state: RootState): IChannelsState => state.channels;
 
-export const selectChannelList = createSelector(
+export const selectChannelList = createSelector([channelsSelector], (channels: IChannelsState) => channels.channels);
-  [channelsSelector],
-  (channels: IChannelsState) => channels.channels
-);
 
-export const selectChannelsLoading = createSelector(
+export const selectChannelsLoading = createSelector([channelsSelector], (channels: IChannelsState) => channels.isLoading);
-  [channelsSelector], 
-  (channels: IChannelsState) => channels.isLoading
-);
 
-export const selectChannelsError = createSelector(
+export const selectChannelsError = createSelector([channelsSelector], (channels: IChannelsState) => channels.error);
-  [channelsSelector],
-  (channels: IChannelsState) => channels.error
-);
 
-export const selectSelectedChannel = createSelector(
+export const selectSelectedChannel = createSelector([channelsSelector], (channels: IChannelsState) => channels.selectedChannel);
-  [channelsSelector],
-  (channels: IChannelsState) => channels.selectedChannel
-);
 
 // Async thunks for channel operations
-export const listChannels = createAsyncThunk(
+export const listChannels = createAsyncThunk('channels/listChannels', async (_, {rejectWithValue}) => {
-  '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(
+export const createChannelThunk = createAsyncThunk('channels/createChannel', async (params: CreateChannelParams, {rejectWithValue, dispatch}) => {
-  'channels/createChannel',
-  async (params: CreateChannelParams, {rejectWithValue, dispatch}) => {
   try {
     const newChannel = await channelService.createChannel(params);
     // Refresh the channel list after creation
@@ -53,12 +36,9 @@ export const createChannelThunk = createAsyncThunk(
   } catch (error) {
     return rejectWithValue(error instanceof Error ? error.message : 'Failed to create channel');
   }
-  }
+});
-);
 
-export const deleteChannelThunk = createAsyncThunk(
+export const deleteChannelThunk = createAsyncThunk('channels/deleteChannel', async (params: DeleteChannelParams, {rejectWithValue, dispatch}) => {
-  'channels/deleteChannel',
-  async (params: DeleteChannelParams, {rejectWithValue, dispatch}) => {
   try {
     await channelService.deleteChannel(params);
     // Refresh the channel list after deletion
@@ -67,12 +47,9 @@ export const deleteChannelThunk = createAsyncThunk(
   } catch (error) {
     return rejectWithValue(error instanceof Error ? error.message : 'Failed to delete channel');
   }
-  }
+});
-);
 
-export const forkChannelThunk = createAsyncThunk(
+export const forkChannelThunk = createAsyncThunk('channels/forkChannel', async (params: ForkChannelParams, {rejectWithValue, dispatch}) => {
-  'channels/forkChannel',
-  async (params: ForkChannelParams, {rejectWithValue, dispatch}) => {
   try {
     await channelService.forkChannel(params);
     // Refresh the channel list after forking
@@ -81,12 +58,9 @@ export const forkChannelThunk = createAsyncThunk(
   } catch (error) {
     return rejectWithValue(error instanceof Error ? error.message : 'Failed to fork channel');
   }
-  }
+});
-);
 
-export const killChannelThunk = createAsyncThunk(
+export const killChannelThunk = createAsyncThunk('channels/killChannel', async (params: KillChannelParams, {rejectWithValue, dispatch}) => {
-  'channels/killChannel',
-  async (params: KillChannelParams, {rejectWithValue, dispatch}) => {
   try {
     await channelService.killChannel(params);
     // Refresh the channel list after killing
@@ -95,32 +69,25 @@ export const killChannelThunk = createAsyncThunk(
   } catch (error) {
     return rejectWithValue(error instanceof Error ? error.message : 'Failed to kill channel');
   }
-  }
+});
-);
 
-export const getChannelThunk = createAsyncThunk(
+export const getChannelThunk = createAsyncThunk('channels/getChannel', async (channelId: string, {rejectWithValue}) => {
-  '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(
+export const getPublisherCountThunk = createAsyncThunk('channels/getPublisherCount', async (channelId: string, {rejectWithValue}) => {
-  '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';

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(
+export const selectCurrentScreen = createSelector([screensSelector], (screens: ScreenState) => screens.currentScreen);
-  [screensSelector],
-  (screens: ScreenState) => screens.currentScreen
-);
 
-export const selectScreenProps = createSelector(
+export const selectScreenProps = createSelector([screensSelector], (screens: ScreenState) => screens.screenProps);
-  [screensSelector],
-  (screens: ScreenState) => screens.screenProps
-);
 
-export const selectPreviousScreen = createSelector(
+export const selectPreviousScreen = createSelector([screensSelector], (screens: ScreenState) => screens.previousScreen);
-  [screensSelector],
-  (screens: ScreenState) => screens.previousScreen
-);
 
-export const selectNavigationHistory = createSelector(
+export const selectNavigationHistory = createSelector([screensSelector], (screens: ScreenState) => screens.navigationHistory);
-  [screensSelector],
-  (screens: ScreenState) => screens.navigationHistory
-);
 
 // Slice
 const screensSlice = createSlice({
@@ -93,17 +81,17 @@ const screensSlice = createSlice({
         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 {
+export const {setCurrentScreen, setScreenProps, updateScreenProps, navigateToScreen, navigateBack, clearScreenProps, resetNavigation} = screensSlice.actions;
-  setCurrentScreen,
-  setScreenProps,
-  updateScreenProps,
-  navigateToScreen,
-  navigateBack,
-  clearScreenProps,
-  resetNavigation
-} = screensSlice.actions;
 
 export default screensSlice.reducer;

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

src/theme/index.ts

@@ -57,7 +57,7 @@ export class Theme {
   }
 
   static get background() {
-    return Theme
+    return Theme;
   }
 }
 

src/utility/contexts.ts

@@ -1,6 +0,0 @@
-/**
- * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
- */
-import {createContext} from 'react';
-
-export const ViewContext = createContext('');

src/utility/index.ts

@@ -1,7 +1,6 @@
 /**
  * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
  */
-export * from './contexts';
 export * from './date';
 export * from './sort';
 export * from './validators';

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 = () => <Main>
+const ChannelListLoading = () => (
+  <Main>
     <Loader />
   </Main>
+);
 
 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(() => ({
+  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>) => {
@@ -90,10 +94,7 @@ export const ChannelList = (): React.JSX.Element => {
       <Body className="table-container">
         <Error>
           {(channelListErrorMessages as Record<string, string>)[error] || error}
-          <button 
+          <button onClick={() => dispatch(listChannels())} style={{marginLeft: '10px', padding: '5px 10px'}}>
-            onClick={() => dispatch(listChannels())} 
-            style={{ marginLeft: '10px', padding: '5px 10px' }}
-          >
             Retry
           </button>
         </Error>
@@ -104,15 +105,14 @@ export const ChannelList = (): React.JSX.Element => {
   return (
     <div>
       <Body className="table-container">
-        {isFetching ? <ChannelListLoading /> : channels.length === 0 ? (
+        {isFetching ? (
+          <ChannelListLoading />
+        ) : channels.length === 0 ? (
           <Main>
             <div style={{textAlign: 'center', padding: '2rem'}}>
               <h3>No channels found</h3>
               <p>Get started by creating your first channel.</p>
-                <button 
+              <button onClick={() => setCreateChannelModalOpened(true)} style={{padding: '10px 20px', marginTop: '1rem'}}>
-                  onClick={() => setCreateChannelModalOpened(true)}
-                  style={{ padding: '10px 20px', marginTop: '1rem' }}
-                >
                 Create Channel
               </button>
             </div>
@@ -129,12 +129,7 @@ export const ChannelList = (): React.JSX.Element => {
           />
         )}
       </Body>
-      {isCreateChannelModalOpened && (
+      {isCreateChannelModalOpened && <CreateChannelModal getChannelList={refreshChannelList} setCreateChannelModalOpened={setCreateChannelModalOpened} />}
-        <CreateChannelModal 
-          getChannelList={refreshChannelList} 
-          setCreateChannelModalOpened={setCreateChannelModalOpened} 
-        />
-      )}
     </div>
   );
 };