diff --git a/README.md b/README.md index af9d8a8..93967b6 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# admin +# admin Administrative tools for storacha.network. @@ -20,4 +20,3 @@ You can start editing the page by modifying `app/page.tsx`. The page auto-update - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - diff --git a/app/customers/[did]/page.tsx b/app/customers/[did]/page.tsx index 6f5c60b..14a12f2 100644 --- a/app/customers/[did]/page.tsx +++ b/app/customers/[did]/page.tsx @@ -1,89 +1,115 @@ -'use client' +"use client"; -import Link from "next/link" -import { notFound } from "next/navigation" -import * as DidMailto from '@storacha/did-mailto' +import Link from "next/link"; +import { notFound } from "next/navigation"; +import * as DidMailto from "@storacha/did-mailto"; -import { useCustomer } from "@/hooks/customer" -import { useRateLimitActions } from "@/hooks/rate-limit" -import { SimpleError } from "@/components/error" -import { Loader } from "@/components/brand" +import { useCustomer } from "@/hooks/customer"; +import { useRateLimitActions } from "@/hooks/rate-limit"; +import { SimpleError } from "@/components/error"; +import { Loader } from "@/components/brand"; +import { use } from "react"; -export const runtime = 'edge' +export const runtime = "edge"; -function domainFromEmail (email: string) { - const ind = email.indexOf('@') - return email.slice(ind + 1) +function domainFromEmail(email: string) { + const ind = email.indexOf("@"); + return email.slice(ind + 1); } -function mailtoDidFromUrlComponent (urlComponent: string) { +function mailtoDidFromUrlComponent(urlComponent: string) { try { - return DidMailto.fromString(decodeURIComponent(urlComponent)) + return DidMailto.fromString(decodeURIComponent(urlComponent)); } catch { - return undefined + return undefined; } } -export default function Customer ({ params: { did: encodedDid } }: { params: { did: string } }) { - const did = mailtoDidFromUrlComponent(encodedDid) - const email = did && DidMailto.toEmail(did) - const domain = email && domainFromEmail(email) - - const { data: customer, error, isLoading } = useCustomer(did) - const { addBlock: addEmailBlock, removeBlock: removeEmailBlock, blocked: emailBlocked } = useRateLimitActions(email) - const { addBlock: addDomainBlock, removeBlock: removeDomainBlock, blocked: domainBlocked } = useRateLimitActions(domain) +export default function Customer(props: { params: Promise<{ did: string }> }) { + const { did: encodedDid } = use(props.params); + const did = mailtoDidFromUrlComponent(encodedDid); + const email = did && DidMailto.toEmail(did); + const domain = email && domainFromEmail(email); + console.log(did) + const { data: customer, error, isLoading } = useCustomer(did); + const { + addBlock: addEmailBlock, + removeBlock: removeEmailBlock, + blocked: emailBlocked, + } = useRateLimitActions(email); + const { + addBlock: addDomainBlock, + removeBlock: removeDomainBlock, + blocked: domainBlocked, + } = useRateLimitActions(domain); + console.log(isLoading, error, customer); if (did) { return ( -
-

Customer {did}

+
+

Customer {did}

{isLoading && } - {error && {error.message?.toString() || `Error loading ${did}`}} + {error && ( + +
+ {error.message?.toString() || `Error loading ${did}`} +
+ + )} {customer && ( -
-
- -
- +
- - + + - - + +
Email blocked{emailBlocked ? 'yes' : 'no'}Email blocked{emailBlocked ? "yes" : "no"}
Domain blocked{domainBlocked ? 'yes' : 'no'}Domain blocked{domainBlocked ? "yes" : "no"}
-

Subscriptions

- +

Subscriptions

+
- { - customer.subscriptions?.map(subscriptionId => ( - - - - )) - } + {customer.subscriptions?.map((subscriptionId) => ( + + + + ))}
- - {subscriptionId} - -
+ + {subscriptionId} + +
)}
- ) + ); } else { - return notFound() + return notFound(); } -} \ No newline at end of file +} diff --git a/app/globals.css b/app/globals.css index a4de326..79ccc50 100644 --- a/app/globals.css +++ b/app/globals.css @@ -4,4 +4,8 @@ .btn { @apply rounded bg-gray-500 px-2 py-1 hover:bg-gray-600 active:bg-gray-400 cursor-pointer; } + + input { + @apply bg-white; + } } \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index adf2242..b3cff76 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,24 +1,37 @@ -'use client' +"use client"; -import './globals.css' -import type { JSX } from 'react' -import { AgentProvider } from '@/contexts/agent' -import { ServiceProvider } from '@/contexts/service' -import Nav from '@/components/nav' +import "./globals.css"; +import type { JSX } from "react"; +import { AgentProvider } from "@/contexts/agent"; +import { ServiceProvider } from "@/contexts/service"; +import Nav from "@/components/nav"; +import { + Authenticator, + Provider as StorachaProvider, +} from "@storacha/ui-react"; +import { AuthenticationEnsurer } from "@/components/Authenticator"; -export default function RootLayout ({ children }: { children: React.ReactNode }): JSX.Element { +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}): JSX.Element { return ( - - - - -