[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
This commit is contained in:
Joel Jeremy Marquez
2024-05-02 08:10:50 -07:00
committed by GitHub
parent ad73a404c4
commit 8f543a29e0
10 changed files with 30 additions and 42 deletions

View File

@@ -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}

View File

@@ -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)"
/>

View File

@@ -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,
}),

View File

@@ -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,
}),
);

View File

@@ -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 = () => {

View File

@@ -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}

View File

@@ -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 = {

View File

@@ -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 = {

View File

@@ -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;
};
};

View File

@@ -0,0 +1,6 @@
---
category: Bugfix
authors: [joel-jeremy]
---
Fix mobile notes modal not retrieving correct notes