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

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
-    position={position || Position.Right}
-    message={message}
-    width={300}
-  >
+  <Tooltip 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 {
-  spacing,
-  colors
-} = theme;
+const {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
-        items={Object.values(validityTimeOptions)}
-        currentValue={currentValue}
-        handleOnChange={onChange}
-      />
+      <RadioButtonGroup 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 = ({
-  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,12 +33,7 @@ export const DateComponent = ({
   };
 
   return (
-    <p
-      onMouseEnter={onMouseEnter}
-      onMouseOut={onMouseOut}
-      onBlur={onBlur}
-      className={className}
-    >
+    <p 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
-      ? filteredItems.slice(0, maxNumOfItemsShown).map((item, index) => {
+    return filteredItems.length ? (
+      filteredItems.slice(0, maxNumOfItemsShown).map((item, index) => {
         return (
           <DropdownMenuItem
             ref={ref => {
@@ -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]}
           </DropdownMenuItem>
         );
       })
-      : (
-        <DropdownMenuItem disabled={true}>
-          No results found
-        </DropdownMenuItem>
-      );
+    ) : (
+      <DropdownMenuItem disabled={true}>No results found</DropdownMenuItem>
+    );
   };
 
   const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -188,10 +185,7 @@ export const Dropdown = (props: IDropdown): React.JSX.Element => {
 
   return (
     <DropdownContainer>
-      <Label
-        htmlFor="autocomplete"
-        text={label}
-      />
+      <Label htmlFor="autocomplete" text={label} />
       <DropdownInput
         onKeyDown={handleOnKeyDown}
         showMenu={showDropdownMenu}

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`

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<HTMLInputElement> | MouseEvent<HTMLDivElement>) => void;
-    label?: string;
-  }
-): React.JSX.Element => {
+const Checkbox = (props: {
+  value: string;
+  id?: string;
+  checked?: boolean;
+  onChange: (event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLDivElement>) => void;
+  label?: string;
+}): React.JSX.Element => {
   const {checked, onChange, label, id} = props;
 
   return (
     <Container>
       <CheckboxContainer>
-        <HiddenCheckbox {...props}/>
+        <HiddenCheckbox {...props} />
         <StyledCheckbox onClick={onChange} checked={checked}>
           <Icon viewBox="0 0 24 24">
             <polyline points="20 6 9 17 4 12" />

src/components/forms/Checkbox/index.tsx

@@ -61,24 +61,10 @@ interface CheckboxProps {
   className?: string;
 }
 
-const Checkbox: React.FC<CheckboxProps> = ({
-  id,
-  checked,
-  onChange,
-  label,
-  value,
-  disabled = false,
-  className
-}) => {
+const Checkbox: React.FC<CheckboxProps> = ({id, checked, onChange, label, value, disabled = false, className}) => {
   return (
     <CheckboxContainer className={className}>
-      <HiddenCheckbox
-        id={id}
-        checked={checked}
-        onChange={onChange}
-        value={value}
-        disabled={disabled}
-      />
+      <HiddenCheckbox 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 = ({
-  search,
-  defaultValue = '',
-  minLengthForSearch = 2
-}: ISearchInput): JSX.Element => {
+export const Search = ({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 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>;
+export const OfflineIndicator = (): JSX.Element => (
+  <Indicator>
+    <OfflineSymbol />
+  </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 = ({
-  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<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 {
-  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(
-        <PageButton
-          key={`page-button-${y}`}
-          onClick={() => setPage(count + y)}
-          active={currentPageNumber === count + y}>
+        <PageButton 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 + 1 !== totalNumberOfPages && totalNumberOfPages !== 3 && <PageButton onClick={() => setPage(totalNumberOfPages)}>
-                {totalNumberOfPages}
-              </PageButton>}
+              {currentPageNumber < totalNumberOfPages - higherBoundLimit && currentPageNumber + 2 !== totalNumberOfPages && <p>...</p>}
+              {currentPageNumber + 1 !== totalNumberOfPages && totalNumberOfPages !== 3 && (
+                <PageButton onClick={() => setPage(totalNumberOfPages)}>{totalNumberOfPages}</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 {
-  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};
+  background-color: ${({active}) => (active ? primaryThemeColor : 'transparent')};
+  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 = ({
-  label,
-  text,
-  labelIcon,
-  isLink = false,
-  linkClassName = ''
-}: IRestrictedTextWithLabel): JSX.Element => {
+const RestrictedTextWithLabel = ({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 (
-        <NewTabLink
-          link={text}
-          className={linkClassName}
-          text={text}
-        />
-      );
+      return <NewTabLink link={text} className={linkClassName} text={text} />;
     }
 
     if (isLink && linkValue) {
       return (
-        <Link
-          to={linkValue}
-          className={linkClassName}
-        >
+        <Link to={linkValue} className={linkClassName}>
           {text}
         </Link>
       );
@@ -104,9 +95,7 @@ export const RestrictedText = ({
             className={`${isLink ? 'testId-permalink' : ''} testId-viewDetails`}
           />
         )}
-        {hasCopyOption && (
-          <CopyIconButton text={text} displayText={false} className="testId-copyDetails" />
-        )}
+        {hasCopyOption && <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 {
-  colors,
-  typography,
-  spacing,
-} = Theme;
+const {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 {
-  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 (
     <ScreenHeader className="table-header">
       <HeaderTitle>
@@ -32,13 +23,9 @@ export const TableScreenHeader = ({
       </HeaderTitle>
       <ScreenHeaderControls>
         {Object.keys(screenHeader).map(key => {
-          const headerControl = screenHeader[key].render
-            ? screenHeader[key].render(key)
-            : renderControl(screenHeader, key as TableHeaderKey);
+          const headerControl = screenHeader[key].render ? screenHeader[key].render(key) : renderControl(screenHeader, key as TableHeaderKey);
 
-          return headerControl ? (
-            <HeaderControlWrapper key={key}>{headerControl}</HeaderControlWrapper>
-          ) : null;
+          return headerControl ? <HeaderControlWrapper key={key}>{headerControl}</HeaderControlWrapper> : null;
         })}
       </ScreenHeaderControls>
     </ScreenHeader>

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 (
     <>
-      <TableScreenHeader
-        title={title}
-        screenHeader={screenHeader}
-        renderControl={renderControl}
-      />
-      <Table
-        columns={columns}
-        data={currentData}
-        sortColumn={sortColumn}
-        sortDirection={sortDirection}
-        style={style}
-        sort={sort}
-        errorMessage={errorMessage}
-      />
+      <TableScreenHeader title={title} 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/index.css

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

src/services/Authentication.service.ts

@@ -1,8 +1,8 @@
 import LoggerFactory from './logger/LoggerFactory';
 import ILogger from './logger/LoggerInterface';
 import PlatformDetectionService from './PlatformDetection.service';
-import { AuthenticationResponse, PhenixWebSocket } from './net/websockets/PhenixWebSocket';
-import { PhenixWebSocketMessage } from './net/websockets/PhenixWebSocketMessage';
+import {AuthenticationResponse, PhenixWebSocket} from './net/websockets/PhenixWebSocket';
+import {PhenixWebSocketMessage} from './net/websockets/PhenixWebSocketMessage';
 import UserStoreService from './user-store';
 
 //TEMPORARY

src/services/Channel.service.ts

@@ -1,7 +1,7 @@
 /**
  * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
  */
-import { Channel, Channels } from '@techniker-me/pcast-api';
+import {Channel, Channels} from '@techniker-me/pcast-api';
 import PCastApiService from './PCastApi.service';
 import LoggerFactory from './logger/LoggerFactory';
 
@@ -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;
-
+      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.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) {
@@ -201,7 +199,7 @@ class ChannelService {
    */
   async getChannel(channelId: string): Promise<Channel | null> {
     try {
-      logger.debug('Getting channel', { channelId });
+      logger.debug('Getting channel', {channelId});
 
       if (!this.phenixChannelService) {
         return PCastApiService.channels.get(channelId);
@@ -219,7 +217,7 @@ class ChannelService {
    */
   async getPublisherCount(channelId: string): Promise<number> {
     try {
-      logger.debug('Getting publisher count', { channelId });
+      logger.debug('Getting publisher count', {channelId});
 
       if (!this.phenixChannelService) {
         return PCastApiService.channels.getPublisherCount(channelId);

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,9 +114,7 @@ const channelsPublishingSlice = createSlice({
       state.error = action.payload;
     },
     updateChannelState: (state, action: PayloadAction<ChannelPublishingState>) => {
-      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;
@@ -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(
-          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;

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

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({
@@ -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 {
-  setCurrentScreen,
-  setScreenProps,
-  updateScreenProps,
-  navigateToScreen,
-  navigateBack,
-  clearScreenProps,
-  resetNavigation
-} = screensSlice.actions;
+export const {setCurrentScreen, setScreenProps, updateScreenProps, navigateToScreen, navigateBack, clearScreenProps, resetNavigation} = screensSlice.actions;
 
 export default screensSlice.reducer;

src/store/middlewares/authenticationMiddleware.ts

@@ -56,7 +56,7 @@ 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');

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/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>
-  <Loader />
-</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(() => ({
-    [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<ITableSortSearch>) => {
@@ -90,10 +94,7 @@ export const ChannelList = (): React.JSX.Element => {
       <Body className="table-container">
         <Error>
           {(channelListErrorMessages as Record<string, string>)[error] || error}
-          <button 
-            onClick={() => dispatch(listChannels())} 
-            style={{ marginLeft: '10px', padding: '5px 10px' }}
-          >
+          <button onClick={() => dispatch(listChannels())} style={{marginLeft: '10px', padding: '5px 10px'}}>
             Retry
           </button>
         </Error>
@@ -104,37 +105,31 @@ export const ChannelList = (): React.JSX.Element => {
   return (
     <div>
       <Body className="table-container">
-        {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 
-                  onClick={() => setCreateChannelModalOpened(true)}
-                  style={{ padding: '10px 20px', marginTop: '1rem' }}
-                >
-                  Create Channel
-                </button>
-              </div>
-            </Main>
-          ) : (
-            <TableWithPagination
-              title="Channels"
-              screenHeader={screenHeader}
-              columns={channelsColumns}
-              data={channels as any[]}
-              paginationItemText="channels"
-              changeSortProps={changeScreenProps}
-              changeSearch={changeScreenProps}
-            />
-          )}
+        {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 onClick={() => setCreateChannelModalOpened(true)} style={{padding: '10px 20px', marginTop: '1rem'}}>
+                Create Channel
+              </button>
+            </div>
+          </Main>
+        ) : (
+          <TableWithPagination
+            title="Channels"
+            screenHeader={screenHeader}
+            columns={channelsColumns}
+            data={channels as any[]}
+            paginationItemText="channels"
+            changeSortProps={changeScreenProps}
+            changeSearch={changeScreenProps}
+          />
+        )}
       </Body>
-      {isCreateChannelModalOpened && (
-        <CreateChannelModal 
-          getChannelList={refreshChannelList} 
-          setCreateChannelModalOpened={setCreateChannelModalOpened} 
-        />
-      )}
+      {isCreateChannelModalOpened && <CreateChannelModal getChannelList={refreshChannelList} setCreateChannelModalOpened={setCreateChannelModalOpened} />}
     </div>
   );
 };