Convert RecurringSchedulePicker.jsx -> RecurringSchedulePicker.tsx

packages/desktop-client/src/components/common/Select.tsx

@@ -17,6 +17,7 @@ function isValueOption<Value>(
 export type SelectOption<Value = string> = [Value, string] | typeof Menu.line;
 
 type SelectProps<Value> = {
+  id?: string;
   bare?: boolean;
   options: Array<readonly [Value, string] | typeof Menu.line>;
   value: Value;
@@ -41,6 +42,7 @@ type SelectProps<Value> = {
  * // <Select options={[['1', 'Option 1'], ['2', 'Option 2']]} value="3" defaultLabel="Select an option"  onChange={handleOnChange} />
  */
 export function Select<const Value = string>({
+  id,
   bare,
   options,
   value,
@@ -61,6 +63,7 @@ export function Select<const Value = string>({
     <>
       <Button
         ref={triggerRef}
+        id={id}
         type={bare ? 'bare' : 'normal'}
         disabled={disabled}
         onClick={() => {

packages/desktop-client/src/components/forms.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode, type HTMLProps } from 'react';
+import React, { type ReactNode, type ComponentProps } from 'react';
 
 import { css } from 'glamor';
 
@@ -64,9 +64,7 @@ export const FormField = ({ style, children }: FormFieldProps) => {
 
 // Custom inputs
 
-type CheckboxProps = Omit<HTMLProps<HTMLInputElement>, 'type'> & {
-  style?: CSSProperties;
-};
+type CheckboxProps = ComponentProps<'input'>;
 
 export const Checkbox = (props: CheckboxProps) => {
   return (

packages/desktop-client/src/components/select/DateSelect.tsx

@@ -172,6 +172,7 @@ function defaultShouldSaveFromKey(e) {
 }
 
 type DateSelectProps = {
+  id?: string;
   containerProps?: ComponentProps<typeof View>;
   inputProps?: ComponentProps<typeof Input>;
   value: string;
@@ -188,6 +189,7 @@ type DateSelectProps = {
 };
 
 export function DateSelect({
+  id,
   containerProps,
   inputProps,
   value: defaultValue,
@@ -344,6 +346,7 @@ export function DateSelect({
   return (
     <View {...containerProps}>
       <Input
+        id={id}
         focused={focused}
         {...inputProps}
         inputRef={inputRef}

packages/desktop-client/src/components/select/RecurringSchedulePicker.jsx → packages/desktop-client/src/components/select/RecurringSchedulePicker.tsx

@@ -1,8 +1,17 @@
-import React, { useEffect, useReducer, useRef, useState } from 'react';
+import {
+  type CSSProperties,
+  type Dispatch,
+  useEffect,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
 
 import { sendCatch } from 'loot-core/src/platform/client/fetch';
 import * as monthUtils from 'loot-core/src/shared/months';
 import { getRecurringDescription } from 'loot-core/src/shared/schedules';
+import { type RecurConfig, type RecurPattern } from 'loot-core/types/models';
+import { type WithRequired } from 'loot-core/types/util';
 
 import { useDateFormat } from '../../hooks/useDateFormat';
 import { SvgAdd, SvgSubtract } from '../../icons/v0';
@@ -28,7 +37,7 @@ const FREQUENCY_OPTIONS = [
   { id: 'weekly', name: 'Weeks' },
   { id: 'monthly', name: 'Months' },
   { id: 'yearly', name: 'Years' },
-];
+] as const;
 
 const DAY_OF_MONTH_OPTIONS = [...Array(31).keys()].map(day => day + 1);
 
@@ -40,16 +49,16 @@ const DAY_OF_WEEK_OPTIONS = [
   { id: 'TH', name: 'Thursday' },
   { id: 'FR', name: 'Friday' },
   { id: 'SA', name: 'Saturday' },
-];
+] as const;
 
-function parsePatternValue(value) {
+function parsePatternValue(value: string | number) {
   if (value === 'last') {
     return -1;
   }
   return Number(value);
 }
 
-function parseConfig(config) {
+function parseConfig(config: Partial<RecurConfig>): StateConfig {
   return {
     start: monthUtils.currentDay(),
     interval: 1,
@@ -58,28 +67,37 @@ function parseConfig(config) {
     skipWeekend: false,
     weekendSolveMode: 'before',
     endMode: 'never',
-    endOccurrences: '1',
+    endOccurrences: 1,
     endDate: monthUtils.currentDay(),
     ...config,
   };
 }
 
-function unparseConfig(parsed) {
+function unparseConfig(parsed: StateConfig): RecurConfig {
   return {
     ...parsed,
     interval: validInterval(parsed.interval),
     endOccurrences: validInterval(parsed.endOccurrences),
   };
 }
 
-function createMonthlyRecurrence(startDate) {
+function createMonthlyRecurrence(startDate: string) {
   return {
     value: parseInt(monthUtils.format(startDate, 'd')),
-    type: 'day',
+    type: 'day' as const,
   };
 }
 
-function boundedRecurrence({ field, value, recurrence }) {
+function boundedRecurrence({
+  field,
+  value,
+  recurrence,
+}: {
+  recurrence: RecurPattern;
+} & (
+  | { field: 'type'; value: RecurPattern['type'] }
+  | { field: 'value'; value: RecurPattern['value'] }
+)) {
   if (
     (field === 'value' &&
       recurrence.type !== 'day' &&
@@ -93,7 +111,48 @@ function boundedRecurrence({ field, value, recurrence }) {
   return { [field]: value };
 }
 
-function reducer(state, action) {
+type StateConfig = Omit<
+  WithRequired<RecurConfig, 'patterns' | 'endDate' | 'weekendSolveMode'>,
+  'interval' | 'endOccurrences'
+> & {
+  interval: number | string;
+  endOccurrences: number | string;
+};
+
+type ReducerState = {
+  config: StateConfig;
+};
+
+type UpdateRecurrenceAction =
+  | {
+      type: 'update-recurrence';
+      recurrence: RecurPattern;
+      field: 'type';
+      value: RecurPattern['type'];
+    }
+  | {
+      type: 'update-recurrence';
+      recurrence: RecurPattern;
+      field: 'value';
+      value: RecurPattern['value'];
+    };
+
+type ChangeFieldAction<T extends keyof StateConfig> = {
+  type: 'change-field';
+  field: T;
+  value: StateConfig[T];
+};
+
+type ReducerAction =
+  | { type: 'replace-config'; config: StateConfig }
+  | ChangeFieldAction<keyof StateConfig>
+  | UpdateRecurrenceAction
+  | { type: 'add-recurrence' }
+  | { type: 'remove-recurrence'; recurrence: RecurPattern }
+  | { type: 'set-skip-weekend'; skipWeekend: boolean }
+  | { type: 'set-weekend-solve'; value: StateConfig['weekendSolveMode'] };
+
+function reducer(state: ReducerState, action: ReducerAction): ReducerState {
   switch (action.type) {
     case 'replace-config':
       return { ...state, config: action.config };
@@ -159,7 +218,7 @@ function reducer(state, action) {
   }
 }
 
-function SchedulePreview({ previewDates }) {
+function SchedulePreview({ previewDates }: { previewDates: Date[] }) {
   const dateFormat = (useDateFormat() || 'MM/dd/yyyy')
     .replace('MM', 'M')
     .replace('dd', 'd');
@@ -198,15 +257,18 @@ function SchedulePreview({ previewDates }) {
   );
 }
 
-function validInterval(interval) {
-  const intInterval = parseInt(interval);
+function validInterval(interval: string | number) {
+  const intInterval = Number(interval);
   return Number.isInteger(intInterval) && intInterval > 0 ? intInterval : 1;
 }
 
-function MonthlyPatterns({ config, dispatch }) {
-  const updateRecurrence = (recurrence, field, value) =>
-    dispatch({ type: 'update-recurrence', recurrence, field, value });
-
+function MonthlyPatterns({
+  config,
+  dispatch,
+}: {
+  config: StateConfig;
+  dispatch: Dispatch<ReducerAction>;
+}) {
   return (
     <Stack spacing={2} style={{ marginTop: 10 }}>
       {config.patterns.map((recurrence, idx) => (
@@ -221,24 +283,34 @@ function MonthlyPatterns({ config, dispatch }) {
             options={[
               [-1, 'Last'],
               Menu.line,
-              ...DAY_OF_MONTH_OPTIONS.map(opt => [opt, opt]),
+              ...DAY_OF_MONTH_OPTIONS.map(opt => [opt, String(opt)] as const),
             ]}
             value={recurrence.value}
             onChange={value =>
-              updateRecurrence(recurrence, 'value', parsePatternValue(value))
+              dispatch({
+                type: 'update-recurrence',
+                recurrence,
+                field: 'value',
+                value: parsePatternValue(value),
+              })
             }
-            disabledKeys={['-']}
             buttonStyle={{ flex: 1, marginRight: 10 }}
           />
           <Select
             options={[
               ['day', 'Day'],
               Menu.line,
-              ...DAY_OF_WEEK_OPTIONS.map(opt => [opt.id, opt.name]),
+              ...DAY_OF_WEEK_OPTIONS.map(opt => [opt.id, opt.name] as const),
             ]}
             value={recurrence.type}
-            onChange={value => updateRecurrence(recurrence, 'type', value)}
-            disabledKeys={['-']}
+            onChange={value => {
+              dispatch({
+                type: 'update-recurrence',
+                recurrence,
+                field: 'type',
+                value,
+              });
+            }}
             buttonStyle={{ flex: 1, marginRight: 10 }}
           />
           <Button
@@ -268,7 +340,15 @@ function MonthlyPatterns({ config, dispatch }) {
   );
 }
 
-function RecurringScheduleTooltip({ config: currentConfig, onClose, onSave }) {
+function RecurringScheduleTooltip({
+  config: currentConfig,
+  onClose,
+  onSave,
+}: {
+  config: RecurConfig;
+  onClose: () => void;
+  onSave: (config: RecurConfig) => void;
+}) {
   const [previewDates, setPreviewDates] = useState(null);
 
   const [state, dispatch] = useReducer(reducer, {
@@ -289,8 +369,10 @@ function RecurringScheduleTooltip({ config: currentConfig, onClose, onSave }) {
 
   const { config } = state;
 
-  const updateField = (field, value) =>
-    dispatch({ type: 'change-field', field, value });
+  const updateField = <Field extends keyof RecurConfig>(
+    field: Field,
+    value: StateConfig[Field],
+  ) => dispatch({ type: 'change-field', field, value });
 
   useEffect(() => {
     async function run() {
@@ -382,7 +464,6 @@ function RecurringScheduleTooltip({ config: currentConfig, onClose, onSave }) {
           <Button
             style={{
               backgroundColor: theme.tableBackground,
-              ':hover': { backgroundColor: theme.tableBackground },
             }}
             onPress={() => dispatch({ type: 'add-recurrence' })}
           >
@@ -460,12 +541,22 @@ function RecurringScheduleTooltip({ config: currentConfig, onClose, onSave }) {
   );
 }
 
-export function RecurringSchedulePicker({ value, buttonStyle, onChange }) {
+type RecurringSchedulePickerProps = {
+  value: RecurConfig;
+  buttonStyle?: CSSProperties;
+  onChange: (config: RecurConfig) => void;
+};
+
+export function RecurringSchedulePicker({
+  value,
+  buttonStyle,
+  onChange,
+}: RecurringSchedulePickerProps) {
   const triggerRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const dateFormat = useDateFormat() || 'MM/dd/yyyy';
 
-  function onSave(config) {
+  function onSave(config: RecurConfig) {
     onChange(config);
     setIsOpen(false);
   }

packages/loot-core/src/types/models/schedule.d.ts

@@ -2,6 +2,23 @@ import type { AccountEntity } from './account';
 import type { PayeeEntity } from './payee';
 import type { RuleEntity } from './rule';
 
+export interface RecurPattern {
+  value: number;
+  type: 'SU' | 'MO' | 'TU' | 'WE' | 'TH' | 'FR' | 'SA' | 'day';
+}
+
+export interface RecurConfig {
+  frequency: 'daily' | 'weekly' | 'monthly' | 'yearly';
+  interval: number;
+  patterns?: RecurPattern[];
+  skipWeekend?: boolean;
+  start: string;
+  endMode: 'never' | 'after_n_occurrences' | 'on_date';
+  endOccurrences?: number;
+  endDate?: string;
+  weekendSolveMode?: 'before' | 'after';
+}
+
 export interface ScheduleEntity {
   id: string;
   name?: string;
@@ -17,20 +34,7 @@ export interface ScheduleEntity {
   _account: AccountEntity['id'];
   _amount: unknown;
   _amountOp: string;
-  _date: {
-    interval: number;
-    patterns: {
-      value: number;
-      type: 'SU' | 'MO' | 'TU' | 'WE' | 'TH' | 'FR' | 'SA' | 'day';
-    }[];
-    skipWeekend: boolean;
-    start: string;
-    endMode: 'never' | 'after_n_occurrences' | 'on_date';
-    endOccurrences: number;
-    endDate: string;
-    weekendSolveMode: 'before' | 'after';
-    frequency: 'daily' | 'weekly' | 'monthly' | 'yearly';
-  };
+  _date: RecurConfig;
   _conditions: unknown;
   _actions: unknown;
 }

upcoming-release-notes/3396.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [jfdoming]
+---
+
+Convert `RecurringSchedulePicker.jsx` -> `RecurringSchedulePicker.tsx`