103 lines
2.7 KiB
TypeScript
103 lines
2.7 KiB
TypeScript
import { mdiCashMultiple, mdiHome, mdiInbox } from "@mdi/js";
|
|
import Icon from "@mdi/react";
|
|
import {
|
|
Chip,
|
|
Divider,
|
|
List,
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import React from "react";
|
|
import { useLocation } from "react-router-dom";
|
|
import { useAccounts } from "../hooks/AccountsListProvider";
|
|
import { usePublicMode } from "../hooks/context_providers/PublicModeProvider";
|
|
import { AccountIconWidget } from "./AccountIconWidget";
|
|
import { AmountWidget } from "./AmountWidget";
|
|
import { RouterLink } from "./RouterLink";
|
|
import { useUnmatchedInboxEntriesCount } from "../hooks/UnmatchedInboxEntriesCountProvider";
|
|
|
|
export function MoneyNavList(): React.ReactElement {
|
|
const publicMode = usePublicMode();
|
|
const accounts = useAccounts();
|
|
const unmatched = useUnmatchedInboxEntriesCount();
|
|
return (
|
|
<List
|
|
dense
|
|
component="nav"
|
|
sx={{
|
|
minWidth: "200px",
|
|
backgroundColor: "background.paper",
|
|
}}
|
|
>
|
|
<NavLink label="Home" uri="/" icon={<Icon path={mdiHome} size={1} />} />
|
|
|
|
<NavLink
|
|
label="Accounts"
|
|
uri="/accounts"
|
|
icon={<Icon path={mdiCashMultiple} size={1} />}
|
|
/>
|
|
<NavLink
|
|
label="Inbox"
|
|
uri="/inbox"
|
|
icon={<Icon path={mdiInbox} size={1} />}
|
|
secondary={
|
|
unmatched.count > 0 ? (
|
|
<Chip label={unmatched.count} size="small" />
|
|
) : (
|
|
<></>
|
|
)
|
|
}
|
|
/>
|
|
<Divider />
|
|
{accounts.list.isEmpty && (
|
|
<Typography
|
|
variant="caption"
|
|
style={{
|
|
paddingTop: "20px",
|
|
display: "inline-block",
|
|
textAlign: "center",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
No account yet.
|
|
</Typography>
|
|
)}
|
|
|
|
{accounts.list.list.map((a) => (
|
|
<NavLink
|
|
key={a.id}
|
|
label={a.name}
|
|
secondaryLabel={
|
|
publicMode.enabled ? <></> : <AmountWidget amount={a.balance} />
|
|
}
|
|
uri={`/account/${a.id}`}
|
|
icon={<AccountIconWidget account={a} />}
|
|
/>
|
|
))}
|
|
</List>
|
|
);
|
|
}
|
|
|
|
function NavLink(p: {
|
|
icon: React.ReactElement;
|
|
uri: string;
|
|
label: string | React.ReactElement;
|
|
secondaryLabel?: string | React.ReactElement;
|
|
secondary?: React.ReactElement;
|
|
}): React.ReactElement {
|
|
const location = useLocation();
|
|
return (
|
|
<RouterLink to={p.uri}>
|
|
<ListItem secondaryAction={p.secondary} disablePadding>
|
|
<ListItemButton selected={p.uri === location.pathname}>
|
|
<ListItemIcon>{p.icon}</ListItemIcon>
|
|
<ListItemText primary={p.label} secondary={p.secondaryLabel} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
</RouterLink>
|
|
);
|
|
}
|