pretty much finish web

2023-10-22 18:56:14 -04:00
parent b08637ea2a
commit 70ab580e2c
15 changed files with 283 additions and 121 deletions
@@ -0,0 +1,17 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+ 
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
@@ -1,80 +0,0 @@
-import { signIn, signOut, useSession } from "next-auth/react";
-import Head from "next/head";
-import Link from "next/link";
-
-import { api } from "@/utils/api";
-
-export default function Home() {
-  const hello = api.post.hello.useQuery({ text: "from tRPC" });
-
-  return (
-    <>
-      <Head>
-        <title>Create T3 App</title>
-        <meta name="description" content="Generated by create-t3-app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main className=" flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
-        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
-          <h1 className="text-5xl font-extrabold tracking-tight text-white 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 text-white 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 text-white 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.data ? hello.data.greeting : "Loading tRPC query..."}
-            </p>
-            <AuthShowcase />
-          </div>
-        </div>
-      </main>
-    </>
-  );
-}
-
-function AuthShowcase() {
-  const { data: sessionData } = useSession();
-
-  const { data: secretMessage } = api.post.getSecretMessage.useQuery(
-    undefined, // no input
-    { enabled: sessionData?.user !== undefined }
-  );
-
-  return (
-    <div className="flex flex-col items-center justify-center gap-4">
-      <p className="text-center text-2xl text-white">
-        {sessionData && <span>Logged in as {sessionData.user?.name}</span>}
-        {secretMessage && <span> - {secretMessage}</span>}
-      </p>
-      <button
-        className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
-        onClick={sessionData ? () => void signOut() : () => void signIn()}
-      >
-        {sessionData ? "Sign out" : "Sign in"}
-      </button>
-    </div>
-  );
-}
@@ -1,13 +1,13 @@
-import { signIn, signOut, useSession } from "next-auth/react";
-import Head from "next/head"
 import Header from "@/components/header";
