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">
{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" }}>
Add Filter <Plus />
@@ -209,7 +209,7 @@ function FilterRow({ groupID, filterID, filter, columns }) {
<HoverCard.Root positioning={{ placement: "top" }}>
<HoverCard.Trigger asChild>
<Button
onClick={() => pasteFilter(groupID)}
onClick={() => pasteFilter(groupID, filterID)}
variant="ghost"
size="sm"
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),
})),
addFilter: (groupID) => set((state) => {
return {
filterGroups: state.filterGroups.map(filterGroup => {
return filterGroup.id === groupID ?
addFilter: (groupID) => set((state) => ({
filterGroups: state.filterGroups.map(filterGroup =>
filterGroup.id === groupID ?
{
...filterGroup,
filters: [
@@ -35,18 +34,16 @@ const useDataFilterStore = create((set, get) => ({
]
}
: filterGroup
})
}
}),
)
})),
updateFilterColumn: (groupID, filterID, col, type, op, value) => set((state) => {
return {
filterGroups: state.filterGroups.map((group) => {
return groupID === group.id ?
updateFilterColumn: (groupID, filterID, col, type, op, value) => set((state) => ({
filterGroups: state.filterGroups.map((group) =>
groupID === group.id ?
{
...group,
filters: group.filters.map(filter => {
return filterID === filter.id ?
filters: group.filters.map(filter =>
filterID === filter.id ?
{
...filter,
col: col,
@@ -55,92 +52,88 @@ const useDataFilterStore = create((set, get) => ({
value: value
}
: filter
})
)
}
: group
}),
}
}),
),
})),
updateFilterOps: (groupID, filterID, op) => set((state) => {
return {
filterGroups: state.filterGroups.map((group) => {
return groupID === group.id ?
updateFilterOps: (groupID, filterID, op) => set((state) => ({
filterGroups: state.filterGroups.map((group) =>
groupID === group.id ?
{
...group,
filters: group.filters.map(filter => {
return filterID === filter.id ?
filters: group.filters.map(filter =>
filterID === filter.id ?
{
...filter,
op: op,
}
: filter
})
)
}
: group
}),
}
}),
),
})),
updateFilterValue: (groupID, filterID, value, dateType = undefined) => set((state) => {
return {
filterGroups: state.filterGroups.map((group) => {
return groupID === group.id ?
updateFilterValue: (groupID, filterID, value, dateType = undefined) => set((state) => ({
filterGroups: state.filterGroups.map((group) =>
groupID === group.id ?
{
...group,
filters: group.filters.map(filter => {
return filterID === filter.id ?
filters: group.filters.map(filter =>
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) => ({
filterGroups: state.filterGroups.map((group) => {
return group.id === groupID ?
filterGroups: state.filterGroups.map((group) =>
group.id === groupID ?
{
...group,
filters: group.filters.filter((f) => f.id !== filterID)
}
: group
}),
),
})),
copyFilter: (filter) => set((state) => ({
copiedFilter: state.copiedFilter = {
copyFilter: (filter) => set({
copiedFilter: {
col: filter.col,
type: filter.type,
op: filter.op,
value: filter.value
}
})),
}),
pasteFilter: (groupID) => set((state) => {
state.filterGroups.map((group) => {
return groupID === group.id ?
pasteFilter: (groupID, filterID) => set((state) => ({
filterGroups: state.filterGroups.map((group) =>
groupID === group.id ?
{
...group,
filters: [
...group.filters,
filters: group.filters.map(filter =>
filterID === filter.id ?
{
id: crypto.randomUUID(),
...filter,
col: state.copiedFilter.col,
type: state.copiedFilter.type,
op: state.copiedFilter.op,
value: state.copiedFilter.value,
value: state.copiedFilter.value
}
]
: filter
)
}
: group
})
})
)})),
}));