-
Notifications
You must be signed in to change notification settings - Fork 328
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Usage page in teams layout (chakra) (#4459)
## Problem solved Short description of the bug fixed or feature added <!-- start pr-codex --> --- ## PR-Codex overview The focus of this PR is to refactor the settings usage page in the dashboard app. ### Detailed summary - Refactored usage page to use `SettingsUsagePage` component - Removed redundant imports and code in `usage.tsx` - Updated `Page` component to render `SettingsUsagePage` - Updated `getLayout` and `pageId` in `Page` component > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
- Loading branch information
Showing
3 changed files
with
54 additions
and
42 deletions.
There are no files selected for viewing
40 changes: 40 additions & 0 deletions
40
apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/UsagePage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
"use client"; | ||
|
||
import { Spinner } from "@/components/ui/Spinner/Spinner"; | ||
import { useAccount, useAccountUsage } from "@3rdweb-sdk/react/hooks/useApi"; | ||
import { Flex, HStack } from "@chakra-ui/react"; | ||
import { BillingPeriod } from "components/settings/Account/Billing/Period"; | ||
import { BillingPlan } from "components/settings/Account/Billing/Plan"; | ||
import { Usage } from "components/settings/Account/Usage"; | ||
|
||
export const SettingsUsagePage = () => { | ||
const meQuery = useAccount(); | ||
const usageQuery = useAccountUsage(); | ||
const account = meQuery.data; | ||
|
||
if (meQuery.isLoading || !account) { | ||
return ( | ||
<div className="flex items-center justify-center min-h-[400px]"> | ||
<Spinner className="size-10" /> | ||
</div> | ||
); | ||
} | ||
|
||
return ( | ||
<Flex flexDir="column" gap={8}> | ||
<Flex direction="column"> | ||
<h1 className="font-semibold text-3xl tracking-tight mb-2">Usage</h1> | ||
<HStack | ||
justifyContent="space-between" | ||
flexDir={{ base: "column", lg: "row" }} | ||
alignItems={{ base: "flex-start", lg: "center" }} | ||
> | ||
<BillingPlan account={account} /> | ||
<BillingPeriod account={account} usage={usageQuery.data} /> | ||
</HStack> | ||
</Flex> | ||
|
||
<Usage usage={usageQuery.data} usageLoading={usageQuery.isLoading} /> | ||
</Flex> | ||
); | ||
}; |
11 changes: 8 additions & 3 deletions
11
apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,12 @@ | ||
import { ChakraProviderSetup } from "@/components/ChakraProviderSetup"; | ||
import { SettingsUsagePage } from "./UsagePage"; | ||
|
||
export default function Page() { | ||
return ( | ||
<div className="h-full py-6 container flex items-center justify-center"> | ||
<h1 className="text-4xl tracking-tighter text-muted-foreground">Usage</h1> | ||
</div> | ||
<ChakraProviderSetup> | ||
<div className="container pt-8 pb-10"> | ||
<SettingsUsagePage /> | ||
</div> | ||
</ChakraProviderSetup> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,53 +1,20 @@ | ||
import { useAccount, useAccountUsage } from "@3rdweb-sdk/react/hooks/useApi"; | ||
import { Flex, HStack } from "@chakra-ui/react"; | ||
import { AppLayout } from "components/app-layouts/app"; | ||
import { BillingPeriod } from "components/settings/Account/Billing/Period"; | ||
import { BillingPlan } from "components/settings/Account/Billing/Plan"; | ||
import { Usage } from "components/settings/Account/Usage"; | ||
import { SettingsSidebar } from "core-ui/sidebar/settings"; | ||
import { PageId } from "page-id"; | ||
import { Heading } from "tw-components"; | ||
import type { ThirdwebNextPage } from "utils/types"; | ||
import { SettingsUsagePage } from "../../../app/team/[team_slug]/(team)/~/usage/UsagePage"; | ||
|
||
const SettingsUsagePage: ThirdwebNextPage = () => { | ||
const meQuery = useAccount(); | ||
const usageQuery = useAccountUsage(); | ||
|
||
if (meQuery.isLoading || !meQuery.data) { | ||
return null; | ||
} | ||
|
||
const account = meQuery.data; | ||
|
||
return ( | ||
<Flex flexDir="column" gap={8}> | ||
<Flex direction="column"> | ||
<Heading size="title.lg" as="h1"> | ||
Usage | ||
</Heading> | ||
<HStack | ||
justifyContent="space-between" | ||
flexDir={{ base: "column", lg: "row" }} | ||
alignItems={{ base: "flex-start", lg: "center" }} | ||
> | ||
<BillingPlan account={account} /> | ||
<BillingPeriod account={account} usage={usageQuery.data} /> | ||
</HStack> | ||
</Flex> | ||
|
||
<Usage usage={usageQuery.data} usageLoading={usageQuery.isLoading} /> | ||
</Flex> | ||
); | ||
const Page: ThirdwebNextPage = () => { | ||
return <SettingsUsagePage />; | ||
}; | ||
|
||
SettingsUsagePage.getLayout = (page, props) => ( | ||
Page.getLayout = (page, props) => ( | ||
<AppLayout {...props} hasSidebar={true}> | ||
<SettingsSidebar activePage="usage" /> | ||
|
||
{page} | ||
</AppLayout> | ||
); | ||
|
||
SettingsUsagePage.pageId = PageId.SettingsUsage; | ||
Page.pageId = PageId.SettingsUsage; | ||
|
||
export default SettingsUsagePage; | ||
export default Page; |