Feature: new filter component#927
Open
santipalenque wants to merge 4 commits into
Open
Conversation
📝 WalkthroughWalkthroughAdds a new GridFilter UI (components, hook, utils, actions, reducers) wired into the Redux store, introduces speaker list page and SendEmailModal components, updates speaker actions, adds i18n keys, and bumps ChangesGridFilter UI and local components
Redux actions, reducers, and store wiring
Speakers page and email modal
Miscellaneous edits
sequenceDiagram
participant UI as GridFilter Dialog (Client)
participant Hook as useGridFilter
participant Action as saveFilters (Action Creator)
participant Store as Redux Store
participant Reducer as allFiltersReducer / filterReducer
UI->>Hook: read current filters, joinOperator
UI->>UI: user edits/adds/removes filters
UI->>Action: saveFilters(id, filters, joinOperator)
Action->>Store: dispatch SAVE_FILTERS {id, filters, joinOperator}
Store->>Reducer: allFiltersReducer receives SAVE_FILTERS
Reducer->>Reducer: rewrite to FIL_SAVE_FILTERS and compute parsedFilter
Reducer->>Store: updated allGridFiltersState
Store->>Hook: updated state visible to useGridFilter
Estimated code review effort 🎯 4 (Complex) | ⏱️ ~60 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/GridFilter/components/Dropdown.jsx`:
- Around line 40-48: renderValue in Dropdown.jsx currently only handles single
values so when selected is an array it falls through and renders blank; update
renderValue (the arrow passed to the Select component) to detect
Array.isArray(selected) and for arrays map each value to its corresponding
option.label (using options.find or a prebuilt lookup keyed by value), filter
out missing labels, and join them (e.g. with ", ") for display; keep the
existing placeholder handling for null/empty string and treat an empty array as
the placeholder case.
In `@src/components/GridFilter/components/Filter.jsx`:
- Around line 14-21: The component uses T.translate(...) in Filter.jsx (calls to
T.translate on the Filter component around the label/button text) but T is never
imported; add an import for your project's i18n helper (e.g., import T from the
project's i18n module or 'i18n-react' / equivalent used in this repo) at the top
of src/components/GridFilter/components/Filter.jsx so the T.translate calls
(referenced in this file) resolve at render time.
- Around line 15-20: The Grid2 and Button imports are coming from
react-bootstrap but the component usage (Grid2 props like container/spacing/size
and Button variants outlined/contained) expects MUI components; replace the
imports so Grid2 is imported from "@mui/material/Grid2" and Button is imported
from "@mui/material/Button", then verify usages in the Filter component
(references to Grid2 and Button between the earlier import block and the JSX
where they are used) match MUI prop names (e.g., Grid2 container/spacing/size
and Button variant="outlined"/"contained") and remove any
react-bootstrap-specific props that would not apply.
- Around line 44-68: The onChange handlers for Dropdown and ValueInput are
receiving DOM event objects (from MUI Select/TextField) instead of the selected
value, so update the three handlers to extract the value from the event before
calling handleChange: for the Dropdown with id `${id}-column` use onChange={(e)
=> handleChange("criteria", e.target.value)}, for the Dropdown `${id}-operator`
use onChange={(e) => handleChange("operator", e.target.value)}, and for
ValueInput `${id}-value` use onChange={(e) => handleChange("value",
e.target.value)}; keep using the existing Dropdown, ValueInput and handleChange
symbols so the rest of the logic remains unchanged.
In `@src/components/GridFilter/components/ToggleButtons.jsx`:
- Around line 20-25: ToggleButtonGroup is using MUI props (`exclusive`, `color`)
but this project uses react-bootstrap ToggleButtonGroup; remove the unsupported
props and switch to the react-bootstrap API by replacing `exclusive` with
type="radio" and adding a `name` prop (e.g., name="filterToggle") on the
ToggleButtonGroup, and remove `color="primary"`. Ensure the group's `value` and
`onChange` remain wired to the component's state and that the child ToggleButton
elements use their `value` attributes so single-select behavior works as
expected.
In `@src/components/GridFilter/index.jsx`:
- Around line 99-105: handleClear and handleSubmit are currently no-ops that
only log to console; wire them to the component's external API by calling the
appropriate callbacks and updating state: replace console.log in handleClear
with the clear callback (e.g., props.onClearDraft() or props.onClear()) and
reset the local draft state if present (e.g., setDraftFilters({}) or
initialFilters), and replace console.log in handleSubmit with
props.onApply(filters) (or props.onSaveFilters(filters)) and then close the
dialog via props.onClose() if applicable; apply the same wiring for the
duplicate handlers around lines 146-153 so clearing actually resets the draft
and applying sends the current filters to the parent.
- Around line 79-97: filters is meant to be an array but your setters turn it
into an object and you still render from the stale prop values; update the logic
so filters remains an array: change handleChange to accept (id, patch) or
(updatedFilter) and call setFilters(prev => prev.map(f => f.id === id ? {...f,
...patch} : f)), change handleAdd to push a new filter object (e.g.,
setFilters(prev => [...prev, newFilter])), change handleRemove to remove by id
(setFilters(prev => prev.filter(f => f.id !== id))), stop rendering from values
and render from filters, and separate the All/Any toggle so it calls
handleChange with an id+partial update (not the whole row collection) to avoid
mutating the array shape.
- Around line 77-159: The GridFilter component is declared but not exported; add
an export so it can be imported elsewhere—append a default export (export
default GridFilter) or a named export (export { GridFilter }) at the end of the
file where the GridFilter function is defined to resolve the
no-unused-vars/import errors and make the component available to other modules.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: fa0d2392-510b-4986-8b13-cc84c4d71727
📒 Files selected for processing (5)
src/components/GridFilter/components/Dropdown.jsxsrc/components/GridFilter/components/Filter.jsxsrc/components/GridFilter/components/ToggleButtons.jsxsrc/components/GridFilter/components/ValueInput/index.jsxsrc/components/GridFilter/index.jsx
Comment on lines
+40
to
+48
| renderValue={(selected) => { | ||
| if (selected == null || selected === "") { | ||
| return <em>{finalPlaceholder}</em>; | ||
| } | ||
| const selectedOption = options.find( | ||
| ({ value }) => value === selected | ||
| ); | ||
| return selectedOption ? selectedOption.label : ""; | ||
| }} |
There was a problem hiding this comment.
Handle array selections in renderValue.
renderValue only resolves a single option, but this filter flow already allows array values. Once selected is an array, find() never matches and the chosen values render as blank.
Suggested fix
renderValue={(selected) => {
- if (selected == null || selected === "") {
+ if (
+ selected == null ||
+ selected === "" ||
+ (Array.isArray(selected) && selected.length === 0)
+ ) {
return <em>{finalPlaceholder}</em>;
}
+ if (Array.isArray(selected)) {
+ return options
+ .filter(({ value }) => selected.includes(value))
+ .map(({ label }) => label)
+ .join(", ");
+ }
const selectedOption = options.find(
({ value }) => value === selected
);
return selectedOption ? selectedOption.label : "";
}}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/GridFilter/components/Dropdown.jsx` around lines 40 - 48,
renderValue in Dropdown.jsx currently only handles single values so when
selected is an array it falls through and renders blank; update renderValue (the
arrow passed to the Select component) to detect Array.isArray(selected) and for
arrays map each value to its corresponding option.label (using options.find or a
prebuilt lookup keyed by value), filter out missing labels, and join them (e.g.
with ", ") for display; keep the existing placeholder handling for null/empty
string and treat an empty array as the placeholder case.
Comment on lines
+14
to
+21
| import React from "react"; | ||
| import { Button, Grid2 } from "react-bootstrap"; | ||
| import DeleteIcon from "@mui/icons-material/Delete"; | ||
| import AddIcon from "@mui/icons-material/Add"; | ||
| import PropTypes from "prop-types"; | ||
| import Box from "@mui/material/Box"; | ||
| import Dropdown from "./Dropdown"; | ||
| import ValueInput from "./ValueInput"; |
There was a problem hiding this comment.
Import T before calling T.translate(...).
This file uses T on Line 47, Line 55, and Line 64, but never imports it, so the component will fail as soon as it renders.
Suggested fix
import React from "react";
+import T from "i18n-react/dist/i18n-react";
import { Button, Grid2 } from "react-bootstrap";Also applies to: 47-64
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/GridFilter/components/Filter.jsx` around lines 14 - 21, The
component uses T.translate(...) in Filter.jsx (calls to T.translate on the
Filter component around the label/button text) but T is never imported; add an
import for your project's i18n helper (e.g., import T from the project's i18n
module or 'i18n-react' / equivalent used in this repo) at the top of
src/components/GridFilter/components/Filter.jsx so the T.translate calls
(referenced in this file) resolve at render time.
Comment on lines
+15
to
+20
| import { Button, Grid2 } from "react-bootstrap"; | ||
| import DeleteIcon from "@mui/icons-material/Delete"; | ||
| import AddIcon from "@mui/icons-material/Add"; | ||
| import PropTypes from "prop-types"; | ||
| import Box from "@mui/material/Box"; | ||
| import Dropdown from "./Dropdown"; |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Does react-bootstrap 0.31.5 export Grid2, and does its Buttoncomponent use avariantprop likeoutlined/contained?
💡 Result:
Yes and no: 1) react-bootstrap 0.31.5 exports Grid2 I could not find any authoritative source showing that react-bootstrap@0.31.5 exports a Grid2 component. React-Bootstrap’s grid API in the 0.x line uses Container/Row/Col, not Grid2 (and Grid itself is commonly noted as not exported in certain versions). [1][2] 2) react-bootstrap Button uses a variant prop like outlined / contained In current React-Bootstrap code (and docs), Button does have a variant prop, and the accepted values include Bootstrap-style variants including outline variants prefixed with outline- (e.g., outline-primary). [3][4] However, the specific question asks about react-bootstrap@0.31.5. I did not find a 0.31.5-specific primary source (e.g., the v0.31.5 Button type/source or official docs for that version) that explicitly confirms the presence/shape of the variant prop in that exact release. The evidence I found for variant comes from the modern React-Bootstrap source/docs and thus confirms the API in newer versions, not conclusively in 0.31.5. [3][4] Practical takeaway - If you’re targeting react-bootstrap@0.31.5, you should verify by inspecting that version’s Button implementation/types in the react-bootstrap repo at tag v0.31.5 (or by checking its TypeScript definitions if shipped). I did verify Button has variant in the current code/docs, but not specifically for 0.31.5. [3][4]
Citations:
- 1: https://stackoverflow.com/questions/70600026/react-bootstrap-does-not-contain-an-export-named-grid
- 2: https://react-bootstrap.github.io/docs/layout/grid/
- 3: https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Button.tsx
- 4: https://react-bootstrap-v5.netlify.app/components/buttons/
🏁 Script executed:
fd -t f package.json | head -1 | xargs cat | jq '.dependencies, .devDependencies' | grep -A 5 -B 5 "react-bootstrap"Repository: fntechgit/summit-admin
Length of output: 414
🏁 Script executed:
cat -n src/components/GridFilter/components/Filter.jsx | head -100Repository: fntechgit/summit-admin
Length of output: 3931
Import Grid2 and Button from their correct packages.
Grid2 does not exist in react-bootstrap@0.31.5 and will be undefined at runtime. The code uses MUI's Grid2 API (container, spacing, size props) and MUI Button variants (outlined, contained), but the imports are from react-bootstrap. Move the imports to:
Grid2from@mui/material/Grid2Buttonfrom@mui/material/Button
This applies to lines 15-20 and lines 40-83 where the components are used.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/GridFilter/components/Filter.jsx` around lines 15 - 20, The
Grid2 and Button imports are coming from react-bootstrap but the component usage
(Grid2 props like container/spacing/size and Button variants outlined/contained)
expects MUI components; replace the imports so Grid2 is imported from
"@mui/material/Grid2" and Button is imported from "@mui/material/Button", then
verify usages in the Filter component (references to Grid2 and Button between
the earlier import block and the JSX where they are used) match MUI prop names
(e.g., Grid2 container/spacing/size and Button variant="outlined"/"contained")
and remove any react-bootstrap-specific props that would not apply.
Comment on lines
+44
to
+68
| <Dropdown | ||
| id={`${id}-column`} | ||
| value={value.criteria} | ||
| placeholder={T.translate("grid_filter.select_criteria")} | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| {...criteriaSettings} | ||
| onChange={(val) => handleChange("criteria", val)} | ||
| /> | ||
| <Dropdown | ||
| id={`${id}-operator`} | ||
| value={value.operator} | ||
| placeholder={T.translate("grid_filter.select_operator")} | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| {...operatorSettings} | ||
| onChange={(val) => handleChange("operator", val)} | ||
| /> | ||
| <ValueInput | ||
| id={`${id}-value`} | ||
| value={value.value} | ||
| type={valueSettings.type} | ||
| placeholder={T.translate("grid_filter.select_values")} | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| {...valueSettings.props} | ||
| onChange={(val) => handleChange("value", val)} | ||
| /> |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In MUI Select and TextField, what does onChange receive and where is the current field value exposed?
💡 Result:
For MUI Select (Material UI): - onChange receives a SelectChangeEvent as its first argument. - The current selected value is exposed as event.target.value (any). [1] - The event signature is onChange(event: SelectChangeEvent, child?: object) => void. [2] For MUI TextField (Material UI): - onChange receives the usual event object from the underlying input. - The current text value is exposed as event.target.value. [3][4] Practically, this means: - Select: onChange={(event) => setState(event.target.value)} - TextField: onChange={(event) => setState(event.target.value)} (If you’re using TypeScript, MUI Select’s event.target.value may be typed as unknown depending on your setup; the docs still indicate you read it from event.target.value.) [2][5]
Citations:
- 1: https://mui.com/material-ui/api/select/
- 2: https://v6.mui.com/material-ui/api/select/
- 3: https://v3.mui.com/api/text-field
- 4: https://cdn.jsdelivr.net/npm/@mui/material@6.3.1/TextField/TextField.d.ts
- 5: [Select]
onChangeparameter hasunknowntype inSelectcomponent mui/material-ui#16065
🏁 Script executed:
# Find Dropdown and ValueInput components
fd -t f -e jsx -e js -e tsx -e ts | head -20Repository: fntechgit/summit-admin
Length of output: 796
🏁 Script executed:
# Search for Dropdown component definition
rg "export.*Dropdown" -t jsx -t js -t tsx -t ts -A 5Repository: fntechgit/summit-admin
Length of output: 94
🏁 Script executed:
# Search for ValueInput component definition
rg "export.*ValueInput" -t jsx -t js -t tsx -t ts -A 5Repository: fntechgit/summit-admin
Length of output: 94
🏁 Script executed:
# Check the Filter.jsx file to understand context better
fd -t f -name "Filter.jsx" -exec cat {} \;Repository: fntechgit/summit-admin
Length of output: 297
🏁 Script executed:
# Find Dropdown component definition
rg "export.*Dropdown|function Dropdown|const Dropdown" -A 10Repository: fntechgit/summit-admin
Length of output: 2795
🏁 Script executed:
# Find ValueInput component definition
rg "export.*ValueInput|function ValueInput|const ValueInput" -A 10Repository: fntechgit/summit-admin
Length of output: 1220
🏁 Script executed:
# Locate and read Filter.jsx file
find . -name "Filter.jsx" -type fRepository: fntechgit/summit-admin
Length of output: 116
🏁 Script executed:
# Read complete Dropdown.jsx
cat src/components/GridFilter/components/Dropdown.jsxRepository: fntechgit/summit-admin
Length of output: 2354
🏁 Script executed:
# Read complete Filter.jsx
cat src/components/GridFilter/components/Filter.jsxRepository: fntechgit/summit-admin
Length of output: 4092
🏁 Script executed:
# Read complete ValueInput implementation
cat src/components/GridFilter/components/ValueInput/index.jsxRepository: fntechgit/summit-admin
Length of output: 1651
Extract event.target.value in onChange handlers.
The Dropdown and ValueInput components pass onChange directly through to MUI Select and TextField, which emit event objects. The current handlers receive these event objects instead of the actual values, causing criteria, operator, and value to be set to event objects rather than user selections.
Suggested fix
<Dropdown
id={`${id}-column`}
value={value.criteria}
placeholder={T.translate("grid_filter.select_criteria")}
// eslint-disable-next-line react/jsx-props-no-spreading
{...criteriaSettings}
- onChange={(val) => handleChange("criteria", val)}
+ onChange={(event) => handleChange("criteria", event.target.value)}
/>
<Dropdown
id={`${id}-operator`}
value={value.operator}
placeholder={T.translate("grid_filter.select_operator")}
// eslint-disable-next-line react/jsx-props-no-spreading
{...operatorSettings}
- onChange={(val) => handleChange("operator", val)}
+ onChange={(event) => handleChange("operator", event.target.value)}
/>
<ValueInput
id={`${id}-value`}
value={value.value}
type={valueSettings.type}
placeholder={T.translate("grid_filter.select_values")}
// eslint-disable-next-line react/jsx-props-no-spreading
{...valueSettings.props}
- onChange={(val) => handleChange("value", val)}
+ onChange={(event) => handleChange("value", event.target.value)}
/>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <Dropdown | |
| id={`${id}-column`} | |
| value={value.criteria} | |
| placeholder={T.translate("grid_filter.select_criteria")} | |
| // eslint-disable-next-line react/jsx-props-no-spreading | |
| {...criteriaSettings} | |
| onChange={(val) => handleChange("criteria", val)} | |
| /> | |
| <Dropdown | |
| id={`${id}-operator`} | |
| value={value.operator} | |
| placeholder={T.translate("grid_filter.select_operator")} | |
| // eslint-disable-next-line react/jsx-props-no-spreading | |
| {...operatorSettings} | |
| onChange={(val) => handleChange("operator", val)} | |
| /> | |
| <ValueInput | |
| id={`${id}-value`} | |
| value={value.value} | |
| type={valueSettings.type} | |
| placeholder={T.translate("grid_filter.select_values")} | |
| // eslint-disable-next-line react/jsx-props-no-spreading | |
| {...valueSettings.props} | |
| onChange={(val) => handleChange("value", val)} | |
| /> | |
| <Dropdown | |
| id={`${id}-column`} | |
| value={value.criteria} | |
| placeholder={T.translate("grid_filter.select_criteria")} | |
| // eslint-disable-next-line react/jsx-props-no-spreading | |
| {...criteriaSettings} | |
| onChange={(event) => handleChange("criteria", event.target.value)} | |
| /> | |
| <Dropdown | |
| id={`${id}-operator`} | |
| value={value.operator} | |
| placeholder={T.translate("grid_filter.select_operator")} | |
| // eslint-disable-next-line react/jsx-props-no-spreading | |
| {...operatorSettings} | |
| onChange={(event) => handleChange("operator", event.target.value)} | |
| /> | |
| <ValueInput | |
| id={`${id}-value`} | |
| value={value.value} | |
| type={valueSettings.type} | |
| placeholder={T.translate("grid_filter.select_values")} | |
| // eslint-disable-next-line react/jsx-props-no-spreading | |
| {...valueSettings.props} | |
| onChange={(event) => handleChange("value", event.target.value)} | |
| /> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/GridFilter/components/Filter.jsx` around lines 44 - 68, The
onChange handlers for Dropdown and ValueInput are receiving DOM event objects
(from MUI Select/TextField) instead of the selected value, so update the three
handlers to extract the value from the event before calling handleChange: for
the Dropdown with id `${id}-column` use onChange={(e) =>
handleChange("criteria", e.target.value)}, for the Dropdown `${id}-operator` use
onChange={(e) => handleChange("operator", e.target.value)}, and for ValueInput
`${id}-value` use onChange={(e) => handleChange("value", e.target.value)}; keep
using the existing Dropdown, ValueInput and handleChange symbols so the rest of
the logic remains unchanged.
Comment on lines
+20
to
+25
| <ToggleButtonGroup | ||
| color="primary" | ||
| value={value} | ||
| exclusive | ||
| onChange={onChange} | ||
| aria-label="Platform" |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Does react-bootstrap 0.31.5 ToggleButtonGroup support exclusiveandcolor, or does single selection require type="radio"andname?
💡 Result:
No, react-bootstrap 0.31.5 ToggleButtonGroup does not support exclusive or color props. Single selection requires type="radio" and name (required when type="radio").[1][2][3][4]
Citations:
- 1: https://react-bootstrap-v3.netlify.app/components/button-group/
- 2: https://stackoverflow.com/questions/63811752/react-bootstrap-togglebuttongroup-and-multiple-selection
- 3: ToggleButtonGroup onChange does not work in version 0.31.1 react-bootstrap/react-bootstrap#2734
- 4: https://github.com/react-bootstrap/react-bootstrap/blob/master/CHANGELOG-pre1.md
Use the react-bootstrap toggle-group API instead of MUI props.
exclusive and color are not supported by react-bootstrap@0.31.5—single-select behavior requires type="radio" and name attributes.
Suggested fix
<ToggleButtonGroup
- color="primary"
+ type="radio"
+ name="grid-filter-mode"
value={value}
- exclusive
onChange={onChange}
aria-label="Platform"
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <ToggleButtonGroup | |
| color="primary" | |
| value={value} | |
| exclusive | |
| onChange={onChange} | |
| aria-label="Platform" | |
| <ToggleButtonGroup | |
| type="radio" | |
| name="grid-filter-mode" | |
| value={value} | |
| onChange={onChange} | |
| aria-label="Platform" |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/GridFilter/components/ToggleButtons.jsx` around lines 20 - 25,
ToggleButtonGroup is using MUI props (`exclusive`, `color`) but this project
uses react-bootstrap ToggleButtonGroup; remove the unsupported props and switch
to the react-bootstrap API by replacing `exclusive` with type="radio" and adding
a `name` prop (e.g., name="filterToggle") on the ToggleButtonGroup, and remove
`color="primary"`. Ensure the group's `value` and `onChange` remain wired to the
component's state and that the child ToggleButton elements use their `value`
attributes so single-select behavior works as expected.
Comment on lines
+77
to
+159
| const GridFilter = ({values, criterias}) => { | ||
| const [openModal, setOpenModal] = useState(false); | ||
| const [filters, setFilters] = useState(values); | ||
| const criteriaOptions = criterias.map(c => ({label: c.label, value: c.key})) | ||
|
|
||
|
|
||
| const handleChange = (filter) => { | ||
| setFilters(prevFilters => ({...prevFilters, filter})) | ||
| console.log("change filter", filter); | ||
| } | ||
|
|
||
| const handleAdd = () => { | ||
| const emptyFilter = {}; | ||
| setFilters(prevFilters => ({...prevFilters, emptyFilter})) | ||
| console.log("add filter"); | ||
| } | ||
|
|
||
| const handleRemove = (filter) => { | ||
| setFilters(prevFilters => prevFilters.filter(f => f !== filter.criteria)) | ||
| console.log("remove filter", filter); | ||
| } | ||
|
|
||
| const handleClear = () => { | ||
| console.log("clear filters"); | ||
| } | ||
|
|
||
| const handleSubmit = () => { | ||
| console.log("save filters", filters); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <IconButton | ||
| size="small" | ||
| onClick={() => setOpenModal(true)} | ||
| sx={{ mr: 1 }} | ||
| > | ||
| <FilterListIcon fontSize="small" /> | ||
| </IconButton> | ||
| <Dialog | ||
| open={openModal} | ||
| onClose={() => setOpenModal(false)} | ||
| maxWidth="md" | ||
| fullWidth | ||
| > | ||
| <DialogContent sx={{ p: 0 }}> | ||
| <Typography variant="body2">{T.translate("grid_filter.filter_by")}</Typography> | ||
| <ToggleButtons options={["All", "Any"]} onChange={(val) => handleChange(val)} /> | ||
| <Typography variant="body2">{T.translate("grid_filter.following")}</Typography> | ||
| <Divider /> | ||
| <Box> | ||
| {values.map((value, index) => { | ||
| const criteria = criterias.find(c => c.key === value.criteria); | ||
|
|
||
| return ( | ||
| <Filter | ||
| id={`grid-filter-${index}`} | ||
| criteria={criteria} | ||
| criteriaOptions={criteriaOptions} | ||
| value={value} | ||
| onChange={handleChange} | ||
| onAdd={handleAdd} | ||
| onDelete={handleRemove} | ||
| /> | ||
| )})} | ||
| </Box> | ||
| </DialogContent> | ||
| <Divider /> | ||
| <DialogActions sx={{ p: 2 }}> | ||
| <Button variant="text" onClick={() => handleClear()}> | ||
| {T.translate("grid_filter.clear_filters")} | ||
| </Button> | ||
| <Button variant="outlined" onClick={() => setOpenModal(false)}> | ||
| {T.translate("grid_filter.cancel")} | ||
| </Button> | ||
| <Button variant="contained" onClick={() => handleSubmit()}> | ||
| {T.translate("grid_filter.apply_filters")} | ||
| </Button> | ||
| </DialogActions> | ||
| </Dialog> | ||
| </> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
Export GridFilter.
The component is declared but never exported, which matches the no-unused-vars error and makes the new feature impossible to import.
Suggested fix
const GridFilter = ({values, criterias}) => {
...
};
+
+export default GridFilter;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const GridFilter = ({values, criterias}) => { | |
| const [openModal, setOpenModal] = useState(false); | |
| const [filters, setFilters] = useState(values); | |
| const criteriaOptions = criterias.map(c => ({label: c.label, value: c.key})) | |
| const handleChange = (filter) => { | |
| setFilters(prevFilters => ({...prevFilters, filter})) | |
| console.log("change filter", filter); | |
| } | |
| const handleAdd = () => { | |
| const emptyFilter = {}; | |
| setFilters(prevFilters => ({...prevFilters, emptyFilter})) | |
| console.log("add filter"); | |
| } | |
| const handleRemove = (filter) => { | |
| setFilters(prevFilters => prevFilters.filter(f => f !== filter.criteria)) | |
| console.log("remove filter", filter); | |
| } | |
| const handleClear = () => { | |
| console.log("clear filters"); | |
| } | |
| const handleSubmit = () => { | |
| console.log("save filters", filters); | |
| } | |
| return ( | |
| <> | |
| <IconButton | |
| size="small" | |
| onClick={() => setOpenModal(true)} | |
| sx={{ mr: 1 }} | |
| > | |
| <FilterListIcon fontSize="small" /> | |
| </IconButton> | |
| <Dialog | |
| open={openModal} | |
| onClose={() => setOpenModal(false)} | |
| maxWidth="md" | |
| fullWidth | |
| > | |
| <DialogContent sx={{ p: 0 }}> | |
| <Typography variant="body2">{T.translate("grid_filter.filter_by")}</Typography> | |
| <ToggleButtons options={["All", "Any"]} onChange={(val) => handleChange(val)} /> | |
| <Typography variant="body2">{T.translate("grid_filter.following")}</Typography> | |
| <Divider /> | |
| <Box> | |
| {values.map((value, index) => { | |
| const criteria = criterias.find(c => c.key === value.criteria); | |
| return ( | |
| <Filter | |
| id={`grid-filter-${index}`} | |
| criteria={criteria} | |
| criteriaOptions={criteriaOptions} | |
| value={value} | |
| onChange={handleChange} | |
| onAdd={handleAdd} | |
| onDelete={handleRemove} | |
| /> | |
| )})} | |
| </Box> | |
| </DialogContent> | |
| <Divider /> | |
| <DialogActions sx={{ p: 2 }}> | |
| <Button variant="text" onClick={() => handleClear()}> | |
| {T.translate("grid_filter.clear_filters")} | |
| </Button> | |
| <Button variant="outlined" onClick={() => setOpenModal(false)}> | |
| {T.translate("grid_filter.cancel")} | |
| </Button> | |
| <Button variant="contained" onClick={() => handleSubmit()}> | |
| {T.translate("grid_filter.apply_filters")} | |
| </Button> | |
| </DialogActions> | |
| </Dialog> | |
| </> | |
| ); | |
| }; | |
| const GridFilter = ({values, criterias}) => { | |
| const [openModal, setOpenModal] = useState(false); | |
| const [filters, setFilters] = useState(values); | |
| const criteriaOptions = criterias.map(c => ({label: c.label, value: c.key})) | |
| const handleChange = (filter) => { | |
| setFilters(prevFilters => ({...prevFilters, filter})) | |
| console.log("change filter", filter); | |
| } | |
| const handleAdd = () => { | |
| const emptyFilter = {}; | |
| setFilters(prevFilters => ({...prevFilters, emptyFilter})) | |
| console.log("add filter"); | |
| } | |
| const handleRemove = (filter) => { | |
| setFilters(prevFilters => prevFilters.filter(f => f !== filter.criteria)) | |
| console.log("remove filter", filter); | |
| } | |
| const handleClear = () => { | |
| console.log("clear filters"); | |
| } | |
| const handleSubmit = () => { | |
| console.log("save filters", filters); | |
| } | |
| return ( | |
| <> | |
| <IconButton | |
| size="small" | |
| onClick={() => setOpenModal(true)} | |
| sx={{ mr: 1 }} | |
| > | |
| <FilterListIcon fontSize="small" /> | |
| </IconButton> | |
| <Dialog | |
| open={openModal} | |
| onClose={() => setOpenModal(false)} | |
| maxWidth="md" | |
| fullWidth | |
| > | |
| <DialogContent sx={{ p: 0 }}> | |
| <Typography variant="body2">{T.translate("grid_filter.filter_by")}</Typography> | |
| <ToggleButtons options={["All", "Any"]} onChange={(val) => handleChange(val)} /> | |
| <Typography variant="body2">{T.translate("grid_filter.following")}</Typography> | |
| <Divider /> | |
| <Box> | |
| {values.map((value, index) => { | |
| const criteria = criterias.find(c => c.key === value.criteria); | |
| return ( | |
| <Filter | |
| id={`grid-filter-${index}`} | |
| criteria={criteria} | |
| criteriaOptions={criteriaOptions} | |
| value={value} | |
| onChange={handleChange} | |
| onAdd={handleAdd} | |
| onDelete={handleRemove} | |
| /> | |
| )})} | |
| </Box> | |
| </DialogContent> | |
| <Divider /> | |
| <DialogActions sx={{ p: 2 }}> | |
| <Button variant="text" onClick={() => handleClear()}> | |
| {T.translate("grid_filter.clear_filters")} | |
| </Button> | |
| <Button variant="outlined" onClick={() => setOpenModal(false)}> | |
| {T.translate("grid_filter.cancel")} | |
| </Button> | |
| <Button variant="contained" onClick={() => handleSubmit()}> | |
| {T.translate("grid_filter.apply_filters")} | |
| </Button> | |
| </DialogActions> | |
| </Dialog> | |
| </> | |
| ); | |
| }; | |
| export default GridFilter; |
🧰 Tools
🪛 ESLint
[error] 77-77: 'GridFilter' is assigned a value but never used.
(no-unused-vars)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/GridFilter/index.jsx` around lines 77 - 159, The GridFilter
component is declared but not exported; add an export so it can be imported
elsewhere—append a default export (export default GridFilter) or a named export
(export { GridFilter }) at the end of the file where the GridFilter function is
defined to resolve the no-unused-vars/import errors and make the component
available to other modules.
Comment on lines
+79
to
+97
| const [filters, setFilters] = useState(values); | ||
| const criteriaOptions = criterias.map(c => ({label: c.label, value: c.key})) | ||
|
|
||
|
|
||
| const handleChange = (filter) => { | ||
| setFilters(prevFilters => ({...prevFilters, filter})) | ||
| console.log("change filter", filter); | ||
| } | ||
|
|
||
| const handleAdd = () => { | ||
| const emptyFilter = {}; | ||
| setFilters(prevFilters => ({...prevFilters, emptyFilter})) | ||
| console.log("add filter"); | ||
| } | ||
|
|
||
| const handleRemove = (filter) => { | ||
| setFilters(prevFilters => prevFilters.filter(f => f !== filter.criteria)) | ||
| console.log("remove filter", filter); | ||
| } |
There was a problem hiding this comment.
The filter state shape is broken, and the dialog still renders stale props.
filters starts as an array, but handleChange/handleAdd spread it into an object, handleRemove expects a filter object even though Filter passes an id, and the list still renders from values instead of filters. The All/Any toggle also goes through the same handleChange, so one click mutates the row collection with the wrong payload type.
Also applies to: 124-141
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/GridFilter/index.jsx` around lines 79 - 97, filters is meant
to be an array but your setters turn it into an object and you still render from
the stale prop values; update the logic so filters remains an array: change
handleChange to accept (id, patch) or (updatedFilter) and call setFilters(prev
=> prev.map(f => f.id === id ? {...f, ...patch} : f)), change handleAdd to push
a new filter object (e.g., setFilters(prev => [...prev, newFilter])), change
handleRemove to remove by id (setFilters(prev => prev.filter(f => f.id !==
id))), stop rendering from values and render from filters, and separate the
All/Any toggle so it calls handleChange with an id+partial update (not the whole
row collection) to avoid mutating the array shape.
Comment on lines
+99
to
+105
| const handleClear = () => { | ||
| console.log("clear filters"); | ||
| } | ||
|
|
||
| const handleSubmit = () => { | ||
| console.log("save filters", filters); | ||
| } |
There was a problem hiding this comment.
Clear/Apply are still no-ops.
Both actions only log to the console, so users cannot clear the current draft or apply the edited filters anywhere outside this dialog.
Also applies to: 146-153
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/GridFilter/index.jsx` around lines 99 - 105, handleClear and
handleSubmit are currently no-ops that only log to console; wire them to the
component's external API by calling the appropriate callbacks and updating
state: replace console.log in handleClear with the clear callback (e.g.,
props.onClearDraft() or props.onClear()) and reset the local draft state if
present (e.g., setDraftFilters({}) or initialFilters), and replace console.log
in handleSubmit with props.onApply(filters) (or props.onSaveFilters(filters))
and then close the dialog via props.onClose() if applicable; apply the same
wiring for the duplicate handlers around lines 146-153 so clearing actually
resets the draft and applying sends the current filters to the parent.
There was a problem hiding this comment.
Actionable comments posted: 10
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/actions/speaker-actions.js`:
- Around line 892-899: The metadata object passed into getRequest is spreading
the array (filter) which creates numeric keys (0,1,2...) and pollutes Redux
state when the reducer merges via ...rest; change the metadata to include an
explicit filters property instead (e.g., metadata: { filters: filter,
...otherMeta }) so consumers like getRequest and the reducer receive a proper
filters array; update the call site in the async action (the function using
dispatch, getState and calling getRequest) to stop using the array spread and
use the named filters property.
In `@src/components/GridFilter/components/Filter.jsx`:
- Around line 37-45: The handlers keep stale dependent fields causing invalid
combos: update handleChangeCriteria to not only call handleChange("criteria",
val) but also reset dependent fields (call handleChange("operator",
DEFAULT_OPERATOR) and handleChange("value", "") or the appropriate empty/default
for the selected criteria); likewise update handleChangeOperator to reset the
value (call handleChange("value", "") or a type-appropriate default) after
calling handleChange("operator", val). Locate and modify the functions named
handleChangeCriteria and handleChangeOperator and use the existing handleChange
utility so new criteria/operator selections clear or set sensible defaults for
dependent fields.
- Line 97: The disable logic in Filter.jsx currently treats any falsy value as
missing, preventing valid falsy inputs like 0 or false; update the disabled
expression on the element using the value variable so it only disables when
criteria or operator are null/undefined or when value is explicitly
null/undefined/empty string (e.g. replace disabled={!value?.criteria ||
!value?.operator || !value?.value} with a check like value?.criteria == null ||
value?.operator == null || value?.value == null || (typeof value?.value ===
'string' && value.value === '') so 0 and false are allowed).
In `@src/components/GridFilter/components/FilterButton.jsx`:
- Around line 43-49: The IconButton in FilterButton.jsx is icon-only and lacks
an accessible name; add an accessible label (e.g., an aria-label or title) to
the IconButton element so screen readers can identify it (use a descriptive
string like "Open filters" or wire it to a passed prop if the component accepts
one), while keeping the FilterListIcon child unchanged; ensure the attribute is
applied on the IconButton JSX where onClick is set so assistive tech can
announce the button's purpose.
In `@src/components/GridFilter/index.jsx`:
- Around line 147-151: The code currently uses a truthy check (if (value)) which
incorrectly rejects valid filter values like 0 or false; change this to an
explicit null/undefined check so 0/false are preserved (e.g., replace if (value)
with if (value !== null && value !== undefined)), and apply the same fix to the
other occurrence that handles filter parsing (the block using filter.value,
filter.criteria and filter.operator around the second occurrence noted); ensure
both places still handle Array.isArray(filter.value) the same way before the
null/undefined check.
- Around line 14-26: The project is importing MUI v6 components (Box, Button,
Dialog, DialogActions, DialogContent, Divider, Typography) in
src/components/GridFilter/index.jsx while the repo uses React ^16.13.1 which is
incompatible; fix by either upgrading React to ≥17.0.0 in package.json and
updating the lockfile/build (ensuring any other packages are compatible) or pin
`@mui/material` to a v5 release that supports React 16 (e.g. install
`@mui/material`@^5 and matching `@emotion` packages), then update package.json and
reinstall so the imports in GridFilter (Box, Button, Dialog, DialogActions,
DialogContent, Divider, Typography) resolve against the compatible MUI version.
In `@src/components/GridFilter/reducers/filter-reducer.js`:
- Around line 16-19: The reducer handling the SAVE_FILTERS payload assumes
payload.filters is always an array and uses filters.flatMap, which can crash on
partial payloads; update the handler (the block that destructures const { id,
filters, joinOperator } = payload and computes parsedFilter) to defensively
default filters to an empty array (e.g., const safeFilters =
Array.isArray(filters) ? filters : []) and use safeFilters.flatMap(f => f &&
f.parsed ? f.parsed : []) (or otherwise filter out undefined parsed entries)
before applying the JOIN_OPERATORS.ANY mapping (where parsedFilter =
parsedFilter.map(p => `or(${p})`)). Ensure you reference JOIN_OPERATORS.ANY and
the parsedFilter computation so the reducer remains resilient to missing/partial
payloads.
In
`@src/pages/summit_speakers/summit-speakers-list-page/components/send-email-modal.js`:
- Around line 195-200: The modal state update in handleModalChange incorrectly
uses checked || value which causes checkboxes to store strings like "on" instead
of booleans; update the handler to choose the new value based on the input type
(e.g., use ev.target.type === 'checkbox' ? checked : value) and then call
setModalValues({...modalValues, [id]: newValue}) so checkboxes set true/false
and other inputs use their value; refer to handleModalChange, setModalValues,
modalValues, and ev.target (id, value, checked, type) when making the change.
In `@src/pages/summit_speakers/summit-speakers-list-page/index.js`:
- Line 369: The render guard assumes currentSummit is always defined; update the
conditional that checks currentSummit.id (in the component in index.js where the
line reads the currentSummit.id) to first ensure currentSummit is
non-null/undefined before accessing its id (i.e., add a null-safe check for
currentSummit and return early if it's falsy or has no id) so the component
won't throw when currentSummit is temporarily null.
- Around line 211-237: The useEffect is calling the raw imported action creators
initSubmittersList and initSpeakersList directly; replace those calls with the
dispatcher functions passed in via props (e.g. call props.initSubmittersList and
props.initSpeakersList or the corresponding destructured prop names) so the
actions are actually dispatched, and add those initializer functions to the
component's destructured props list if not already present.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 5102834c-a6c3-4865-b6c0-1ecf011e0384
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (20)
package.jsonsrc/actions/speaker-actions.jssrc/components/GridFilter/actions/filter-actions.jssrc/components/GridFilter/components/Dropdown.jsxsrc/components/GridFilter/components/Filter.jsxsrc/components/GridFilter/components/FilterButton.jsxsrc/components/GridFilter/components/RoundButton.jsxsrc/components/GridFilter/components/ToggleButtons.jsxsrc/components/GridFilter/components/ValueInput/index.jsxsrc/components/GridFilter/hooks/useGridFilter.jsxsrc/components/GridFilter/index.jsxsrc/components/GridFilter/readme.mdsrc/components/GridFilter/reducers/all-filters-reducer.jssrc/components/GridFilter/reducers/filter-reducer.jssrc/components/GridFilter/utils.jssrc/i18n/en.jsonsrc/pages/summit_speakers/summit-speakers-list-page.jssrc/pages/summit_speakers/summit-speakers-list-page/components/send-email-modal.jssrc/pages/summit_speakers/summit-speakers-list-page/index.jssrc/store.js
💤 Files with no reviewable changes (1)
- src/pages/summit_speakers/summit-speakers-list-page.js
✅ Files skipped from review due to trivial changes (3)
- src/components/GridFilter/actions/filter-actions.js
- src/components/GridFilter/readme.md
- src/store.js
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/GridFilter/components/ValueInput/index.jsx
- src/components/GridFilter/components/Dropdown.jsx
Comment on lines
+892
to
899
| filters = [] | ||
| ) => | ||
| async (dispatch, getState) => { | ||
| const { currentSummitState } = getState(); | ||
| const accessToken = await getAccessTokenSafely(); | ||
| const { currentSummit } = currentSummitState; | ||
| const filter = parseFilters(filters); | ||
| const filter = [...filters]; | ||
|
|
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify all callsites pass array filters (or update callsites if object filters remain).
# 1) Locate all invocations
rg -nP '\bgetSpeakersBySummit\s*\(' src -C2
# 2) Inspect likely filter-building paths
rg -nP '\bparseFilters\s*\(' src -C2
rg -nP '\bfilters\s*[:=]' src/pages/summit_speakers -C2Repository: fntechgit/summit-admin
Length of output: 9547
🏁 Script executed:
# Get the actual getSpeakersBySummit function implementation
sed -n '880,950p' src/actions/speaker-actions.js | cat -nRepository: fntechgit/summit-admin
Length of output: 2663
🏁 Script executed:
# Also check what parseFilters function does
rg -A 10 'export.*parseFilters\s*=|function\s+parseFilters\s*\(' src -C 3Repository: fntechgit/summit-admin
Length of output: 48
🏁 Script executed:
# Check if filters are used elsewhere as objects in the speakers context
rg -n 'getSpeakersBySummit' src --type js -B 2 -A 2Repository: fntechgit/summit-admin
Length of output: 2050
🏁 Script executed:
# Find how getSpeakersBySummit is dispatched in the component
sed -n '230,270p' src/pages/summit_speakers/summit-speakers-list-page/index.js | cat -nRepository: fntechgit/summit-admin
Length of output: 1385
🏁 Script executed:
# Find the getRequest function to understand what it does with the metadata parameter
rg -n 'export.*getRequest\s*=|function\s+getRequest' src -A 5Repository: fntechgit/summit-admin
Length of output: 48
🏁 Script executed:
# Check if filters property is accessed in metadata anywhere
rg -n 'metadata\.filters|payload\.filters' src --type jsRepository: fntechgit/summit-admin
Length of output: 48
🏁 Script executed:
# Check exportSummitSpeakers and surrounding context
sed -n '949,1000p' src/actions/speaker-actions.js | cat -nRepository: fntechgit/summit-admin
Length of output: 2075
🏁 Script executed:
# Find getRequest definition
find src -name "*.js" | xargs rg -l "export.*getRequest" | head -5Repository: fntechgit/summit-admin
Length of output: 48
🏁 Script executed:
# Look for getRequest usage and metadata handling
rg -n "getRequest\(" src/actions/speaker-actions.js -B 2 -A 10Repository: fntechgit/summit-admin
Length of output: 2616
🏁 Script executed:
# Find the getRequest function definition
rg -n "export.*getRequest\s*=" src -A 20 | head -50Repository: fntechgit/summit-admin
Length of output: 48
🏁 Script executed:
# Check the import of getRequest in speaker-actions.js
head -50 src/actions/speaker-actions.js | grep -n "import"Repository: fntechgit/summit-admin
Length of output: 210
🏁 Script executed:
# Find where metadata is used in the request handling
rg -rn "metadata" src/actions/ --type js | grep -v node_modules | head -20Repository: fntechgit/summit-admin
Length of output: 2557
🏁 Script executed:
# Check the imports at the top of speaker-actions.js for where getRequest comes from
sed -n '1,50p' src/actions/speaker-actions.js | cat -nRepository: fntechgit/summit-admin
Length of output: 1861
🏁 Script executed:
# Find getRequest in api-calls or utils
find src -name "*api*" -o -name "*utils*" | xargs grep -l "getRequest" | head -5Repository: fntechgit/summit-admin
Length of output: 139
🏁 Script executed:
# Look for where the metadata parameter (5th argument to getRequest) is used
rg -n "getRequest" src/utils -A 15 | head -80Repository: fntechgit/summit-admin
Length of output: 48
🏁 Script executed:
# getRequest is from an external library. Let's check where the metadata (5th parameter) is used
# by searching for how REQUEST_SPEAKERS_BY_SUMMIT and RECEIVE_SPEAKERS_BY_SUMMIT actions are handled
rg -n "REQUEST_SPEAKERS_BY_SUMMIT|RECEIVE_SPEAKERS_BY_SUMMIT" src --type jsRepository: fntechgit/summit-admin
Length of output: 839
🏁 Script executed:
# Check the reducer for speakers to see how metadata is used
rg -n "metadata" src/reducers --type js -B 2 -A 2Repository: fntechgit/summit-admin
Length of output: 1468
🏁 Script executed:
# Let's inspect the full getSpeakersBySummit function call to getRequest
sed -n '920,945p' src/actions/speaker-actions.js | cat -nRepository: fntechgit/summit-admin
Length of output: 962
🏁 Script executed:
# Check the reducer to see how REQUEST_SPEAKERS_BY_SUMMIT metadata is used
sed -n '72,110p' src/reducers/summit_speakers/summit-speakers-list-reducer.js | cat -nRepository: fntechgit/summit-admin
Length of output: 1258
🏁 Script executed:
# Also check RECEIVE_SPEAKERS_BY_SUMMIT reducer case
sed -n '103,140p' src/reducers/summit_speakers/summit-speakers-list-reducer.js | cat -nRepository: fntechgit/summit-admin
Length of output: 1283
🏁 Script executed:
# Check if getSpeakersBySummit is called anywhere with object-shaped filters
rg -n "getSpeakersBySummit" src --type js -B 5 -A 5 | grep -A 10 -B 10 "getSpeakersBySummit"Repository: fntechgit/summit-admin
Length of output: 4731
🏁 Script executed:
# Look for any pattern where filters might be passed as an object to getSpeakersBySummit
rg -n "getSpeakersBySummit\s*\(" src/pages -A 2 -B 2Repository: fntechgit/summit-admin
Length of output: 48
🏁 Script executed:
# Let's also check git history to see if filters parameter was recently changed from {} to []
git log --oneline -p src/actions/speaker-actions.js | grep -A 5 -B 5 "filters = " | head -30Repository: fntechgit/summit-admin
Length of output: 960
🏁 Script executed:
# Check if filters metadata property is accessed anywhere after REQUEST_SPEAKERS_BY_SUMMIT
rg -n "filters" src/reducers/summit_speakers/summit-speakers-list-reducer.jsRepository: fntechgit/summit-admin
Length of output: 48
🏁 Script executed:
# See if there are any tests that verify the metadata structure
find src -name "*.test.js" -o -name "*.spec.js" | xargs grep -l "getSpeakersBySummit" 2>/dev/nullRepository: fntechgit/summit-admin
Length of output: 50
🏁 Script executed:
# Check the full reducer to see if all metadata properties are used
cat src/reducers/summit_speakers/summit-speakers-list-reducer.jsRepository: fntechgit/summit-admin
Length of output: 5477
Replace array spread in metadata with explicit filters property to avoid polluting state with numeric keys.
Line 940 spreads array filters into the metadata object passed to getRequest, which creates numeric keys (0, 1, 2…) instead of a proper filters property. These numeric keys end up merged into Redux state via the reducer's ...rest spread, polluting the state structure and reducing clarity.
💡 Proposed fix
- ...filters,
+ filters: normalizedFilters,🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/actions/speaker-actions.js` around lines 892 - 899, The metadata object
passed into getRequest is spreading the array (filter) which creates numeric
keys (0,1,2...) and pollutes Redux state when the reducer merges via ...rest;
change the metadata to include an explicit filters property instead (e.g.,
metadata: { filters: filter, ...otherMeta }) so consumers like getRequest and
the reducer receive a proper filters array; update the call site in the async
action (the function using dispatch, getState and calling getRequest) to stop
using the array spread and use the named filters property.
Comment on lines
+37
to
+45
| const handleChangeCriteria = (ev) => { | ||
| const val = ev.target.value; | ||
| handleChange("criteria", val); | ||
| }; | ||
|
|
||
| const handleChangeOperator = (ev) => { | ||
| const val = ev.target.value; | ||
| handleChange("operator", val); | ||
| }; |
There was a problem hiding this comment.
Reset dependent fields when criteria changes.
When criteria changes, previous operator/value are kept, which can produce invalid filter combinations for the new criteria.
💡 Proposed fix
const handleChangeCriteria = (ev) => {
const val = ev.target.value;
- handleChange("criteria", val);
+ onChange({
+ ...value,
+ criteria: val,
+ operator: "",
+ value: ""
+ });
};Also applies to: 63-80
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/GridFilter/components/Filter.jsx` around lines 37 - 45, The
handlers keep stale dependent fields causing invalid combos: update
handleChangeCriteria to not only call handleChange("criteria", val) but also
reset dependent fields (call handleChange("operator", DEFAULT_OPERATOR) and
handleChange("value", "") or the appropriate empty/default for the selected
criteria); likewise update handleChangeOperator to reset the value (call
handleChange("value", "") or a type-appropriate default) after calling
handleChange("operator", val). Locate and modify the functions named
handleChangeCriteria and handleChangeOperator and use the existing handleChange
utility so new criteria/operator selections clear or set sensible defaults for
dependent fields.
| variant="contained" | ||
| aria-label="add-filter" | ||
| onClick={() => onAdd()} | ||
| disabled={!value?.criteria || !value?.operator || !value?.value} |
There was a problem hiding this comment.
Allow valid falsy values (0, false) for filter input.
The current disable condition treats falsy values as missing, so valid values like 0 or false cannot be applied.
💡 Proposed fix
+ const hasValue =
+ value?.value !== null &&
+ value?.value !== undefined &&
+ value?.value !== "" &&
+ (!Array.isArray(value?.value) || value.value.length > 0);
@@
- disabled={!value?.criteria || !value?.operator || !value?.value}
+ disabled={!value?.criteria || !value?.operator || !hasValue}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/GridFilter/components/Filter.jsx` at line 97, The disable
logic in Filter.jsx currently treats any falsy value as missing, preventing
valid falsy inputs like 0 or false; update the disabled expression on the
element using the value variable so it only disables when criteria or operator
are null/undefined or when value is explicitly null/undefined/empty string (e.g.
replace disabled={!value?.criteria || !value?.operator || !value?.value} with a
check like value?.criteria == null || value?.operator == null || value?.value ==
null || (typeof value?.value === 'string' && value.value === '') so 0 and false
are allowed).
Comment on lines
+43
to
+49
| <IconButton | ||
| size="large" | ||
| onClick={onClick} | ||
| sx={{ mr: 1, top: "-6px", position: "relative" }} | ||
| > | ||
| <FilterListIcon fontSize="large" /> | ||
| </IconButton> |
There was a problem hiding this comment.
Add an accessible label to the icon-only filter button.
The icon-only IconButton has no accessible name, so assistive tech cannot identify its action.
💡 Proposed fix
return (
<IconButton
+ aria-label={T.translate("grid_filter.filters")}
size="large"
onClick={onClick}
sx={{ mr: 1, top: "-6px", position: "relative" }}
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <IconButton | |
| size="large" | |
| onClick={onClick} | |
| sx={{ mr: 1, top: "-6px", position: "relative" }} | |
| > | |
| <FilterListIcon fontSize="large" /> | |
| </IconButton> | |
| <IconButton | |
| aria-label={T.translate("grid_filter.filters")} | |
| size="large" | |
| onClick={onClick} | |
| sx={{ mr: 1, top: "-6px", position: "relative" }} | |
| > | |
| <FilterListIcon fontSize="large" /> | |
| </IconButton> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/GridFilter/components/FilterButton.jsx` around lines 43 - 49,
The IconButton in FilterButton.jsx is icon-only and lacks an accessible name;
add an accessible label (e.g., an aria-label or title) to the IconButton element
so screen readers can identify it (use a descriptive string like "Open filters"
or wire it to a passed prop if the component accepts one), while keeping the
FilterListIcon child unchanged; ensure the attribute is applied on the
IconButton JSX where onClick is set so assistive tech can announce the button's
purpose.
Comment on lines
+14
to
+26
| import React, { useEffect, useMemo, useState } from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { connect } from "react-redux"; | ||
| import T from "i18n-react/dist/i18n-react"; | ||
| import { | ||
| Box, | ||
| Button, | ||
| Dialog, | ||
| DialogActions, | ||
| DialogContent, | ||
| Divider, | ||
| Typography | ||
| } from "@mui/material"; |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
For @mui/material 6.4.3, what React peer dependency versions are officially supported? Is React 16.13.1 supported?
💡 Result:
@mui/material 6.4.3 officially supports React versions ^17.0.0, ^18.0.0, or ^19.0.0 (and react-dom likewise), as per the peer dependency range documented for MUI v6 in the official installation guide.[1][2] The minimum supported React version for MUI v6 is 17.0.0.[3][4] React 16.13.1 (< 17.0.0) is not supported.[3][4]
Citations:
- 1: https://mui.com/material-ui/getting-started/installation/
- 2: https://v6.mui.com/material-ui/getting-started/installation/
- 3: https://mui.com/material-ui/migration/upgrade-to-v6/
- 4: https://mui.com/material-ui/migration/upgrade-to-v6.md
🏁 Script executed:
# Find and check package.json for `@mui/material` and react versions
find . -name "package.json" -type f | head -5Repository: fntechgit/summit-admin
Length of output: 391
🏁 Script executed:
# Check the actual `@mui/material` version if it exists in package files
rg "@mui/material" -A 2 -B 2 | head -30Repository: fntechgit/summit-admin
Length of output: 1973
🏁 Script executed:
# Check React version in package.json
cat package.json | grep -A 2 -B 2 '"react"'Repository: fntechgit/summit-admin
Length of output: 229
@mui/material v6 is incompatible with React 16.13.1.
@mui/material v6.4.3 (resolved to 6.5.0 in this project) requires React ≥17.0.0, but the project specifies React ^16.13.1. This will cause install/runtime breakage. Either upgrade React to ≥17.0.0 or downgrade to an older MUI version that supports React 16.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/GridFilter/index.jsx` around lines 14 - 26, The project is
importing MUI v6 components (Box, Button, Dialog, DialogActions, DialogContent,
Divider, Typography) in src/components/GridFilter/index.jsx while the repo uses
React ^16.13.1 which is incompatible; fix by either upgrading React to ≥17.0.0
in package.json and updating the lockfile/build (ensuring any other packages are
compatible) or pin `@mui/material` to a v5 release that supports React 16 (e.g.
install `@mui/material`@^5 and matching `@emotion` packages), then update
package.json and reinstall so the imports in GridFilter (Box, Button, Dialog,
DialogActions, DialogContent, Divider, Typography) resolve against the
compatible MUI version.
Comment on lines
+147
to
+151
| const value = Array.isArray(filter.value) | ||
| ? filter.value.join("||") | ||
| : filter.value; | ||
| if (value) { | ||
| return [`${filter.criteria}${filter.operator}${value}`]; |
There was a problem hiding this comment.
Don’t use truthy checks for filter value validation.
Current checks drop valid values like 0 and false, so some legitimate filters never get parsed/applied.
Proposed fix
+const hasValue = (v) =>
+ v !== null &&
+ v !== undefined &&
+ !(typeof v === "string" && v.trim() === "") &&
+ !(Array.isArray(v) && v.length === 0);
+
const parseFilter = (filter) => {
@@
- if (value) {
+ if (hasValue(value)) {
return [`${filter.criteria}${filter.operator}${value}`];
}
};
@@
const validFilters = filters
- .filter((f) => f.criteria && f.operator && f.value)
+ .filter((f) => f.criteria && f.operator && hasValue(f.value))
.map((f) => ({ ...f, parsed: parseFilter(f) }));Also applies to: 182-184
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/GridFilter/index.jsx` around lines 147 - 151, The code
currently uses a truthy check (if (value)) which incorrectly rejects valid
filter values like 0 or false; change this to an explicit null/undefined check
so 0/false are preserved (e.g., replace if (value) with if (value !== null &&
value !== undefined)), and apply the same fix to the other occurrence that
handles filter parsing (the block using filter.value, filter.criteria and
filter.operator around the second occurrence noted); ensure both places still
handle Array.isArray(filter.value) the same way before the null/undefined check.
Comment on lines
+16
to
+19
| const { id, filters, joinOperator } = payload; | ||
| let parsedFilter = filters.flatMap((f) => f.parsed); | ||
| if (joinOperator === JOIN_OPERATORS.ANY) | ||
| parsedFilter = parsedFilter.map((p) => `or(${p})`); |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win
Harden reducer against partial SAVE_FILTERS payloads.
filters.flatMap(...) assumes payload.filters is always an array. The clear flow (saveFilters(id)) can reach this reducer with partial payloads and crash at runtime.
Proposed fix
case `FIL_${SAVE_FILTERS}`: {
- const { id, filters, joinOperator } = payload;
- let parsedFilter = filters.flatMap((f) => f.parsed);
+ const { id, filters = [], joinOperator = JOIN_OPERATORS.ALL } = payload || {};
+ let parsedFilter = filters.flatMap((f) => f.parsed || []);
if (joinOperator === JOIN_OPERATORS.ANY)
parsedFilter = parsedFilter.map((p) => `or(${p})`);
return {🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/GridFilter/reducers/filter-reducer.js` around lines 16 - 19,
The reducer handling the SAVE_FILTERS payload assumes payload.filters is always
an array and uses filters.flatMap, which can crash on partial payloads; update
the handler (the block that destructures const { id, filters, joinOperator } =
payload and computes parsedFilter) to defensively default filters to an empty
array (e.g., const safeFilters = Array.isArray(filters) ? filters : []) and use
safeFilters.flatMap(f => f && f.parsed ? f.parsed : []) (or otherwise filter out
undefined parsed entries) before applying the JOIN_OPERATORS.ANY mapping (where
parsedFilter = parsedFilter.map(p => `or(${p})`)). Ensure you reference
JOIN_OPERATORS.ANY and the parsedFilter computation so the reducer remains
resilient to missing/partial payloads.
Comment on lines
+195
to
+200
| const handleModalChange = (ev) => { | ||
| const { id, value, checked } = ev.target; | ||
| setModalValues({ | ||
| ...modalValues, | ||
| [id]: checked || value | ||
| }); |
There was a problem hiding this comment.
Fix checkbox state coercion in modal value updates.
checked || value stores "on" when checkbox is unchecked, so boolean state becomes incorrect and can send unintended payload values.
💡 Proposed fix
const handleModalChange = (ev) => {
- const { id, value, checked } = ev.target;
- setModalValues({
- ...modalValues,
- [id]: checked || value
- });
+ const { id, value, checked, type } = ev.target;
+ setModalValues((prev) => ({
+ ...prev,
+ [id]: type === "checkbox" ? checked : value
+ }));
};🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@src/pages/summit_speakers/summit-speakers-list-page/components/send-email-modal.js`
around lines 195 - 200, The modal state update in handleModalChange incorrectly
uses checked || value which causes checkboxes to store strings like "on" instead
of booleans; update the handler to choose the new value based on the input type
(e.g., use ev.target.type === 'checkbox' ? checked : value) and then call
setModalValues({...modalValues, [id]: newValue}) so checkboxes set true/false
and other inputs use their value; refer to handleModalChange, setModalValues,
modalValues, and ev.target (id, value, checked, type) when making the change.
Comment on lines
+211
to
+237
| const SummitSpeakersListPage = ({ | ||
| currentSummit, | ||
| history, | ||
| speakersProps, | ||
| submittersProps, | ||
| getSpeakersBySummit, | ||
| getSubmittersBySummit, | ||
| exportSummitSpeakers, | ||
| exportSummitSubmitters, | ||
| selectSummitSpeaker, | ||
| unselectSummitSpeaker, | ||
| selectSummitSubmitter, | ||
| unselectSummitSubmitter, | ||
| selectAllSummitSpeakers, | ||
| selectAllSummitSubmitters, | ||
| unselectAllSummitSpeakers, | ||
| unselectAllSummitSubmitters | ||
| }) => { | ||
| const [source, setSource] = useState(sources.speakers); | ||
| const isSpeakerMode = source === sources.speakers; | ||
| const subjectProps = isSpeakerMode ? speakersProps : submittersProps; | ||
| const { parsedFilter } = useGridFilter(FILTER_ID); | ||
|
|
||
| useEffect(() => { | ||
| initSubmittersList(); | ||
| initSpeakersList(); | ||
|
|
There was a problem hiding this comment.
Dispatch initializer actions from props, not raw imports.
Line 235 and Line 236 currently invoke imported action creators directly. Those calls are not dispatched, so list initialization/reset may never happen.
Proposed fix
const SummitSpeakersListPage = ({
@@
unselectAllSummitSpeakers,
- unselectAllSummitSubmitters
+ unselectAllSummitSubmitters,
+ initSubmittersList,
+ initSpeakersList
}) => {
@@
useEffect(() => {
initSubmittersList();
initSpeakersList();📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const SummitSpeakersListPage = ({ | |
| currentSummit, | |
| history, | |
| speakersProps, | |
| submittersProps, | |
| getSpeakersBySummit, | |
| getSubmittersBySummit, | |
| exportSummitSpeakers, | |
| exportSummitSubmitters, | |
| selectSummitSpeaker, | |
| unselectSummitSpeaker, | |
| selectSummitSubmitter, | |
| unselectSummitSubmitter, | |
| selectAllSummitSpeakers, | |
| selectAllSummitSubmitters, | |
| unselectAllSummitSpeakers, | |
| unselectAllSummitSubmitters | |
| }) => { | |
| const [source, setSource] = useState(sources.speakers); | |
| const isSpeakerMode = source === sources.speakers; | |
| const subjectProps = isSpeakerMode ? speakersProps : submittersProps; | |
| const { parsedFilter } = useGridFilter(FILTER_ID); | |
| useEffect(() => { | |
| initSubmittersList(); | |
| initSpeakersList(); | |
| const SummitSpeakersListPage = ({ | |
| currentSummit, | |
| history, | |
| speakersProps, | |
| submittersProps, | |
| getSpeakersBySummit, | |
| getSubmittersBySummit, | |
| exportSummitSpeakers, | |
| exportSummitSubmitters, | |
| selectSummitSpeaker, | |
| unselectSummitSpeaker, | |
| selectSummitSubmitter, | |
| unselectSummitSubmitter, | |
| selectAllSummitSpeakers, | |
| selectAllSummitSubmitters, | |
| unselectAllSummitSpeakers, | |
| unselectAllSummitSubmitters, | |
| initSubmittersList, | |
| initSpeakersList | |
| }) => { | |
| const [source, setSource] = useState(sources.speakers); | |
| const isSpeakerMode = source === sources.speakers; | |
| const subjectProps = isSpeakerMode ? speakersProps : submittersProps; | |
| const { parsedFilter } = useGridFilter(FILTER_ID); | |
| useEffect(() => { | |
| initSubmittersList(); | |
| initSpeakersList(); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/pages/summit_speakers/summit-speakers-list-page/index.js` around lines
211 - 237, The useEffect is calling the raw imported action creators
initSubmittersList and initSpeakersList directly; replace those calls with the
dispatcher functions passed in via props (e.g. call props.initSubmittersList and
props.initSpeakersList or the corresponding destructured prop names) so the
actions are actually dispatched, and add those initializer functions to the
component's destructured props list if not already present.
| selectedAll | ||
| }; | ||
|
|
||
| if (!currentSummit.id) return <div />; |
There was a problem hiding this comment.
Add null-safe guard for currentSummit.
Line 369 assumes currentSummit is always defined. If it’s temporarily null/undefined, this throws before render.
Proposed fix
-if (!currentSummit.id) return <div />;
+if (!currentSummit || !currentSummit.id) return <div />;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| if (!currentSummit.id) return <div />; | |
| if (!currentSummit || !currentSummit.id) return <div />; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/pages/summit_speakers/summit-speakers-list-page/index.js` at line 369,
The render guard assumes currentSummit is always defined; update the conditional
that checks currentSummit.id (in the component in index.js where the line reads
the currentSummit.id) to first ensure currentSummit is non-null/undefined before
accessing its id (i.e., add a null-safe check for currentSummit and return early
if it's falsy or has no id) so the component won't throw when currentSummit is
temporarily null.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
https://app.clickup.com/t/86b9ruudz
Summary by CodeRabbit
New Features
Documentation