refactor(web): Use self-documenting variable names

4 files changed, 25 insertions, 21 deletions

diff --git a/packages/web/src/app/_components/post.tsx b/packages/web/src/app/_components/post.tsx
index 532fc91..9a1251f 100644
--- a/packages/web/src/app/_components/post.tsx
+++ b/packages/web/src/app/_components/post.tsx
@@ -5,11 +5,11 @@ import { api } from "~/trpc/react";
 
 export function LatestPost() {
 	const [latestPost] = api.post.getLatest.useSuspenseQuery();
-	const utils = api.useUtils();
+	const trpcUtilities = api.useUtils();
 	const [name, setName] = useState("");
 	const createPost = api.post.create.useMutation({
 		onSuccess: async () => {
-			await utils.post.invalidate();
+			await trpcUtilities.post.invalidate();
 			setName("");
 		},
 	});
@@ -23,14 +23,16 @@ export function LatestPost() {
 			)}
 			<form
 				className="flex flex-col gap-2"
-				onSubmit={(e) => {
-					e.preventDefault();
+				onSubmit={(formSubmitEvent) => {
+					formSubmitEvent.preventDefault();
 					createPost.mutate({ name });
 				}}
 			>
 				<input
 					className="w-full rounded-full bg-white/10 px-4 py-2 text-white"
-					onChange={(e) => setName(e.target.value)}
+					onChange={(inputChangeEvent) =>
+						setName(inputChangeEvent.target.value)
+					}
 					placeholder="Title"
 					type="text"
 					value={name}
diff --git a/packages/web/src/server/api/trpc.ts b/packages/web/src/server/api/trpc.ts
index e4dd0ab..56dcb4c 100644
--- a/packages/web/src/server/api/trpc.ts
+++ b/packages/web/src/server/api/trpc.ts
@@ -42,7 +42,7 @@ export const createTRPCContext = async (opts: { headers: Headers }) => {
  * ZodErrors so that you get typesafety on the frontend if your procedure fails due to validation
  * errors on the backend.
  */
-const t = initTRPC.context<typeof createTRPCContext>().create({
+const trpcInstance = initTRPC.context<typeof createTRPCContext>().create({
 	transformer: superjson,
 	errorFormatter({ shape, error }) {
 		return {
@@ -61,7 +61,7 @@ const t = initTRPC.context<typeof createTRPCContext>().create({
  *
  * @see https://trpc.io/docs/server/server-side-calls
  */
-export const createCallerFactory = t.createCallerFactory;
+export const createCallerFactory = trpcInstance.createCallerFactory;
 
 /**
  * 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
@@ -75,7 +75,7 @@ export const createCallerFactory = t.createCallerFactory;
  *
  * @see https://trpc.io/docs/router
  */
-export const createTRPCRouter = t.router;
+export const createTRPCRouter = trpcInstance.router;
 
 /**
  * Middleware for timing procedure execution and adding an artificial delay in development.
@@ -83,10 +83,10 @@ export const createTRPCRouter = t.router;
  * You can remove this if you don't like it, but it can help catch unwanted waterfalls by simulating
  * network latency that would occur in production but not in local development.
  */
-const timingMiddleware = t.middleware(async ({ next, path }) => {
+const timingMiddleware = trpcInstance.middleware(async ({ next, path }) => {
 	const start = Date.now();
 
-	if (t._config.isDev) {
+	if (trpcInstance._config.isDev) {
 		// artificial delay in dev
 		const waitMs = Math.floor(Math.random() * 400) + 100;
 
@@ -108,7 +108,7 @@ const timingMiddleware = t.middleware(async ({ next, path }) => {
  * guarantee that a user querying is authorized, but you can still access user session data if they
  * are logged in.
  */
-export const publicProcedure = t.procedure.use(timingMiddleware);
+export const publicProcedure = trpcInstance.procedure.use(timingMiddleware);
 
 /**
  * Protected (authenticated) procedure
@@ -118,7 +118,7 @@ export const publicProcedure = t.procedure.use(timingMiddleware);
  *
  * @see https://trpc.io/docs/procedures
  */
-export const protectedProcedure = t.procedure
+export const protectedProcedure = trpcInstance.procedure
 	.use(timingMiddleware)
 	.use(({ ctx, next }) => {
 		if (!ctx.user) {
diff --git a/packages/web/src/server/db/schema.ts b/packages/web/src/server/db/schema.ts
index aae0ace..6b3965a 100644
--- a/packages/web/src/server/db/schema.ts
+++ b/packages/web/src/server/db/schema.ts
@@ -9,15 +9,17 @@ import { index, pgTableCreator } from "drizzle-orm/pg-core";
 export const createTable = pgTableCreator((name) => `web_${name}`);
 export const posts = createTable(
 	"post",
-	(d) => ({
-		id: d.integer().primaryKey().generatedByDefaultAsIdentity(),
-		name: d.varchar({ length: 256 }),
-		createdById: d.varchar({ length: 255 }).notNull(),
-		createdAt: d
+	(columnBuilder) => ({
+		id: columnBuilder.integer().primaryKey().generatedByDefaultAsIdentity(),
+		name: columnBuilder.varchar({ length: 256 }),
+		createdById: columnBuilder.varchar({ length: 255 }).notNull(),
+		createdAt: columnBuilder
 			.timestamp({ withTimezone: true })
 			.$defaultFn(() => new Date())
 			.notNull(),
-		updatedAt: d.timestamp({ withTimezone: true }).$onUpdate(() => new Date()),
+		updatedAt: columnBuilder
+			.timestamp({ withTimezone: true })
+			.$onUpdate(() => new Date()),
 	}),
 	(t) => [
 		index("created_by_idx").on(t.createdById),
diff --git a/packages/web/src/trpc/server.ts b/packages/web/src/trpc/server.ts
index 4bebc5a..59b463d 100644
--- a/packages/web/src/trpc/server.ts
+++ b/packages/web/src/trpc/server.ts
@@ -11,12 +11,12 @@ import { createQueryClient } from "./query-client";
  * handling a tRPC call from a React Server Component.
  */
 const createContext = cache(async () => {
-	const heads = new Headers(await headers());
+	const requestHeaders = new Headers(await headers());
 
-	heads.set("x-trpc-source", "rsc");
+	requestHeaders.set("x-trpc-source", "rsc");
 
 	return createTRPCContext({
-		headers: heads,
+		headers: requestHeaders,
 	});
 });
 const getQueryClient = cache(createQueryClient);