Add social links page

prisma/schema.prisma

@@ -8,7 +8,7 @@ datasource db {
 }
 
 model Post {
-    id        String      @id @map("_id") @default(uuid())
+  id             String   @id @default(uuid()) @map("_id")
   type           String
   name           String
   reviewContents String
@@ -22,9 +22,17 @@ model Post {
   @@index([name])
 }
 
+model SocialLink {
+  id   String @id @default(uuid()) @map("_id")
+  name String
+  url  String
+
+  @@index([name])
+}
+
 // Necessary for Next auth
 model Account {
-    id                String  @id @map("_id") @default(cuid())
+  id                String  @id @default(cuid()) @map("_id")
   userId            String
   type              String
   provider          String
@@ -42,7 +50,7 @@ model Account {
 }
 
 model Session {
-    id           String   @id @map("_id") @default(cuid())
+  id           String   @id @default(cuid()) @map("_id")
   sessionToken String   @unique
   userId       String
   expires      DateTime
@@ -50,7 +58,7 @@ model Session {
 }
 
 model User {
-    id            String    @id @map("_id") @default(cuid())
+  id            String    @id @default(cuid()) @map("_id")
   name          String?
   email         String?   @unique
   emailVerified DateTime?

src/components/ProjectsCard.tsx

@@ -3,7 +3,6 @@ import Link from "next/link"
 type ProjectCardProps = {
     name: string,
     subHeading?: string,
-    key: string,
     description: string,
     urlTo: string
 }
@@ -11,8 +10,8 @@ type ProjectCardProps = {
 export default function ProjectCard(props: ProjectCardProps) {
     return (
         <Link href={props.urlTo} target="_blank" rel="noreferrer">
-            <div className="mx-auto text-center justify-center flex">
+            <div className="mx-auto justify-center flex">
-                <div key={props.key} className="w-1/2 rounded-lf relative">
+                <div className="w-1/2 rounded-lf relative">
                     <div className="top-0 left-0 p-2 bg-gray-800">
                         <p className="font-bold">{props.name}</p>
                         <p className="pb-2">{props.subHeading}</p>

src/components/SocialCard.tsx

@@ -0,0 +1,16 @@
+import Link from "next/link"
+
+type SocialCardProps = {
+    name: string,
+    url: string
+}
+
+export default function SocialMediaCard(props: SocialCardProps) {
+    return (
+        <div className="bg-gray-500 rounded-lg text-center max-w-sm p-4 mx-auto">
+            <Link href={props.url}>
+                {props.name}
+            </Link>
+        </div>
+    )
+}

src/pages/links.tsx

@@ -0,0 +1,40 @@
+import Header from "@/components/header";
+import Footer from "@/components/footer";
+import SocialCard from '@/components/SocialCard'
+import Dropdown from "@/components/Dropdown";
+import { api } from "@/utils/api";
+import React, {useEffect, useState} from 'react';
+
+export default function Links() {
+    const {data: linkData} = api.links.getAll.useQuery()
+    const [formatted, setFormatted] = useState<React.JSX.Element[] | null>(null)
+
+    useEffect(() => {
+        if (linkData) {
+            setFormatted(
+                linkData.map((v) => {
+                    return <SocialCard url={v.url} name={v.name} key={v.name} />
+                })
+            )
+        }
+    }, [linkData])
+
+    return (
+        <main className="min-h-screen bg-black">
+            <div className="w-1/2 mx-auto text-white">
+                <Header />
+
+                {formatted}
+                
+                {/* {
+                    formatted ?
+                    <Dropdown content={formatted} name="Social Dropdown" />
+                    :
+                    <h1>There&apos;s nothing here :(</h1>
+                } */}
+
+                <Footer />
+            </div>
+        </main>
+    )
+}

src/pages/reviews/create.tsx

@@ -8,7 +8,8 @@ import { api } from "@/utils/api";
 
 export default function Page() {
     const { data: session, status } = useSession()
-    const mutation = api.post.create.useMutation()
+    const postMutation = api.post.create.useMutation()
+    const linksMutation = api.links.create.useMutation()
     const [loading, setLoading] = useState(true)
 
     useEffect(() => {
@@ -26,7 +27,7 @@ export default function Page() {
         return title.replaceAll(" ", "-").toLowerCase()
     }
 
-    function onSubmit(event: FormEvent<HTMLFormElement>) {
+    function onPostSubmit(event: FormEvent<HTMLFormElement>) {
         event.preventDefault()
         const form = event.target as HTMLFormElement
 
@@ -42,7 +43,22 @@ export default function Page() {
             type: typeElement.value
         }
 
-        mutation.mutate(object)
+        postMutation.mutate(object)
+    }
+
+    function onLinkSubmit(event: FormEvent<HTMLFormElement>) {
+        event.preventDefault()
+        const form = event.target as HTMLFormElement
+
+        const titleElement = form.elements.namedItem('title') as HTMLInputElement;
+        const urlElement = form.elements.namedItem('url') as HTMLInputElement;
+
+        const object = {
+            name: sanitizeTitleForLink(titleElement.value),
+            url: urlElement.value
+        }
+
+        linksMutation.mutate(object)
     }
 
     if (!loading) {
@@ -50,7 +66,7 @@ export default function Page() {
             <main className="min-h-screen bg-black color-white">
                 <div className="w-1/2 mx-auto text-white">
                     <Header />
-                    <form onSubmit={onSubmit} className="text-black">
+                    <form onSubmit={onPostSubmit} className="text-black">
                         <div className="bg-gray-500 text-center">
                             <label className="font-bold">Title</label><br />
                             <input name="title" type="text" /><br />
@@ -67,6 +83,18 @@ export default function Page() {
                             <button type="submit">submit</button>
                         </div>
                     </form>
+
+                    <form onSubmit={onLinkSubmit} className="text-black">
+                        <div className="bg-gray-500 text-center">
+                            <label className="font-bold">Title</label><br />
+                            <input name="title" type="text" /><br />
+
+                            <label className="font-bold">URL</label><br />
+                            <input name="url" type="text" /><br />
+
+                            <button type="submit">submit</button>
+                        </div>
+                    </form>
                     <Footer />
                 </div>
             </main>

src/pages/reviews/index.tsx

@@ -43,6 +43,9 @@ export default function Reviews() {
         if (itemData) {
             const filteredArray = itemData.filter(v => v.type == type.toLowerCase())
 
+            if (filteredArray.length <= 0) {
+                setList(null)
+            } else {
                 setList(
                     filteredArray.map((v: GenericItemType, k) => {
                         return <ReviewCard 
@@ -55,6 +58,7 @@ export default function Reviews() {
                     })
                 )
             }
+        }
     }, [itemData, type])
 
     return (
@@ -77,7 +81,13 @@ export default function Reviews() {
                 </p>
 
                 <div className="flex flex-wrap justify-center">
-                    {list}
+                    {
+                        list ? list
+                        : <div className="text-center">
+                            <h1>Nothing here!</h1>
+                            <p>Try again later :(</p>
+                        </div>
+                    }
                 </div>
             </div>
             <Footer />

src/server/api/root.ts

@@ -1,4 +1,5 @@
 import { postRouter } from "@/server/api/routers/post";
+import { linksRouter } from "./routers/links";
 import { createTRPCRouter } from "@/server/api/trpc";
 
 /**
@@ -8,6 +9,7 @@ import { createTRPCRouter } from "@/server/api/trpc";
  */
 export const appRouter = createTRPCRouter({
   post: postRouter,
+  links: linksRouter
 });
 
 // export type definition of API

src/server/api/routers/links.ts

@@ -0,0 +1,41 @@
+import {z} from "zod";
+import {
+    createTRPCRouter,
+    publicProcedure,
+    protectedProcedure
+} from "@/server/api/trpc";
+
+export const linksRouter = createTRPCRouter({
+    create: protectedProcedure
+        .input(
+            z.object({
+                name: z.string().min(1),
+                url: z.string().min(1),
+                type: z.string().min(1)
+            })
+        )
+        .mutation(async ({ctx, input}) => {
+            return ctx.db.socialLink.create({
+                data: {
+                    name: input.name,
+                    url: input.url,
+                    type: input.type
+                }
+            })
+        }),
+    delete: protectedProcedure
+        .input(
+            z.string().min(1)
+        )
+        .query(async ({ctx, input}) => {
+            return ctx.db.socialLink.delete({
+                where: {
+                    id: input
+                }
+            })
+        }),
+    getAll: publicProcedure
+        .query(async ({ctx}) => {
+            return ctx.db.socialLink.findMany()
+        })
+})

src/server/api/routers/post.ts

@@ -28,6 +28,18 @@ export const postRouter = createTRPCRouter({
       });
     }),
 
+  delete: protectedProcedure
+    .input(
+      z.string().min(1)
+    )
+    .query(async ({ctx, input}) => {
+      return ctx.db.post.delete({
+        where: {
+          id: input
+        }
+      })
+    }),
+
   getOne: publicProcedure
   .input(String)
   .query(({ ctx, input }) => {