Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 23x 80x 80x 80x 80x 80x 80x 1x 1x 80x 80x 80x 1x 80x | import React from "react";
import { doNothing } from "remeda";
import { CurrenciesPicker } from "~app/components/app/currencies-picker";
import { LoadablePeer } from "~app/components/app/loadable-peer";
import { PageHeader } from "~app/components/page-header";
import { PeerDebtsGroup } from "~app/components/peer-debts-group";
import { NavigationContext } from "~app/contexts/navigation-context";
import { useBooleanState } from "~app/hooks/use-boolean-state";
import type { CurrencyCode } from "~app/utils/currency";
import { getPathHooks } from "~app/utils/navigation";
import { BackLink } from "~components/back-link";
import { Divider } from "~components/divider";
import { CurrenciesGroup } from "./currencies-group";
import { PlannedDebts } from "./planned-debts";
export const DebtsExchangeAllScreen = () => {
const { useParams, useQueryState } = getPathHooks(
"/_protected/debts/peer/$id/exchange/all",
);
const { id: peerId } = useParams();
const fromState = useQueryState("from");
const [selectedCurrencyCode, setSelectedCurrencyCode] = fromState;
const [
modalOpen,
{ switchValue: switchModalOpen, setFalse: closeModal, setTrue: openModal },
] = useBooleanState();
const onSelectModalCurrencyCode = React.useCallback(
(currencyCode: CurrencyCode) => {
setSelectedCurrencyCode(currencyCode);
closeModal();
},
[closeModal, setSelectedCurrencyCode],
);
const { useNavigate } = React.use(NavigationContext);
const navigate = useNavigate();
const back = React.useCallback(() => {
navigate({
to: "/debts/peer/$id",
params: { id: peerId },
replace: true,
});
}, [navigate, peerId]);
return (
<>
<PageHeader
startContent={
<BackLink to="/debts/peer/$id/exchange" params={{ id: peerId }} />
}
endContent={<LoadablePeer id={peerId} />}
/>
<PeerDebtsGroup className="self-center" peerId={peerId} />
<CurrenciesGroup
peerId={peerId}
selectedCurrencyCode={selectedCurrencyCode}
setSelectedCurrencyCode={setSelectedCurrencyCode}
onSelectOther={openModal}
/>
<CurrenciesPicker
selectedCurrencyCode={selectedCurrencyCode}
onChange={onSelectModalCurrencyCode}
modalOpen={modalOpen}
switchModalOpen={switchModalOpen}
// oxlint-disable-next-line typescript/strict-void-return
onLoad={doNothing}
topQueryOptions={{ type: "debts" }}
/>
{selectedCurrencyCode ? (
<>
<Divider />
<PlannedDebts
peerId={peerId}
selectedCurrencyCode={selectedCurrencyCode}
onDone={back}
/>
</>
) : null}
</>
);
};
|