Skip to content

Find Wallet bug: accordion index stays open when switching filters #14466

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
dbarabashh wants to merge 6 commits into from
Closed

Find Wallet bug: accordion index stays open when switching filters #14466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2bf6819
preserve wallet expanded state when applying filters in DataTable
dbarabashh Dec 6, 2024
2173861
improve type safety with TableRowData interface
dbarabashh Dec 6, 2024
09e8b22
preserve expanded state after removing filters in DataTable
dbarabashh Dec 6, 2024
7330996
improve TableRowData type exports and imports
dbarabashh Dec 6, 2024
680080a
preserve wallet accordion state during filtering
dbarabashh Dec 6, 2024
e439a13
Restore smooth transition animation
dbarabashh Dec 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 23 additions & 13 deletions src/components/DataTable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,14 @@ import {

import { trackCustomEvent } from "@/lib/utils/matomo"

type DataTableProps<TData, TValue> = TableProps & {
export interface TableRowData {
name: string
id?: string | number
description?: string
url?: string
}

type DataTableProps<TData extends TableRowData, TValue> = TableProps & {
columns: ColumnDef<TData, TValue>[]
data: TData[]
subComponent?: FC<TData>
Expand All @@ -38,7 +45,7 @@ export type TableMeta = {
[key: string]: string | number | ((open: boolean) => void)
}

const DataTable = <TData, TValue>({
const DataTable = <TData extends TableRowData, TValue>({
columns,
data,
subComponent,
Expand All @@ -52,17 +59,19 @@ const DataTable = <TData, TValue>({
}: DataTableProps<TData, TValue>) => {
const [isVisible, setIsVisible] = useState(true)
const [currentData, setCurrentData] = useState(data)
const [expanded, setExpanded] = useState({})
const previousExpandedRef = useRef({})
const previousDataRef = useRef(data)
const [expanded, setExpanded] = useState<Record<string, boolean>>({})
const previousExpandedRef = useRef<Record<string, boolean>>({})
const previousDataRef = useRef<TData[]>(data)

const table = useReactTable({
data: currentData,
columns,
state: {
expanded,
},
onExpandedChange: setExpanded,
onExpandedChange: (updater) =>
setExpanded(updater as Record<string, boolean>),
getRowId: (row: TData) => row.name,
getRowCanExpand: (row) => {
const rowData = row.original as { canExpand?: boolean }
return rowData.canExpand !== undefined ? rowData.canExpand : true
Expand All @@ -89,22 +98,23 @@ const DataTable = <TData, TValue>({

if (newlyExpanded.length > 0) {
const row = table.getRowModel().rowsById[newlyExpanded[0]]
trackCustomEvent({
eventCategory: matomoEventCategory,
eventAction: "expanded",
eventName: (row.original as { name: string }).name,
})
if (row) {
trackCustomEvent({
eventCategory: matomoEventCategory,
eventAction: "expanded",
eventName: row.original.name,
})
}
}

previousExpandedRef.current = expanded
}, [expanded])
}, [expanded, table, matomoEventCategory])

useEffect(() => {
if (JSON.stringify(data) !== JSON.stringify(previousDataRef.current)) {
setIsVisible(false)
const timer = setTimeout(() => {
setCurrentData(data)
table.resetExpanded()
setIsVisible(true)
previousDataRef.current = data
}, 25) // Adjust this value to match your CSS transition duration
Expand Down
6 changes: 3 additions & 3 deletions src/components/ProductTable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ import { ColumnDef } from "@tanstack/react-table"

import type { FilterOption, TPresetFilters } from "@/lib/types"

import Table from "@/components/DataTable"
import Table, { TableRowData } from "@/components/DataTable"
import Filters from "@/components/ProductTable/Filters"
import MobileFilters from "@/components/ProductTable/MobileFilters"
import PresetFilters from "@/components/ProductTable/PresetFilters"

import { trackCustomEvent } from "@/lib/utils/matomo"

interface ProductTableProps<T> {
interface ProductTableProps<T extends TableRowData> {
columns: ColumnDef<T>[]
data: T[]
allDataLength: number
Expand All @@ -33,7 +33,7 @@ interface ProductTableProps<T> {
meta?: Record<string, string | number | boolean>
}

const ProductTable = <T,>({
const ProductTable = <T extends TableRowData>({
columns,
data,
allDataLength,
Expand Down