Draft: Work in progress adding filter to customize Default DurationOptions. #882

ajskelton · 2024-09-17T21:15:28Z

The filter works, but something in the DateTimeRange useEffect is reverting back to the default values.

Description of the Change

Closes #876

How to test the Change

Changelog Entry

Added - New feature

Credits

Props @ajskelton

Checklist:

I agree to follow this project's Code of Conduct.
I have updated the documentation accordingly.
I have added tests to cover my change.
All new and existing tests pass.

The filter works, but something in the DateTimeRange useEffect is reverting back to the default values.

mauteri

Thanks for contributing, Anthony! Take a look at my comments and let me know what you think.

mauteri · 2024-09-19T13:23:57Z

src/components/DurationOptions.js

+	},
+];
+
+export default applyFilters('gatherpress.durationOptions', DurationOptionsDefaults );


Let's put this back in helpers/datetime.js, but adjust it a bit. This area is for React components, this is just returning an object.

mauteri · 2024-09-19T13:24:58Z

src/helpers/datetime.js

- * @property {string}         label - The human-readable label for the duration option.
- * @property {number|boolean} value - The value representing the duration in hours, or `false` if a custom end time is to be set.
- */
-export const durationOptions = [


let's keep the name durationOptions, but convert this to a function. Then apply your filter to the function before returning.

mauteri · 2024-09-19T13:25:37Z

src/helpers/datetime.js

@@ -126,7 +90,7 @@ export function dateTimeOffset(hours) {
 */
 export function getDateTimeOffset() {
 	return (
-		durationOptions.find(
+		DurationOptions.find(


After changes above this would become durationOptions().find(

mauteri · 2024-09-19T13:26:35Z

src/components/Duration.js

@@ -35,11 +36,11 @@ const Duration = () => {
 		<SelectControl
 			label={__('Duration', 'gatherpress')}
 			value={
-				durationOptions.some((option) => option.value === duration)
+				DurationOptions.some((option) => option.value === duration)


this will become durationOpions().some... after changes below.

mauteri · 2024-09-19T13:26:58Z

src/components/Duration.js

 					? duration
 					: false
 			}
-			options={durationOptions}
+			options={DurationOptions}


options={durationOptions()}

* Moves the object back into the datetime helpers file * Converted to a function that returns the filtered values * Updated usage of durationOptions

ajskelton · 2024-09-26T15:32:31Z

The comments made a lot of sense and I pushed up a new commit with the updates. With those in place the filter from a theme was working great, but there is one bug that I was able to drill down.

When the page loads the gatherpress/datetime store builds the DEFAULT_STATE. The duration value uses the getDateTimeOffset() function that calculates what the duration is. During this first instance the durationOptions() function does not use the filtered values from the theme, it still uses the defaults. When it doesn't find the corresponding value in the object returned from durationOptions it returns false. With the state set to false it doesn't render the dropdown and instead shows the Date and Time End field so you can't change the duration anymore.

Do you think it would be better to save the duration value to the post meta along with the start and end dates so this calculation doesn't need to happen?

mauteri · 2024-09-26T15:38:31Z

The comments made a lot of sense and I pushed up a new commit with the updates. With those in place the filter from a theme was working great, but there is one bug that I was able to drill down.

When the page loads the gatherpress/datetime store builds the DEFAULT_STATE. The duration value uses the getDateTimeOffset() function that calculates what the duration is. During this first instance the durationOptions() function does not use the filtered values from the theme, it still uses the defaults. When it doesn't find the corresponding value in the object returned from durationOptions it returns false. With the state set to false it doesn't render the dropdown and instead shows the Date and Time End field so you can't change the duration anymore.

Do you think it would be better to save the duration value to the post meta along with the start and end dates so this calculation doesn't need to happen?

Hey @ajskelton, can you try to call this function to get the duration value? This should serve the same purpose you are looking for with storing meta. Basically, it takes the start/end datetime and returns the duration or false (same as you'd get from the meta) https://github.com/GatherPress/gatherpress/blob/main/src/helpers/datetime.js#L127 Let me know if that works. Thx!

ajskelton · 2024-09-26T15:49:05Z

@mauteri This is the function that doesn't use the filtered values when the default state is being set.

I tested by adding some console.logs in the .find(). When you refresh the page and select the block you see the default duration values logging to the console instead of the filtered duration.

So it sets the duration to false before checking against the filtered options.

When it runs here:

gatherpress/src/stores/datetime.js

Line 23 in 4b89474

duration: getDateTimeOffset(),

, it must be running before the filter in the theme is registered.

mauteri · 2024-09-26T15:57:11Z

@mauteri This is the function that doesn't use the filtered values when the default state is being set.

I tested by adding some console.logs in the .find(). When you refresh the page and select the block you see the default duration values logging to the console instead of the filtered duration.

So it sets the duration to false before checking against the filtered options.

When it runs here:

gatherpress/src/stores/datetime.js

Line 23 in 4b89474

duration: getDateTimeOffset(),

, it must be running before the filter in the theme is registered.

Oh gotcha, let me give it some thought.

carstingaxion · 2024-09-28T15:02:11Z

Hello @ajskelton & @mauteri,

are you aware of WordPress/gutenberg#60971, which seems slightly related?

Sets the initial duration value to null instead of using the getDateTimeOffset function. This function is moved to the getDuration selector. This selector is run in the Duration component which renders after any theme filters have been registered. We do need to check if the value is false when the user selects the value to custom pick the end time.

ajskelton · 2024-09-28T21:50:24Z

@mauteri I found a fix for the issue. Instead of running the getDateTimeOffset() function in the DEFAULT_STATE, i changed that initial duration value to be null. Then I moved that function to the getDuration selector. When the Duration Component renders it always runs the getDuration selector to dynamically get the value based on the start and end times. And when this runs all of the theme filters have already been registered.

We do need to check if the current state is false here in the selector. I first tried just using the getDateTimeOffset but when the value was set to false the state wasn't saving the false value and the DateTimeEnd was never rendering.

I don't have a ton of experience working with custom stores so let me know if this is the wrong way to go about this.

@carstingaxion That new Date/Time Range component does look nice. I think it's still just design right now, I couldn't see any code commits to check out.

mauteri · 2024-09-29T20:44:30Z

src/stores/datetime.js

@@ -78,7 +78,7 @@ const store = createReduxStore('gatherpress/datetime', {
 	selectors: {
 		getDateTimeStart: (state) => state.dateTimeStart,
 		getDateTimeEnd: (state) => state.dateTimeEnd,
-		getDuration: (state) => state.duration,
+		getDuration: (state) => state.duration === false ? false : getDateTimeOffset(),


getDuration: (state) => false === state.duration ? false : getDateTimeOffset(),

github-actions · 2024-09-30T15:33:26Z

Preview changes with Playground

You can preview the recent changes for PR#882 with the following PHP versions:

PHP Version 8.3

PHP Version 7.4

Download .zip with build changes

Made with 💙 from GatherPress & a little bit of WordPress Playground. Changes will not persist between sessions.

Work in progress adding filter to customize Default DurationOptions.

8431772

The filter works, but something in the DateTimeRange useEffect is reverting back to the default values.

ajskelton mentioned this pull request Sep 17, 2024

Make default durations filterable #876

Open

1 task

mauteri requested changes Sep 19, 2024

View reviewed changes

Applies fixes to durationOptions filtering

01e46d9

* Moves the object back into the datetime helpers file * Converted to a function that returns the filtered values * Updated usage of durationOptions

mauteri requested changes Sep 29, 2024

View reviewed changes

Switches getDuration selector to use Yoda Conditions

67d8410

mauteri changed the base branch from main to develop October 10, 2024 12:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Draft: Work in progress adding filter to customize Default DurationOptions. #882

Draft: Work in progress adding filter to customize Default DurationOptions. #882

ajskelton commented Sep 17, 2024 •

edited by mauteri

Loading

mauteri left a comment

mauteri Sep 19, 2024

mauteri Sep 19, 2024

mauteri Sep 19, 2024

mauteri Sep 19, 2024

mauteri Sep 19, 2024

ajskelton commented Sep 26, 2024

mauteri commented Sep 26, 2024

ajskelton commented Sep 26, 2024

mauteri commented Sep 26, 2024

carstingaxion commented Sep 28, 2024

ajskelton commented Sep 28, 2024

mauteri Sep 29, 2024

github-actions bot commented Sep 30, 2024

Draft: Work in progress adding filter to customize Default DurationOptions. #882

Are you sure you want to change the base?

Draft: Work in progress adding filter to customize Default DurationOptions. #882

Conversation

ajskelton commented Sep 17, 2024 • edited by mauteri Loading

Description of the Change

How to test the Change

Changelog Entry

Credits

Checklist:

mauteri left a comment

Choose a reason for hiding this comment

mauteri Sep 19, 2024

Choose a reason for hiding this comment

mauteri Sep 19, 2024

Choose a reason for hiding this comment

mauteri Sep 19, 2024

Choose a reason for hiding this comment

mauteri Sep 19, 2024

Choose a reason for hiding this comment

mauteri Sep 19, 2024

Choose a reason for hiding this comment

ajskelton commented Sep 26, 2024

mauteri commented Sep 26, 2024

ajskelton commented Sep 26, 2024

mauteri commented Sep 26, 2024

carstingaxion commented Sep 28, 2024

ajskelton commented Sep 28, 2024

mauteri Sep 29, 2024

Choose a reason for hiding this comment

github-actions bot commented Sep 30, 2024

Preview changes with Playground

PHP Version 8.3

PHP Version 7.4

ajskelton commented Sep 17, 2024 •

edited by mauteri

Loading