From 607700b932cf250350e050f37bf28b27a0ad957d Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Tue, 29 Jul 2025 20:43:34 +0200
Subject: [PATCH] refactor: remove conditionally render

---
 .../CellSortable/CellSortable.tsx             | 69 +++++++++----------
 1 file changed, 33 insertions(+), 36 deletions(-)

diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
index ccd5fbe9c4..4a6ad57406 100644
--- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
+++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
@@ -9,7 +9,6 @@ import {
     useState,
 } from 'react';
 import { Tooltip } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { AnnouncerContext } from 'component/common/Announcer/AnnouncerContext/AnnouncerContext';
 import {
     StyledButton,
@@ -114,42 +113,40 @@ export const CellSortable: FC<ICellSortableProps> = ({
             isFlexGrow={isFlexGrow}
             isSortable={isSortable}
         >
-            <ConditionallyRender
-                condition={isSortable}
-                show={
-                    <Tooltip title={tooltipTitle} arrow>
-                        <StyledButton
-                            isSorted={isSorted}
-                            type='button'
-                            onClick={onSortClick}
+            {isSortable ? (
+                <Tooltip title={tooltipTitle} arrow>
+                    <StyledButton
+                        isSorted={isSorted}
+                        type='button'
+                        onClick={onSortClick}
+                    >
+                        <StyledHiddenMeasurementLayer
+                            style={alignStyle}
+                            aria-hidden
                         >
-                            <StyledHiddenMeasurementLayer
-                                style={alignStyle}
-                                aria-hidden
-                            >
-                                <StyledLabel tabIndex={-1} data-text={children}>
-                                    {children}
-                                </StyledLabel>
-                                <SortArrow
-                                    isSorted={isSorted}
-                                    isDesc={isDescending}
-                                />
-                            </StyledHiddenMeasurementLayer>
-                            <StyledVisibleAbsoluteLayer style={alignStyle}>
-                                <span ref={ref} tabIndex={-1}>
-                                    <span>{children}</span>
-                                </span>
-                                <SortArrow
-                                    isSorted={isSorted}
-                                    isDesc={isDescending}
-                                    className='sort-arrow'
-                                />
-                            </StyledVisibleAbsoluteLayer>
-                        </StyledButton>
-                    </Tooltip>
-                }
-                elseShow={<div style={alignStyle}>{children}</div>}
-            />
+                            <StyledLabel tabIndex={-1} data-text={children}>
+                                {children}
+                            </StyledLabel>
+                            <SortArrow
+                                isSorted={isSorted}
+                                isDesc={isDescending}
+                            />
+                        </StyledHiddenMeasurementLayer>
+                        <StyledVisibleAbsoluteLayer style={alignStyle}>
+                            <span ref={ref} tabIndex={-1}>
+                                <span>{children}</span>
+                            </span>
+                            <SortArrow
+                                isSorted={isSorted}
+                                isDesc={isDescending}
+                                className='sort-arrow'
+                            />
+                        </StyledVisibleAbsoluteLayer>
+                    </StyledButton>
+                </Tooltip>
+            ) : (
+                <div style={alignStyle}>{children}</div>
+            )}
         </StyledTableCell>
     );
 };