WIP for updating parser when date changes

Author: reosarevok

root/static/scripts/alias/AliasEditForm.js

@@ -17,6 +17,7 @@ import isBlank from '../common/utility/isBlank.js';
 import DateRangeFieldset, {
   type ActionT as DateRangeFieldsetActionT,
   runReducer as runDateRangeFieldsetReducer,
+  setInitialStateOnForm as setInitialDateRangeFieldsetStateOnForm,
 } from '../edit/components/DateRangeFieldset.js';
 import EnterEdit from '../edit/components/EnterEdit.js';
 import EnterEditNote from '../edit/components/EnterEditNote.js';
@@ -96,7 +97,7 @@ const blankDatePeriod = {
 
 function createInitialState(form: AliasEditFormT, searchHintType: number) {
   return {
-    form,
+    form: setInitialDateRangeFieldsetStateOnForm(form),
     guessCaseOptions: createGuessCaseOptionsState(),
     isEnded: form.field.period.field.ended.value,
     isGuessCaseOptionsOpen: false,

root/static/scripts/common/utility/formatDate.js

@@ -11,30 +11,34 @@ import ko from 'knockout';
 
 import {fixedWidthInteger} from './strings.js';
 
-function formatDate(date: ?PartialDateT): string {
+function formatDate(date: ?{
+  +day?: ?StrOrNum,
+  +month?: ?StrOrNum,
+  +year?: ?StrOrNum,
+}): string {
   if (!date) {
     return '';
   }
 
-  const y: number | null = ko.unwrap(date.year ?? null);
-  const m: number | null = ko.unwrap(date.month ?? null);
-  const d: number | null = ko.unwrap(date.day ?? null);
+  const y: StrOrNum | null = ko.unwrap(date.year ?? null);
+  const m: StrOrNum | null = ko.unwrap(date.month ?? null);
+  const d: StrOrNum | null = ko.unwrap(date.day ?? null);
 
   let result = '';
 
   if (nonEmpty(y)) {
     result += fixedWidthInteger(y, 4);
-  } else if (m != null || d != null) {
+  } else if (nonEmpty(m) || nonEmpty(d)) {
     result = '????';
   }
 
-  if (m != null) {
+  if (nonEmpty(m)) {
     result += '-' + fixedWidthInteger(m, 2);
-  } else if (d != null) {
+  } else if (nonEmpty(d)) {
     result += '-??';
   }
 
-  if (d != null) {
+  if (nonEmpty(d)) {
     result += '-' + fixedWidthInteger(d, 2);
   }
 

root/static/scripts/edit/components/DateRangeFieldset.js

@@ -22,6 +22,9 @@ import FormRowPartialDate, {
   type ActionT as FormRowPartialDateActionT,
   runReducer as runFormRowPartialDateReducer,
 } from './FormRowPartialDate.js';
+import {
+  createInitialState as createPartialDateInputState,
+} from './PartialDateInput.js';
 
 /* eslint-disable ft-flow/sort-keys */
 export type ActionT =
@@ -33,6 +36,11 @@ export type ActionT =
 
 export type StateT = DatePeriodFieldT;
 
+type FormWithDateRangeT = FormT<{
+  +period: DatePeriodFieldT,
+  ...
+}>;
+
 export function partialDateFromField(
   compoundField: PartialDateFieldT,
 ): PartialDateT {
@@ -44,6 +52,25 @@ export function partialDateFromField(
   };
 }
 
+export function setInitialStateOnForm<T: FormWithDateRangeT>(form: T): T {
+  const formCtx = mutate(form);
+  const periodCtx = formCtx.get('field', 'period');
+  periodCtx.set(createInitialState(periodCtx.read()));
+  return formCtx.read();
+}
+
+
+export function createInitialState(
+  field: StateT,
+): StateT {
+  const fieldCtx = mutate(field);
+  const beginDateField = fieldCtx.get('field', 'begin_date');
+  beginDateField.set(createPartialDateInputState(beginDateField.read()));
+  const endDateField = fieldCtx.get('field', 'end_date');
+  endDateField.set(createPartialDateInputState(endDateField.read()));
+  return field;
+}
+
 function validateDatePeriod(stateCtx: CowContext<StateT>) {
   const state = stateCtx.read();
   const beginDateField = state.field.begin_date;

root/static/scripts/edit/components/PartialDateInput.js

@@ -9,6 +9,7 @@
 
 import type {CowContext} from 'mutate-cow';
 
+import formatDate from '../../common/utility/formatDate.js';
 import parseNaturalDate from '../../common/utility/parseNaturalDate.js';
 import {isDateValid, isYearFourDigits} from '../utility/dates.js';
 import {applyPendingErrors} from '../utility/subfieldErrors.js';
@@ -17,12 +18,9 @@ import {applyPendingErrors} from '../utility/subfieldErrors.js';
 export type ActionT =
   | {
       +type: 'set-date',
-      +date: {
-        +year?: string,
-        +month?: string,
-        +day?: string,
-      },
+      +date: PartialDateStringsT,
     }
+  | {+type: 'set-parsed-date', +date: string}
   | {+type: 'show-pending-errors'};
 /* eslint-enable ft-flow/sort-keys */
 
@@ -32,6 +30,39 @@ type ControlledPropsT =
 
 export type StateT = PartialDateFieldT;
 
+export function createInitialState(
+  date: StateT,
+): StateT {
+  return {
+    ...date,
+    formattedDate: formatParserDate(date),
+  };
+}
+
+export function formatParserDate(date: StateT): string {
+  return formatDate({
+    day: date.field.day.value,
+    month: date.field.month.value,
+    year: date.field.year.value,
+  });
+}
+
+function updateDate(dateCtx: CowContext<StateT>, date: PartialDateStringsT) {
+  const newYear = date.year;
+  const newMonth = date.month;
+  const newDay = date.day;
+  if (newYear != null) {
+    dateCtx.set('field', 'year', 'value', newYear);
+  }
+  if (newMonth != null) {
+    dateCtx.set('field', 'month', 'value', newMonth);
+  }
+  if (newDay != null) {
+    dateCtx.set('field', 'day', 'value', newDay);
+  }
+  validateDate(dateCtx);
+}
+
 function validateDate(dateCtx: CowContext<StateT>) {
   const date = dateCtx.read();
   const year = String(date.field.year.value ?? '');
@@ -66,20 +97,20 @@ export function runReducer(
       applyPendingErrors(state);
       break;
     }
+    case 'set-parsed-date': {
+      const date = parseNaturalDate(action.date);
+      updateDate(state, date);
+      state.set('formattedDate', action.date);
+      break;
+    }
     case 'set-date': {
-      const newYear = action.date.year;
-      const newMonth = action.date.month;
-      const newDay = action.date.day;
-      if (newYear != null) {
-        state.set('field', 'year', 'value', newYear);
+      updateDate(state, action.date);
+      const formattedDate = formatParserDate(state.read());
+      if (nonEmpty(formattedDate)) {
+        state.set('formattedDate', formatParserDate(state.read()));
+      } else {
+        state.set('formattedDate', formatParserDate(state.read()));
       }
-      if (newMonth != null) {
-        state.set('field', 'month', 'value', newMonth);
-      }
-      if (newDay != null) {
-        state.set('field', 'day', 'value', newDay);
-      }
-      validateDate(state);
       break;
     }
   }
@@ -95,6 +126,7 @@ type DatePartPropsT = {
 type DateParserPropsT = {
   onBlur?: () => void,
   onChange?: (SyntheticEvent<HTMLInputElement>) => void,
+  value?: string,
 };
 
 component PartialDateInput(
@@ -147,16 +179,16 @@ component PartialDateInput(
     );
 
     parserProps.onChange = (event) => {
-      const date = parseNaturalDate(event.currentTarget.value);
       controlledProps.dispatch({
-        date,
-        type: 'set-date',
+        date: event.currentTarget.value,
+        type: 'set-parsed-date',
       });
     };
 
     yearProps.value = field.field.year.value ?? '';
     monthProps.value = field.field.month.value ?? '';
     dayProps.value = field.field.day.value ?? '';
+    parserProps.value = field.formattedDate ?? '';
   }
 
   return (

root/types/formcomponents.js

@@ -128,10 +128,13 @@ declare type OptionTreeT<+T> = {
   +parent_id: number | null,
 };
 
-declare type PartialDateFieldT = CompoundFieldT<{
-  +day: FieldT<StrOrNum | null>,
-  +month: FieldT<StrOrNum | null>,
-  +year: FieldT<StrOrNum | null>,
+declare type PartialDateFieldT = $ReadOnly<{
+  ...CompoundFieldT<{
+    +day: FieldT<StrOrNum | null>,
+    +month: FieldT<StrOrNum | null>,
+    +year: FieldT<StrOrNum | null>,
+  }>,
+  +formattedDate?: string,
 }>;
 
 declare type RepeatableFieldT<+F> = {