Skip to content

feat: migrate event category list/edit to MUI components - #1024

Open
tomrndom wants to merge 3 commits into
masterfrom
feature/event-category-mui
Open

feat: migrate event category list/edit to MUI components#1024
tomrndom wants to merge 3 commits into
masterfrom
feature/event-category-mui

Conversation

@tomrndom

@tomrndom tomrndom commented Jul 28, 2026

Copy link
Copy Markdown

ref: https://app.clickup.com/t/9014802374/86bb2f7kf

Signed-off-by: Tomás Castillo tcastilloboireau@gmail.com

Summary by CodeRabbit

  • New Features
    • Modernized event category editing with Form validation, improved field placeholders, and an updated schedule settings accordion.
    • Updated icon upload to a direct REST-based flow with upload failure messaging and icon removal.
    • Enhanced subtrack management with conditional link/unlink (with warnings) and sortable edit/delete/reorder.
    • Improved event category list with sortable columns and “copy categories” enabled only after selecting a source summit.
  • Bug Fixes
    • Save button now disables during async submission to prevent duplicate updates.
    • Event category colors now display more reliably in the list.

Signed-off-by: Tomás Castillo <tcastilloboireau@gmail.com>
@coderabbitai

coderabbitai Bot commented Jul 28, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3f57ec05-63bc-46b9-a052-6cb015a619df

📥 Commits

Reviewing files that changed from the base of the PR and between b4e6517 and f68c347.

📒 Files selected for processing (1)
  • src/reducers/events/event-category-list-reducer.js

📝 Walkthrough

Walkthrough

Event category forms and listing pages were migrated to functional React components using hooks, Formik, Yup, and MUI. Icon uploads, subtrack management, scheduling controls, category copying, sorting, localization, reducer mappings, and page action wiring were updated.

Changes

Event category management

Layer / File(s) Summary
Form state and interactions
src/components/forms/event-category-form.js, src/i18n/en.json
EventCategoryForm now uses hooks, Formik, Yup validation, reinitialization, server-error synchronization, normalized submission values, direct icon uploads, subtrack management, MUI controls, and new localized messages.
Page wiring and category listing
src/pages/events/edit-event-category-page.js, src/pages/events/event-category-list-page.js
Edit and list pages now use explicit action props, MUI navigation controls, hooks, MuiTableSortable, summit copying, and updated navigation and mutation handlers.
Category state mapping
src/reducers/events/event-category-list-reducer.js
Category payloads now retain raw color values while reducer mappings preserve ordering, seeding, deletion, and logout behavior.

Estimated code review effort: 4 (Complex) | ~45 minutes

Suggested reviewers: santipalenque, smarcet

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly matches the main change: migrating the event category list and edit views to MUI components.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/event-category-mui

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🧹 Nitpick comments (1)
src/components/forms/event-category-form.js (1)

387-420: 🗄️ Data Integrity & Integration | 🔵 Trivial | 💤 Low value

Consider coercing proposed_schedule_transition_time before submit.

It initializes to "" and MUI number inputs yield strings, so the payload sends "" rather than null/omitted when unset. Also, since the accordion is collapsed by default, a server error on this field won't be visible (and useScrollToError can't locate the hidden input) — auto-expanding when the field has an error would help.

🤖 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/forms/event-category-form.js` around lines 387 - 420, The
event form submit flow should normalize proposed_schedule_transition_time from
its initial empty string/string input into the API’s expected null or omitted
value when unset, while preserving numeric values when provided. In the form
component, also tie scheduleSettingsExpanded to validation errors for this field
so the accordion automatically expands when proposed_schedule_transition_time
has an error, allowing useScrollToError to locate the input.
🤖 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/forms/event-category-form.js`:
- Around line 461-463: Update the MuiTableSortable usage in the event category
form to ensure its data prop receives a safe empty collection when
entity.subtracks is undefined, while preserving existing subtrack data when
available.

In `@src/pages/events/edit-event-category-page.js`:
- Around line 45-61: Update the edit-event-category page so the “Add new” Button
is rendered only when entity.id exists, rather than relying on handleAddNew’s
early return; also replace the literal button label with the appropriate
T.translate key for the add-new action.

In `@src/pages/events/event-category-list-page.js`:
- Around line 53-57: Update the render guard in the component around the
currentSummit useEffect to handle an undefined currentSummit consistently with
the existing optional chaining. Check currentSummit safely before accessing its
id, returning null when the summit is absent.
- Around line 33-39: Update the `color` column’s `render` function to display
`row.color` as a visual swatch instead of using `dangerouslySetInnerHTML`. Reuse
the swatch rendering approach from `subtrackColumns` in
`event-category-form.js`, while preserving the existing color value and column
behavior.

---

