From 8f543a29e0ae2f82a6a6a72f70cd214d7c81770f Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Thu, 2 May 2024 08:10:50 -0700
Subject: [PATCH] [Mobile] Fix mobile account notes modal not retrieving
correct notes (#2690)
* Fix mobile notes modal not retrieving correct notes
* Release notes
* Revert useState initial value
---
packages/desktop-client/src/components/Modals.tsx | 4 ++--
packages/desktop-client/src/components/Notes.tsx | 5 +----
.../mobile/accounts/AccountTransactions.jsx | 4 ++--
.../src/components/mobile/budget/index.tsx | 6 +++---
.../src/components/modals/AccountMenuModal.tsx | 5 ++---
.../modals/{Notes.tsx => NotesModal.tsx} | 8 ++++----
.../modals/ReportBudgetMonthMenuModal.tsx | 15 ++++-----------
.../modals/RolloverBudgetMonthMenuModal.tsx | 15 ++++-----------
.../loot-core/src/client/state-types/modals.d.ts | 4 ++--
upcoming-release-notes/2690.md | 6 ++++++
10 files changed, 30 insertions(+), 42 deletions(-)
rename packages/desktop-client/src/components/modals/{Notes.tsx => NotesModal.tsx} (92%)
create mode 100644 upcoming-release-notes/2690.md
diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx
index 1a4cf70a8..d1f462d3a 100644
--- a/packages/desktop-client/src/components/Modals.tsx
+++ b/packages/desktop-client/src/components/Modals.tsx
@@ -36,7 +36,7 @@ import { ImportTransactions } from './modals/ImportTransactions';
import { LoadBackup } from './modals/LoadBackup';
import { ManageRulesModal } from './modals/ManageRulesModal';
import { MergeUnusedPayees } from './modals/MergeUnusedPayees';
-import { Notes } from './modals/Notes';
+import { NotesModal } from './modals/NotesModal';
import { PayeeAutocompleteModal } from './modals/PayeeAutocompleteModal';
import { ReportBalanceMenuModal } from './modals/ReportBalanceMenuModal';
import { ReportBudgetMenuModal } from './modals/ReportBudgetMenuModal';
@@ -499,7 +499,7 @@ export function Modals() {
case 'notes':
return (
- <Notes
+ <NotesModal
key={name}
modalProps={modalProps}
id={options.id}
diff --git a/packages/desktop-client/src/components/Notes.tsx b/packages/desktop-client/src/components/Notes.tsx
index 11a617f18..4e8e4b724 100644
--- a/packages/desktop-client/src/components/Notes.tsx
+++ b/packages/desktop-client/src/components/Notes.tsx
@@ -95,9 +95,6 @@ export function Notes({
getStyle,
}: NotesProps) {
const { isNarrowWidth } = useResponsive();
- const _onChange = value => {
- onChange?.(value);
- };
const textAreaRef = useRef<HTMLTextAreaElement>();
@@ -120,7 +117,7 @@ export function Notes({
...getStyle?.(editable),
})}`}
value={notes || ''}
- onChange={e => _onChange(e.target.value)}
+ onChange={e => onChange?.(e.target.value)}
onBlur={e => onBlur?.(e.target.value)}
placeholder="Notes (markdown supported)"
/>
diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx
index 01fc53bb4..4903e4205 100644
--- a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx
+++ b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx
@@ -70,10 +70,10 @@ function AccountName({ account, pending, failed }) {
await send('notes-save', { id, note: notes });
};
- const onEditNotes = () => {
+ const onEditNotes = id => {
dispatch(
pushModal('notes', {
- id: account.id,
+ id: `account-${id}`,
name: account.name,
onSave: onSaveNotes,
}),
diff --git a/packages/desktop-client/src/components/mobile/budget/index.tsx b/packages/desktop-client/src/components/mobile/budget/index.tsx
index a4c5d4cf3..f7556d916 100644
--- a/packages/desktop-client/src/components/mobile/budget/index.tsx
+++ b/packages/desktop-client/src/components/mobile/budget/index.tsx
@@ -378,11 +378,11 @@ function BudgetInner(props: BudgetInnerProps) {
dispatch(collapseModals('budget-page-menu'));
};
- const onOpenBudgetMonthNotesModal = id => {
+ const onOpenBudgetMonthNotesModal = month => {
dispatch(
pushModal('notes', {
- id,
- name: monthUtils.format(startMonth, 'MMMM ‘yy'),
+ id: `budget-${month}`,
+ name: monthUtils.format(month, 'MMMM ‘yy'),
onSave: onSaveNotes,
}),
);
diff --git a/packages/desktop-client/src/components/modals/AccountMenuModal.tsx b/packages/desktop-client/src/components/modals/AccountMenuModal.tsx
index 36dcfa3f9..4c44e1a75 100644
--- a/packages/desktop-client/src/components/modals/AccountMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/AccountMenuModal.tsx
@@ -2,7 +2,7 @@ import React, { type ComponentProps, useState } from 'react';
import { type AccountEntity } from 'loot-core/types/models';
-import { useAccounts } from '../../hooks/useAccounts';
+import { useAccount } from '../../hooks/useAccount';
import { useNotes } from '../../hooks/useNotes';
import { SvgClose, SvgDotsHorizontalTriple, SvgLockOpen } from '../../icons/v1';
import { SvgNotesPaper } from '../../icons/v2';
@@ -34,8 +34,7 @@ export function AccountMenuModal({
onEditNotes,
onClose,
}: AccountMenuModalProps) {
- const accounts = useAccounts();
- const account = accounts.find(c => c.id === accountId);
+ const account = useAccount(accountId);
const originalNotes = useNotes(`account-${accountId}`);
const _onClose = () => {
diff --git a/packages/desktop-client/src/components/modals/Notes.tsx b/packages/desktop-client/src/components/modals/NotesModal.tsx
similarity index 92%
rename from packages/desktop-client/src/components/modals/Notes.tsx
rename to packages/desktop-client/src/components/modals/NotesModal.tsx
index e788e2734..54f4b819e 100644
--- a/packages/desktop-client/src/components/modals/Notes.tsx
+++ b/packages/desktop-client/src/components/modals/NotesModal.tsx
@@ -7,16 +7,16 @@ import { Button } from '../common/Button';
import { Modal } from '../common/Modal';
import { View } from '../common/View';
import { type CommonModalProps } from '../Modals';
-import { Notes as NotesComponent } from '../Notes';
+import { Notes } from '../Notes';
-type NotesProps = {
+type NotesModalProps = {
modalProps: CommonModalProps;
id: string;
name: string;
onSave: (id: string, notes: string) => void;
};
-export function Notes({ modalProps, id, name, onSave }: NotesProps) {
+export function NotesModal({ modalProps, id, name, onSave }: NotesModalProps) {
const originalNotes = useNotes(id);
const [notes, setNotes] = useState(originalNotes);
@@ -51,7 +51,7 @@ export function Notes({ modalProps, id, name, onSave }: NotesProps) {
flexDirection: 'column',
}}
>
- <NotesComponent
+ <Notes
notes={notes}
editable={true}
focused={true}
diff --git a/packages/desktop-client/src/components/modals/ReportBudgetMonthMenuModal.tsx b/packages/desktop-client/src/components/modals/ReportBudgetMonthMenuModal.tsx
index a70079bc0..757e1fdec 100644
--- a/packages/desktop-client/src/components/modals/ReportBudgetMonthMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/ReportBudgetMonthMenuModal.tsx
@@ -1,11 +1,9 @@
// @ts-strict-ignore
import React, { useState } from 'react';
-import { useLiveQuery } from 'loot-core/src/client/query-hooks';
import * as monthUtils from 'loot-core/src/shared/months';
-import { q } from 'loot-core/src/shared/query';
-import { type NoteEntity } from 'loot-core/src/types/models';
+import { useNotes } from '../../hooks/useNotes';
import { SvgCheveronDown, SvgCheveronUp } from '../../icons/v1';
import { SvgNotesPaper } from '../../icons/v2';
import { type CSSProperties, styles, theme } from '../../style';
@@ -20,7 +18,7 @@ type ReportBudgetMonthMenuModalProps = {
modalProps: CommonModalProps;
month: string;
onBudgetAction: (month: string, action: string, arg?: unknown) => void;
- onEditNotes: (id: string) => void;
+ onEditNotes: (month: string) => void;
};
export function ReportBudgetMonthMenuModal({
@@ -29,19 +27,14 @@ export function ReportBudgetMonthMenuModal({
onBudgetAction,
onEditNotes,
}: ReportBudgetMonthMenuModalProps) {
- const notesId = `budget-${month}`;
- const data = useLiveQuery<NoteEntity[]>(
- () => q('notes').filter({ id: notesId }).select('*'),
- [notesId],
- );
- const originalNotes = data && data.length > 0 ? data[0].note : null;
+ const originalNotes = useNotes(`budget-${month}`);
const onClose = () => {
modalProps.onClose();
};
const _onEditNotes = () => {
- onEditNotes?.(notesId);
+ onEditNotes?.(month);
};
const defaultMenuItemStyle: CSSProperties = {
diff --git a/packages/desktop-client/src/components/modals/RolloverBudgetMonthMenuModal.tsx b/packages/desktop-client/src/components/modals/RolloverBudgetMonthMenuModal.tsx
index 18f4009f9..45a1824b7 100644
--- a/packages/desktop-client/src/components/modals/RolloverBudgetMonthMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/RolloverBudgetMonthMenuModal.tsx
@@ -1,11 +1,9 @@
// @ts-strict-ignore
import React, { useState } from 'react';
-import { useLiveQuery } from 'loot-core/src/client/query-hooks';
import * as monthUtils from 'loot-core/src/shared/months';
-import { q } from 'loot-core/src/shared/query';
-import { type NoteEntity } from 'loot-core/src/types/models';
+import { useNotes } from '../../hooks/useNotes';
import { SvgCheveronDown, SvgCheveronUp } from '../../icons/v1';
import { SvgNotesPaper } from '../../icons/v2';
import { type CSSProperties, styles, theme } from '../../style';
@@ -20,7 +18,7 @@ type RolloverBudgetMonthMenuModalProps = {
modalProps: CommonModalProps;
month: string;
onBudgetAction: (month: string, action: string, arg?: unknown) => void;
- onEditNotes: (id: string) => void;
+ onEditNotes: (month: string) => void;
};
export function RolloverBudgetMonthMenuModal({
@@ -29,19 +27,14 @@ export function RolloverBudgetMonthMenuModal({
onBudgetAction,
onEditNotes,
}: RolloverBudgetMonthMenuModalProps) {
- const notesId = `budget-${month}`;
- const data = useLiveQuery<NoteEntity[]>(
- () => q('notes').filter({ id: notesId }).select('*'),
- [notesId],
- );
- const originalNotes = data && data.length > 0 ? data[0].note : null;
+ const originalNotes = useNotes(`budget-${month}`);
const onClose = () => {
modalProps.onClose();
};
const _onEditNotes = () => {
- onEditNotes?.(notesId);
+ onEditNotes?.(month);
};
const defaultMenuItemStyle: CSSProperties = {
diff --git a/packages/loot-core/src/client/state-types/modals.d.ts b/packages/loot-core/src/client/state-types/modals.d.ts
index fb29aa9eb..648e4b3d9 100644
--- a/packages/loot-core/src/client/state-types/modals.d.ts
+++ b/packages/loot-core/src/client/state-types/modals.d.ts
@@ -238,12 +238,12 @@ type FinanceModals = {
'rollover-budget-month-menu': {
month: string;
onBudgetAction: (month: string, action: string, arg?: unknown) => void;
- onEditNotes: (id: string) => void;
+ onEditNotes: (month: string) => void;
};
'report-budget-month-menu': {
month: string;
onBudgetAction: (month: string, action: string, arg?: unknown) => void;
- onEditNotes: (id: string) => void;
+ onEditNotes: (month: string) => void;
};
};
diff --git a/upcoming-release-notes/2690.md b/upcoming-release-notes/2690.md
new file mode 100644
index 000000000..2ca005578
--- /dev/null
+++ b/upcoming-release-notes/2690.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix mobile notes modal not retrieving correct notes
\ No newline at end of file
--
GitLab