diff options
Diffstat (limited to 'packages/demobank-ui/src/Routing.tsx')
| -rw-r--r-- | packages/demobank-ui/src/Routing.tsx | 153 |
1 files changed, 83 insertions, 70 deletions
diff --git a/packages/demobank-ui/src/Routing.tsx b/packages/demobank-ui/src/Routing.tsx index e73493d60..442a276a0 100644 --- a/packages/demobank-ui/src/Routing.tsx +++ b/packages/demobank-ui/src/Routing.tsx @@ -48,6 +48,8 @@ import { RemoveAccount } from "./pages/admin/RemoveAccount.js"; import { CreateCashout } from "./pages/business/CreateCashout.js"; import { ShowCashoutDetails } from "./pages/business/ShowCashoutDetails.js"; import { RouteParamsType, urlPattern, useCurrentLocation } from "./route.js"; +import { useNavigationContext } from "./context/navigation.js"; +import { useEffect } from "preact/hooks"; export function Routing(): VNode { const backend = useBackendState(); @@ -89,12 +91,18 @@ function PublicRounting({ }): VNode { const settings = useSettingsContext(); const { i18n } = useTranslationContext(); - const [loc, routeTo] = useCurrentLocation(publicPages); + const location = useCurrentLocation(publicPages); + const { navigateTo } = useNavigationContext() const { api } = useBankCoreApiContext(); const [notification, notify, handleError] = useLocalNotification(); - if (loc === undefined) { - routeTo("login", {}); + useEffect(() => { + if (location === undefined) { + navigateTo(privatePages.home.url({})) + } + }, [location]) + + if (location === undefined) { return <Fragment />; } @@ -132,7 +140,7 @@ function PublicRounting({ }); } - switch (loc.name) { + switch (location.name) { case "login": { return ( <Fragment> @@ -148,17 +156,17 @@ function PublicRounting({ return <PublicHistoriesPage />; } case "operationDetails": { - const { wopid } = loc.values as RouteParamsType< - typeof loc.parent, - typeof loc.name + const { wopid } = location.values as RouteParamsType< + typeof location.parent, + typeof location.name >; return ( <WithdrawalOperationPage operationId={wopid} - onOperationAborted={() => routeTo("login", {})} + onOperationAborted={() => navigateTo(publicPages.login.url({}))} routeClose={publicPages.login} - onAuthorizationRequired={() => routeTo("solveSecondFactor", {})} + onAuthorizationRequired={() => navigateTo(publicPages.solveSecondFactor.url({}))} /> ); } @@ -176,18 +184,17 @@ function PublicRounting({ case "solveSecondFactor": { return ( <SolveChallengePage - onChallengeCompleted={() => routeTo("login", {})} + onChallengeCompleted={() => navigateTo(publicPages.login.url({}))} routeClose={publicPages.login} /> ); } default: - assertUnreachable(loc.name); + assertUnreachable(location.name); } } export const privatePages = { - home: urlPattern(/\/account/, () => "#/account"), homeChargeWallet: urlPattern( /\/account\/charge-wallet/, () => "#/account/charge-wallet", @@ -196,6 +203,7 @@ export const privatePages = { /\/account\/wire-transfer/, () => "#/account/wire-transfer", ), + home: urlPattern(/\/account/, () => "#/account"), solveSecondFactor: urlPattern(/\/2fa/, () => "#/2fa"), cashoutCreate: urlPattern(/\/new-cashout/, () => "#/new-cashout"), cashoutDetails: urlPattern<{ cid: string }>( @@ -233,7 +241,7 @@ export const privatePages = { ({ account }) => `#/profile/${account}/cashouts`, ), operationDetails: urlPattern<{ wopid: string }>( - /\/operation\/(?<wopid>[a-zA-Z0-9]+)/, + /\/operation\/(?<wopid>[a-zA-Z0-9-]+)/, ({ wopid }) => `#/operation/${wopid}`, ), }; @@ -245,33 +253,38 @@ function PrivateRouting({ username: string; isAdmin: boolean; }): VNode { - const [loc, routeTo] = useCurrentLocation(privatePages); + const { navigateTo } = useNavigationContext() + const location = useCurrentLocation(privatePages); + useEffect(() => { + if (location === undefined) { + navigateTo(privatePages.home.url({})) + } + }, [location]) - if (loc === undefined) { - routeTo("home", {}); + if (location === undefined) { return <Fragment />; } - switch (loc.name) { + switch (location.name) { case "operationDetails": { - const { wopid } = loc.values as RouteParamsType< - typeof loc.parent, - typeof loc.name + const { wopid } = location.values as RouteParamsType< + typeof location.parent, + typeof location.name >; return ( <WithdrawalOperationPage operationId={wopid} - onOperationAborted={() => routeTo("home", {})} + onOperationAborted={() => navigateTo(privatePages.home.url({}))} routeClose={privatePages.home} - onAuthorizationRequired={() => routeTo("solveSecondFactor", {})} + onAuthorizationRequired={() => navigateTo(privatePages.solveSecondFactor.url({}))} /> ); } case "solveSecondFactor": { return ( <SolveChallengePage - onChallengeCompleted={() => routeTo("home", {})} + onChallengeCompleted={() => navigateTo(privatePages.home.url({}))} routeClose={privatePages.home} /> ); @@ -286,64 +299,64 @@ function PrivateRouting({ return ( <CreateNewAccount routeCancel={privatePages.home} - onCreateSuccess={() => routeTo("home", {})} + onCreateSuccess={() => navigateTo(privatePages.home.url({}))} /> ); } case "accountDetails": { - const { account } = loc.values as RouteParamsType< - typeof loc.parent, - typeof loc.name + const { account } = location.values as RouteParamsType< + typeof location.parent, + typeof location.name >; return ( <ShowAccountDetails account={account} - onUpdateSuccess={() => routeTo("home", {})} - onAuthorizationRequired={() => routeTo("solveSecondFactor", {})} + onUpdateSuccess={() => navigateTo(privatePages.home.url({}))} + onAuthorizationRequired={() => navigateTo(privatePages.solveSecondFactor.url({}))} routeClose={privatePages.home} /> ); } case "accountChangePassword": { - const { account } = loc.values as RouteParamsType< - typeof loc.parent, - typeof loc.name + const { account } = location.values as RouteParamsType< + typeof location.parent, + typeof location.name >; return ( <UpdateAccountPassword focus account={account} - onUpdateSuccess={() => routeTo("home", {})} - onAuthorizationRequired={() => routeTo("solveSecondFactor", {})} + onUpdateSuccess={() => navigateTo(privatePages.home.url({}))} + onAuthorizationRequired={() => navigateTo(privatePages.solveSecondFactor.url({}))} routeClose={privatePages.home} /> ); } case "accountDelete": { - const { account } = loc.values as RouteParamsType< - typeof loc.parent, - typeof loc.name + const { account } = location.values as RouteParamsType< + typeof location.parent, + typeof location.name >; return ( <RemoveAccount account={account} - onUpdateSuccess={() => routeTo("home", {})} - onAuthorizationRequired={() => routeTo("solveSecondFactor", {})} + onUpdateSuccess={() => navigateTo(privatePages.home.url({}))} + onAuthorizationRequired={() => navigateTo(privatePages.solveSecondFactor.url({}))} routeCancel={privatePages.home} /> ); } case "accountCashouts": { - const { account } = loc.values as RouteParamsType< - typeof loc.parent, - typeof loc.name + const { account } = location.values as RouteParamsType< + typeof location.parent, + typeof location.name >; return ( <CashoutListForAccount account={account} routeCashoutDetails={privatePages.cashoutDetails} routeClose={privatePages.home} - onAuthorizationRequired={() => routeTo("solveSecondFactor", {})} + onAuthorizationRequired={() => navigateTo(privatePages.solveSecondFactor.url({}))} /> ); } @@ -351,8 +364,8 @@ function PrivateRouting({ return ( <RemoveAccount account={username} - onUpdateSuccess={() => routeTo("home", {})} - onAuthorizationRequired={() => routeTo("solveSecondFactor", {})} + onUpdateSuccess={() => navigateTo(privatePages.home.url({}))} + onAuthorizationRequired={() => navigateTo(privatePages.solveSecondFactor.url({}))} routeCancel={privatePages.home} /> ); @@ -361,8 +374,8 @@ function PrivateRouting({ return ( <ShowAccountDetails account={username} - onUpdateSuccess={() => routeTo("home", {})} - onAuthorizationRequired={() => routeTo("solveSecondFactor", {})} + onUpdateSuccess={() => navigateTo(privatePages.home.url({}))} + onAuthorizationRequired={() => navigateTo(privatePages.solveSecondFactor.url({}))} routeClose={privatePages.home} /> ); @@ -372,8 +385,8 @@ function PrivateRouting({ <UpdateAccountPassword focus account={username} - onUpdateSuccess={() => routeTo("home", {})} - onAuthorizationRequired={() => routeTo("solveSecondFactor", {})} + onUpdateSuccess={() => navigateTo(privatePages.home.url({}))} + onAuthorizationRequired={() => navigateTo(privatePages.solveSecondFactor.url({}))} routeClose={privatePages.home} /> ); @@ -383,7 +396,7 @@ function PrivateRouting({ <CashoutListForAccount account={username} routeCashoutDetails={privatePages.cashoutDetails} - onAuthorizationRequired={() => routeTo("solveSecondFactor", {})} + onAuthorizationRequired={() => navigateTo(privatePages.solveSecondFactor.url({}))} routeClose={privatePages.home} /> ); @@ -392,7 +405,7 @@ function PrivateRouting({ if (isAdmin) { return ( <AdminHome - onAuthorizationRequired={() => routeTo("solveSecondFactor", {})} + onAuthorizationRequired={() => navigateTo(privatePages.solveSecondFactor.url({}))} routeCreate={privatePages.accountCreate} routeRemoveAccount={privatePages.accountDelete} routeShowAccount={privatePages.accountDetails} @@ -408,9 +421,9 @@ function PrivateRouting({ routeChargeWallet={privatePages.homeChargeWallet} routeWireTransfer={privatePages.homeWireTransfer} routeClose={privatePages.home} - onClose={() => routeTo("home", {})} - onAuthorizationRequired={() => routeTo("solveSecondFactor", {})} - onOperationCreated={(wopid) => routeTo("operationDetails", { wopid })} + onClose={() => navigateTo(privatePages.home.url({}))} + onAuthorizationRequired={() => navigateTo(privatePages.solveSecondFactor.url({}))} + onOperationCreated={(wopid) => navigateTo(privatePages.operationDetails.url({ wopid }))} /> ); } @@ -418,15 +431,15 @@ function PrivateRouting({ return ( <CreateCashout account={username} - onAuthorizationRequired={() => routeTo("solveSecondFactor", {})} + onAuthorizationRequired={() => navigateTo(privatePages.solveSecondFactor.url({}))} routeClose={privatePages.home} /> ); } case "cashoutDetails": { - const { cid } = loc.values as RouteParamsType< - typeof loc.parent, - typeof loc.name + const { cid } = location.values as RouteParamsType< + typeof location.parent, + typeof location.name >; return ( <ShowCashoutDetails @@ -436,16 +449,16 @@ function PrivateRouting({ ); } case "wireTranserCreate": { - const { destination } = loc.values as RouteParamsType< - typeof loc.parent, - typeof loc.name + const { destination } = location.values as RouteParamsType< + typeof location.parent, + typeof location.name >; return ( <WireTransfer toAccount={destination} - onAuthorizationRequired={() => routeTo("solveSecondFactor", {})} + onAuthorizationRequired={() => navigateTo(privatePages.solveSecondFactor.url({}))} routeCancel={privatePages.home} - onSuccess={() => routeTo("home", {})} + onSuccess={() => navigateTo(privatePages.home.url({}))} /> ); } @@ -457,9 +470,9 @@ function PrivateRouting({ routeChargeWallet={privatePages.homeChargeWallet} routeWireTransfer={privatePages.homeWireTransfer} routeClose={privatePages.home} - onClose={() => routeTo("home", {})} - onAuthorizationRequired={() => routeTo("solveSecondFactor", {})} - onOperationCreated={(wopid) => routeTo("operationDetails", { wopid })} + onClose={() => navigateTo(privatePages.home.url({}))} + onAuthorizationRequired={() => navigateTo(privatePages.solveSecondFactor.url({}))} + onOperationCreated={(wopid) => navigateTo(privatePages.operationDetails.url({ wopid }))} /> ); } @@ -471,13 +484,13 @@ function PrivateRouting({ routeChargeWallet={privatePages.homeChargeWallet} routeWireTransfer={privatePages.homeWireTransfer} routeClose={privatePages.home} - onClose={() => routeTo("home", {})} - onAuthorizationRequired={() => routeTo("solveSecondFactor", {})} - onOperationCreated={(wopid) => routeTo("operationDetails", { wopid })} + onClose={() => navigateTo(privatePages.home.url({}))} + onAuthorizationRequired={() => navigateTo(privatePages.solveSecondFactor.url({}))} + onOperationCreated={(wopid) => navigateTo(privatePages.operationDetails.url({ wopid }))} /> ); } default: - assertUnreachable(loc.name); + assertUnreachable(location.name); } } |