Merge pull request #482 from GatherPress/fix-event-past-issue

Fix event start and end picker to use datetime format in settings.
GatherPress · Jan 6, 2024 · f29263c · f29263c
2 parents 6452ad8 + a1ce2a6
commit f29263c
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 27 deletions.
diff --git a/build/blocks/event-date/index.asset.php b/build/blocks/event-date/index.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-date', 'wp-element', 'wp-i18n'), 'version' => '083cc7b917e8e9e4ec2e');
+<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-date', 'wp-element', 'wp-i18n'), 'version' => '938fba5894732d634c1d');
diff --git a/build/blocks/event-date/index.js b/build/blocks/event-date/index.js
diff --git a/build/panels.asset.php b/build/panels.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-date', 'wp-edit-post', 'wp-element', 'wp-i18n', 'wp-plugins'), 'version' => 'e6fa24339463aecad895');
+<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-date', 'wp-edit-post', 'wp-element', 'wp-i18n', 'wp-plugins'), 'version' => '4a6e361c06e539664af7');
diff --git a/build/panels.js b/build/panels.js
diff --git a/src/components/DateTime.js b/src/components/DateTime.js
@@ -29,7 +29,9 @@ import {
 export const DateTimeStartLabel = (props) => {
 	const { dateTimeStart } = props;
 
-	return moment.tz(dateTimeStart, getTimeZone()).format(dateTimeLabelFormat);
+	return moment
+		.tz(dateTimeStart, getTimeZone())
+		.format(dateTimeLabelFormat());
 };
 
 /**
@@ -46,7 +48,7 @@ export const DateTimeStartLabel = (props) => {
 export const DateTimeEndLabel = (props) => {
 	const { dateTimeEnd } = props;
 
-	return moment.tz(dateTimeEnd, getTimeZone()).format(dateTimeLabelFormat);
+	return moment.tz(dateTimeEnd, getTimeZone()).format(dateTimeLabelFormat());
 };
 
 export const DateTimeStartPicker = (props) => {

diff --git a/src/components/DateTimeEnd.js b/src/components/DateTimeEnd.js
@@ -47,13 +47,18 @@ const DateTimeEnd = (props) => {
 
 	return (
 		<PanelRow>
-			<Flex>
-				<FlexItem>{__('End', 'gatherpress')}</FlexItem>
+			<Flex direction="column" gap="0">
+				<FlexItem>
+					<label htmlFor="gp-datetime-end">
+						{__('End', 'gatherpress')}
+					</label>
+				</FlexItem>
 				<FlexItem>
 					<Dropdown
 						popoverProps={{ placement: 'bottom-end' }}
 						renderToggle={({ isOpen, onToggle }) => (
 							<Button
+								id="gp-datetime-end"
 								onClick={onToggle}
 								aria-expanded={isOpen}
 								isLink

diff --git a/src/components/DateTimeRange.js b/src/components/DateTimeRange.js
@@ -22,20 +22,16 @@ const DateTimeRange = () => {
 
 	return (
 		<>
-			<section>
-				<h3>{__('Date & time', 'gatherpress')}</h3>
-				<DateTimeStart
-					dateTimeStart={dateTimeStart}
-					setDateTimeStart={setDateTimeStart}
-				/>
-				<DateTimeEnd
-					dateTimeEnd={dateTimeEnd}
-					setDateTimeEnd={setDateTimeEnd}
-				/>
-			</section>
-			<section>
-				<TimeZone timezone={timezone} setTimezone={setTimezone} />
-			</section>
+			<h3>{__('Date & time', 'gatherpress')}</h3>
+			<DateTimeStart
+				dateTimeStart={dateTimeStart}
+				setDateTimeStart={setDateTimeStart}
+			/>
+			<DateTimeEnd
+				dateTimeEnd={dateTimeEnd}
+				setDateTimeEnd={setDateTimeEnd}
+			/>
+			<TimeZone timezone={timezone} setTimezone={setTimezone} />
 		</>
 	);
 };

diff --git a/src/components/DateTimeStart.js b/src/components/DateTimeStart.js
@@ -47,13 +47,18 @@ const DateTimeStart = (props) => {
 
 	return (
 		<PanelRow>
-			<Flex>
-				<FlexItem>{__('Start', 'gatherpress')}</FlexItem>
+			<Flex direction="column" gap="0">
+				<FlexItem>
+					<label htmlFor="gp-datetime-start">
+						{__('Start', 'gatherpress')}
+					</label>
+				</FlexItem>
 				<FlexItem>
 					<Dropdown
 						popoverProps={{ placement: 'bottom-end' }}
 						renderToggle={({ isOpen, onToggle }) => (
 							<Button
+								id="gp-datetime-start"
 								onClick={onToggle}
 								aria-expanded={isOpen}
 								isLink

diff --git a/src/helpers/datetime.js b/src/helpers/datetime.js
@@ -18,7 +18,27 @@ import { isEventPostType, triggerEventCommuncation } from './event';
 
 export const dateTimeMomentFormat = 'YYYY-MM-DDTHH:mm:ss';
 export const dateTimeDatabaseFormat = 'YYYY-MM-DD HH:mm:ss';
-export const dateTimeLabelFormat = 'MMMM D, YYYY h:mm a';
+
+/**
+ * Get the combined date and time format for event labels.
+ *
+ * This function retrieves the date and time formats from global settings
+ * and combines them to create a formatted label for event start and end times.
+ *
+ * @since 1.0.0
+ *
+ * @return {string} The combined date and time format for event labels.
+ */
+export const dateTimeLabelFormat = () => {
+	const dateFormat = convertPHPToMomentFormat(
+		getFromGlobal('settings.date_format')
+	);
+	const timeFormat = convertPHPToMomentFormat(
+		getFromGlobal('settings.time_format')
+	);
+
+	return dateFormat + ' ' + timeFormat;
+};
 
 /**
  * Retrieves the timezone for the application based on the provided timezone or the global setting.
@@ -366,7 +386,7 @@ export function convertPHPToMomentFormat(format) {
 		U: 'X',
 	};
 
-	return format
+	return String(format)
 		.split('')
 		.map((chr) => (chr in replacements ? replacements[chr] : chr))
 		.join('');

diff --git a/test/unit/js/src/components/DateTime.test.js b/test/unit/js/src/components/DateTime.test.js
@@ -19,6 +19,13 @@ import {
  * Coverage for DateTimeStartLabel.
  */
 test('DateTimeStartLabel displays correct format', () => {
+	global.GatherPress = {
+		settings: {
+			date_format: 'F j, Y',
+			time_format: 'g:i a',
+		},
+	};
+
 	const props = {
 		dateTimeStart: '2023-12-28T10:26:00',
 	};
@@ -30,6 +37,13 @@ test('DateTimeStartLabel displays correct format', () => {
  * Coverage for DateTimeEndLabel.
  */
 test('DateTimeEndLabel displays correct format', () => {
+	global.GatherPress = {
+		settings: {
+			date_format: 'F j, Y',
+			time_format: 'g:i a',
+		},
+	};
+
 	const props = {
 		dateTimeEnd: '2023-12-28T10:26:00',
 	};

diff --git a/test/unit/js/src/helpers/datetime.test.js b/test/unit/js/src/helpers/datetime.test.js
@@ -9,6 +9,7 @@ import 'moment-timezone';
  */
 import {
 	convertPHPToMomentFormat,
+	dateTimeLabelFormat,
 	defaultDateTimeEnd,
 	defaultDateTimeStart,
 	getDateTimeEnd,
@@ -22,6 +23,20 @@ import {
 	updateDateTimeStart,
 } from '../../../../../src/helpers/datetime';
 
+/**
+ * Coverage for dateTimeLabelFormat.
+ */
+test('dateTimeLabelFormat returns correct format', () => {
+	global.GatherPress = {
+		settings: {
+			date_format: 'F j, Y',
+			time_format: 'g:i a',
+		},
+	};
+
+	expect(dateTimeLabelFormat()).toBe('MMMM D, YYYY h:mm a');
+});
+
 /**
  * Coverage for getTimeZone.
  */