Add EventFilter component and styles for event type selection. #344
Conversation
- Implement EventFilter component to allow users to filter events by type.
- Create eventTypes.js to define available event types with labels.
- Update EventsList component to integrate EventFilter and manage selected event type.
- Add styles for EventFilter and update existing styles for EventsList.
- Implement EventFilter component to allow users to filter events by type. - Create eventTypes.js to define available event types with labels. - Update EventsList component to integrate EventFilter and manage selected event type. - Add styles for EventFilter and update existing styles for EventsList.
There was a problem hiding this comment.
Pull Request Overview
This PR introduces an EventFilter component to enable users to filter events by type and integrates it into the EventsList component. Key changes include adding the EventFilter component and its styles, creating an eventTypes.js file for centralized event type definitions, and updating the EventsList component to apply filtering logic.
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| styles/styles.scss | Imports the EventFilter styles to support event type filtering. |
| components/events-list/events-list.scss | Comments out the flex display style in the header; consider cleanup. |
| components/events-list/EventsList.jsx | Integrates EventFilter and applies event filtering based on selection. |
| components/event-filter/eventTypes.js | Defines available event types with proper labels. |
| components/event-filter/event-filter.scss | Adds styles specific to the EventFilter component. |
| components/event-filter/EventFilter.jsx | Implements the EventFilter component with a simple select interface. |
| @@ -9,7 +9,7 @@ | |||
| } | |||
|
|
|||
| &__header { | |||
| display: flex; | |||
| // display: flex; | |||
There was a problem hiding this comment.
[nitpick] If the commented-out code is no longer needed, consider removing it to keep the codebase clean, or add a comment to explain why it remains commented out.
| // display: flex; | |
| // display: flex; // Uncomment if header layout needs to switch to flexbox in the future |
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
Pull Request Overview
This PR adds an EventFilter component to allow users to filter events by type, updates the EventsList component to integrate the filter, and adds corresponding styles and event type definitions.
- Integrated EventFilter into EventsList with state management for selected event type.
- Added eventTypes.js to define event type values and labels while updating related SCSS files.
- Modified event metadata in the effection event content as part of content updates.
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| styles/styles.scss | Imports updated to include the event-filter styles. |
| content/events/2025-05-30-effection.md | Updated event metadata details. |
| components/events-list/events-list.scss | Commented out a CSS rule related to flex display in the header. |
| components/events-list/EventsList.jsx | Integrated state filtering and added the EventFilter component. |
| components/event-filter/eventTypes.js | New definition of event types using literals for labels. |
| components/event-filter/event-filter.scss | Added new styles for the EventFilter component. |
| components/event-filter/EventFilter.jsx | New component to render a select element for filtering events. |
| @@ -9,7 +9,7 @@ | |||
| } | |||
|
|
|||
| &__header { | |||
| display: flex; | |||
| 8000 | // display: flex; | ||
There was a problem hiding this comment.
[nitpick] If the commented-out code is no longer needed, consider removing it to keep the stylesheet clean and maintainable; if it's temporary for debugging, add a comment explaining its purpose.
| // display: flex; |
Copilot uses AI. Check for mistakes.
|
@AndreaGriffiths11 @LadyKerr @cassidoo |