Nitpick comments:
In `@src/components/forms/event-category-form.js`:
- Around line 387-420: The event form submit flow should normalize
proposed_schedule_transition_time from its initial empty string/string input
into the API’s expected null or omitted value when unset, while preserving
numeric values when provided. In the form component, also tie
scheduleSettingsExpanded to validation errors for this field so the accordion
automatically expands when proposed_schedule_transition_time has an error,
allowing useScrollToError to locate the input.
🪄 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: 149cc38d-394c-4ac8-8254-62329888480c

📥 Commits

Reviewing files that changed from the base of the PR and between 53b15bf and 33713c2.

📒 Files selected for processing (5)
  • src/components/forms/event-category-form.js
  • src/i18n/en.json
  • src/pages/events/edit-event-category-page.js
  • src/pages/events/event-category-list-page.js
  • src/styles/edit-event-category-page.less
💤 Files with no reviewable changes (1)
  • src/styles/edit-event-category-page.less

Comment thread src/components/forms/event-category-form.js
Comment thread src/pages/events/edit-event-category-page.js
Comment thread src/pages/events/event-category-list-page.js
Comment thread src/pages/events/event-category-list-page.js Outdated
Signed-off-by: Tomás Castillo <tcastilloboireau@gmail.com>

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)
src/pages/events/event-category-list-page.js (2)

62-64: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

Guard the fetch effect by currentSummit?.id.

getEventCategories dereferences currentSummit.id; if (currentSummit) still invokes it for an object without an ID, potentially requesting /summits/undefined/tracks.

Proposed fix
 useEffect(() => {
-  if (currentSummit) getEventCategories();
+  if (currentSummit?.id) getEventCategories();
 }, [currentSummit?.id]);
🤖 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/events/event-category-list-page.js` around lines 62 - 64, Update
the useEffect containing getEventCategories to guard the fetch with
currentSummit?.id rather than only currentSummit, ensuring getEventCategories
runs only when a valid summit ID exists while preserving the current dependency
on currentSummit?.id.

81-84: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Replace m3 with a supported breakpoint in both Grid2 containers. m3 isn’t defined in the theme, so these sizes will be ignored; md looks like the intended 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/events/event-category-list-page.js` around lines 81 - 84, Replace
the unsupported m3 breakpoint with md in both Grid2 containers in
src/pages/events/event-category-list-page.js at lines 81-84 and 103-106,
preserving the existing xs sizing and spacing.
🧹 Nitpick comments (1)
src/pages/events/event-category-list-page.js (1)

29-35: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Keep translated headers reactive.

T.translate(...) now runs once at module evaluation. If the locale changes at runtime or translations load asynchronously, these headers remain stale. Keep columns inside the component or memoize it from the active locale.

🤖 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/events/event-category-list-page.js` around lines 29 - 35, Update
the columns definition used by the event category list component so translated
headers are recomputed when the active locale or translations change. Move
columns into the component that renders them, or memoize it using the
locale/translation dependency, while preserving the existing column keys and
translation keys.
🤖 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/reducers/events/event-category-list-reducer.js`:
- Around line 63-75: Update the EVENT_CATEGORIES_SEEDED handler to preserve the
complete event category shape by mapping the same fields as
RECEIVE_EVENT_CATEGORIES, including code, color, and ordering data alongside id
and name. Keep the existing append and empty-result behavior unchanged.

---

Outside diff comments:
In `@src/pages/events/event-category-list-page.js`:
- Around line 62-64: Update the useEffect containing getEventCategories to guard
the fetch with currentSummit?.id rather than only currentSummit, ensuring
getEventCategories runs only when a valid summit ID exists while preserving the
current dependency on currentSummit?.id.
- Around line 81-84: Replace the unsupported m3 breakpoint with md in both Grid2
containers in src/pages/events/event-category-list-page.js at lines 81-84 and
103-106, preserving the existing xs sizing and spacing.

---

Nitpick comments:
In `@src/pages/events/event-category-list-page.js`:
- Around line 29-35: Update the columns definition used by the event category
list component so translated headers are recomputed when the active locale or
translations change. Move columns into the component that renders them, or
memoize it using the locale/translation dependency, while preserving the
existing column keys and translation keys.
🪄 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: d125a2b3-cb1a-4d41-b6d6-7313a295728c

📥 Commits

Reviewing files that changed from the base of the PR and between 33713c2 and b4e6517.

📒 Files selected for processing (5)
  • src/components/forms/event-category-form.js
  • src/i18n/en.json
  • src/pages/events/edit-event-category-page.js
  • src/pages/events/event-category-list-page.js
  • src/reducers/events/event-category-list-reducer.js
🚧 Files skipped from review as they are similar to previous changes (3)
  • src/i18n/en.json
  • src/pages/events/edit-event-category-page.js
  • src/components/forms/event-category-form.js

Comment thread src/reducers/events/event-category-list-reducer.js
Signed-off-by: Tomás Castillo <tcastilloboireau@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant