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
+46 -53
View File
@@ -17,10 +17,9 @@ 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: [
@@ -35,18 +34,16 @@ const useDataFilterStore = create((set, get) => ({
] ]
} }
: filterGroup : filterGroup
}) )
} })),
}),
updateFilterColumn: (groupID, filterID, col, type, op, value) => set((state) => { updateFilterColumn: (groupID, filterID, col, type, op, value) => 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 =>
return filterID === filter.id ? filterID === filter.id ?
{ {
...filter, ...filter,
col: col, col: col,
@@ -55,92 +52,88 @@ const useDataFilterStore = create((set, get) => ({
value: value value: value
} }
: filter : filter
}) )
} }
: group : group
}), ),
} })),
}),
updateFilterOps: (groupID, filterID, op) => 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 =>
return filterID === filter.id ? filterID === filter.id ?
{ {
...filter, ...filter,
op: op, op: op,
} }
: filter : filter
}) )
} }
: group : group
}), ),
} })),
}),
updateFilterValue: (groupID, filterID, value, dateType = undefined) => 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 =>
return filterID === filter.id ? filterID === filter.id ?
{ {
...filter, ...filter,
value: (dateType === "s") ? {...filter.value, start: value} : (dateType === "e") ? {...filter.value, end: value } : value value: (dateType === "s") ? {...filter.value, start: value} : (dateType === "e") ? {...filter.value, end: value } : value
} }
: filter : filter
}) )
} }
: group : 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
}) )})),
})
})); }));