From c667118f10cee4b3f50e0a543cfffbe275927c3c Mon Sep 17 00:00:00 2001 From: Jed Fox Date: Tue, 8 Aug 2023 19:35:22 -0700 Subject: [PATCH] Remove page-based modals in favor of existing state-based modal logic (#1270) Co-authored-by: Trevor Farlow --- .../src/components/ActiveLocation.js | 13 -- .../src/components/FinancesApp.tsx | 190 +++++++----------- .../desktop-client/src/components/Modals.tsx | 42 ++++ .../desktop-client/src/components/Page.tsx | 52 +---- .../src/components/accounts/Account.js | 12 +- .../src/components/accounts/Header.js | 2 + .../accounts/MobileAccountDetails.js | 2 + .../src/components/manager/Modals.js | 2 +- .../src/components/responsive/wide.ts | 3 - .../components/schedules/DiscoverSchedules.js | 31 ++- .../src/components/schedules/EditSchedule.js | 52 ++--- .../src/components/schedules/LinkSchedule.js | 19 +- .../schedules/PostsOfflineNotification.js | 19 +- .../src/components/schedules/index.js | 11 +- .../transactions/SelectedTransactions.js | 7 +- .../transactions/TransactionList.js | 5 +- packages/desktop-client/src/global-events.js | 5 +- .../desktop-client/src/util/router-tools.tsx | 71 +------ packages/desktop-electron/menu.js | 2 +- .../src/client/state-types/modals.d.ts | 8 + packages/loot-core/typings/window.d.ts | 3 - upcoming-release-notes/1270.md | 6 + 22 files changed, 206 insertions(+), 351 deletions(-) delete mode 100644 packages/desktop-client/src/components/ActiveLocation.js create mode 100644 upcoming-release-notes/1270.md diff --git a/packages/desktop-client/src/components/ActiveLocation.js b/packages/desktop-client/src/components/ActiveLocation.js deleted file mode 100644 index 65b8a050b65..00000000000 --- a/packages/desktop-client/src/components/ActiveLocation.js +++ /dev/null @@ -1,13 +0,0 @@ -import React, { createContext, useContext } from 'react'; - -let ActiveLocationContext = createContext(null); - -export function ActiveLocationProvider({ location, children }) { - return ( - - ); -} - -export function useActiveLocation() { - return useContext(ActiveLocationContext); -} diff --git a/packages/desktop-client/src/components/FinancesApp.tsx b/packages/desktop-client/src/components/FinancesApp.tsx index 4f5b0f8d269..e161aec5ab6 100644 --- a/packages/desktop-client/src/components/FinancesApp.tsx +++ b/packages/desktop-client/src/components/FinancesApp.tsx @@ -26,7 +26,7 @@ import PiggyBank from '../icons/v1/PiggyBank'; import Wallet from '../icons/v1/Wallet'; import { useResponsive } from '../ResponsiveProvider'; import { theme, styles } from '../style'; -import { ExposeNavigate, StackedRoutes } from '../util/router-tools'; +import { ExposeNavigate } from '../util/router-tools'; import { getIsOutdated, getLatestVersion } from '../util/versions'; import BankSyncStatus from './BankSyncStatus'; @@ -40,7 +40,6 @@ import Notifications from './Notifications'; import { ManagePayeesPage } from './payees/ManagePayeesPage'; import Reports from './reports'; import { NarrowAlternate, WideComponent } from './responsive'; -import PostsOfflineNotification from './schedules/PostsOfflineNotification'; import Settings from './settings'; import Titlebar, { TitlebarProvider } from './Titlebar'; import { TransactionEdit } from './transactions/MobileTransaction'; @@ -73,120 +72,6 @@ function WideNotSupported({ children, redirectTo = '/budget' }) { return isNarrowWidth ? children : null; } -function StackedRoutesInner({ location }) { - return ( - - } /> - - - {/* Has its own lazy loading logic */} - - - } - /> - - } /> - - - - - } - /> - - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - } - /> - - } /> - } /> - } /> - - {/* TODO: remove Nordigen route after v23.8.0 */} - - - - } - /> - - - - } - /> - - } /> - - } - /> - - - - - } - /> - - - - - } - /> - - ); -} - function NavTab({ icon: TabIcon, name, path }) { return ( - } - /> + + + } /> + + + {/* Has its own lazy loading logic */} + + + } + /> + + } + /> + + + + + } + /> + + } /> + } /> + } /> + + + + + } + /> + + } + /> + + } + /> + + + + + } + /> + + + + + } + /> + + diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx index f37aa10437a..43a8c4c7a0b 100644 --- a/packages/desktop-client/src/components/Modals.tsx +++ b/packages/desktop-client/src/components/Modals.tsx @@ -23,6 +23,10 @@ import ManageRulesModal from './modals/ManageRulesModal'; import MergeUnusedPayees from './modals/MergeUnusedPayees'; import PlaidExternalMsg from './modals/PlaidExternalMsg'; import SelectLinkedAccounts from './modals/SelectLinkedAccounts'; +import DiscoverSchedules from './schedules/DiscoverSchedules'; +import ScheduleDetails from './schedules/EditSchedule'; +import ScheduleLink from './schedules/LinkSchedule'; +import PostsOfflineNotification from './schedules/PostsOfflineNotification'; export default function Modals() { const modalStack = useSelector(state => state.modals.modalStack); @@ -218,6 +222,44 @@ export default function Modals() { /> ); + case 'schedule-edit': + return ( + + ); + + case 'schedule-link': + return ( + + ); + + case 'schedules-discover': + return ( + + ); + + case 'schedule-posts-offline-notification': + return ( + + ); + default: console.error('Unknown modal:', name); return null; diff --git a/packages/desktop-client/src/components/Page.tsx b/packages/desktop-client/src/components/Page.tsx index ae638f952de..8a2068bfc9a 100644 --- a/packages/desktop-client/src/components/Page.tsx +++ b/packages/desktop-client/src/components/Page.tsx @@ -1,30 +1,20 @@ -import React, { createContext, type ReactNode, useContext } from 'react'; -import { useNavigate } from 'react-router-dom'; +import React, { type ReactNode } from 'react'; import { type CSSProperties } from 'glamor'; import { useResponsive } from '../ResponsiveProvider'; import { colors, styles } from '../style'; -import Modal from './common/Modal'; import Text from './common/Text'; import View from './common/View'; -let PageTypeContext = createContext({ type: 'page', current: undefined }); - -export function PageTypeProvider({ type, current, children }) { - return ( - - {children} - - ); -} - -export function usePageType() { - return useContext(PageTypeContext); -} - -function PageTitle({ name, style }) { +function PageTitle({ + name, + style, +}: { + name: ReactNode; + style?: CSSProperties; +}) { const { isNarrowWidth } = useResponsive(); if (isNarrowWidth) { @@ -69,40 +59,16 @@ function PageTitle({ name, style }) { export function Page({ title, - modalSize, children, titleStyle, }: { - title: string; - modalSize?: string | { width: number; height?: number }; + title: ReactNode; children: ReactNode; titleStyle?: CSSProperties; }) { - let { type, current } = usePageType(); - let navigate = useNavigate(); let { isNarrowWidth } = useResponsive(); let HORIZONTAL_PADDING = isNarrowWidth ? 10 : 20; - if (type === 'modal') { - let size = - typeof modalSize === 'string' - ? modalSize === 'medium' - ? { width: 750, height: 600 } - : { width: 600 } - : modalSize; - - return ( - navigate(-1)} - > - {children} - - ); - } - return ( ) : null } + pushModal={pushModal} onSort={this.onSort} sortField={this.state.sort.field} ascDesc={this.state.sort.ascDesc} @@ -1342,7 +1344,6 @@ function AccountHack(props) { export default function Account() { let params = useParams(); let location = useLocation(); - let activeLocation = useActiveLocation(); let state = useSelector(state => ({ newTransactions: state.queries.newTransactions, @@ -1403,12 +1404,9 @@ export default function Account() { diff --git a/packages/desktop-client/src/components/accounts/Header.js b/packages/desktop-client/src/components/accounts/Header.js index a22a232ed3f..b58ec8f4f83 100644 --- a/packages/desktop-client/src/components/accounts/Header.js +++ b/packages/desktop-client/src/components/accounts/Header.js @@ -52,6 +52,7 @@ export function AccountHeader({ filters, conditionsOp, savePrefs, + pushModal, onSearch, onAddTransaction, onShowTransactions, @@ -259,6 +260,7 @@ export function AccountHeader({ onUnlink={onBatchUnlink} onCreateRule={onCreateRule} onScheduleAction={onScheduleAction} + pushModal={pushModal} /> )}