refactor: Remove redundant code

SameerJadav · Jul 9, 2023 · 370e6ec · 370e6ec
1 parent ffff032
commit 370e6ec
Show file tree

Hide file tree

Showing 10 changed files with 127 additions and 145 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,12 +1,11 @@
 import { type Metadata } from "next"
-import { Inter, Noto_Serif_Display } from "next/font/google"
+import { Inter } from "next/font/google"
 import { ClerkProvider } from "@clerk/nextjs"
 import { siteConfig } from "~/config"
 import { cn } from "~/lib/utils"
 import "~/styles/globals.css"
 
 const inter = Inter({ subsets: ["latin"] })
-export const noto = Noto_Serif_Display({ subsets: ["latin"] })
 
 export const metadata: Metadata = {
   title: {
@@ -74,7 +73,7 @@ export default function RootLayout({
     <ClerkProvider>
       <html lang="en">
         <body className={cn("antialiased", inter.className)}>
-          <main className="mx-auto w-full max-w-xl px-4 py-6 md:p-0">
+          <main className="mx-auto w-full max-w-xl px-4 md:p-0">
             {children}
           </main>
         </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,25 +1,30 @@
-import { fetchPosts } from "~/server/posts"
-import Heading from "~/components/Heading"
-import Nav from "~/components/Nav"
-import PostWizard from "~/components/PostWizard"
+import { currentUser } from "@clerk/nextjs"
+import { fetchPosts } from "~/server/post"
+import CreatePostWizard from "~/components/CreatePostWizard"
+import Footer from "~/components/Footer"
+import SignIn from "~/components/SignIn"
 
 export default async function Home() {
-  const data = await fetchPosts()
+  const entries = await fetchPosts()
+  const user = await currentUser()
   return (
     <>
-      <Heading />
-      <PostWizard />
+      <div className="sticky top-0 bg-slate1/90 backdrop-blur">
+        <h1 className="text-3xl font-bold pt-6">Sign my guestbook</h1>
+        <div className="mt-6 border-b border-slate6 pb-6">
+          {user ? <CreatePostWizard /> : <SignIn />}
+        </div>
+      </div>
+
       <div className="mt-6 space-y-2">
-        {data.map((data) => (
-          <p key={data.post.id}>
-            <span className="text-slate11">
-              {data.author?.firstName} {data.author?.lastName}:
-            </span>{" "}
-            {data.post.content}
+        {entries.map((entry) => (
+          <p key={entry.post.id}>
+            <span className="text-slate11">{entry.author.firstName}:</span>{" "}
+            {entry.post.content}
           </p>
         ))}
       </div>
-      <Nav />
+      <Footer />
     </>
   )
 }
diff --git a/src/components/CreatePostWizard.tsx b/src/components/CreatePostWizard.tsx
@@ -0,0 +1,39 @@
+import { auth } from "@clerk/nextjs"
+import { prisma } from "~/server/db"
+import { Button } from "./ui/button"
+
+export default function CreatePostWizard() {
+  async function createPost() {
+    "use server"
+
+    const { userId } = auth()
+
+    if (!userId) throw new Error("User ID not found")
+
+    const post = await prisma.post.create({
+      data: {
+        authorId: userId,
+        content: "testing of appDir",
+      },
+    })
+
+    return post
+  }
+
+  return (
+    <form
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      action={createPost}
+      className="flex items-center gap-2 rounded-md border border-slate7 bg-slate3 p-2 transition-colors hover:border-slate8 hover:bg-slate4"
+    >
+      <input
+        type="text"
+        name="message"
+        id="message"
+        className="flex-1 bg-transparent p-0 outline-none placeholder:text-slate11"
+        placeholder="Your message..."
+      />
+      <Button size="sm">Sign</Button>
+    </form>
+  )
+}
diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
@@ -0,0 +1,27 @@
+import { cn } from "~/lib/utils"
+
+interface ExternalLinkProps {
+  href: string
+  className?: string
+  children: React.ReactNode
+}
+
+export default function ExternalLink({
+  href,
+  className,
+  children,
+}: ExternalLinkProps) {
+  return (
+    <a
+      className={cn(
+        "underline decoration-slate7 underline-offset-2 transition-colors hover:text-slate11 hover:decoration-slate8",
+        className,
+      )}
+      target="_blank"
+      rel="noopener noreferrer"
+      href={href}
+    >
+      {children}
+    </a>
+  )
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,14 @@
+import { siteConfig } from "~/config"
+import ExternalLink from "./ExternalLink"
+
+export default function Footer() {
+  return (
+    <footer className="mt-6 flex items-center justify-center gap-2 border-t border-slate6 py-6">
+      <ExternalLink href={siteConfig.links.twitter}>Twitter</ExternalLink>∙
+      <ExternalLink href={siteConfig.links.github}>Github</ExternalLink>∙
+      <ExternalLink href={siteConfig.links.linkedin}>LinkedIn</ExternalLink>∙
+      <ExternalLink href={siteConfig.links.instagram}>Instagram</ExternalLink>∙
+      <ExternalLink href={siteConfig.links.mail}>Mail</ExternalLink>
+    </footer>
+  )
+}
diff --git a/src/components/Heading.tsx b/src/components/Heading.tsx
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
diff --git a/src/components/PostWizard.tsx b/src/components/PostWizard.tsx
diff --git a/src/components/SignIn.tsx b/src/components/SignIn.tsx
@@ -0,0 +1,21 @@
+import Link from "next/link"
+import { LogIn } from "lucide-react"
+import { cn } from "~/lib/utils"
+import { buttonVariants } from "./ui/button"
+
+export default function SignIn() {
+  return (
+    <Link
+      href="/sign-in"
+      className={cn(
+        buttonVariants({
+          variant: "secondary",
+        }),
+        "gap-2",
+      )}
+    >
+      <LogIn size={16} />
+      <span>Sign in with Google</span>
+    </Link>
+  )
+}
diff --git a/src/server/posts.ts → src/server/post.ts b/src/server/posts.ts → src/server/post.ts
@@ -7,13 +7,11 @@ const filterUserForClient = (user: User) => {
   return {
     id: user.id,
     firstName: user.firstName,
-    lastName: user.lastName,
   }
 }
 
 export async function fetchPosts() {
   try {
-    // Fetch posts
     const posts = await prisma.post.findMany({
       take: 100,
       orderBy: {
@@ -22,11 +20,11 @@ export async function fetchPosts() {
     })
 
     // Extract author IDs from the posts
-    const authorIds = posts.map((post) => post.authorId)
+    const authorId = posts.map((post) => post.authorId)
 
     // Fetch user data concurrently
     const usersPromise = clerkClient.users.getUserList({
-      userId: authorIds,
+      userId: authorId,
       limit: 100,
     })
 
@@ -39,6 +37,9 @@ export async function fetchPosts() {
     // Combine each post with its respective author
     const postsWithAuthors = posts.map((post) => {
       const author = authors.find((author) => author.id === post.authorId)
+
+      if (!author) throw new Error(`Author not found for post ${post.id}`)
+
       return {
         post,
         author,