From db07d7a73d2824a6ec5c94e0fe98f0fa1578aace Mon Sep 17 00:00:00 2001
From: Mohamed Muhsin <62111075+muhsinkamil@users.noreply.github.com>
Date: Mon, 4 Sep 2023 18:41:02 +0200
Subject: [PATCH] refactor: make Schedules component to tsx (#1644)
---
.../src/components/common/Search.tsx | 6 +++---
.../schedules/{index.js => index.tsx} | 21 ++++++++++++-------
.../src/components/settings/Encryption.tsx | 1 -
.../loot-core/src/client/actions/budgets.ts | 1 -
.../loot-core/src/client/actions/modals.ts | 7 +++++--
.../src/client/data-hooks/schedules.tsx | 17 ++++++++++-----
upcoming-release-notes/1644.md | 6 ++++++
7 files changed, 40 insertions(+), 19 deletions(-)
rename packages/desktop-client/src/components/schedules/{index.js => index.tsx} (78%)
create mode 100644 upcoming-release-notes/1644.md
diff --git a/packages/desktop-client/src/components/common/Search.tsx b/packages/desktop-client/src/components/common/Search.tsx
index d07f5e515..c88cb76eb 100644
--- a/packages/desktop-client/src/components/common/Search.tsx
+++ b/packages/desktop-client/src/components/common/Search.tsx
@@ -8,11 +8,11 @@ import Button from './Button';
import InputWithContent from './InputWithContent';
type SearchProps = {
- inputRef: Ref<HTMLInputElement>;
+ inputRef?: Ref<HTMLInputElement>;
value: string;
onChange: (value: string) => unknown;
placeholder: string;
- isInModal: boolean;
+ isInModal?: boolean;
width?: number;
};
@@ -21,7 +21,7 @@ export default function Search({
value,
onChange,
placeholder,
- isInModal,
+ isInModal = false,
width = 250,
}: SearchProps) {
return (
diff --git a/packages/desktop-client/src/components/schedules/index.js b/packages/desktop-client/src/components/schedules/index.tsx
similarity index 78%
rename from packages/desktop-client/src/components/schedules/index.js
rename to packages/desktop-client/src/components/schedules/index.tsx
index eec15cc59..87f762df6 100644
--- a/packages/desktop-client/src/components/schedules/index.js
+++ b/packages/desktop-client/src/components/schedules/index.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
import { useSchedules } from 'loot-core/src/client/data-hooks/schedules';
import { send } from 'loot-core/src/platform/client/fetch';
+import { type ScheduleEntity } from 'loot-core/src/types/models';
import { useActions } from '../../hooks/useActions';
import Button from '../common/Button';
@@ -12,18 +13,18 @@ import { Page } from '../Page';
import { SchedulesTable, ROW_HEIGHT } from './SchedulesTable';
export default function Schedules() {
- let { pushModal } = useActions();
- let [filter, setFilter] = useState('');
+ const { pushModal } = useActions();
+ const [filter, setFilter] = useState('');
- let scheduleData = useSchedules();
+ const scheduleData = useSchedules();
if (scheduleData == null) {
return null;
}
- let { schedules, statuses } = scheduleData;
+ const { schedules, statuses } = scheduleData;
- function onEdit(id) {
+ function onEdit(id: ScheduleEntity['id']) {
pushModal('schedule-edit', { id });
}
@@ -35,7 +36,8 @@ export default function Schedules() {
pushModal('schedules-discover');
}
- async function onAction(name, id) {
+ // @todo: replace name: string with enum
+ async function onAction(name: string, id: ScheduleEntity['id']) {
switch (name) {
case 'post-transaction':
await send('schedule/post-transaction', { id });
@@ -44,7 +46,9 @@ export default function Schedules() {
await send('schedule/skip-next-date', { id });
break;
case 'complete':
- await send('schedule/update', { schedule: { id, completed: true } });
+ await send('schedule/update', {
+ schedule: { id, completed: true },
+ });
break;
case 'restart':
await send('schedule/update', {
@@ -83,6 +87,9 @@ export default function Schedules() {
onSelect={onEdit}
onAction={onAction}
style={{ backgroundColor: 'white' }}
+ // @todo: Remove following props after typing SchedulesTable
+ minimal={undefined}
+ tableStyle={undefined}
/>
</View>
diff --git a/packages/desktop-client/src/components/settings/Encryption.tsx b/packages/desktop-client/src/components/settings/Encryption.tsx
index 6df29b85a..3eed3bc95 100644
--- a/packages/desktop-client/src/components/settings/Encryption.tsx
+++ b/packages/desktop-client/src/components/settings/Encryption.tsx
@@ -18,7 +18,6 @@ export default function EncryptionSettings() {
const missingCryptoAPI = !(window.crypto && crypto.subtle);
function onChangeKey() {
- // @ts-expect-error useActions() type does not properly handle overloads
pushModal('create-encryption-key', { recreate: true });
}
diff --git a/packages/loot-core/src/client/actions/budgets.ts b/packages/loot-core/src/client/actions/budgets.ts
index 97e2673ca..ccac2680d 100644
--- a/packages/loot-core/src/client/actions/budgets.ts
+++ b/packages/loot-core/src/client/actions/budgets.ts
@@ -76,7 +76,6 @@ export function loadBudget(id: string, loadingText = '', options = {}) {
);
if (showBackups) {
- // @ts-expect-error manager modals are not yet typed
dispatch(pushModal('load-backup', { budgetId: id }));
}
} else {
diff --git a/packages/loot-core/src/client/actions/modals.ts b/packages/loot-core/src/client/actions/modals.ts
index efc1a0ae1..7e50ba652 100644
--- a/packages/loot-core/src/client/actions/modals.ts
+++ b/packages/loot-core/src/client/actions/modals.ts
@@ -15,12 +15,15 @@ export function pushModal<M extends keyof ModalWithOptions>(
options: ModalWithOptions[M],
): PushModalAction;
export function pushModal(name: OptionlessModal): PushModalAction;
+export function pushModal<M extends ModalType>(
+ name: M,
+ options?: FinanceModals[M],
+): PushModalAction;
export function pushModal<M extends ModalType>(
name: M,
options?: FinanceModals[M],
): PushModalAction {
- // @ts-expect-error TS is unable to determine that `name` and `options` match
- let modal: M = { name, options };
+ const modal = { name, options };
return { type: constants.PUSH_MODAL, modal };
}
diff --git a/packages/loot-core/src/client/data-hooks/schedules.tsx b/packages/loot-core/src/client/data-hooks/schedules.tsx
index 3603561f8..9131d3c96 100644
--- a/packages/loot-core/src/client/data-hooks/schedules.tsx
+++ b/packages/loot-core/src/client/data-hooks/schedules.tsx
@@ -2,9 +2,10 @@ import React, { createContext, useEffect, useState, useContext } from 'react';
import { type Query } from '../../shared/query';
import { getStatus, getHasTransactionsQuery } from '../../shared/schedules';
+import { type ScheduleEntity } from '../../types/models';
import q, { liveQuery } from '../query-helpers';
-function loadStatuses(schedules, onData) {
+function loadStatuses(schedules: ScheduleEntity[], onData) {
return liveQuery(getHasTransactionsQuery(schedules), onData, {
mapper: data => {
let hasTrans = new Set(data.filter(Boolean).map(row => row.schedule));
@@ -20,8 +21,12 @@ function loadStatuses(schedules, onData) {
}
type UseSchedulesArgs = { transform?: (q: Query) => Query };
+type UseSchedulesReturnType = {
+ schedules: ScheduleEntity[];
+ statuses: Record<string, ReturnType<typeof getStatus>>;
+} | null;
export function useSchedules({ transform }: UseSchedulesArgs = {}) {
- let [data, setData] = useState(null);
+ let [data, setData] = useState<UseSchedulesReturnType | null>(null);
useEffect(() => {
let query = q('schedules').select('*');
@@ -29,14 +34,16 @@ export function useSchedules({ transform }: UseSchedulesArgs = {}) {
scheduleQuery = liveQuery(
transform ? transform(query) : query,
- async schedules => {
+ async (schedules: ScheduleEntity[]) => {
if (scheduleQuery) {
if (statusQuery) {
statusQuery.unsubscribe();
}
- statusQuery = loadStatuses(schedules, statuses =>
- setData({ schedules, statuses }),
+ statusQuery = loadStatuses(
+ schedules,
+ (statuses: Record<string, ReturnType<typeof getStatus>>) =>
+ setData({ schedules, statuses }),
);
}
},
diff --git a/upcoming-release-notes/1644.md b/upcoming-release-notes/1644.md
new file mode 100644
index 000000000..bebaa2739
--- /dev/null
+++ b/upcoming-release-notes/1644.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [muhsinkamil]
+---
+
+Refactor Schedules to tsx.
--
GitLab