Building a Full-Stack App With t3 [2023]

// prisma/schema.prisma

datasource 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 auth
model 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 API
export 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;