Implementation of a new react app for displaying opening hours from CMS with FullCalendar integration - Ddfform 414 #1023
Conversation
This file contains 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
Sets up a minimal application that initially only includes text translation (`withText`) as a starting point for development
- Configured to use Danish week format (week starts on Monday) - Added default event setup - Enabled drag-and-select for creating events ( temporarily stored in local states ) - Utilized the color property for event customization
The height will prevent the "overlay" (that shows the events) from adding an extra empty row that takes up unnecessary space, and stickyHeaderDates is just a nice add-on for the user that add events
This is a part of the events that are added by drag-and-select.
If the events are selected over multiple days, it will change the end date to end on the start day at time 00:00:00 I tried to use `selectConstraint` and `eventConstraint` instead, but with no luck
…ours Temporarily set `target` in orval.config to an incorrect file, pending merge of PR: danskernesdigitalebibliotek/dpl-cms#890
…int to `/dpl_opening_hours` Enables testing of the Orval-generated `formatCmsEventsToFullCalendar` hook in `Calendar` app.
Now, we fetch the opening hours data from WireMock to demonstrate functionality with fetched data. Implemented is a helper file that currently exports a single function, `formatCmsEventsToFullCalendar`. We continue to manage new events in our local state.
Currently, only full-day events can be added from this view.
This did not resolve the issues mentioned in the commit "Add `height="100vh"` + `stickyHeaderDates`" (Commit ID: 46f03a1)
kasperbirch1
force-pushed
the
DDFFORM-414-kalendervisning-vise-kalender
branch
from
aa58e60 to
d4f803c
Compare
Added a todo for replacing prompt with a modal in the future
kasperbirch1
force-pushed
the
DDFFORM-414-kalendervisning-vise-kalender
branch
from
d4f803c to
f6ed8a8
Compare
This seems to fix the problem with the extra row at the bottom
The file contains no JSX, thus the .tsx extension is unnecessary
Added ID to each event for editing/removing capabilities Added `eventContent` / `OpeningHoursEditorEventContent` to render custom markup inside the event Implemented `handleEventClick` to prompt title change for the event
Improve code readability and cleanliness.
it's not needed when no extra parameters are added.
to accept parameters as an object and corrected Types in `helper.ts`
I tried to do it like this but encountered an error:
```
eventContent={(eventInput) =>
<OpeningHoursEditorEventContent
eventInput={eventInput}
handleEventRemove={(eventToRemove) =>
handleEventRemove({ eventToRemove, events, setEvents })
}
/>
}
```
Error:
Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “OpeningHoursEditor” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true
…ent` With these enhancements, users will now see the time displayed when selecting time slots by dragging in the calendar. Additionally, I have implemented some temporary inline CSS styles. It is important to note that these are provisional and should be replaced with CSS classes from the design system in a future update.
This is a more proactive choice for deleting an event. It is meaningful to keep the editing and removal options in the same place. A translation string for the 'Remove' button has been added.
This update allows users to specify opening hours from the month view, similar to the functionality available in the week view. As our API does not process full-day values, this modification will not introduce any problems
`handleEventRemove` now uses the mutate hook `useDplOpeningHoursDeleteDELETE` to delete an event. After the success is achieved, it will refetch the data from `useDplOpeningHoursListGET`.
There was a problem with date selection persistence when the dialog was closed using the escape key. I've implemented a `useEscapeKey` hook that listens for the escape keydown event and calls the `onClose` function.
Cleaned up code in `useOpeningHours` to streamline `onSuccess` and `onError` handling
The updated code works as expected. Events now behave in the same way in fullcalender regarding the data object that is sent to dpl-cms In addition, 'day.js' is now used for efficient handling of date objects.
The `children` prop is utilized to manage additional elements such as the remove button, ensuring the form styles remain intact.
We use useConfig to manage props in order to handle arrays and number props. This is not the optimal solution since useConfig is starting to get a bit messy as, for example, these props here have nothing to do with config. We must deal with this another time. I have removed GuardedApp since it is only related to login - Implement `useWireMockStartDate` Boolean This boolean aligns the full calendar start date with our wiremock data. Also renamed the mocked data
This upgrade was necessary because `orval` did not correctly capitalize (uppercase) the HTTP request methods. Additionally, I plan to run the codegen for the other `orval` clients in separate commits following this one. These will include: - "codegen:client:fbs" - "codegen:client:cover" - "codegen:client:publizon"
This hook is exclusively for the `OpeningHoursEditor`. Renaming it will prevent conflicts with the `useOpeningHours` hook that is used for presenting the opening hours in our React app.
…-tilfoj-dialog-modal POC: Add `Dialog` - Ddfform 500
kasperg
approved these changes
Apr 5, 2024
.docker/wiremock/cms/mappings/delete-event-f52a1b96-38d2-479a-aeaf-65367637d365.json
Outdated
Show resolved
Hide resolved
Comment on lines
+3
to
+8
| declare global { | ||
| interface HTMLDialogElement { | ||
| showModal(): void; | ||
| close(): void; | ||
| } | ||
| } |
There was a problem hiding this comment.
Consider adding a reference/link to some documentation for this or replacing this with a third party package.
I wonder why we need to do this ourselves and how you came up with this.
| @@ -0,0 +1,19 @@ | |||
| import { useEffect } from "react"; | |||
|
|
|||
| const useEscapeKey = ({ closeDialog }: { closeDialog: () => void }) => { | |||
There was a problem hiding this comment.
Consider replacing this/some of this with the hooks provided by react-use.
We already have it in the project https://github.com/streamich/react-use?tab=readme-ov-file
This includes renaming, text translation, and code commenting. #1023
This was not intended to be there.
…g-vise-kalender # Conflicts: # .docker/wiremock/services.json # src/core/dpl-cms/dpl-cms.ts # src/core/dpl-cms/model/dplOpeningHoursCreatePOST200.ts # src/core/dpl-cms/model/dplOpeningHoursCreatePOST200Category.ts # src/core/dpl-cms/model/dplOpeningHoursCreatePOSTBody.ts # src/core/dpl-cms/model/dplOpeningHoursCreatePOSTBodyCategory.ts # src/core/dpl-cms/model/dplOpeningHoursCreatePOSTFormat.ts # src/core/dpl-cms/model/dplOpeningHoursCreatePOSTParams.ts # src/core/dpl-cms/model/dplOpeningHoursDeleteDELETEFormat.ts # src/core/dpl-cms/model/dplOpeningHoursDeleteDELETEParams.ts # src/core/dpl-cms/model/dplOpeningHoursListGET200Item.ts # src/core/dpl-cms/model/dplOpeningHoursListGET200ItemCategory.ts # src/core/dpl-cms/model/dplOpeningHoursListGETFormat.ts # src/core/dpl-cms/model/dplOpeningHoursListGETParams.ts # src/core/dpl-cms/model/dplOpeningHoursUpdatePATCH200.ts # src/core/dpl-cms/model/dplOpeningHoursUpdatePATCH200Category.ts # src/core/dpl-cms/model/dplOpeningHoursUpdatePATCHBody.ts # src/core/dpl-cms/model/dplOpeningHoursUpdatePATCHBodyCategory.ts # src/core/dpl-cms/model/dplOpeningHoursUpdatePATCHFormat.ts # src/core/dpl-cms/model/dplOpeningHoursUpdatePATCHParams.ts # src/core/dpl-cms/model/eventPATCHBody.ts # src/core/dpl-cms/model/eventPATCHBodyExternalData.ts # src/core/dpl-cms/model/eventPATCHBodyState.ts # src/core/dpl-cms/model/eventPATCHFormat.ts # src/core/dpl-cms/model/eventPATCHParams.ts # src/core/dpl-cms/model/eventsGET200Item.ts # src/core/dpl-cms/model/eventsGET200ItemAddress.ts # src/core/dpl-cms/model/eventsGET200ItemDateTime.ts # src/core/dpl-cms/model/eventsGET200ItemExternalData.ts # src/core/dpl-cms/model/eventsGET200ItemImage.ts # src/core/dpl-cms/model/eventsGET200ItemSeries.ts # src/core/dpl-cms/model/eventsGET200ItemState.ts # src/core/dpl-cms/model/eventsGET200ItemTicketCategoriesItem.ts # src/core/dpl-cms/model/eventsGET200ItemTicketCategoriesItemCount.ts # src/core/dpl-cms/model/eventsGET200ItemTicketCategoriesItemPrice.ts # src/core/dpl-cms/model/eventsGETFormat.ts # src/core/dpl-cms/model/eventsGETParams.ts # src/core/dpl-cms/model/index.ts
This allows us to remove any part of the model that is no longer relevant - either because the specification (or portentially Orval) has been updated. Orval has a clean configuration option that we could use for this https://orval.dev/reference/configuration/output#clean Unfortunately it does not seem to work properly. It also deletes our custom mutator code. It seems to be a known issue: orval-labs/orval#333 For now we just delete the code by hand.
This should remove leftovers from previous versions generated using an older version of Orval.
This way we can remove reference to wiremock in non-development code.
Return response code 204 and remove content.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Link to issue
https://reload.atlassian.net/browse/DDFFORM-414
Description
This pull request adds a new React app to be used for displaying/adding opening hours from the CMS on a weekly or monthly view.
We have used FullCalendar to solve this task
https://fullcalendar.io/
Although the Opening Hours API is not yet complete, it already exposes a Swagger spec that Orval has used to generate some new hooks, which we use to fetch data.
Since the API does not yet expose anything, we have used WireMock to display data from
https://dpl-cms.docker/dpl_opening_hours.We also demonstrate the ability to add new opening hours, but these are only saved in local state for now.
Be aware that this commit sets a target URL that must be set back to the develop branch when this pull request is merged
danskernesdigitalebibliotek/dpl-cms#890
Commit: WIP: Implementing new Orval-generated hooks to retrieve CMS opening hours
4ce0ef6
Extra
Added demonstration of editing / deleting events. This is far from the finished solution as this is only handled in the local state and only the title can be edited. But it will be nice for future developers to build on
Screenshot of the result