From 1d1219a0555ef480df865b527e3f1ac071d1f991 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Fri, 16 Dec 2022 09:46:04 +0000 Subject: [PATCH] Use new useConditionallyHiddenColumns hook (#2695) https://linear.app/unleash/issue/2-515/adapt-tables-to-use-the-new-useconditionallyhiddencolumns-hook Uses the new `useConditionallyHiddenColumns` hook, like mentioned here: https://github.com/Unleash/unleash/pull/2691 Also includes small fixes for things I caught along the way. See comments below. --- .../ProjectRoleList/ProjectRoleList.tsx | 20 ++++++----- .../admin/users/UsersList/UsersList.tsx | 34 +++++++++++-------- .../archive/ArchiveTable/ArchiveTable.tsx | 28 +++++++++------ .../ChangeRequestsTabs/ChangeRequestsTabs.tsx | 18 ++++++---- .../FeatureToggleListTable.tsx | 34 ++++++++++++------- .../FeatureMetricsTable.tsx | 20 ++++++----- .../EnvironmentVariantsTable.tsx | 27 +++++++++------ .../FeatureVariantsList.tsx | 25 ++++++++------ .../PlaygroundResultsTable.tsx | 25 ++++++++------ .../ProjectFeatureToggles.tsx | 20 ++++++----- .../ProjectHealth/ReportTable/ReportTable.tsx | 34 +++++++++++-------- .../segments/SegmentTable/SegmentTable.tsx | 20 ++++++----- .../PersonalAPITokensTab.tsx | 25 ++++++++------ .../hooks/useConditionallyHiddenColumns.ts | 24 ++++++++----- 14 files changed, 213 insertions(+), 141 deletions(-) diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx index 11f55c94f0..9c08b75467 100644 --- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx +++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from 'react'; +import { useMemo, useState } from 'react'; import { Table, SortableTableHeader, @@ -28,6 +28,7 @@ import { HighlightCell } from 'component/common/Table/cells/HighlightCell/Highli import theme from 'themes/theme'; import { IconCell } from 'component/common/Table/cells/IconCell/IconCell'; import { Search } from 'component/common/Search/Search'; +import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; const ROOTROLE = 'root'; const BUILTIN_ROLE_TYPE = 'project'; @@ -174,13 +175,16 @@ const ProjectRoleList = () => { useSortBy ); - useEffect(() => { - const hiddenColumns = []; - if (isExtraSmallScreen) { - hiddenColumns.push('Icon'); - } - setHiddenColumns(hiddenColumns); - }, [setHiddenColumns, isExtraSmallScreen]); + useConditionallyHiddenColumns( + [ + { + condition: isExtraSmallScreen, + columns: ['Icon'], + }, + ], + setHiddenColumns, + columns + ); let count = data.length < rows.length diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx index e0a6189ac0..1d65f047c6 100644 --- a/frontend/src/component/admin/users/UsersList/UsersList.tsx +++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useMemo, useState } from 'react'; import { TablePlaceholder, VirtualizedTable } from 'component/common/Table'; import ChangePassword from './ChangePassword/ChangePassword'; import DeleteUser from './DeleteUser/DeleteUser'; @@ -32,6 +32,7 @@ import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCel import { UsersActionsCell } from './UsersActionsCell/UsersActionsCell'; import { Search } from 'component/common/Search/Search'; import { UserAvatar } from 'component/common/UserAvatar/UserAvatar'; +import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; const UsersList = () => { const navigate = useNavigate(); @@ -216,19 +217,24 @@ const UsersList = () => { useFlexLayout ); - useEffect(() => { - const hiddenColumns = []; - if (!isBillingUsers || isSmallScreen) { - hiddenColumns.push('type'); - } - if (isSmallScreen) { - hiddenColumns.push('createdAt', 'last-login'); - } - if (isExtraSmallScreen) { - hiddenColumns.push('imageUrl', 'role'); - } - setHiddenColumns(hiddenColumns); - }, [setHiddenColumns, isExtraSmallScreen, isSmallScreen, isBillingUsers]); + useConditionallyHiddenColumns( + [ + { + condition: !isBillingUsers || isSmallScreen, + columns: ['type'], + }, + { + condition: isExtraSmallScreen, + columns: ['imageUrl', 'role'], + }, + { + condition: isSmallScreen, + columns: ['createdAt', 'last-login'], + }, + ], + setHiddenColumns, + columns + ); return ( [ { - id: 'Seen', Header: 'Seen', width: 85, canSort: true, @@ -174,6 +174,8 @@ export const ArchiveTable = ({ // Always hidden -- for search { accessor: 'description', + header: 'Description', + searchable: true, }, ], //eslint-disable-next-line @@ -222,16 +224,20 @@ export const ArchiveTable = ({ useSortBy ); - useEffect(() => { - const hiddenColumns = ['description']; - if (isMediumScreen) { - hiddenColumns.push('lastSeenAt', 'status'); - } - if (isSmallScreen) { - hiddenColumns.push('type', 'createdAt'); - } - setHiddenColumns(hiddenColumns); - }, [setHiddenColumns, isSmallScreen, isMediumScreen]); + useConditionallyHiddenColumns( + [ + { + condition: isSmallScreen, + columns: ['type', 'createdAt'], + }, + { + condition: isMediumScreen, + columns: ['lastSeenAt', 'stale'], + }, + ], + setHiddenColumns, + columns + ); useEffect(() => { if (loading) { diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx index 275cd686ab..93315ded63 100644 --- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx +++ b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx @@ -25,6 +25,7 @@ import { ChangeRequestTitleCell } from './ChangeRequestTitleCell/ChangeRequestTi import { TableBody, TableRow } from '../../../common/Table'; import { useStyles } from './ChangeRequestsTabs.styles'; import { createLocalStorage } from '../../../../utils/createLocalStorage'; +import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; export interface IChangeRequestTableProps { changeRequests: any[]; @@ -172,13 +173,16 @@ export const ChangeRequestsTabs = ({ useSortBy ); - useEffect(() => { - const hiddenColumns = ['']; - if (isSmallScreen) { - hiddenColumns.push('createdBy', 'updatedAt'); - } - setHiddenColumns(hiddenColumns); - }, [setHiddenColumns, isSmallScreen]); + useConditionallyHiddenColumns( + [ + { + condition: isSmallScreen, + columns: ['createdBy'], + }, + ], + setHiddenColumns, + columns + ); useEffect(() => { if (loading) { diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx index c89f270b17..d83a980c15 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx @@ -26,6 +26,7 @@ import { FavoriteIconCell } from 'component/common/Table/cells/FavoriteIconCell/ import { FavoriteIconHeader } from 'component/common/Table/FavoriteIconHeader/FavoriteIconHeader'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage'; +import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; export const featuresPlaceholder: FeatureSchema[] = Array(15).fill({ name: 'Name of the feature', @@ -174,6 +175,8 @@ export const FeatureToggleListTable: VFC = () => { // Always hidden -- for search { accessor: 'description', + Header: 'Description', + searchable: true, }, ], [isFavoritesPinned, uiConfig?.flags?.favorites] @@ -213,19 +216,24 @@ export const FeatureToggleListTable: VFC = () => { useFlexLayout ); - useEffect(() => { - const hiddenColumns = ['description']; - if (!features.some(({ tags }) => tags?.length)) { - hiddenColumns.push('tags'); - } - if (isMediumScreen) { - hiddenColumns.push('lastSeenAt', 'stale'); - } - if (isSmallScreen) { - hiddenColumns.push('type', 'createdAt', 'tags'); - } - setHiddenColumns(hiddenColumns); - }, [setHiddenColumns, isSmallScreen, isMediumScreen, features, columns]); + useConditionallyHiddenColumns( + [ + { + condition: !features.some(({ tags }) => tags?.length), + columns: ['tags'], + }, + { + condition: isSmallScreen, + columns: ['type', 'createdAt', 'tags'], + }, + { + condition: isMediumScreen, + columns: ['lastSeenAt', 'stale'], + }, + ], + setHiddenColumns, + columns + ); useEffect(() => { const tableState: PageQueryType = {}; diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx index 912a7cc7ca..2989bd390e 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx @@ -5,9 +5,10 @@ import { useTable, useGlobalFilter, useSortBy } from 'react-table'; import { SortableTableHeader, TableCell, Table } from 'component/common/Table'; import { IconCell } from 'component/common/Table/cells/IconCell/IconCell'; import { Assessment } from '@mui/icons-material'; -import { useMemo, useEffect } from 'react'; +import { useMemo } from 'react'; import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; import theme from 'themes/theme'; +import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; interface IFeatureMetricsTableProps { metrics: IFeatureMetricsRaw[]; @@ -41,13 +42,16 @@ export const FeatureMetricsTable = ({ useSortBy ); - useEffect(() => { - const hiddenColumns = []; - if (isMediumScreen) { - hiddenColumns.push('appName', 'environment'); - } - setHiddenColumns(hiddenColumns); - }, [setHiddenColumns, isMediumScreen]); + useConditionallyHiddenColumns( + [ + { + condition: isMediumScreen, + columns: ['appName', 'environment'], + }, + ], + setHiddenColumns, + COLUMNS + ); if (metrics.length === 0) { return null; diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable.tsx index ed6dd11cf7..623903b34b 100644 --- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable.tsx @@ -13,12 +13,13 @@ import { IOverride, IPayload, } from 'interfaces/featureToggle'; -import { useEffect, useMemo } from 'react'; +import { useMemo } from 'react'; import { useFlexLayout, useSortBy, useTable } from 'react-table'; import { sortTypes } from 'utils/sortTypes'; import { PayloadCell } from './PayloadCell/PayloadCell'; import { OverridesCell } from './OverridesCell/OverridesCell'; import { VariantsActionCell } from './VariantsActionsCell/VariantsActionsCell'; +import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; const StyledTableContainer = styled('div')(({ theme }) => ({ margin: theme.spacing(3, 0), @@ -145,16 +146,20 @@ export const EnvironmentVariantsTable = ({ useFlexLayout ); - useEffect(() => { - const hiddenColumns = []; - if (isLargeScreen) { - hiddenColumns.push('weightType'); - } - if (isMediumScreen) { - hiddenColumns.push('payload', 'overrides'); - } - setHiddenColumns(hiddenColumns); - }, [setHiddenColumns, isMediumScreen, isLargeScreen]); + useConditionallyHiddenColumns( + [ + { + condition: isMediumScreen, + columns: ['payload', 'overrides'], + }, + { + condition: isLargeScreen, + columns: ['weightType'], + }, + ], + setHiddenColumns, + columns + ); return ( diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx index 3f834f9201..c9f4f5ed1a 100644 --- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx @@ -34,6 +34,7 @@ import { PayloadOverridesCell } from './PayloadOverridesCell/PayloadOverridesCel import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; import theme from 'themes/theme'; import { VariantsActionCell } from './VariantsActionsCell/VariantsActionsCell'; +import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; export const FeatureVariantsList = () => { const { hasAccess } = useContext(AccessContext); @@ -206,16 +207,20 @@ export const FeatureVariantsList = () => { useSortBy ); - useEffect(() => { - const hiddenColumns = []; - if (isLargeScreen) { - hiddenColumns.push('weightType'); - } - if (isMediumScreen) { - hiddenColumns.push('data'); - } - setHiddenColumns(hiddenColumns); - }, [setHiddenColumns, isMediumScreen, isLargeScreen]); + useConditionallyHiddenColumns( + [ + { + condition: isMediumScreen, + columns: ['data'], + }, + { + condition: isLargeScreen, + columns: ['weightType'], + }, + ], + setHiddenColumns, + columns + ); // @ts-expect-error const setClonedVariants = clonedVariants => diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx index f14da299a2..24fa19fcc2 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx @@ -26,6 +26,7 @@ import { Box, Typography, useMediaQuery, useTheme } from '@mui/material'; import useLoading from 'hooks/useLoading'; import { VariantCell } from './VariantCell/VariantCell'; import { FeatureResultInfoPopoverCell } from './FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell'; +import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; const defaultSort: SortingRule = { id: 'name' }; const { value, setValue } = createLocalStorage( @@ -184,16 +185,20 @@ export const PlaygroundResultsTable = ({ useSortBy ); - useEffect(() => { - const hiddenColumns = []; - if (isSmallScreen) { - hiddenColumns.push('projectId'); - } - if (isExtraSmallScreen) { - hiddenColumns.push('variant'); - } - setHiddenColumns(hiddenColumns); - }, [setHiddenColumns, isExtraSmallScreen, isSmallScreen]); + useConditionallyHiddenColumns( + [ + { + condition: isExtraSmallScreen, + columns: ['variant'], + }, + { + condition: isSmallScreen, + columns: ['projectId'], + }, + ], + setHiddenColumns, + COLUMNS + ); useEffect(() => { if (loading) { diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx index 580cb6bf9b..3c7fc5b667 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -45,6 +45,7 @@ import { usePinnedFavorites } from 'hooks/usePinnedFavorites'; import { useFavoriteFeaturesApi } from 'hooks/api/actions/useFavoriteFeaturesApi/useFavoriteFeaturesApi'; import { FeatureTagCell } from 'component/common/Table/cells/FeatureTagCell/FeatureTagCell'; import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage'; +import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; interface IProjectFeatureTogglesProps { features: IProject['features']; @@ -430,15 +431,16 @@ export const ProjectFeatureToggles = ({ useSortBy ); - useEffect(() => { - if (!features.some(({ tags }) => tags?.length)) { - setHiddenColumns(hiddenColumns => [...hiddenColumns, 'tags']); - } else { - setHiddenColumns(hiddenColumns => - hiddenColumns.filter(column => column !== 'tags') - ); - } - }, [setHiddenColumns, features]); + useConditionallyHiddenColumns( + [ + { + condition: !features.some(({ tags }) => tags?.length), + columns: ['tags'], + }, + ], + setHiddenColumns, + columns + ); useEffect(() => { if (loading) { diff --git a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx index 7086dde766..0b992843ac 100644 --- a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx +++ b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx @@ -1,4 +1,4 @@ -import { useMemo, useEffect } from 'react'; +import { useMemo } from 'react'; import { IFeatureToggleListItem } from 'interfaces/featureToggle'; import { TablePlaceholder, VirtualizedTable } from 'component/common/Table'; import { PageContent } from 'component/common/PageContent/PageContent'; @@ -23,6 +23,7 @@ import { ReportExpiredCell } from './ReportExpiredCell/ReportExpiredCell'; import { ReportStatusCell } from './ReportStatusCell/ReportStatusCell'; import { formatStatus, ReportingStatus } from './ReportStatusCell/formatStatus'; import { formatExpiredAt } from './ReportExpiredCell/formatExpiredAt'; +import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; interface IReportTableProps { projectId: string; @@ -91,19 +92,24 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => { useSortBy ); - useEffect(() => { - const hiddenColumns = []; - if (isMediumScreen) { - hiddenColumns.push('createdAt'); - } - if (isSmallScreen) { - hiddenColumns.push('expiredAt', 'lastSeenAt'); - } - if (isExtraSmallScreen) { - hiddenColumns.push('stale'); - } - setHiddenColumns(hiddenColumns); - }, [setHiddenColumns, isSmallScreen, isMediumScreen, isExtraSmallScreen]); + useConditionallyHiddenColumns( + [ + { + condition: isExtraSmallScreen, + columns: ['stale'], + }, + { + condition: isSmallScreen, + columns: ['expiredAt', 'lastSeenAt'], + }, + { + condition: isMediumScreen, + columns: ['createdAt'], + }, + ], + setHiddenColumns, + COLUMNS + ); const title = rows.length < data.length diff --git a/frontend/src/component/segments/SegmentTable/SegmentTable.tsx b/frontend/src/component/segments/SegmentTable/SegmentTable.tsx index 5c25c51b9f..206d8cd861 100644 --- a/frontend/src/component/segments/SegmentTable/SegmentTable.tsx +++ b/frontend/src/component/segments/SegmentTable/SegmentTable.tsx @@ -14,7 +14,7 @@ import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightC import { useMediaQuery } from '@mui/material'; import { sortTypes } from 'utils/sortTypes'; import { useSegments } from 'hooks/api/getters/useSegments/useSegments'; -import { useMemo, useEffect, useState } from 'react'; +import { useMemo, useState } from 'react'; import { SegmentEmpty } from 'component/segments/SegmentEmpty/SegmentEmpty'; import { IconCell } from 'component/common/Table/cells/IconCell/IconCell'; import { DonutLarge } from '@mui/icons-material'; @@ -24,6 +24,7 @@ import { DateCell } from 'component/common/Table/cells/DateCell/DateCell'; import theme from 'themes/theme'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { Search } from 'component/common/Search/Search'; +import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; export const SegmentTable = () => { const { segments, loading } = useSegments(); @@ -71,13 +72,16 @@ export const SegmentTable = () => { useSortBy ); - useEffect(() => { - const hiddenColumns = ['description']; - if (isSmallScreen) { - hiddenColumns.push('createdAt', 'createdBy'); - } - setHiddenColumns(hiddenColumns); - }, [setHiddenColumns, isSmallScreen]); + useConditionallyHiddenColumns( + [ + { + condition: isSmallScreen, + columns: ['createdAt', 'createdBy'], + }, + ], + setHiddenColumns, + COLUMNS + ); return ( ({ marginBottom: theme.spacing(3), @@ -199,16 +200,20 @@ export const PersonalAPITokensTab = () => { useFlexLayout ); - useEffect(() => { - const hiddenColumns = []; - if (isSmallScreen) { - hiddenColumns.push('createdAt'); - } - if (isExtraSmallScreen) { - hiddenColumns.push('expiresAt'); - } - setHiddenColumns(hiddenColumns); - }, [setHiddenColumns, isSmallScreen, isExtraSmallScreen]); + useConditionallyHiddenColumns( + [ + { + condition: isExtraSmallScreen, + columns: ['expiresAt'], + }, + { + condition: isSmallScreen, + columns: ['createdAt'], + }, + ], + setHiddenColumns, + columns + ); useEffect(() => { const tableState: PageQueryType = {}; diff --git a/frontend/src/hooks/useConditionallyHiddenColumns.ts b/frontend/src/hooks/useConditionallyHiddenColumns.ts index b6f3962b16..3c714564f2 100644 --- a/frontend/src/hooks/useConditionallyHiddenColumns.ts +++ b/frontend/src/hooks/useConditionallyHiddenColumns.ts @@ -7,19 +7,27 @@ interface IConditionallyHiddenColumns { export const useConditionallyHiddenColumns = ( conditionallyHiddenColumns: IConditionallyHiddenColumns[], - setHiddenColumns: (param: string[]) => void, + setHiddenColumns: ( + columns: string[] | ((columns: string[]) => string[]) + ) => void, columnsDefinition: unknown[] ) => { useEffect(() => { - const hiddenColumnsSet = new Set(); - - conditionallyHiddenColumns + const columnsToHide = conditionallyHiddenColumns .filter(({ condition }) => condition) - .forEach(({ columns }) => - columns.forEach(column => hiddenColumnsSet.add(column)) - ); + .flatMap(({ columns }) => columns); - setHiddenColumns([...hiddenColumnsSet]); + const columnsToShow = conditionallyHiddenColumns + .flatMap(({ columns }) => columns) + .filter(column => !columnsToHide.includes(column)); + + setHiddenColumns(columns => [ + ...new Set( + [...columns, ...columnsToHide].filter( + column => !columnsToShow.includes(column) + ) + ), + ]); }, [ ...conditionallyHiddenColumns.map(({ condition }) => condition), setHiddenColumns,