46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import PrimaryButton from "@/components/button/PrimaryButton";
|
|
import DangerMessage from "@/components/message/DangerMessage";
|
|
import { useGetAccounts } from "@/hooks/AccountHooks";
|
|
import { useState } from "react";
|
|
import AccountsList from "./AccountsList";
|
|
import AccountsListSkeleton from "./AccountsListSkeleton";
|
|
import AccountModal from "./modals/AccountModal";
|
|
|
|
|
|
export default function AccountsLoader(){
|
|
const [ displayCreateAccountModal, setDisplayCreateAccountModal ] = useState(false);
|
|
|
|
const accountsQuery = useGetAccounts(0, 20);
|
|
|
|
|
|
if(accountsQuery.isLoading){
|
|
return <AccountsListSkeleton/>
|
|
}
|
|
else if(accountsQuery.isError){
|
|
return <DangerMessage>Error: {accountsQuery.error.message}</DangerMessage>
|
|
}
|
|
else{
|
|
return (
|
|
<>
|
|
{/* Add Account Button */}
|
|
<PrimaryButton
|
|
className="mb-8"
|
|
onClick={() => setDisplayCreateAccountModal(true)}
|
|
>
|
|
Create Account
|
|
</PrimaryButton>
|
|
<AccountModal
|
|
display={displayCreateAccountModal}
|
|
close={() => setDisplayCreateAccountModal(false)}
|
|
account={undefined}
|
|
/>
|
|
{/* Account Search Bar */}
|
|
<AccountsList
|
|
accounts={accountsQuery.data ?? []}
|
|
/>
|
|
{/* TODO: Add Pagination */}
|
|
</>
|
|
);
|
|
}
|
|
}
|