From 71ab356168df4c24a3283061d60633cc092d496d Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sat, 13 Jul 2024 00:00:51 -0600
Subject: [PATCH] refactor: update

---
 t3/src/app/_components/post.tsx | 80 +++++++++++++++---------------
 t3/src/app/page.tsx             | 86 ++++++++++++++++-----------------
 2 files changed, 83 insertions(+), 83 deletions(-)

diff --git a/t3/src/app/_components/post.tsx b/t3/src/app/_components/post.tsx
index b6b5cb4..013e7bb 100644
--- a/t3/src/app/_components/post.tsx
+++ b/t3/src/app/_components/post.tsx
@@ -5,46 +5,46 @@ import { useState } from "react";
 import { api } from "@/trpc/react";
 
 export function LatestPost() {
-  const [latestPost] = api.post.getLatest.useSuspenseQuery();
+	const [latestPost] = api.post.getLatest.useSuspenseQuery();
 
-  const utils = api.useUtils();
-  const [name, setName] = useState("");
-  const createPost = api.post.create.useMutation({
-    onSuccess: async () => {
-      await utils.post.invalidate();
-      setName("");
-    },
-  });
+	const utils = api.useUtils();
+	const [name, setName] = useState("");
+	const createPost = api.post.create.useMutation({
+		onSuccess: async () => {
+			await utils.post.invalidate();
+			setName("");
+		},
+	});
 
-  return (
-    <div className="w-full max-w-xs">
-      {latestPost ? (
-        <p className="truncate">Your most recent post: {latestPost.name}</p>
-      ) : (
-        <p>You have no posts yet.</p>
-      )}
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          createPost.mutate({ name });
-        }}
-        className="flex flex-col gap-2"
-      >
-        <input
-          type="text"
-          placeholder="Title"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          className="w-full rounded-full px-4 py-2 text-black"
-        />
-        <button
-          type="submit"
-          className="rounded-full bg-white/10 px-10 py-3 font-semibold transition hover:bg-white/20"
-          disabled={createPost.isPending}
-        >
-          {createPost.isPending ? "Submitting..." : "Submit"}
-        </button>
-      </form>
-    </div>
-  );
+	return (
+		<div className="w-full max-w-xs">
+			{latestPost ? (
+				<p className="truncate">Your most recent post: {latestPost.name}</p>
+			) : (
+				<p>You have no posts yet.</p>
+			)}
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					createPost.mutate({ name });
+				}}
+				className="flex flex-col gap-2"
+			>
+				<input
+					type="text"
+					placeholder="Title"
+					value={name}
+					onChange={(e) => setName(e.target.value)}
+					className="w-full rounded-full px-4 py-2 text-black"
+				/>
+				<button
+					type="submit"
+					className="rounded-full bg-white/10 px-10 py-3 font-semibold transition hover:bg-white/20"
+					disabled={createPost.isPending}
+				>
+					{createPost.isPending ? "Submitting..." : "Submit"}
+				</button>
+			</form>
+		</div>
+	);
 }
diff --git a/t3/src/app/page.tsx b/t3/src/app/page.tsx
index d473a0d..efc0e83 100644
--- a/t3/src/app/page.tsx
+++ b/t3/src/app/page.tsx
@@ -4,50 +4,50 @@ import { LatestPost } from "@/app/_components/post";
 import { api, HydrateClient } from "@/trpc/server";
 
 export default async function Home() {
-  const hello = await api.post.hello({ text: "from tRPC" });
+	const hello = await api.post.hello({ text: "from tRPC" });
 
-  void api.post.getLatest.prefetch();
+	// void api.post.getLatest.prefetch();
 
-  return (
-    <HydrateClient>
-      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
-        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
-          <h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
-            Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
-          </h1>
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
-            <Link
-              className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
-              href="https://create.t3.gg/en/usage/first-steps"
-              target="_blank"
-            >
-              <h3 className="text-2xl font-bold">First Steps →</h3>
-              <div className="text-lg">
-                Just the basics - Everything you need to know to set up your
-                database and authentication.
-              </div>
-            </Link>
-            <Link
-              className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
-              href="https://create.t3.gg/en/introduction"
-              target="_blank"
-            >
-              <h3 className="text-2xl font-bold">Documentation →</h3>
-              <div className="text-lg">
-                Learn more about Create T3 App, the libraries it uses, and how
-                to deploy it.
-              </div>
-            </Link>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <p className="text-2xl text-white">
-              {hello ? hello.greeting : "Loading tRPC query..."}
-            </p>
-          </div>
+	return (
+		<HydrateClient>
+			<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
+				<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
+					<h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
+						Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
+					</h1>
+					<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
+						<Link
+							className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
+							href="https://create.t3.gg/en/usage/first-steps"
+							target="_blank"
+						>
+							<h3 className="text-2xl font-bold">First Steps →</h3>
+							<div className="text-lg">
+								Just the basics - Everything you need to know to set up your
+								database and authentication.
+							</div>
+						</Link>
+						<Link
+							className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
+							href="https://create.t3.gg/en/introduction"
+							target="_blank"
+						>
+							<h3 className="text-2xl font-bold">Documentation →</h3>
+							<div className="text-lg">
+								Learn more about Create T3 App, the libraries it uses, and how
+								to deploy it.
+							</div>
+						</Link>
+					</div>
+					<div className="flex flex-col items-center gap-2">
+						<p className="text-2xl text-white">
+							{hello ? hello.greeting : "Loading tRPC query..."}
+						</p>
+					</div>
 
-          <LatestPost />
-        </div>
-      </main>
-    </HydrateClient>
-  );
+					<LatestPost />
+				</div>
+			</main>
+		</HydrateClient>
+	);
 }