+import Footer from "@/components/footer";

 export default function Home() {
    return (
-        <main className="min-h-screen bg-black color-white">
+        <main className="min-h-screen bg-black">
            <div className="w-1/2 mx-auto text-white">
                <Header />
                <p>test</p>
+                <Footer />
            </div>
        </main>
    )
@@ -1,17 +1,47 @@
 import {useRouter} from 'next/router';
-import {useState, useEffect} from 'react'
+import Header from '@/components/header';
+import Footer from "@/components/footer";
+import Image from 'next/image';
 import {api} from '@/utils/api'
-import { useSession } from 'next-auth/react';
+import Link from 'next/link';

 export default function ReviewPage() {
    const router = useRouter()
    const name = router.query.name as string
    const {data: bookData} = api.post.getOne.useQuery(name)
-    const [view,setView] = useState(null)

-    return (
-        <>
-            <p>Post: {router.query.name}</p>
-        </>
-    )
+    if (bookData) {
+        return (
+            <main className="min-h-screen bg-black text-white">
+                <Header />
+                <div className="mx-auto w-1/2 text-center flex justify-center text-white">
+                    <Image src={bookData.image} width="150" height="150" alt={`${bookData.name} ${bookData.type} cover`} />
+                </div>
+
+                <div className="mx-auto w-1/2 text-center">
+                    <h1 className="text-2xl font-bold">{bookData.name}</h1>
+                    <hr />
+                    {bookData.reviewContents}
+                </div>
+                <Footer />
+            </main>
+        )
+    } else {
+        return (
+            <main className="min-h-screen bg-black text-white flex flex-col justify-center items-centers">
+                <Header />
+                <div className="text-center text-2xl font-bold">
+                    <p>Well, that&apos;s not good..</p>
+                </div>
+
+                <div className="text-center">
+                    <p>You&apos;ve reached a page that doesn&apos;t exist. Lets fix that.</p>
+                    <Link href="/" className="hover:underline hover:cursor-pointer hover:text-gray-500">
+                        Head Home
+                    </Link>
+                </div>
+                <Footer />
+            </main>
+        )
+    }
 }
@@ -1,6 +1,8 @@
 import {useSession, getSession} from 'next-auth/react';
-import {useState, useEffect, FormEvent} from 'react';
+import {useState, useEffect} from 'react';
+import type {FormEvent} from 'react';
 import Header from '@/components/header';
+import Footer from "@/components/footer";
 import Router from 'next/router';
 import { api } from "@/utils/api";

@@ -12,17 +14,23 @@ export default function Page() {
    useEffect(() => {
        if (status == "unauthenticated") {
            console.log('user is unauthenticated!')
-            Router.replace('/')
+            Router.replace('/').catch(() => {
+                console.error("Failed to reroute user!")
+            })
        } else {
            setLoading(false)
        }
    }, [status])

+    function sanitizeTitleForLink(title: string) {
+        return title.replaceAll(" ", "-").toLowerCase()
+    }
+
    function onSubmit(event: FormEvent<HTMLFormElement>) {
        event.preventDefault()

        const object = {
-            name: event.target.title.value,
+            name: sanitizeTitleForLink(event.target.title.value),
            reviewContents: event.target.review.value,
            image: event.target.image.value,
            type: event.target.type.value
@@ -48,11 +56,12 @@ export default function Page() {
                            <input name="type" type="text" /><br />

                            <label className="font-bold">Review</label><br />
-                            <textarea name="review" />
+                            <textarea name="review" /><br />

                            <button type="submit">submit</button>
                        </div>
                    </form>
+                    <Footer />
                </div>
            </main>
        )
@@ -1,7 +1,9 @@
 import Header from "@/components/header"
+import Footer from "@/components/footer";
 import ReviewCard from "@/components/ReviewCard"
 import {useSession} from 'next-auth/react';
 import {useState, useEffect} from 'react';
+import Link from 'next/link';
 import { api } from "@/utils/api";

 type GenericItemType = {
@@ -13,35 +15,72 @@ export default function Reviews() {
    const { data: sessionData, status } = useSession();
    const {data: itemData} = api.post.getAll.useQuery()
    const [list, setList] = useState<null | JSX.Element[]>(null)
+    const [type, setType] = useState("Book")
+
+    function onCatClick() {
+        // probably gonna rework this eventually if needed
+        switch(type) {
+            case 'Book':
+                setType("Movie")
+                break;
+            case 'Movie':
+                setType("TV")
+                break;
+            case 'TV':
+                setType("Game")
+                break;
+            case 'Game':
+                setType("Book")
+                break;
+        }
+    }
+
+    function sanitizeTitleForLink(title: string) {
+        return title.replaceAll(" ", "-").toLowerCase()
+    }

    useEffect(() => {
        if (itemData) {
+            const filteredArray = itemData.filter(v => v.type == type.toLowerCase())
+
            setList(
-                itemData?.map((v: GenericItemType) => {
-                    return <ReviewCard title={v.name} url={`/reviews/${v.name}`} image={v.image} />
+                filteredArray.map((v: GenericItemType, k) => {
+                    return <ReviewCard 
+                        key={k}
+                        title={v.name}
+                        url={`/reviews/${sanitizeTitleForLink(v.name)}`}
+                        image={v.image}
+                        showText={false}
+                    />
                })
            )
        }
-    }, [itemData])
+    }, [itemData, type])

    return (
        <main className="min-h-screen bg-black color-white">
+            <Header />
            <div className="w-1/2 mx-auto text-white">
-                <Header />
                {
                    status == "authenticated" ?
                    <p className="text-center font-bold">
-                        <a href="/reviews/create">
+                        <Link href="/reviews/create">
                            Create
-                        </a>
+                        </Link>
                    </p>
                    :
                    ""
                }  
+
+                <p className="text-center font-bold text-2xl hover:cursor-pointer hover:underline pb-2" onClick={onCatClick}>
+                    {type}
+                </p>
+
                <div className="flex flex-wrap justify-center">
                    {list}
                </div>
            </div>
+            <Footer />
        </main>
    )
 }