diff --git a/src/components/button/DangerButton.tsx b/src/components/button/DangerButton.tsx index da29e2a..e97d6c4 100644 --- a/src/components/button/DangerButton.tsx +++ b/src/components/button/DangerButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function DangerButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function DangerButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-red-600 hover:bg-red-700 active:bg-red-800": variant === "solid", - "bg-transparent hover:bg-red-600 active:bg-red-700": variant === "ghost" || variant === "outline-ghost" + "bg-red-600 hover:bg-red-700 active:bg-red-800": (variant === "solid") && (!disabled), + "bg-red-400/80": (variant === "solid") && (disabled), + "bg-transparent hover:bg-red-600 active:bg-red-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-white": variant === "solid", - "text-red-600 hover:text-red-700 active:text-red-800": variant === "outline" || variant === "icon", - "text-red-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" + "text-red-600 hover:text-red-700 active:text-red-800": (variant === "outline" || variant === "icon") && (!disabled), + "text-red-400/80": (variant === "outline" || variant === "icon") && (disabled), + "text-red-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "text-red-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-red-600 hover:outline-red-700 active:outline-red-800": variant === "solid" || variant === "outline", - "outline hover:outline-red-600 active:outline-red-700": variant === "outline-ghost" + "outline outline-red-600 hover:outline-red-700 active:outline-red-800": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-red-400/80": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-red-600 active:outline-red-700": (variant === "outline-ghost") && (!disabled), + "outline outline-red-400/80 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/button/DarkButton.tsx b/src/components/button/DarkButton.tsx index ce898f5..cd2283e 100644 --- a/src/components/button/DarkButton.tsx +++ b/src/components/button/DarkButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function DarkButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function DarkButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-black hover:bg-neutral-700 active:bg-neutral-500": variant === "solid", - "bg-transparent hover:bg-black active:bg-neutral-700": variant === "ghost" || variant === "outline-ghost" + "bg-black hover:bg-neutral-700 active:bg-neutral-500": (variant === "solid") && (!disabled), + "bg-neutral-700": (variant === "solid") && (disabled), + "bg-transparent hover:bg-black active:bg-neutral-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-white": variant === "solid", - "text-black hover:text-neutral-700 active:text-neutral-500": variant === "outline" || variant === "icon", - "text-black hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" + "text-black hover:text-neutral-700 active:text-neutral-500": (variant === "outline" || variant === "icon") && (!disabled), + "text-neutral-700": (variant === "outline" || variant === "icon") && (disabled), + "text-black hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "text-neutral-700 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-black hover:outline-neutral-700 active:outline-neutral-500": variant === "solid" || variant === "outline", - "outline hover:outline-black active:outline-neutral-700": variant === "outline-ghost" + "outline outline-black hover:outline-neutral-700 active:outline-neutral-500": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-neutral-700": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-black active:outline-neutral-700": (variant === "outline-ghost") && (!disabled), + "outline outline-neutral-700 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/button/LightButton.tsx b/src/components/button/LightButton.tsx index 2617c75..6594611 100644 --- a/src/components/button/LightButton.tsx +++ b/src/components/button/LightButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function LightButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function LightButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-white hover:bg-neutral-300 active:bg-neutral-400": variant === "solid", - "bg-transparent hover:bg-white active:bg-neutral-300": variant === "ghost" || variant === "outline-ghost" + "bg-white hover:bg-neutral-300 active:bg-neutral-400": (variant === "solid") && (!disabled), + "bg-neutral-400/80": (variant === "solid") && (disabled), + "bg-transparent hover:bg-white active:bg-neutral-300": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-black": variant === "solid", - "text-white hover:text-neutral-300 active:text-neutral-400": variant === "outline" || variant === "icon", - "text-white hover:text-black active:text-black": variant === "ghost" || variant === "outline-ghost" + "text-white hover:text-neutral-300 active:text-neutral-400": (variant === "outline" || variant === "icon") && (!disabled), + "text-neutral-400/80": (variant === "outline" || variant === "icon") && (disabled), + "text-white hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "text-neutral-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-white hover:outline-neutral-300 active:outline-neutral-400": variant === "solid" || variant === "outline", - "outline hover:outline-neutral-300 active:outline-neutral-400": variant === "outline-ghost" + "outline outline-white hover:outline-neutral-300 active:outline-neutral-400": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-neutral-400/80": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-neutral-300 active:outline-neutral-400": (variant === "outline-ghost") && (!disabled), + "outline outline-neutral-400/80 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/button/MoltenButton.tsx b/src/components/button/MoltenButton.tsx index d99993b..a458628 100644 --- a/src/components/button/MoltenButton.tsx +++ b/src/components/button/MoltenButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function MoltenButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function MoltenButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-orange-600 hover:bg-orange-700 active:bg-orange-800": variant === "solid", - "bg-transparent hover:bg-orange-600 active:bg-orange-700": variant === "ghost" || variant === "outline-ghost" + "bg-orange-600 hover:bg-orange-700 active:bg-orange-800": (variant === "solid") && (!disabled), + "bg-orange-400/80": (variant === "solid") && (disabled), + "bg-transparent hover:bg-orange-600 active:bg-orange-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-white": variant === "solid", - "text-orange-600 hover:text-orange-700 active:text-orange-800": variant === "outline" || variant === "icon", - "text-orange-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" + "text-orange-600 hover:text-orange-700 active:text-orange-800": (variant === "outline" || variant === "icon") && (!disabled), + "text-orange-400/80": (variant === "outline" || variant === "icon") && (disabled), + "text-orange-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "text-orange-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-orange-600 hover:outline-orange-700 active:outline-orange-800": variant === "solid" || variant === "outline", - "outline hover:outline-orange-600 active:outline-orange-700": variant === "outline-ghost" + "outline outline-orange-600 hover:outline-orange-700 active:outline-orange-800": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-orange-400/80": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-orange-600 active:outline-orange-700": (variant === "outline-ghost") && (!disabled), + "outline outline-orange-400/80 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/button/PrimaryButton.tsx b/src/components/button/PrimaryButton.tsx index c8c389f..ee4df82 100644 --- a/src/components/button/PrimaryButton.tsx +++ b/src/components/button/PrimaryButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function PrimaryButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function PrimaryButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-blue-600 hover:bg-blue-700 active:bg-blue-800": variant === "solid", - "bg-transparent hover:bg-blue-600 active:bg-blue-700": variant === "ghost" || variant === "outline-ghost" + "bg-blue-600 hover:bg-blue-700 active:bg-blue-800": (variant === "solid") && (!disabled), + "bg-blue-400/80": (variant === "solid") && (disabled), + "bg-transparent hover:bg-blue-600 active:bg-blue-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-white": variant === "solid", - "text-blue-600 hover:text-blue-700 active:text-blue-800": variant === "outline" || variant === "icon", - "text-blue-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" + "text-blue-600 hover:text-blue-700 active:text-blue-800": (variant === "outline" || variant === "icon") && (!disabled), + "text-blue-400/80": (variant === "outline" || variant === "icon") && (disabled), + "text-blue-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost", + "text-blue-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-blue-600 hover:outline-blue-700 active:outline-blue-800": variant === "solid" || variant === "outline", - "outline hover:outline-blue-600 active:outline-blue-700": variant === "outline-ghost" + "outline outline-blue-600 hover:outline-blue-700 active:outline-blue-800": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-blue-400/80": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-blue-600 active:outline-blue-700": (variant === "outline-ghost") && (!disabled), + "outline outline-blue-400/80 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/button/SecondaryButton.tsx b/src/components/button/SecondaryButton.tsx index faec0cc..6ab1ab8 100644 --- a/src/components/button/SecondaryButton.tsx +++ b/src/components/button/SecondaryButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function SecondaryButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function SecondaryButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-neutral-500 hover:bg-neutral-600 active:bg-neutral-700": variant === "solid", - "bg-transparent hover:bg-neutral-500 active:bg-neutral-600": variant === "ghost" || variant === "outline-ghost" + "bg-neutral-500 hover:bg-neutral-600 active:bg-neutral-700": (variant === "solid") && (!disabled), + "bg-neutral-700": (variant === "solid") && (disabled), + "bg-transparent hover:bg-neutral-500 active:bg-neutral-600": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-white": variant === "solid", - "text-neutral-500 hover:text-neutral-600 active:text-neutral-700": variant === "outline" || variant === "icon", - "text-neutral-500 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" + "text-neutral-500 hover:text-neutral-600 active:text-neutral-700": (variant === "outline" || variant === "icon") && (!disabled), + "text-neutral-700": (variant === "outline" || variant === "icon") && (disabled), + "text-neutral-500 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "text-neutral-700 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-neutral-500 hover:outline-neutral-600 active:outline-neutral-700": variant === "solid" || variant === "outline", - "outline hover:outline-neutral-500 active:outline-neutral-600": variant === "outline-ghost" + "outline outline-neutral-500 hover:outline-neutral-600 active:outline-neutral-700": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-neutral-700": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-neutral-500 active:outline-neutral-600": (variant === "outline-ghost") && (!disabled), + "outline outline-neutral-700 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/button/SuccessButton.tsx b/src/components/button/SuccessButton.tsx index 58ae69f..eccb60e 100644 --- a/src/components/button/SuccessButton.tsx +++ b/src/components/button/SuccessButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function SuccessButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function SuccessButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-green-600 hover:bg-green-700 active:bg-green-800": variant === "solid", - "bg-transparent hover:bg-green-600 active:bg-green-700": variant === "ghost" || variant === "outline-ghost" + "bg-green-600 hover:bg-green-700 active:bg-green-800": (variant === "solid") && (!disabled), + "bg-green-300/80": (variant === "solid") && (disabled), + "bg-transparent hover:bg-green-600 active:bg-green-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-white": variant === "solid", - "text-green-600 hover:text-green-700 active:text-green-800": variant === "outline" || variant === "icon", - "text-green-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" + "text-green-600 hover:text-green-700 active:text-green-800": (variant === "outline" || variant === "icon") && (!disabled), + "text-green-300/80": (variant === "outline" || variant === "icon") && (disabled), + "text-green-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "text-green-300/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-green-600 hover:outline-green-700 active:outline-green-800": variant === "solid" || variant === "outline", - "outline hover:outline-green-600 active:outline-green-700": variant === "outline-ghost" + "outline outline-green-600 hover:outline-green-700 active:outline-green-800": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-green-300/80": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-green-600 active:outline-green-700": (variant === "outline-ghost") && (!disabled), + "outline outline-green-300/80 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/button/TertiaryButton.tsx b/src/components/button/TertiaryButton.tsx index 3a44e43..642974e 100644 --- a/src/components/button/TertiaryButton.tsx +++ b/src/components/button/TertiaryButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function TertiaryButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function TertiaryButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-purple-600 hover:bg-purple-700 active:bg-purple-800": variant === "solid", - "bg-transparent hover:bg-purple-600 active:bg-purple-700": variant === "ghost" || variant === "outline-ghost" + "bg-purple-600 hover:bg-purple-700 active:bg-purple-800": (variant === "solid") && (!disabled), + "bg-purple-400/80": (variant === "solid") && (disabled), + "bg-transparent hover:bg-purple-600 active:bg-purple-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-white": variant === "solid", - "text-purple-600 hover:text-purple-700 active:text-purple-800": variant === "outline" || variant === "icon", - "text-purple-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" + "text-purple-600 hover:text-purple-700 active:text-purple-800": (variant === "outline" || variant === "icon") && (!disabled), + "text-purple-400/80": (variant === "outline" || variant === "icon") && (disabled), + "text-purple-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "text-purple-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-purple-600 hover:outline-purple-700 active:outline-purple-800": variant === "solid" || variant === "outline", - "outline hover:outline-purple-600 active:outline-purple-700": variant === "outline-ghost" + "outline outline-purple-600 hover:outline-purple-700 active:outline-purple-800": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-purple-400/80": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-purple-600 active:outline-purple-700": (variant === "outline-ghost") && (!disabled), + "outline outline-purple-400/80 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/button/WarningButton.tsx b/src/components/button/WarningButton.tsx index 7297b58..f131ef0 100644 --- a/src/components/button/WarningButton.tsx +++ b/src/components/button/WarningButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function WarningButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function WarningButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-yellow-400 hover:bg-yellow-500 active:bg-yellow-600": variant === "solid", - "bg-transparent hover:bg-yellow-400 active:bg-yellow-500": variant === "ghost" || variant === "outline-ghost" + "bg-yellow-400 hover:bg-yellow-500 active:bg-yellow-600": (variant === "solid") && (!disabled), + "bg-yellow-600/80": (variant === "solid") && (disabled), + "bg-transparent hover:bg-yellow-400 active:bg-yellow-500": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-black": variant === "solid", - "text-yellow-400 hover:text-yellow-500 active:text-yellow-600": variant === "outline" || variant === "icon", - "text-yellow-400 hover:text-black active:text-black": variant === "ghost" || variant === "outline-ghost" + "text-yellow-400 hover:text-yellow-500 active:text-yellow-600": (variant === "outline" || variant === "icon") && (!disabled), + "text-yellow-600/80": (variant === "outline" || variant === "icon") && (disabled), + "text-yellow-400 hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "text-yellow-600/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-yellow-400 hover:outline-yellow-500 active:outline-yellow-600": variant === "solid" || variant === "outline", - "outline hover:outline-yellow-400 active:outline-yellow-500": variant === "outline-ghost" + "outline outline-yellow-400 hover:outline-yellow-500 active:outline-yellow-600": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-yellow-600/80": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-yellow-400 active:outline-yellow-500": (variant === "outline-ghost") && (!disabled), + "outline outline-yellow-600/80 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/pagination/Pagination.tsx b/src/components/pagination/Pagination.tsx new file mode 100644 index 0000000..224266d --- /dev/null +++ b/src/components/pagination/Pagination.tsx @@ -0,0 +1,65 @@ +import { generatePagination } from "@/util/PaginationUtil"; +import { BsChevronLeft, BsChevronRight } from "react-icons/bs"; +import PrimaryButton from "../button/PrimaryButton"; + +export default function Pagination({ + currentPage, + totalPages, + onChange +}:{ + currentPage: number; + totalPages: number; + onChange: (page: number) => void; +}){ + const pages = generatePagination(currentPage, totalPages); + + + return( +
+
+ onChange(currentPage - 1)} + > + + +
+
+ { + pages.map((page, index) => ( + onChange(page as number)} + > + {page} + + )) + } +
+
+ = totalPages} + onClick={() => onChange(currentPage + 1)} + > + + +
+
+ ); +} diff --git a/src/hooks/AccountHooks.ts b/src/hooks/AccountHooks.ts index 198c7eb..b6ce569 100644 --- a/src/hooks/AccountHooks.ts +++ b/src/hooks/AccountHooks.ts @@ -28,6 +28,24 @@ export function useGetAccounts(page: number, pageSize: number, searchTerm?: stri }); } +export function useGetAccountsCount(){ + return useQuery({ + queryKey: [ "accounts", "count"], + queryFn: async () => { + const response = await api.get("/account/count"); + + if(response.status !== 200){ + throw new Error("Failed to get accounts count"); + } + else if(response.data.errors){ + throw new Error(response.data.errors.join(", ")); + } + + return response.data.count as number; + } + }); +} + export function useForcePasswordReset(accountId: string){ const queryClient = useQueryClient(); diff --git a/src/index.css b/src/index.css index 93fd150..00f1520 100644 --- a/src/index.css +++ b/src/index.css @@ -53,6 +53,9 @@ body { button { cursor: pointer; } +button:disabled { + cursor: default; +} nav { position: fixed; diff --git a/src/ui/account/AccountsLoader.tsx b/src/ui/account/AccountsLoader.tsx index 7956918..b2250f0 100644 --- a/src/ui/account/AccountsLoader.tsx +++ b/src/ui/account/AccountsLoader.tsx @@ -1,7 +1,8 @@ import PrimaryButton from "@/components/button/PrimaryButton"; import DangerMessage from "@/components/message/DangerMessage"; -import { useGetAccounts } from "@/hooks/AccountHooks"; -import { useState } from "react"; +import Pagination from "@/components/pagination/Pagination"; +import { useGetAccounts, useGetAccountsCount } from "@/hooks/AccountHooks"; +import { useEffect, useState } from "react"; import AccountsList from "./AccountsList"; import AccountsListSkeleton from "./AccountsListSkeleton"; import AccountModal from "./modals/AccountModal"; @@ -9,8 +10,19 @@ import AccountModal from "./modals/AccountModal"; export default function AccountsLoader(){ const [ displayCreateAccountModal, setDisplayCreateAccountModal ] = useState(false); + const [ page, setPage ] = useState(1); + const [ totalPages, setTotalPages ] = useState(1); + const pageSize = 10; - const accountsQuery = useGetAccounts(0, 20); + const accountsQuery = useGetAccounts(page - 1, pageSize); + const accountsCountQuery = useGetAccountsCount(); + + + useEffect(() => { + if(accountsCountQuery.isSuccess){ + setTotalPages(Math.ceil(accountsCountQuery.data / pageSize)); + } + }, [ accountsCountQuery ]); if(accountsQuery.isLoading){ @@ -38,7 +50,16 @@ export default function AccountsLoader(){ - {/* TODO: Add Pagination */} + {/* Pagination */} +
+ +
); } diff --git a/src/util/PaginationUtil.ts b/src/util/PaginationUtil.ts new file mode 100644 index 0000000..adec69e --- /dev/null +++ b/src/util/PaginationUtil.ts @@ -0,0 +1,29 @@ +export function generatePagination(currentPage: number, totalPages: number){ + //If the total number of pages is 7 or less, display all pages without any ellipsis + if(totalPages <= 7){ + return Array.from({length: totalPages}, (_, i) => i + 1); + } + + //If the current page is among the first 3 pages, show the first 3, an ellipsis, and the last 2 pages. + else if(currentPage <= 3){ + return [1, 2, 3, '...', totalPages - 1, totalPages]; + } + + //If the current page is among the last 3 pages, show the first 2, an ellipsis, and the last 3 pages + else if(currentPage >= totalPages - 2){ + return [1, 2, '...', totalPages - 2, totalPages - 1, totalPages]; + } + + //If the current page is somewhere in the middle, show the first page, and ellipsis, the current page and its neighbors, another ellipsis, and the last page + else{ + return [ + 1, + '...', + currentPage - 1, + currentPage, + currentPage + 1, + '...', + totalPages + ]; + } +}