From 9f487f4a1206bfeddf94bf142eb7718358d8f362 Mon Sep 17 00:00:00 2001 From: Mohamed Muhsin <62111075+muhsinkamil@users.noreply.github.com> Date: Sun, 26 Nov 2023 21:21:18 +0530 Subject: [PATCH] [refactor] Migrate Discover schedules to tsx (#1946) --- ...overSchedules.js => DiscoverSchedules.tsx} | 57 +++++++++++++------ .../desktop-client/src/components/table.tsx | 2 +- .../desktop-client/src/hooks/useSelected.tsx | 5 +- .../src/hooks/useSendPlatformRequest.ts | 2 +- .../loot-core/src/client/reducers/budgets.ts | 1 - .../src/server/schedules/find-schedules.ts | 5 +- .../src/server/schedules/types/handlers.ts | 4 +- .../loot-core/src/types/models/schedule.d.ts | 22 +++++++ upcoming-release-notes/1946.md | 6 ++ 9 files changed, 79 insertions(+), 25 deletions(-) rename packages/desktop-client/src/components/schedules/{DiscoverSchedules.js => DiscoverSchedules.tsx} (77%) create mode 100644 upcoming-release-notes/1946.md diff --git a/packages/desktop-client/src/components/schedules/DiscoverSchedules.js b/packages/desktop-client/src/components/schedules/DiscoverSchedules.tsx similarity index 77% rename from packages/desktop-client/src/components/schedules/DiscoverSchedules.js rename to packages/desktop-client/src/components/schedules/DiscoverSchedules.tsx index e145776a57d..8315dc33168 100644 --- a/packages/desktop-client/src/components/schedules/DiscoverSchedules.js +++ b/packages/desktop-client/src/components/schedules/DiscoverSchedules.tsx @@ -3,7 +3,9 @@ import React, { useState } from 'react'; import q, { runQuery } from 'loot-core/src/client/query-helpers'; import { send } from 'loot-core/src/platform/client/fetch'; import { getRecurringDescription } from 'loot-core/src/shared/schedules'; +import type { DiscoverScheduleEntity } from 'loot-core/src/types/models'; +import type { BoundActions } from '../../hooks/useActions'; import useSelected, { useSelectedDispatch, useSelectedItems, @@ -11,6 +13,7 @@ import useSelected, { } from '../../hooks/useSelected'; import useSendPlatformRequest from '../../hooks/useSendPlatformRequest'; import { theme } from '../../style'; +import type { CommonModalProps } from '../../types/modals'; import { ButtonWithLoading } from '../common/Button'; import Modal from '../common/Modal'; import Paragraph from '../common/Paragraph'; @@ -21,16 +24,22 @@ import DisplayId from '../util/DisplayId'; import { ScheduleAmountCell } from './SchedulesTable'; -let ROW_HEIGHT = 43; +const ROW_HEIGHT = 43; -function DiscoverSchedulesTable({ schedules, loading }) { - let selectedItems = useSelectedItems(); - let dispatchSelected = useSelectedDispatch(); +function DiscoverSchedulesTable({ + schedules, + loading, +}: { + schedules: DiscoverScheduleEntity[]; + loading: boolean; +}) { + const selectedItems = useSelectedItems(); + const dispatchSelected = useSelectedDispatch(); - function renderItem({ item }) { - let selected = selectedItems.has(item.id); - let amountOp = item._conditions.find(c => c.field === 'amount').op; - let recurDescription = getRecurringDescription(item.date); + function renderItem({ item }: { item: DiscoverScheduleEntity }) { + const selected = selectedItems.has(item.id); + const amountOp = item._conditions.find(c => c.field === 'amount').op; + const recurDescription = getRecurringDescription(item.date); return ( ( + 'discover-schedules', + schedules, + [], + ); async function onCreate() { - let selected = schedules.filter(s => selectedInst.items.has(s.id)); + const selected = schedules.filter(s => selectedInst.items.has(s.id)); setCreating(true); for (let schedule of selected) { - let scheduleId = await send('schedule/create', { + const scheduleId = await send('schedule/create', { conditions: schedule._conditions, + schedule: {}, }); // Now query for matching transactions and link them automatically - let { filters } = await send('make-filters-from-conditions', { + const { filters } = await send('make-filters-from-conditions', { conditions: schedule._conditions, }); if (filters.length > 0) { - let { data: transactions } = await runQuery( + const { data: transactions } = await runQuery( q('transactions').filter({ $and: filters }).select('id'), ); + await send('transactions-batch-update', { updated: transactions.map(t => ({ id: t.id, diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx index fde7a09870f..e11e65a6864 100644 --- a/packages/desktop-client/src/components/table.tsx +++ b/packages/desktop-client/src/components/table.tsx @@ -60,7 +60,7 @@ function fireBlur(onBlur, e) { } type FieldProps = ComponentProps & { - width: number | 'flex'; + width: CSSProperties['width']; name?: string; truncate?: boolean; contentStyle?: CSSProperties; diff --git a/packages/desktop-client/src/hooks/useSelected.tsx b/packages/desktop-client/src/hooks/useSelected.tsx index f3dfb94dc67..21455ab4ecd 100644 --- a/packages/desktop-client/src/hooks/useSelected.tsx +++ b/packages/desktop-client/src/hooks/useSelected.tsx @@ -7,6 +7,7 @@ import React, { useRef, type Dispatch, type ReactElement, + type MouseEvent, } from 'react'; import { useSelector } from 'react-redux'; @@ -53,7 +54,7 @@ export default function useSelected( name: string, items: T[], initialSelectedIds: string[], - selectAllFilter?: (T) => boolean, + selectAllFilter?: (item: T) => boolean, ) { const [state, dispatch] = useReducer( (state: State, action: Actions) => { @@ -312,7 +313,7 @@ type SelectedProviderWithItemsProps = { initialSelectedIds: string[]; fetchAllIds: () => Promise; registerDispatch?: (dispatch: Dispatch) => void; - selectAllFilter?: (T) => boolean; + selectAllFilter?: (item: T) => boolean; children: ReactElement; }; diff --git a/packages/desktop-client/src/hooks/useSendPlatformRequest.ts b/packages/desktop-client/src/hooks/useSendPlatformRequest.ts index aa621589d8b..d4967f58a10 100644 --- a/packages/desktop-client/src/hooks/useSendPlatformRequest.ts +++ b/packages/desktop-client/src/hooks/useSendPlatformRequest.ts @@ -8,7 +8,7 @@ export default function useSendPlatformRequest( args?: Parameters[0], options?: { catchErrors?: boolean }, ) { - const [data, setData] = useState(null); + const [data, setData] = useState>>(null); const [isLoading, setIsLoading] = useState(null); useEffect(() => { diff --git a/packages/loot-core/src/client/reducers/budgets.ts b/packages/loot-core/src/client/reducers/budgets.ts index 1d8625d9b37..d0868706cc0 100644 --- a/packages/loot-core/src/client/reducers/budgets.ts +++ b/packages/loot-core/src/client/reducers/budgets.ts @@ -31,7 +31,6 @@ function reconcileFiles( localFiles: Budget[], remoteFiles: RemoteFile[] | null, ): File[] { - console.log({ localFiles, remoteFiles }); const reconciled = new Set(); const files = localFiles.map((localFile): File & { deleted: boolean } => { diff --git a/packages/loot-core/src/server/schedules/find-schedules.ts b/packages/loot-core/src/server/schedules/find-schedules.ts index 3eb2efe8ab9..b2014306bbe 100644 --- a/packages/loot-core/src/server/schedules/find-schedules.ts +++ b/packages/loot-core/src/server/schedules/find-schedules.ts @@ -12,6 +12,8 @@ import * as db from '../db'; import { fromDateRepr } from '../models'; import { Schedule as RSchedule } from '../util/rschedule'; +import { SchedulesHandlers } from './types/handlers'; + function takeDates(config) { let schedule = new RSchedule({ rrules: recurConfigToRSchedule(config) }); return schedule @@ -392,7 +394,8 @@ export async function findSchedules() { }, ); - let finalized = []; + const finalized: Awaited> = + []; for (let schedule of schedules) { finalized.push(await findStartDate(schedule)); } diff --git a/packages/loot-core/src/server/schedules/types/handlers.ts b/packages/loot-core/src/server/schedules/types/handlers.ts index f2a00618bfd..c15fb1479e8 100644 --- a/packages/loot-core/src/server/schedules/types/handlers.ts +++ b/packages/loot-core/src/server/schedules/types/handlers.ts @@ -1,3 +1,5 @@ +import { DiscoverScheduleEntity } from '../../../types/models'; + export interface SchedulesHandlers { 'schedule/create': (arg: { schedule: { @@ -22,7 +24,7 @@ export interface SchedulesHandlers { 'schedule/force-run-service': () => Promise; - 'schedule/discover': () => Promise; + 'schedule/discover': () => Promise; 'schedule/get-upcoming-dates': (arg: { config; diff --git a/packages/loot-core/src/types/models/schedule.d.ts b/packages/loot-core/src/types/models/schedule.d.ts index 5384eab2161..74dae3504c4 100644 --- a/packages/loot-core/src/types/models/schedule.d.ts +++ b/packages/loot-core/src/types/models/schedule.d.ts @@ -31,3 +31,25 @@ export interface ScheduleEntity { _conditions: unknown; _actions: unknown; } + +export type DiscoverScheduleEntity = { + id: ScheduleEntity['id']; + account: AccountEntity['id']; + payee: PayeeEntity['id']; + date: ScheduleEntity['_date']; + amount: ScheduleEntity['_amount']; + _conditions: Array< + | { op: 'is'; field: 'account'; value: AccountEntity['id'] } + | { op: 'is'; field: 'payee'; value: PayeeEntity['id'] } + | { + op: 'is' | 'isapprox'; + field: 'date'; + value: ScheduleEntity['_date']; + } + | { + op: 'is' | 'isapprox'; + field: 'amount'; + value: ScheduleEntity['_amount']; + } + >; +}; diff --git a/upcoming-release-notes/1946.md b/upcoming-release-notes/1946.md new file mode 100644 index 00000000000..7e454c690c6 --- /dev/null +++ b/upcoming-release-notes/1946.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [muhsinkamil] +--- + +Refactor DiscoverSchedules component to tsx and enrich types for schedules discover endpoint.