import React, { useMemo } from 'react';
import { DndProvider } from 'react-dnd';
import Backend from 'react-dnd-html5-backend';
import { connect } from 'react-redux';
import { Router, Route, Redirect, Switch, useLocation } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import hotkeys from 'hotkeys-js';
import * as actions from 'loot-core/src/client/actions';
import { AccountsProvider } from 'loot-core/src/client/data-hooks/accounts';
import { PayeesProvider } from 'loot-core/src/client/data-hooks/payees';
import { SpreadsheetProvider } from 'loot-core/src/client/SpreadsheetProvider';
import checkForUpgradeNotifications from 'loot-core/src/client/upgrade-notifications';
import * as undo from 'loot-core/src/platform/client/undo';
import { BudgetMonthCountProvider } from 'loot-design/src/components/budget/BudgetMonthCountContext';
import { View } from 'loot-design/src/components/common';
import { colors } from 'loot-design/src/style';
import { getLocationState, makeLocationState } from '../util/location-state';
import Account from './accounts/Account';
import { ActiveLocationProvider } from './ActiveLocation';
import BankSyncStatus from './BankSyncStatus';
import Budget from './budget';
import FloatableSidebar, { SidebarProvider } from './FloatableSidebar';
import GlobalKeys from './GlobalKeys';
import Modals from './Modals';
import Notifications from './Notifications';
import { PageTypeProvider } from './Page';
import Reports from './reports';
import Schedules from './schedules';
import DiscoverSchedules from './schedules/DiscoverSchedules';
import EditSchedule from './schedules/EditSchedule';
import LinkSchedule from './schedules/LinkSchedule';
import PostsOfflineNotification from './schedules/PostsOfflineNotification';
import Settings from './Settings';
import Titlebar, { TitlebarProvider } from './Titlebar';
import FixSplitsTool from './tools/FixSplitsTool';
// import Debugger from './Debugger';
function URLBar() {
let location = useLocation();
return (
{location.pathname}
);
}
function PageRoute({ path, component: Component }) {
return (
{
return (
);
}}
/>
);
}
function Routes({ location }) {
return (
} />
{
return (
props.match &&
);
}}
/>
);
}
function StackedRoutes() {
let location = useLocation();
let locationPtr = getLocationState(location, 'locationPtr');
let locations = [location];
while (locationPtr) {
locations.unshift(locationPtr);
locationPtr = getLocationState(locationPtr, 'locationPtr');
}
let base = locations[0];
let stack = locations.slice(1);
return (
{stack.map((location, idx) => (
))}
);
}
class FinancesApp extends React.Component {
constructor(props) {
super(props);
this.history = createBrowserHistory();
let oldPush = this.history.push;
this.history.push = (to, state) => {
return oldPush.call(this.history, to, makeLocationState(state));
};
// I'm not sure if this is the best approach but we need this to
// globally. We could instead move various workflows inside global
// React components, but that's for another day.
window.__history = this.history;
undo.setUndoState('url', window.location.href);
this.cleanup = this.history.listen(location => {
undo.setUndoState('url', window.location.href);
});
}
componentDidMount() {
// TODO: quick hack fix for showing the demo
if (this.history.location.pathname === '/subscribe') {
this.history.push('/');
}
// Get the accounts and check if any exist. If there are no
// accounts, we want to redirect the user to the All Accounts
// screen which will prompt them to add an account
this.props.getAccounts().then(accounts => {
if (accounts.length === 0) {
this.history.push('/accounts');
}
});
// The default key handler scope
hotkeys.setScope('app');
// Wait a little bit to make sure the sync button will get the
// sync start event. This can be improved later.
setTimeout(async () => {
await this.props.sync();
// Check for upgrade notifications. We do this after syncing
// because these states are synced across devices, so they will
// only see it once for this file
checkForUpgradeNotifications(
this.props.addNotification,
this.props.resetSync,
this.history
);
}, 100);
}
componentWillUnmount() {
this.cleanup();
}
render() {
return (