Skip to content

Conversation

@mirmirmirr
Copy link
Member

This pull request refactors to the event editor's date/time selection and advanced options UI. The main goal was to modularize the components and clean up redundant date/time selection code so most of this is code on the backend. Some changes were also made to the mobile view of the editor.

State management + context

  • Refactored event range reducer to split "SET_TIME_RANGE" into "SET_START_TIME" and "SET_END_TIME", and updated corresponding hooks for more granular time range updates. This is just to allow for more modular changes and to prevent exposing the state outside the reducer
  • Created an event context that wraps the reducer to clean up some of the prop drilling seen in editor components.

Component modularization

  • Centralized the logic for desktop dropdowns and mobile drawers into a base component (@/features/selector) and then created specific selectors off of that to use in the editor.
  • Created an AdvancedOptions component to the event editor for managing timezone, duration, and custom event code, with responsive design for mobile/desktop.

DateRange and Editor Logic Refactor

  • Got rid of repeated code inside date range logic. DateRangeSelection now controls most of the display behavior and uses DateRangeDrawer and DateRangePopover to display calendars on mobile and desktop respectively.
  • Moved files specifically related to date range selection into the @/features/event/editor/date-range folder. This included calendars and the event type selector
  • Introduced a new layout for the mobile editor, most notability featuring a segmented control component that splits the details and grid preview into two "screens". This was created for a cleaner experience and to prevent information overload on the user end. If they want to see to grid preview they can, otherwise they can just quickly fill in event info and go about their day.

import { MESSAGES } from "@/lib/messages";
import submitEvent from "@/lib/utils/api/submit-event";
import { cn } from "@/lib/utils/classname";
import TimeRangeSelection from "./time-range/selector";

Check failure

Code scanning / ESLint

Disallow specified modules when loaded by `import` Error

'./time-range/selector' import is restricted from being used by a pattern. Use absolute imports with @/ prefix instead of relative parent imports.
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.

2 participants