Building a Full-Stack App With t3 [2023]

// prisma/schema.prismadatasource db {    provider = "postgresql"    // NOTE: When using postgresql, mysql or sqlserver, uncomment the @db.Text annotations in model Account below    // Further reading:    // https://next-auth.js.org/adapters/prisma#create-the-prisma-schema    // https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference#string    url      = env("DATABASE_URL")}model Example {    id        String   @id @default(cuid())    createdAt DateTime @default(now())    updatedAt DateTime @updatedAt}// Necessary for Next authmodel Account {    id                String  @id @default(cuid())    userId            String    type              String    provider          String    providerAccountId String    refresh_token     String? @db.Text    access_token      String? @db.Text    expires_at        Int?    token_type        String?    scope             String?    id_token          String? @db.Text    session_state     String?    user              User    @relation(fields: [userId], references: [id], onDelete: Cascade)    @@unique([provider, providerAccountId])}

import { type NextPage } from "next";import { signIn, signOut, useSession } from "next-auth/react";const Home: NextPage = () => {  const { data: session } = useSession();  return (    <main>      <div className="flex justify-center pt-10">        <div className="text-xl">Rikes Blog Powered by t3</div>      </div>      <div className="flex justify-end pr-10">        {session?.user ? (          <button onClick={() => signOut()}>            Log Out of {session.user.name}          </button>        ) : (          <button onClick={() => signIn()}>Login with Discord</button>        )}      </div>    </main>  );};export default Home;

import { createTRPCRouter, publicProcedure } from "../trpc";export const postRouter = createTRPCRouter({  getAll: publicProcedure.query(({ ctx }) => {    return ctx.prisma.post.findMany();  }),});

import { z } from "zod";import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";export const postRouter = createTRPCRouter({  getAll: publicProcedure.query(({ ctx }) => {    return ctx.prisma.post.findMany();  }),  newPost: protectedProcedure    .input(      z.object({        user: z.string(),        title: z.string(),        body: z.string(),      })    )    .mutation(async ({ ctx, input }) => {      try {        await ctx.prisma.post.create({          data: {            userId: input.user,            title: input.title,            body: input.body,          },        });      } catch (error) {        console.log(error);      }    }),});

import { createTRPCRouter } from "./trpc";import { postRouter } from "./routers/Post";/** * This is the primary router for your server. * * All routers added in /api/routers should be manually added here */export const appRouter = createTRPCRouter({  post: postRouter,});// export type definition of APIexport type AppRouter = typeof appRouter;

import { type NextPage } from "next";import { signIn, signOut, useSession } from "next-auth/react";import { useState } from "react";import { api } from "../utils/api";const Home: NextPage = () => {  const { data: session } = useSession();  return (    <main>      <div className="flex justify-center pt-10">        <div className="text-xl">Rikes Blog Powered by t3</div>      </div>      <div className="flex justify-end pr-10">        {session?.user ? (          <button onClick={() => signOut()}>            Log Out of {session.user.name}          </button>        ) : (          <button onClick={() => signIn()}>Login with Discord</button>        )}      </div>      <Blog />      {session?.user ? (        <Entry user={session.user} />      ) : (        <div>Please Login to make a new entry</div>      )}    </main>  );};const Blog: NextPage = () => {  const { data: blogPosts } = api.post.getAll.useQuery();  return (    <div className="p-20">      {blogPosts?.map((post, indx) => (        <div className="rounded-lg border p-10" key={indx}>          <div className="flex justify-center pb-10 font-bold">            {post.title}          </div>          <div>{post.body}</div>        </div>      ))}    </div>  );};const Entry: NextPage<{ user: any }> = ({ user }) => {  // const session = useSession()  const [post, setPost] = useState("");  const [title, setTitle] = useState("");  const newPost = api.post.newPost.useMutation();  return (    <div>      <form        className="flex gap-2"        onSubmit={(event) => {          event.preventDefault();          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access          newPost.mutate({ user: user.id, body: post, title: "yo" });          setTitle("");          setPost("");        }}      >        <input          type={"text"}          value={title}          placeholder="title.."          onChange={(e) => setTitle(e.target.value)}          className="rounded-md border-2 border-zinc-800 bg-neutral-900 px-4 py-2 focus:outline-none"        />        <textarea          value={post}          placeholder="Blog Here..."          onChange={(event) => setPost(event.target.value)}          className="w-full rounded-md border-2 border-zinc-800 bg-neutral-900 px-4 py-2 focus:outline-none"        />        <button          type="submit"          className="rounded-md border-2 border-zinc-800 p-2 focus:outline-none"        >          Submit        </button>      </form>    </div>  );};export default Home;