General fixes. Still far from good or working
This commit is contained in:
@@ -1,58 +0,0 @@
|
||||
import { headers } from "next/headers";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { Button } from "@acme/ui/button";
|
||||
|
||||
import { auth, getSession } from "~/auth/server";
|
||||
|
||||
export async function AuthShowcase() {
|
||||
const session = await getSession();
|
||||
|
||||
if (!session) {
|
||||
return (
|
||||
<form>
|
||||
<Button
|
||||
size="lg"
|
||||
formAction={async () => {
|
||||
"use server";
|
||||
const res = await auth.api.signInSocial({
|
||||
body: {
|
||||
provider: "discord",
|
||||
callbackURL: "/",
|
||||
},
|
||||
});
|
||||
if (!res.url) {
|
||||
throw new Error("No URL returned from signInSocial");
|
||||
}
|
||||
redirect(res.url);
|
||||
}}
|
||||
>
|
||||
Sign in with Discord
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-4">
|
||||
<p className="text-center text-2xl">
|
||||
<span>Logged in as {session.user.name}</span>
|
||||
</p>
|
||||
|
||||
<form>
|
||||
<Button
|
||||
size="lg"
|
||||
formAction={async () => {
|
||||
"use server";
|
||||
await auth.api.signOut({
|
||||
headers: await headers(),
|
||||
});
|
||||
redirect("/");
|
||||
}}
|
||||
>
|
||||
Sign out
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,210 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import {
|
||||
useMutation,
|
||||
useQueryClient,
|
||||
useSuspenseQuery,
|
||||
} from "@tanstack/react-query";
|
||||
|
||||
import type { RouterOutputs } from "@acme/api";
|
||||
import { CreatePostSchema } from "@acme/db/schema";
|
||||
import { cn } from "@acme/ui";
|
||||
import { Button } from "@acme/ui/button";
|
||||
import {
|
||||
Field,
|
||||
FieldContent,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
} from "@acme/ui/field";
|
||||
import { Input } from "@acme/ui/input";
|
||||
import { toast } from "@acme/ui/toast";
|
||||
|
||||
import { useTRPC } from "~/trpc/react";
|
||||
|
||||
export function CreatePostForm() {
|
||||
const trpc = useTRPC();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
const createPost = useMutation(
|
||||
trpc.post.create.mutationOptions({
|
||||
onSuccess: async () => {
|
||||
form.reset();
|
||||
await queryClient.invalidateQueries(trpc.post.pathFilter());
|
||||
},
|
||||
onError: (err) => {
|
||||
toast.error(
|
||||
err.data?.code === "UNAUTHORIZED"
|
||||
? "You must be logged in to post"
|
||||
: "Failed to create post",
|
||||
);
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
content: "",
|
||||
title: "",
|
||||
},
|
||||
validators: {
|
||||
onSubmit: CreatePostSchema,
|
||||
},
|
||||
onSubmit: (data) => createPost.mutate(data.value),
|
||||
});
|
||||
|
||||
return (
|
||||
<form
|
||||
className="w-full max-w-2xl"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
void form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<FieldGroup>
|
||||
<form.Field
|
||||
name="title"
|
||||
children={(field) => {
|
||||
const isInvalid =
|
||||
field.state.meta.isTouched && !field.state.meta.isValid;
|
||||
return (
|
||||
<Field data-invalid={isInvalid}>
|
||||
<FieldContent>
|
||||
<FieldLabel htmlFor={field.name}>Bug Title</FieldLabel>
|
||||
</FieldContent>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
aria-invalid={isInvalid}
|
||||
placeholder="Title"
|
||||
/>
|
||||
{isInvalid && <FieldError errors={field.state.meta.errors} />}
|
||||
</Field>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<form.Field
|
||||
name="content"
|
||||
children={(field) => {
|
||||
const isInvalid =
|
||||
field.state.meta.isTouched && !field.state.meta.isValid;
|
||||
return (
|
||||
<Field data-invalid={isInvalid}>
|
||||
<FieldContent>
|
||||
<FieldLabel htmlFor={field.name}>Content</FieldLabel>
|
||||
</FieldContent>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
aria-invalid={isInvalid}
|
||||
placeholder="Content"
|
||||
/>
|
||||
{isInvalid && <FieldError errors={field.state.meta.errors} />}
|
||||
</Field>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</FieldGroup>
|
||||
<Button type="submit">Create</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export function PostList() {
|
||||
const trpc = useTRPC();
|
||||
const { data: posts } = useSuspenseQuery(trpc.post.all.queryOptions());
|
||||
|
||||
if (posts.length === 0) {
|
||||
return (
|
||||
<div className="relative flex w-full flex-col gap-4">
|
||||
<PostCardSkeleton pulse={false} />
|
||||
<PostCardSkeleton pulse={false} />
|
||||
<PostCardSkeleton pulse={false} />
|
||||
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center bg-black/10">
|
||||
<p className="text-2xl font-bold text-white">No posts yet</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
{posts.map((p) => {
|
||||
return <PostCard key={p.id} post={p} />;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PostCard(props: {
|
||||
post: RouterOutputs["post"]["all"][number];
|
||||
}) {
|
||||
const trpc = useTRPC();
|
||||
const queryClient = useQueryClient();
|
||||
const deletePost = useMutation(
|
||||
trpc.post.delete.mutationOptions({
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries(trpc.post.pathFilter());
|
||||
},
|
||||
onError: (err) => {
|
||||
toast.error(
|
||||
err.data?.code === "UNAUTHORIZED"
|
||||
? "You must be logged in to delete a post"
|
||||
: "Failed to delete post",
|
||||
);
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="bg-muted flex flex-row rounded-lg p-4">
|
||||
<div className="grow">
|
||||
<h2 className="text-primary text-2xl font-bold">{props.post.title}</h2>
|
||||
<p className="mt-2 text-sm">{props.post.content}</p>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-primary cursor-pointer text-sm font-bold uppercase hover:bg-transparent hover:text-white"
|
||||
onClick={() => deletePost.mutate(props.post.id)}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PostCardSkeleton(props: { pulse?: boolean }) {
|
||||
const { pulse = true } = props;
|
||||
return (
|
||||
<div className="bg-muted flex flex-row rounded-lg p-4">
|
||||
<div className="grow">
|
||||
<h2
|
||||
className={cn(
|
||||
"bg-primary w-1/4 rounded-sm text-2xl font-bold",
|
||||
pulse && "animate-pulse",
|
||||
)}
|
||||
>
|
||||
|
||||
</h2>
|
||||
<p
|
||||
className={cn(
|
||||
"mt-2 w-1/3 rounded-sm bg-current text-sm",
|
||||
pulse && "animate-pulse",
|
||||
)}
|
||||
>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
import { auth } from "~/auth/server";
|
||||
|
||||
export const GET = auth.handler;
|
||||
export const POST = auth.handler;
|
||||
@@ -1,46 +0,0 @@
|
||||
import type { NextRequest } from "next/server";
|
||||
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
|
||||
|
||||
import { appRouter, createTRPCContext } from "@acme/api";
|
||||
|
||||
import { auth } from "~/auth/server";
|
||||
|
||||
/**
|
||||
* Configure basic CORS headers
|
||||
* You should extend this to match your needs
|
||||
*/
|
||||
const setCorsHeaders = (res: Response) => {
|
||||
res.headers.set("Access-Control-Allow-Origin", "*");
|
||||
res.headers.set("Access-Control-Request-Method", "*");
|
||||
res.headers.set("Access-Control-Allow-Methods", "OPTIONS, GET, POST");
|
||||
res.headers.set("Access-Control-Allow-Headers", "*");
|
||||
};
|
||||
|
||||
export const OPTIONS = () => {
|
||||
const response = new Response(null, {
|
||||
status: 204,
|
||||
});
|
||||
setCorsHeaders(response);
|
||||
return response;
|
||||
};
|
||||
|
||||
const handler = async (req: NextRequest) => {
|
||||
const response = await fetchRequestHandler({
|
||||
endpoint: "/api/trpc",
|
||||
router: appRouter,
|
||||
req,
|
||||
createContext: () =>
|
||||
createTRPCContext({
|
||||
auth: auth,
|
||||
headers: req.headers,
|
||||
}),
|
||||
onError({ error, path }) {
|
||||
console.error(`>>> tRPC Error on '${path}'`, error);
|
||||
},
|
||||
});
|
||||
|
||||
setCorsHeaders(response);
|
||||
return response;
|
||||
};
|
||||
|
||||
export { handler as GET, handler as POST };
|
||||
@@ -1,50 +1,49 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import type { Metadata, Viewport } from 'next';
|
||||
import { Geist, Geist_Mono } from 'next/font/google';
|
||||
import { cn } from '@acme/ui';
|
||||
import { ThemeProvider, ThemeToggle } from '@acme/ui/theme';
|
||||
import { Toaster } from '@acme/ui/toast';
|
||||
|
||||
import { cn } from "@acme/ui";
|
||||
import { ThemeProvider, ThemeToggle } from "@acme/ui/theme";
|
||||
import { Toaster } from "@acme/ui/toast";
|
||||
import { env } from '~/env';
|
||||
import { TRPCReactProvider } from '~/trpc/react';
|
||||
|
||||
import { env } from "~/env";
|
||||
import { TRPCReactProvider } from "~/trpc/react";
|
||||
|
||||
import "~/app/styles.css";
|
||||
import '~/app/styles.css';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL(
|
||||
env.VERCEL_ENV === "production"
|
||||
? "https://turbo.t3.gg"
|
||||
: "http://localhost:3000",
|
||||
env.VERCEL_ENV === 'production'
|
||||
? 'https://turbo.t3.gg'
|
||||
: 'http://localhost:3000',
|
||||
),
|
||||
title: "Create T3 Turbo",
|
||||
description: "Simple monorepo with shared backend for web & mobile apps",
|
||||
title: 'Create T3 Turbo',
|
||||
description: 'Simple monorepo with shared backend for web & mobile apps',
|
||||
openGraph: {
|
||||
title: "Create T3 Turbo",
|
||||
description: "Simple monorepo with shared backend for web & mobile apps",
|
||||
url: "https://create-t3-turbo.vercel.app",
|
||||
siteName: "Create T3 Turbo",
|
||||
title: 'Create T3 Turbo',
|
||||
description: 'Simple monorepo with shared backend for web & mobile apps',
|
||||
url: 'https://create-t3-turbo.vercel.app',
|
||||
siteName: 'Create T3 Turbo',
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
site: "@jullerino",
|
||||
creator: "@jullerino",
|
||||
card: 'summary_large_image',
|
||||
site: '@jullerino',
|
||||
creator: '@jullerino',
|
||||
},
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
themeColor: [
|
||||
{ media: "(prefers-color-scheme: light)", color: "white" },
|
||||
{ media: "(prefers-color-scheme: dark)", color: "black" },
|
||||
{ media: '(prefers-color-scheme: light)', color: 'white' },
|
||||
{ media: '(prefers-color-scheme: dark)', color: 'black' },
|
||||
],
|
||||
};
|
||||
|
||||
const geistSans = Geist({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ['latin'],
|
||||
variable: '--font-geist-sans',
|
||||
});
|
||||
const geistMono = Geist_Mono({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ['latin'],
|
||||
variable: '--font-geist-mono',
|
||||
});
|
||||
|
||||
export default function RootLayout(props: { children: React.ReactNode }) {
|
||||
@@ -52,7 +51,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body
|
||||
className={cn(
|
||||
"bg-background text-foreground min-h-screen font-sans antialiased",
|
||||
'bg-background text-foreground min-h-screen font-sans antialiased',
|
||||
geistSans.variable,
|
||||
geistMono.variable,
|
||||
)}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { Suspense } from "react";
|
||||
import { Suspense } from 'react';
|
||||
|
||||
import { HydrateClient, prefetch, trpc } from "~/trpc/server";
|
||||
import { AuthShowcase } from "./_components/auth-showcase";
|
||||
import { HydrateClient, prefetch, trpc } from '~/trpc/server';
|
||||
import { AuthShowcase } from './_components/auth-showcase';
|
||||
import {
|
||||
CreatePostForm,
|
||||
PostCardSkeleton,
|
||||
PostList,
|
||||
} from "./_components/posts";
|
||||
} from './_components/posts';
|
||||
|
||||
export default function HomePage() {
|
||||
prefetch(trpc.post.all.queryOptions());
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "@acme/tailwind-config/theme";
|
||||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
@import '@acme/tailwind-config/theme';
|
||||
|
||||
@source "../../../../packages/ui/src/*.{ts,tsx}";
|
||||
@source '../../../../packages/ui/src/*.{ts,tsx}';
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
@custom-variant light (&:where(.light, .light *));
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import { createEnv } from "@t3-oss/env-nextjs";
|
||||
import { z } from "zod/v4";
|
||||
import { createEnv } from '@t3-oss/env-nextjs';
|
||||
import { z } from 'zod/v4';
|
||||
|
||||
export const env = createEnv({
|
||||
shared: {
|
||||
NODE_ENV: z
|
||||
.enum(["development", "production", "test"])
|
||||
.default("development"),
|
||||
CI: z.boolean().default(false),
|
||||
SITE_URL: z.string().default("http://localhost:3000"),
|
||||
.enum(['development', 'production', 'test'])
|
||||
.default('development'),
|
||||
},
|
||||
/**
|
||||
* Specify your server-side environment variables schema here.
|
||||
@@ -22,6 +20,7 @@ export const env = createEnv({
|
||||
* For them to be exposed to the client, prefix them with `NEXT_PUBLIC_`.
|
||||
*/
|
||||
client: {
|
||||
NEXT_PUBLIC_SITE_URL: z.url(),
|
||||
NEXT_PUBLIC_CONVEX_URL: z.url(),
|
||||
NEXT_PUBLIC_PLAUSIBLE_URL: z.url(),
|
||||
NEXT_PUBLIC_SENTRY_DSN: z.string(),
|
||||
@@ -36,13 +35,15 @@ export const env = createEnv({
|
||||
NODE_ENV: process.env.NODE_ENV,
|
||||
CI: process.env.CI,
|
||||
SITE_URL: process.env.SITE_URL,
|
||||
NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
|
||||
NEXT_PUBLIC_CONVEX_URL: process.env.NEXT_PUBLIC_CONVEX_URL,
|
||||
NEXT_PUBLIC_PLAUSIBLE_URL: process.env.NEXT_PUBLIC_PLAUSIBLE_URL,
|
||||
NEXT_PUBLIC_SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN,
|
||||
NEXT_PUBLIC_SENTRY_URL: process.env.NEXT_PUBLIC_SENTRY_URL,
|
||||
NEXT_PUBLIC_SENTRY_ORG: process.env.NEXT_PUBLIC_SENTRY_ORG,
|
||||
NEXT_PUBLIC_SENTRY_PROJECT_NAME: process.env.NEXT_PUBLIC_SENTRY_PROJECT_NAME,
|
||||
NEXT_PUBLIC_SENTRY_PROJECT_NAME:
|
||||
process.env.NEXT_PUBLIC_SENTRY_PROJECT_NAME,
|
||||
},
|
||||
skipValidation:
|
||||
!!process.env.CI || process.env.npm_lifecycle_event === "lint",
|
||||
!!process.env.CI || process.env.npm_lifecycle_event === 'lint',
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user