Remove page-based modals in favor of existing state-based modal logic

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';
 
@@ -61,102 +60,6 @@ function NarrowNotSupported({
   return isNarrowWidth ? null : children;
 }
 
-function StackedRoutesInner({ location }) {
-  return (
-    <Routes location={location}>
-      <Route path="/" element={<Navigate to="/budget" replace />} />
-
-      <Route
-        path="/reports/*"
-        element={
-          <NarrowNotSupported>
-            {/* Has its own lazy loading logic */}
-            <Reports />
-          </NarrowNotSupported>
-        }
-      />
-
-      <Route path="/budget" element={<NarrowAlternate name="Budget" />} />
-
-      <Route
-        path="/schedules"
-        element={
-          <NarrowNotSupported>
-            <WideComponent name="Schedules" />
-          </NarrowNotSupported>
-        }
-      />
-
-      <Route
-        path="/schedule/edit"
-        element={
-          <NarrowNotSupported>
-            <WideComponent name="EditSchedule" />
-          </NarrowNotSupported>
-        }
-      />
-      <Route
-        path="/schedule/edit/:id"
-        element={
-          <NarrowNotSupported>
-            <WideComponent name="EditSchedule" />
-          </NarrowNotSupported>
-        }
-      />
-      <Route
-        path="/schedule/link"
-        element={
-          <NarrowNotSupported>
-            <WideComponent name="LinkSchedule" />
-          </NarrowNotSupported>
-        }
-      />
-      <Route
-        path="/schedule/discover"
-        element={
-          <NarrowNotSupported>
-            <WideComponent name="DiscoverSchedules" />
-          </NarrowNotSupported>
-        }
-      />
-
-      <Route
-        path="/schedule/posts-offline-notification"
-        element={<PostsOfflineNotification />}
-      />
-
-      <Route path="/payees" element={<ManagePayeesPage />} />
-      <Route path="/rules" element={<ManageRulesPage />} />
-      <Route path="/settings" element={<Settings />} />
-
-      {/* TODO: remove Nordigen route after v23.8.0 */}
-      <Route
-        path="/nordigen/link"
-        element={
-          <NarrowNotSupported>
-            <WideComponent name="GoCardlessLink" />
-          </NarrowNotSupported>
-        }
-      />
-      <Route
-        path="/gocardless/link"
-        element={
-          <NarrowNotSupported>
-            <WideComponent name="GoCardlessLink" />
-          </NarrowNotSupported>
-        }
-      />
-
-      <Route
-        path="/accounts/:id"
-        element={<NarrowAlternate name="Account" />}
-      />
-
-      <Route path="/accounts" element={<NarrowAlternate name="Accounts" />} />
-    </Routes>
-  );
-}
-
 function NavTab({ icon: TabIcon, name, path }) {
   return (
     <NavLink
@@ -283,9 +186,67 @@ function FinancesApp() {
             >
               <Notifications />
               <BankSyncStatus />
-              <StackedRoutes
-                render={location => <StackedRoutesInner location={location} />}
-              />
+
+              <Routes>
+                <Route path="/" element={<Navigate to="/budget" replace />} />
+
+                <Route
+                  path="/reports/*"
+                  element={
+                    <NarrowNotSupported>
+                      {/* Has its own lazy loading logic */}
+                      <Reports />
+                    </NarrowNotSupported>
+                  }
+                />
+
+                <Route
+                  path="/budget"
+                  element={<NarrowAlternate name="Budget" />}
+                />
+
+                <Route
+                  path="/schedules"
+                  element={
+                    <NarrowNotSupported>
+                      <WideComponent name="Schedules" />
+                    </NarrowNotSupported>
+                  }
+                />
+
+                <Route path="/payees" element={<ManagePayeesPage />} />
+                <Route path="/rules" element={<ManageRulesPage />} />
+                <Route path="/settings" element={<Settings />} />
+
+                {/* TODO: remove Nordigen route after v23.8.0 */}
+                <Route
+                  path="/nordigen/link"
+                  element={
+                    <NarrowNotSupported>
+                      <WideComponent name="GoCardlessLink" />
+                    </NarrowNotSupported>
+                  }
+                />
+                <Route
+                  path="/gocardless/link"
+                  element={
+                    <NarrowNotSupported>
+                      <WideComponent name="GoCardlessLink" />
+                    </NarrowNotSupported>
+                  }
+                />
+
+                <Route
+                  path="/accounts/:id"
+                  element={<NarrowAlternate name="Account" />}
+                />
+
+                <Route
+                  path="/accounts"
+                  element={<NarrowAlternate name="Accounts" />}
+                />
+              </Routes>
+
               <Modals />
             </div>
 

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 (
+            <ScheduleDetails
+              key={name}
+              modalProps={modalProps}
+              id={options?.id || null}
+              actions={actions}
+            />
+          );
+
+        case 'schedule-link':
+          return (
+            <ScheduleLink
+              key={name}
+              modalProps={modalProps}
+              actions={actions}
+              transactionIds={options?.transactionIds}
+            />
+          );
+
+        case 'schedules-discover':
+          return (
+            <DiscoverSchedules
+              key={name}
+              modalProps={modalProps}
+              actions={actions}
+            />
+          );
+
+        case 'schedule-posts-offline-notification':
+          return (
+            <PostsOfflineNotification
+              key={name}
+              modalProps={modalProps}
+              actions={actions}
+            />
+          );
+
         default:
           console.error('Unknown modal:', name);
           return null;

packages/desktop-client/src/components/Page.js

@@ -1,24 +1,9 @@
-import React, { createContext, useContext } from 'react';
-import { useNavigate } from 'react-router-dom';
+import React from 'react';
 
 import { useResponsive } from '../ResponsiveProvider';
 import { colors, styles } from '../style';
 
-import { Modal, View, Text } from './common';
-
-let PageTypeContext = createContext({ type: 'page' });
-
-export function PageTypeProvider({ type, current, children }) {
-  return (
-    <PageTypeContext.Provider value={{ type, current }}>
-      {children}
-    </PageTypeContext.Provider>
-  );
-}
-
-export function usePageType() {
-  return useContext(PageTypeContext);
-}
+import { View, Text } from './common';
 
 function PageTitle({ name, style }) {
   const { isNarrowWidth } = useResponsive();
@@ -63,31 +48,10 @@ function PageTitle({ name, style }) {
   );
 }
 
-export function Page({ title, modalSize, children, titleStyle }) {
-  let { type, current } = usePageType();
-  let navigate = useNavigate();
+export function Page({ title, children, titleStyle }) {
   let { isNarrowWidth } = useResponsive();
   let HORIZONTAL_PADDING = isNarrowWidth ? 10 : 20;
 
-  if (type === 'modal') {
-    let size = modalSize;
-    if (typeof modalSize === 'string') {
-      size =
-        modalSize === 'medium' ? { width: 750, height: 600 } : { width: 600 };
-    }
-
-    return (
-      <Modal
-        title={title}
-        isCurrent={current}
-        size={size}
-        onClose={() => navigate(-1)}
-      >
-        {children}
-      </Modal>
-    );
-  }
-
   return (
     <View style={isNarrowWidth ? undefined : styles.page}>
       <PageTitle

packages/desktop-client/src/components/accounts/Account.js

@@ -27,7 +27,6 @@ import { applyChanges, groupById } from 'loot-core/src/shared/util';
 import { authorizeBank } from '../../gocardless';
 import { SelectedProviderWithItems } from '../../hooks/useSelected';
 import { styles, colors } from '../../style';
-import { useActiveLocation } from '../ActiveLocation';
 import { View, Text, Button } from '../common';
 import TransactionList from '../transactions/TransactionList';
 import {
@@ -1141,6 +1140,7 @@ class AccountInternal extends PureComponent {
       hideFraction,
       addNotification,
       accountsSyncing,
+      pushModal,
       replaceModal,
       showExtraBalances,
       accountId,
@@ -1223,6 +1223,7 @@ class AccountInternal extends PureComponent {
                 filters={this.state.filters}
                 conditionsOp={this.state.conditionsOp}
                 savePrefs={this.props.savePrefs}
+                pushModal={this.props.pushModal}
                 onSearch={this.onSearch}
                 onShowTransactions={this.onShowTransactions}
                 onMenuSelect={this.onMenuSelect}
@@ -1298,6 +1299,7 @@ class AccountInternal extends PureComponent {
                       </View>
                     ) : null
                   }
+                  pushModal={pushModal}
                   onSort={this.onSort}
                   sortField={this.state.sort.field}
                   ascDesc={this.state.sort.ascDesc}
@@ -1339,7 +1341,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,
@@ -1400,12 +1401,9 @@ export default function Account() {
         <AccountHack
           {...state}
           {...actionCreators}
-          modalShowing={
-            state.modalShowing ||
-            !!(activeLocation.state && activeLocation.state.parent)
-          }
+          modalShowing={state.modalShowing}
           accountId={params.id}
-          categoryId={activeLocation?.state?.filter?.category}
+          categoryId={location?.state?.filter?.category}
           location={location}
           filtersList={filtersList}
         />

packages/desktop-client/src/components/accounts/Header.js

@@ -56,6 +56,7 @@ export function AccountHeader({
   filters,
   conditionsOp,
   savePrefs,
+  pushModal,
   onSearch,
   onAddTransaction,
   onShowTransactions,
@@ -303,6 +304,7 @@ export function AccountHeader({
               onUnlink={onBatchUnlink}
               onCreateRule={onCreateRule}
               onScheduleAction={onScheduleAction}
+              pushModal={pushModal}
             />
           )}
           <Button