Add social links page

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,17 +43,21 @@ export default function Reviews() {
         if (itemData) {
             const filteredArray = itemData.filter(v => v.type == type.toLowerCase())
 
-            setList(
-                filteredArray.map((v: GenericItemType, k) => {
-                    return <ReviewCard 
-                        key={k}
-                        title={v.name}
-                        url={`/reviews/${sanitizeTitleForLink(v.name)}`}
-                        image={v.image}
-                        showText={false}
-                    />
-                })
-            )
+            if (filteredArray.length <= 0) {
+                setList(null)
+            } else {
+                setList(
+                    filteredArray.map((v: GenericItemType, k) => {
+                        return <ReviewCard 
+                            key={k}
+                            title={v.name}
+                            url={`/reviews/${sanitizeTitleForLink(v.name)}`}
+                            image={v.image}
+                            showText={false}
+                        />
+                    })
+                )
+            }
         }
     }, [itemData, type])
 
@@ -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 />