Skip to content

Commit

Permalink
Remove page-based modals in favor of existing state-based modal logic (…
Browse files Browse the repository at this point in the history 
…#1270)

Co-authored-by: Trevor Farlow <[email protected]>
  • Loading branch information
@j-f1 @trevdor
j-f1 and trevdor authored Aug 9, 2023
1 parent 218a4a7 commit c667118
Show file tree
Hide file tree
Showing 22 changed files with 206 additions and 351 deletions.
13 changes: 0 additions & 13 deletions packages/desktop-client/src/components/ActiveLocation.js
View file

This file was deleted.

190 changes: 71 additions & 119 deletions packages/desktop-client/src/components/FinancesApp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -73,120 +72,6 @@ function WideNotSupported({ children, redirectTo = '/budget' }) {
return isNarrowWidth ? children : null;
}

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" element={<NarrowAlternate name="Accounts" />} />

<Route
path="/accounts/:id"
element={<NarrowAlternate name="Account" />}
/>

<Route
path="/accounts/:id/transactions/:transactionId"
element={
<WideNotSupported>
<TransactionEdit />
</WideNotSupported>
}
/>

<Route
path="/accounts/:id/transactions/new"
element={
<WideNotSupported>
<TransactionEdit />
</WideNotSupported>
}
/>
</Routes>
);
}

function NavTab({ icon: TabIcon, name, path }) {
return (
<NavLink
Expand Down Expand Up @@ -311,9 +196,76 @@ 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 />} />

<Route
path="/gocardless/link"
element={
<NarrowNotSupported>
<WideComponent name="GoCardlessLink" />
</NarrowNotSupported>
}
/>

<Route
path="/accounts"
element={<NarrowAlternate name="Accounts" />}
/>

<Route
path="/accounts/:id"
element={<NarrowAlternate name="Account" />}
/>

<Route
path="/accounts/:id/transactions/:transactionId"
element={
<WideNotSupported>
<TransactionEdit />
</WideNotSupported>
}
/>

<Route
path="/accounts/:id/transactions/new"
element={
<WideNotSupported>
<TransactionEdit />
</WideNotSupported>
}
/>
</Routes>

<Modals />
</div>

Expand Down
42 changes: 42 additions & 0 deletions packages/desktop-client/src/components/Modals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down
52 changes: 9 additions & 43 deletions packages/desktop-client/src/components/Page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<PageTypeContext.Provider value={{ type, current }}>
{children}
</PageTypeContext.Provider>
);
}

export function usePageType() {
return useContext(PageTypeContext);
}

function PageTitle({ name, style }) {
function PageTitle({
name,
style,
}: {
name: ReactNode;
style?: CSSProperties;
}) {
const { isNarrowWidth } = useResponsive();

if (isNarrowWidth) {
Expand Down Expand Up @@ -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 (
<Modal
title={title}
isCurrent={current}
size={size}
onClose={() => navigate(-1)}
>
{children}
</Modal>
);
}

return (
<View style={isNarrowWidth ? undefined : styles.page}>
<PageTitle
Expand Down
Loading

0 comments on commit c667118

Please sign in to comment.