Desktop: Fix datetime values not appearing on note properties when the picker is open (#11748)

packages/app-desktop/gui/NotePropertiesDialog.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { _ } from '@joplin/lib/locale';
 import { themeStyle } from '@joplin/lib/theme';
-import time from '@joplin/lib/time';
 import DialogButtonRow from './DialogButtonRow';
 import Note from '@joplin/lib/models/Note';
 import bridge from '../services/bridge';
@@ -9,6 +8,7 @@ import shim from '@joplin/lib/shim';
 import { NoteEntity } from '@joplin/lib/services/database/types';
 import { focus } from '@joplin/lib/utils/focusHandler';
 import Dialog from './Dialog';
+import { formatDateTimeLocalToMs, formatMsToDateTimeLocal, formatMsToLocal } from '@joplin/utils/time';
 const { clipboard } = require('electron');
 const formatcoords = require('formatcoords');
 
@@ -22,14 +22,14 @@ interface Props {
 
 interface FormNote {
 	id: string;
-	deleted_time: string;
+	deleted_time: number;
 	location: string;
 	markup_language: string;
 	revisionsLink: string;
 	source_url: string;
-	todo_completed?: string;
+	todo_completed?: number;
-	user_created_time: string;
+	user_created_time: number;
-	user_updated_time: string;
+	user_updated_time: number;
 }
 
 interface State {
@@ -41,6 +41,10 @@ interface State {
 
 const uniqueId = (key: string) => `note-properties-dialog-${key}`;
 
+const isPropertyDatetimeRelated = (key: string) => {
+	return key === 'user_created_time' || key === 'user_updated_time' || key === 'deleted_time';
+};
+
 class NotePropertiesDialog extends React.Component<Props, State> {
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
@@ -119,17 +123,17 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 	public noteToFormNote(note: NoteEntity) {
 		const formNote: FormNote = {
 			id: note.id,
-			user_updated_time: time.formatMsToLocal(note.user_updated_time),
+			user_updated_time: note.user_updated_time,
-			user_created_time: time.formatMsToLocal(note.user_created_time),
+			user_created_time: note.user_created_time,
 			source_url: note.source_url,
 			location: '',
 			revisionsLink: note.id,
 			markup_language: Note.markupLanguageToLabel(note.markup_language),
-			deleted_time: note.deleted_time ? time.formatMsToLocal(note.deleted_time) : '',
+			deleted_time: note.deleted_time,
 		};
 
 		if (note.todo_completed) {
-			formNote.todo_completed = time.formatMsToLocal(note.todo_completed);
+			formNote.todo_completed = note.todo_completed;
 		}
 
 		if (Number(note.latitude) || Number(note.longitude)) {
@@ -141,11 +145,11 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 
 	public formNoteToNote(formNote: FormNote) {
 		const note: NoteEntity = { id: formNote.id, ...this.latLongFromLocation(formNote.location) };
-		note.user_created_time = time.formatLocalToMs(formNote.user_created_time);
+		note.user_created_time = formNote.user_created_time;
-		note.user_updated_time = time.formatLocalToMs(formNote.user_updated_time);
+		note.user_updated_time = formNote.user_updated_time;
 
 		if (formNote.todo_completed) {
-			note.todo_completed = time.formatLocalToMs(formNote.todo_completed);
+			note.todo_completed = formNote.todo_completed;
 		}
 
 		note.source_url = formNote.source_url;
@@ -243,14 +247,8 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 		return new Promise((resolve: Function) => {
 			const newFormNote = { ...this.state.formNote };
 
-			if (this.state.editedKey.indexOf('_time') >= 0) {
-				const dt = time.anythingToDateTime(this.state.editedValue, new Date());
-				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-				(newFormNote as any)[this.state.editedKey] = time.formatMsToLocal(dt.getTime());
-			} else {
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 			(newFormNote as any)[this.state.editedKey] = this.state.editedValue;
-			}
 
 			this.setState(
 				{
@@ -300,12 +298,12 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 		};
 
 		if (this.state.editedKey === key) {
-			if (key.indexOf('_time') >= 0) {
+			if (isPropertyDatetimeRelated(key)) {
 				controlComp = <input
 					type="datetime-local"
-					defaultValue={value}
+					defaultValue={formatMsToDateTimeLocal(value)}
 					ref={this.inputRef}
-					onChange={event => this.setState({ editedValue: event.target.value })}
+					onChange={event => this.setState({ editedValue: formatDateTimeLocalToMs(event.target.value) })}
 					onKeyDown={event => onKeyDown(event)}
 					style={styles.input}
 					id={uniqueId(key)}
@@ -343,6 +341,8 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 				} catch (error) {
 					displayedValue = '';
 				}
+			} else if (isPropertyDatetimeRelated(key)) {
+				displayedValue = formatMsToLocal(value);
 			}
 
 			if (['source_url', 'location'].indexOf(key) >= 0) {
@@ -411,22 +411,6 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 		return key;
 	}
 
-	public formatValue(key: string, note: NoteEntity) {
-		if (key === 'location') {
-			if (!Number(note.latitude) && !Number(note.longitude)) return null;
-			const dms = formatcoords(Number(note.latitude), Number(note.longitude));
-			return dms.format('DDMMss', { decimalPlaces: 0 });
-		}
-
-		if (['user_updated_time', 'user_created_time', 'todo_completed'].indexOf(key) >= 0) {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-			return time.formatMsToLocal((note as any)[key]);
-		}
-
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-		return (note as any)[key];
-	}
-
 	public render() {
 		const theme = themeStyle(this.props.themeId);
 		const formNote = this.state.formNote;