Skip to content

Commit 44cf60d

Browse files
tolmachev21tolmachev21
authored
fix(condo): DOMA-12533 turn off cache in contact page and fix offset query type (#7015)
* feat(condo): DOMA-12533 turn off cache and offset query type * fix(condo): DOMA-12533 update filter component styles and remove unused CSS module * fix(condo): DOMA-12533 update type handling for contact filters and improve state management in table component
1 parent b82e72e commit 44cf60d

File tree

4 files changed

+55
-32
lines changed

4 files changed

+55
-32
lines changed

‎apps/condo/domains/common/components/Table/Filters.tsx‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,6 @@ import DateRangePicker from '@condo/domains/common/components/Pickers/DateRangeP
3131
import { colors } from '@condo/domains/common/constants/style'
3232
import { QueryArgType, OptionType } from '@condo/domains/common/utils/tables.utils'
3333

34-
import styles from './Filters.module.css'
35-
3634
import { Button } from '../Button'
3735

3836

@@ -73,6 +71,14 @@ interface IFilterContainerProps {
7371
}
7472

7573
const FILTER_CONTAINER_STYLES: CSSProperties = { padding: 16 }
74+
const FILTER_COMPONENT_BASE_CONTAINER_STYLE: CSSProperties = {
75+
display: 'flex',
76+
flexDirection: 'column',
77+
}
78+
const FILTER_COMPONENT_GQL_SELECT_CONTAINER_STYLE: CSSProperties = {
79+
...FILTER_COMPONENT_BASE_CONTAINER_STYLE,
80+
width: '400px',
81+
}
7682

7783
const handleStopPropagation = (e) => e.stopPropagation()
7884

@@ -254,7 +260,7 @@ export const getOptionFilterDropdown: GetOptionFilterDropdownType = ({ container
254260
>
255261
<Checkbox.Group
256262
{...checkboxGroupProps}
257-
className={styles.filterComponentCheckboxGroupContainer}
263+
style={FILTER_COMPONENT_BASE_CONTAINER_STYLE}
258264
value={selectedKeys.map(key => String(key))}
259265
onChange={handleChange}
260266
/>
@@ -286,7 +292,7 @@ export const getCheckboxGroupFilterComponent: GetCheckboxGroupFilterComponentTyp
286292
return (
287293
<Checkbox.Group
288294
{...checkboxGroupProps}
289-
className={styles.filterComponentCheckboxGroupContainer}
295+
style={FILTER_COMPONENT_BASE_CONTAINER_STYLE}
290296
value={checkboxGroupValue}
291297
onChange={handleChangeCheckboxGroup}
292298
/>
@@ -325,7 +331,7 @@ export const getSelectFilterDropdown = <ValueType extends AntSelectValueType>({
325331
showArrow
326332
optionFilterProp='label'
327333
{...selectProps}
328-
className={styles.filterComponentSelectContainer}
334+
style={FILTER_COMPONENT_BASE_CONTAINER_STYLE}
329335
// NOTE: Type casting problem
330336
// @ts-ignore
331337
value={selectedKeys}
@@ -443,14 +449,13 @@ export const getGQLSelectFilterComponent: GetGQLSelectFilterComponentType = ({ g
443449
}
444450

445451
return (
446-
<div className={styles.filterComponentGqlSelectContainer}>
447-
<GraphQlSearchInput
448-
showArrow
449-
{...gqlSelectProps}
450-
value={gqlSelectValue}
451-
onChange={handleChangeGQLSelect}
452-
/>
453-
</div>
452+
<GraphQlSearchInput
453+
showArrow
454+
style={FILTER_COMPONENT_GQL_SELECT_CONTAINER_STYLE}
455+
{...gqlSelectProps}
456+
value={gqlSelectValue}
457+
onChange={handleChangeGQLSelect}
458+
/>
454459
)
455460
}
456461

‎apps/condo/domains/common/utils/tableUrls.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -93,9 +93,9 @@ const getRowSelectionFromQuery = (query: ParsedUrlQuery): RowSelectionState => {
9393
return selectedRowsArray
9494
}
9595

96-
const normalizeOffset = (startRow: number | undefined): number | null => {
96+
const normalizeOffset = (startRow: number | undefined): string | null => {
9797
if (startRow === undefined) return null
98-
return startRow > 0 ? startRow : null
98+
return startRow > 0 ? String(startRow) : null
9999
}
100100

101101
const isValidFilterValue = (value: unknown): boolean => {
@@ -189,7 +189,7 @@ export const defaultUpdateUrlQuery = (router: NextRouter, params: FullTableState
189189

190190
if (router) {
191191
router.replace({
192-
pathname: router.pathname || '/contact',
192+
pathname: router.pathname,
193193
query: nextQuery as Record<string, string | string[]>,
194194
}, undefined, { shallow: true })
195195
}

‎apps/condo/pages/contact/index.tsx‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ const useContactImportIsVerifiedCheckbox = () => {
134134
}
135135

136136
type DefaultActionBarProps = {
137-
getContactsWhere: (filterState: FilterState) => ContactWhereInput
137+
getContactsWhere: (filterState: FilterState, globalFilter: string | undefined) => ContactWhereInput
138138
getContactsSortBy: (sortState: SortState) => SortContactsBy[]
139139
tableRef: TableRef | null
140140
}
@@ -150,7 +150,7 @@ const DefaultActionBar: React.FC<DefaultActionBarProps> = ({ getContactsWhere, t
150150
const [columns, contactNormalizer, contactValidator, contactCreator] = useImporterFunctions({ isVerifiedRef })
151151

152152
const { ExportButton } = useContactExportToExcelTask({
153-
where: getContactsWhere(tableRef?.api?.getFilterState()),
153+
where: getContactsWhere(tableRef?.api?.getFilterState(), tableRef?.api?.getGlobalFilter()),
154154
sortBy: getContactsSortBy(tableRef?.api?.getSorting()),
155155
format: ContactExportTaskFormatType.Excel,
156156
user,
@@ -424,12 +424,16 @@ const ContactTableContent: React.FC<ContactPageContentProps> = ({
424424
const query = url.split('?')[1]
425425
if (pathname === '/contact' || pathname === '/contact/') {
426426
if (tableRef.current && !query) {
427-
const fullTableState = defaultParseUrlQuery(router.query, CONTACT_PAGE_SIZE)
428-
const currentState = tableRef.current.api?.getFullTableState?.()
429-
if (currentState && isEqual(currentState, fullTableState)) return
430-
tableRef.current.api?.setFullTableState(fullTableState)
431-
handleSearchChange(String(fullTableState.globalFilter || ''))
432-
setSelectedRowsCount(tableRef.current.api?.getRowSelection().length || 0)
427+
tableRef.current.api?.setFullTableState({
428+
filterState: {},
429+
sortState: [],
430+
startRow: 0,
431+
endRow: CONTACT_PAGE_SIZE,
432+
globalFilter: '',
433+
rowSelectionState: [],
434+
})
435+
handleSearchChange('')
436+
setSelectedRowsCount(0)
433437
}
434438
}
435439
}
@@ -447,14 +451,22 @@ const ContactTableContent: React.FC<ContactPageContentProps> = ({
447451
}
448452
}, [baseSearchQuery, tableRef])
449453

450-
const getContactsWhere = useCallback((filterState: FilterState) => {
451-
if (!filterState) {
454+
const getContactsWhere = useCallback((filterState: FilterState, globalFilter: string | undefined) => {
455+
const hasFilters = filterState && Object.keys(filterState).length > 0
456+
const hasGlobalFilter = globalFilter && globalFilter.trim() !== ''
457+
458+
if (!hasFilters && !hasGlobalFilter) {
452459
return baseSearchQuery
453460
}
454461

462+
const queryFilters = { ...filterState }
463+
if (hasGlobalFilter) {
464+
queryFilters.search = globalFilter
465+
}
466+
455467
return {
456468
...baseSearchQuery,
457-
...filtersToWhere(filterState),
469+
...filtersToWhere(queryFilters),
458470
}
459471
}, [baseSearchQuery, filtersToWhere])
460472

@@ -472,7 +484,7 @@ const ContactTableContent: React.FC<ContactPageContentProps> = ({
472484
startRow,
473485
endRow,
474486
globalFilter,
475-
}, isRefetch) => {
487+
}) => {
476488
const sortBy = getContactsSortBy(sortState)
477489
const where = {
478490
...baseSearchQuery,
@@ -490,7 +502,7 @@ const ContactTableContent: React.FC<ContactPageContentProps> = ({
490502

491503
const { data: { contacts, meta: { count } } } = await fetchContacts({
492504
variables: payload,
493-
fetchPolicy: isRefetch ? 'network-only' : 'cache-first',
505+
fetchPolicy: 'network-only',
494506
})
495507

496508
return { rowData: contacts?.filter(Boolean) ?? [], rowCount: count }

‎packages/ui/src/components/Table/table.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -233,18 +233,24 @@ function TableComponent<TData extends RowData = RowData> (
233233
return tableColumns
234234
}, [tableColumns, columnOrder])
235235

236+
const onTableStateChangeRef = useRef(onTableStateChange)
237+
238+
useEffect(() => {
239+
onTableStateChangeRef.current = onTableStateChange
240+
}, [onTableStateChange])
241+
236242
// NOTE: This effect should be first, because if we have error in this effect, we don't want to change the table state and fetch new data
237243
useEffect(() => {
238244
const handleTableStateChange = async () => {
239-
if (onTableStateChange) {
245+
if (onTableStateChangeRef.current) {
240246
const startRow = pagination.pageIndex * pagination.pageSize
241247
const endRow = startRow + pagination.pageSize
242248
const filterState = columnFilters.reduce((acc, filter) => {
243249
acc[filter.id] = filter.value
244250
return acc
245251
}, {} as FilterState)
246252

247-
onTableStateChange({
253+
onTableStateChangeRef.current({
248254
startRow,
249255
endRow,
250256
filterState,
@@ -256,7 +262,7 @@ function TableComponent<TData extends RowData = RowData> (
256262
}
257263

258264
handleTableStateChange()
259-
}, [sorting, pagination, columnFilters, onTableStateChange, rowSelection, globalFilter])
265+
}, [sorting, pagination, columnFilters, rowSelection, globalFilter])
260266

261267
const stableDataSource = useRef(dataSource)
262268

0 commit comments

Comments
 (0)