chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: copy fn in zustand was directly altering state (anti pattern) and crashing the page

Browse Source
This commit is contained in:
vkuchenik
2026-11-12 10:23:44 -08:00
parent 34a2501e5e
commit e597adfd13
2 changed files with 95 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/data_explorer/MyQueryBuilder.jsx
+2 -2
View File
@@ -149,7 +149,7 @@ function FilterGroup({ groupID, filters, columns }) {
<Stack spacing="2"> <Stack spacing="2">
{filters?.map((filter) => ( {filters?.map((filter) => (
<FilterRow key={filter.id} groupID={groupID} filterID={filter.id} filter={filter} columns={columns} setUrl={setUrl} copiedFilter={copiedFilter} /> <FilterRow key={filter.id} groupID={groupID} filterID={filter.id} filter={filter} columns={columns} />
))} ))}
<Button onClick={() => addFilter(groupID)} variant="outline" size="sm" color="text" borderColor="widgetBadgeBg" _hover={{ bg: "widgetBadgeBg" }}> <Button onClick={() => addFilter(groupID)} variant="outline" size="sm" color="text" borderColor="widgetBadgeBg" _hover={{ bg: "widgetBadgeBg" }}>
Add Filter <Plus /> Add Filter <Plus />
@@ -209,7 +209,7 @@ function FilterRow({ groupID, filterID, filter, columns }) {
<HoverCard.Root positioning={{ placement: "top" }}> <HoverCard.Root positioning={{ placement: "top" }}>
<HoverCard.Trigger asChild> <HoverCard.Trigger asChild>
<Button <Button
onClick={() => pasteFilter(groupID)} onClick={() => pasteFilter(groupID, filterID)}
variant="ghost" variant="ghost"
size="sm" size="sm"
color="text" color="text"
client/src/store/useDataFilterStore.jsx
+93 -100
View File
@@ -17,130 +17,123 @@ const useDataFilterStore = create((set, get) => ({
filterGroups: state.filterGroups.filter((group) => group.id !== groupID), filterGroups: state.filterGroups.filter((group) => group.id !== groupID),
})), })),
addFilter: (groupID) => set((state) => { addFilter: (groupID) => set((state) => ({
return { filterGroups: state.filterGroups.map(filterGroup =>
filterGroups: state.filterGroups.map(filterGroup => { filterGroup.id === groupID ?
return filterGroup.id === groupID ? {
{ ...filterGroup,
...filterGroup, filters: [
filters: [ ...filterGroup.filters,
...filterGroup.filters, {
id: crypto.randomUUID(),
col: null,
type: null,
op: null,
value: null
}
]
}
: filterGroup
)
})),
updateFilterColumn: (groupID, filterID, col, type, op, value) => set((state) => ({
filterGroups: state.filterGroups.map((group) =>
groupID === group.id ?
{
...group,
filters: group.filters.map(filter =>
filterID === filter.id ?
{ {
id: crypto.randomUUID(), ...filter,
col: null, col: col,
type: null, type: type,
op: null, op: op,
value: null value: value
} }
] : filter
} )
: filterGroup }
}) : group
} ),
}), })),
updateFilterColumn: (groupID, filterID, col, type, op, value) => set((state) => { updateFilterOps: (groupID, filterID, op) => set((state) => ({
return { filterGroups: state.filterGroups.map((group) =>
filterGroups: state.filterGroups.map((group) => { groupID === group.id ?
return groupID === group.id ? {
{ ...group,
...group, filters: group.filters.map(filter =>
filters: group.filters.map(filter => { filterID === filter.id ?
return filterID === filter.id ? {
{ ...filter,
...filter, op: op,
col: col, }
type: type, : filter
op: op, )
value: value }
}
: filter
})
}
: group : group
}), ),
} })),
}),
updateFilterOps: (groupID, filterID, op) => set((state) => { updateFilterValue: (groupID, filterID, value, dateType = undefined) => set((state) => ({
return { filterGroups: state.filterGroups.map((group) =>
filterGroups: state.filterGroups.map((group) => { groupID === group.id ?
return groupID === group.id ? {
{ ...group,
...group, filters: group.filters.map(filter =>
filters: group.filters.map(filter => { filterID === filter.id ?
return filterID === filter.id ? {
{ ...filter,
...filter, value: (dateType === "s") ? {...filter.value, start: value} : (dateType === "e") ? {...filter.value, end: value } : value
op: op, }
} : filter
: filter )
}) }
} : group
: group ),
}), })),
}
}),
updateFilterValue: (groupID, filterID, value, dateType = undefined) => set((state) => {
return {
filterGroups: state.filterGroups.map((group) => {
return groupID === group.id ?
{
...group,
filters: group.filters.map(filter => {
return filterID === filter.id ?
{
...filter,
value: (dateType === "s") ? {...filter.value, start: value} : (dateType === "e") ? {...filter.value, end: value } : value
}
: filter
})
}
: group
}),
}
}),
removeFilter: (groupID, filterID) => set((state) => ({ removeFilter: (groupID, filterID) => set((state) => ({
filterGroups: state.filterGroups.map((group) => { filterGroups: state.filterGroups.map((group) =>
return group.id === groupID ? group.id === groupID ?
{ {
...group, ...group,
filters: group.filters.filter((f) => f.id !== filterID) filters: group.filters.filter((f) => f.id !== filterID)
} }
: group : group
}), ),
})), })),
copyFilter: (filter) => set((state) => ({ copyFilter: (filter) => set({
copiedFilter: state.copiedFilter = { copiedFilter: {
col: filter.col, col: filter.col,
type: filter.type, type: filter.type,
op: filter.op, op: filter.op,
value: filter.value value: filter.value
} }
})), }),
pasteFilter: (groupID) => set((state) => { pasteFilter: (groupID, filterID) => set((state) => ({
state.filterGroups.map((group) => { filterGroups: state.filterGroups.map((group) =>
return groupID === group.id ? groupID === group.id ?
{ {
...group, ...group,
filters: [ filters: group.filters.map(filter =>
...group.filters, filterID === filter.id ?
{ {
id: crypto.randomUUID(), ...filter,
col: state.copiedFilter.col, col: state.copiedFilter.col,
type: state.copiedFilter.type, type: state.copiedFilter.type,
op: state.copiedFilter.op, op: state.copiedFilter.op,
value: state.copiedFilter.value, value: state.copiedFilter.value
} }
] : filter
)
} }
: group : group
}) )})),
})
})); }));