Skip to content

Commit da23a5a

Browse files
CrawlerCodeCrawlerCode
committed
refactor(dev): Move components & add StatusBadge component
1 parent 7374439 commit da23a5a

17 files changed

+57
-59
lines changed

‎packages/dev/src/app/components/ExampleList.tsx renamed to ‎packages/dev/src/app/(app)/_components/ExampleList.tsx

File renamed without changes.

‎packages/dev/src/app/components/auth/ExpiresBadge.tsx renamed to ‎packages/dev/src/app/(app)/_components/auth/ExpiresBadge.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import Badge from "@/components/general/Badge";
12
import type { ComponentProps } from "react";
2-
import Badge from "../general/Badge";
33

44
export const ExpiresBadge = ({
55
expiresAt: expiresAtString,

‎packages/dev/src/app/components/auth/SignInOrOutButtons.tsx renamed to ‎packages/dev/src/app/(app)/_components/auth/SignInOrOutButtons.tsx

File renamed without changes.

‎packages/dev/src/app/(app)/_components/auth/StatusBadge.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Badge from "@/components/general/Badge";
2+
import type { ComponentProps } from "react";
3+
4+
export const StatusBadge = ({
5+
status,
6+
...props
7+
}: {
8+
status: "authenticated" | "unauthenticated" | "loading";
9+
} & Omit<ComponentProps<typeof Badge>, "variant" | "children">) => {
10+
return (
11+
<Badge
12+
variant={status === "authenticated" ? "green" : status === "loading" ? "yellow" : "red"}
13+
{...props}
14+
>
15+
Status: {status}
16+
</Badge>
17+
);
18+
};

‎packages/dev/src/app/components/auth/authjs/AuthjsSessionClient.tsx renamed to ‎packages/dev/src/app/(app)/_components/auth/authjs/AuthjsSessionClient.tsx

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,17 @@
11
"use client";
22

33
import { useSession } from "next-auth/react";
4-
import Badge from "../../general/Badge";
4+
import { ExpiresBadge } from "../ExpiresBadge";
5+
import { StatusBadge } from "../StatusBadge";
56

67
export const AuthjsSessionClient = () => {
78
const { status, data: session } = useSession();
89

910
return (
1011
<>
1112
<div className="mb-2 flex gap-1">
12-
<Badge
13-
variant={status === "authenticated" ? "green" : status === "loading" ? "yellow" : "red"}
14-
>
15-
Status: {status}
16-
</Badge>
17-
{session?.expires && (
18-
<Badge variant="yellow">Expires: {new Date(session.expires).toLocaleString()}</Badge>
19-
)}
13+
<StatusBadge status={status} />
14+
<ExpiresBadge title="Session Expires" expiresAt={session?.expires} />
2015
</div>
2116
<pre className="overflow-auto rounded-lg bg-gray-100 p-4">
2217
{JSON.stringify(session?.user ?? null, null, 2)}

‎packages/dev/src/app/components/auth/authjs/AuthjsSessionServer.tsx renamed to ‎packages/dev/src/app/(app)/_components/auth/authjs/AuthjsSessionServer.tsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
import { auth } from "@/auth";
2-
import Badge from "../../general/Badge";
2+
import { ExpiresBadge } from "../ExpiresBadge";
3+
import { StatusBadge } from "../StatusBadge";
34

45
export const AuthjsSessionServer = async () => {
56
const session = await auth();
67

78
return (
89
<>
910
<div className="mb-2 flex gap-1">
10-
<Badge variant={session ? "green" : "red"}>
11-
Status: {session ? "authenticated" : "unauthenticated"}
12-
</Badge>
13-
{session?.expires && (
14-
<Badge variant="yellow">Expires: {new Date(session.expires).toLocaleString()}</Badge>
15-
)}
11+
<StatusBadge status={session ? "authenticated" : "unauthenticated"} />
12+
<ExpiresBadge title="Session Expires" expiresAt={session?.expires} />
1613
</div>
1714
<pre className="overflow-auto rounded-lg bg-gray-100 p-4">
1815
{JSON.stringify(session?.user ?? null, null, 2)}

‎packages/dev/src/app/components/auth/authjs/SignInButtonAuthjs.tsx renamed to ‎packages/dev/src/app/(app)/_components/auth/authjs/SignInButtonAuthjs.tsx

File renamed without changes.

‎packages/dev/src/app/components/auth/authjs/SignOutButtonAuthjs.tsx renamed to ‎packages/dev/src/app/(app)/_components/auth/authjs/SignOutButtonAuthjs.tsx

File renamed without changes.

‎packages/dev/src/app/components/auth/payload/PayloadAuthProvider.tsx renamed to ‎packages/dev/src/app/(app)/_components/auth/payload/PayloadAuthProvider.tsx

File renamed without changes.

‎packages/dev/src/app/components/auth/payload/PayloadSessionClientWithUsePayloadSession.tsx renamed to ‎packages/dev/src/app/(app)/_components/auth/payload/PayloadSessionClient.tsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
11
"use client";
22

3+
import Badge from "@/components/general/Badge";
34
import { usePayloadSession } from "payload-authjs/client";
4-
import Badge from "../../general/Badge";
55
import { ExpiresBadge } from "../ExpiresBadge";
6+
import { StatusBadge } from "../StatusBadge";
67

7-
export const PayloadSessionClientWithUsePayloadSession = () => {
8+
export const PayloadSessionClient = () => {
89
const { status, session, refresh } = usePayloadSession();
910

1011
return (
1112
<>
1213
<div className="mb-2 flex gap-1">
13-
<Badge
14-
variant={status === "authenticated" ? "green" : status === "loading" ? "yellow" : "red"}
15-
>
16-
Status: {status}
17-
</Badge>
14+
<StatusBadge status={status} />
1815
<ExpiresBadge title="Session Expires" expiresAt={session?.expires} onClick={refresh} />
1916
<ExpiresBadge title="Account Expires" expiresAt={session?.user.currentAccount?.expiresAt} />
2017
<ExpiresBadge

‎packages/dev/src/app/components/auth/payload/PayloadSessionClientWithUseAuth.tsx renamed to ‎packages/dev/src/app/(app)/_components/auth/payload/PayloadSessionClientWithUseAuth.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,15 @@
22

33
import type { User } from "@/payload-types";
44
import { useAuth } from "@payloadcms/ui";
5-
import Badge from "../../general/Badge";
5+
import { StatusBadge } from "../StatusBadge";
66

77
export const PayloadSessionClientWithUseAuth = () => {
88
const { user } = useAuth<User>();
99

1010
return (
1111
<>
1212
<div className="mb-2 flex gap-1">
13-
<Badge variant={user ? "green" : "red"}>
14-
Status: {user ? "authenticated" : "unauthenticated"}
15-
</Badge>
13+
<StatusBadge status={user ? "authenticated" : "unauthenticated"} />
1614
</div>
1715
<pre className="overflow-auto rounded-lg bg-gray-100 p-4">
1816
{JSON.stringify(user ?? null, null, 2)}

‎packages/dev/src/app/components/auth/payload/PayloadSessionServer.tsx renamed to ‎packages/dev/src/app/(app)/_components/auth/payload/PayloadSessionServer.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1+
import Badge from "@/components/general/Badge";
12
import { revalidateTag } from "next/cache";
23
import { getPayloadSession } from "payload-authjs";
3-
import Badge from "../../general/Badge";
44
import { ExpiresBadge } from "../ExpiresBadge";
5+
import { StatusBadge } from "../StatusBadge";
56

67
export const PayloadSessionServer = async () => {
78
const session = await getPayloadSession();
89

910
return (
1011
<>
1112
<div className="mb-2 flex gap-1">
12-
<Badge variant={session ? "green" : "red"}>
13-
Status: {session ? "authenticated" : "unauthenticated"}
14-
</Badge>
13+
<StatusBadge status={session ? "authenticated" : "unauthenticated"} />
1514
<ExpiresBadge
1615
title="Session Expires"
1716
expiresAt={session?.expires}

‎packages/dev/src/app/components/auth/payload/SignOutButtonPayload.tsx renamed to ‎packages/dev/src/app/(app)/_components/auth/payload/SignOutButtonPayload.tsx

File renamed without changes.

‎packages/dev/src/app/(app)/page.tsx

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1+
import { Tabs } from "@/components/general/Tabs";
2+
import { SessionProvider as AuthjsSessionProvider } from "next-auth/react";
13
import { getPayloadSession } from "payload-authjs";
24
import { PayloadSessionProvider } from "payload-authjs/client";
3-
import { AuthjsProviders } from "../components/auth/authjs/AuthjsProviders";
4-
import { AuthjsSessionClient } from "../components/auth/authjs/AuthjsSessionClient";
5-
import { AuthjsSessionServer } from "../components/auth/authjs/AuthjsSessionServer";
6-
import { PayloadAuthProvider } from "../components/auth/payload/PayloadAuthProvider";
7-
import { PayloadSessionClientWithUseAuth } from "../components/auth/payload/PayloadSessionClientWithUseAuth";
8-
import { PayloadSessionClientWithUsePayloadSession } from "../components/auth/payload/PayloadSessionClientWithUsePayloadSession";
9-
import { PayloadSessionServer } from "../components/auth/payload/PayloadSessionServer";
10-
import { SignInOrOutButtons } from "../components/auth/SignInOrOutButtons";
11-
import ExampleList from "../components/ExampleList";
12-
import { Tabs } from "../components/general/Tabs";
5+
import { AuthjsSessionClient } from "./_components/auth/authjs/AuthjsSessionClient";
6+
import { AuthjsSessionServer } from "./_components/auth/authjs/AuthjsSessionServer";
7+
import { PayloadAuthProvider } from "./_components/auth/payload/PayloadAuthProvider";
8+
import { PayloadSessionClient } from "./_components/auth/payload/PayloadSessionClient";
9+
import { PayloadSessionClientWithUseAuth } from "./_components/auth/payload/PayloadSessionClientWithUseAuth";
10+
import { PayloadSessionServer } from "./_components/auth/payload/PayloadSessionServer";
11+
import { SignInOrOutButtons } from "./_components/auth/SignInOrOutButtons";
12+
import ExampleList from "./_components/ExampleList";
1313

1414
const Page = async () => {
1515
return (
@@ -26,28 +26,28 @@ const Page = async () => {
2626
label: "Payload [usePayloadSession] (client)",
2727
content: (
2828
<PayloadSessionProvider session={await getPayloadSession()}>
29-
<PayloadSessionClientWithUsePayloadSession />
29+
<PayloadSessionClient />
3030
</PayloadSessionProvider>
3131
),
3232
},
33-
{
34-
label: "Payload [useAuth] (client)",
35-
content: (
36-
<PayloadAuthProvider>
37-
<PayloadSessionClientWithUseAuth />
38-
</PayloadAuthProvider>
39-
),
40-
},
4133
{
4234
label: "Auth.js [auth] (server)",
4335
content: <AuthjsSessionServer />,
4436
},
4537
{
4638
label: "Auth.js [useSession] (client)",
4739
content: (
48-
<AuthjsProviders>
40+
<AuthjsSessionProvider>
4941
<AuthjsSessionClient />
50-
</AuthjsProviders>
42+
</AuthjsSessionProvider>
43+
),
44+
},
45+
{
46+
label: "Payload [useAuth] (client)",
47+
content: (
48+
<PayloadAuthProvider>
49+
<PayloadSessionClientWithUseAuth />
50+
</PayloadAuthProvider>
5151
),
5252
},
5353
]}

‎packages/dev/src/app/components/auth/authjs/AuthjsProviders.tsx

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎packages/dev/src/app/components/general/Badge.tsx renamed to ‎packages/dev/src/components/general/Badge.tsx

File renamed without changes.

‎packages/dev/src/app/components/general/Tabs.tsx renamed to ‎packages/dev/src/components/general/Tabs.tsx

File renamed without changes.

0 commit comments

Comments
 (0)