add blog

src/pages/blog/[id].tsx

@@ -0,0 +1,66 @@
+import RootLayout from '@/components/RootLayout';
+
+// next modules
+import Router, {useRouter} from 'next/router';
+import Link from 'next/link';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import {useSession} from 'next-auth/react';
+
+// api
+import {api} from '@/utils/api'
+
+// icons
+import { Trash } from 'grommet-icons';
+
+export default function BlogPage() {
+    const router = useRouter()
+    const id = router.query.id as string
+    const { status } = useSession()
+
+    // trpc stuff
+    const {data: blogData} = api.blog.getOne.useQuery(id)
+    const deletionMutation = api.blog.delete.useMutation()
+
+    function deleteItem() {
+        if (blogData) {
+            deletionMutation.mutate(id)
+            Router.replace("/").catch(() => {
+                console.error("Failed to reroute user!")
+            })
+        }
+    }
+
+    if (blogData) {
+        return (
+            <RootLayout>
+                <div className="mx-auto w-1/2 text-white">
+                    <h1 className="text-2xl font-bold text-center">{blogData.name} { status == "authenticated" ? <Trash onClick={deleteItem} className="hover:cursor-pointer" /> : ""}</h1>
+                    
+                    <div className="pt-2 pb-2">
+                        <hr />
+                    </div>
+
+                    <Markdown remarkPlugins={[remarkGfm]} className="text-white w-1/2 mx-auto">
+                        {blogData.contents}
+                    </Markdown>
+                </div>
+            </RootLayout>
+        )
+    } else {
+        return (
+            <RootLayout>
+                <div className="text-center text-2xl font-bold text-white">
+                    <p>Well, that&apos;s not good..</p>
+                </div>
+
+                <div className="text-center text-white">
+                    <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>
+            </RootLayout>
+        )
+    }
+}

src/pages/blog/create.tsx

@@ -0,0 +1,78 @@
+// trpc api
+import { api } from "@/utils/api";
+import {useState, useRef} from 'react';
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+// components
+import RootLayout from '@/components/RootLayout';
+
+// types
+import type { FormEvent } from "react";
+
+export default function BlogCreatePage() {
+    const [textContent, setTextContent] = useState<string | null>(null)
+    const [showMarkdown, setShowMarkdown] = useState<boolean>(false)
+
+    // element refs
+    const titleRef = useRef<HTMLInputElement>(null)
+    const tagRef = useRef<HTMLInputElement>(null)
+    const imageRef = useRef<HTMLInputElement>(null)
+
+    // trpc mutation
+    const blogPostMutation = api.blog.create.useMutation() 
+
+    function handleElementUpdate(e: FormEvent) {
+        const textarea = e.target as HTMLTextAreaElement
+        setTextContent(textarea.value)
+    }
+
+    function submitBlogPost() {
+        if (!textContent || textContent == "") {
+            console.error("No text provided")
+            return;
+        }
+
+        if (!titleRef || !tagRef || !titleRef.current?.value || !tagRef.current?.value || titleRef.current?.value == "" || tagRef.current?.value == "") {
+            console.error("No title/tagline provided")
+            return;
+        }
+
+        if (!imageRef?.current?.value || imageRef.current?.value == "") {
+            console.error("No image URL provided")
+            return
+        }
+
+        const data = {
+            name: titleRef.current?.value,
+            tagline: tagRef.current?.value,
+            image: imageRef.current?.value,
+            contents: textContent,
+        }
+
+        blogPostMutation.mutate(data)
+    }
+
+    return (
+        <RootLayout protectedPage={true}>
+            <div className="text-center pb-2">
+                <button className="text-white mx-auto" onClick={() => setShowMarkdown(!showMarkdown)}>Show {showMarkdown ? "Text" : "Markdown"}</button>
+            </div>
+
+            {
+                showMarkdown ? <Markdown remarkPlugins={[remarkGfm]} className="text-white w-1/2 mx-auto">
+                    {textContent}
+                </Markdown>
+                : <textarea onInput={handleElementUpdate} className="resize-none block h-96 w-1/2 mx-auto bg-gray-900 rounded-sm text-white" defaultValue={textContent ?? ""} />
+            }
+
+            <div className="text-center pt-4 space-y-2">
+                <input type="text" ref={titleRef} placeholder="title" name="title" /><br />
+                <input type="text" ref={imageRef} placeholder="image url" name="image" /><br />
+                <input type="text" ref={tagRef} placeholder="tagline" name="tag" /><br />
+
+                <button onClick={submitBlogPost} className="text-white">Submit</button>
+            </div>
+        </RootLayout>
+    )
+}

src/pages/blog/index.tsx

@@ -0,0 +1,59 @@
+import RootLayout from "@/components/RootLayout"
+import BlogCard from "@/components/BlogCard"
+import NotFound from "@/components/NotFound";
+import React, {useState, useEffect} from 'react';
+import { api } from "@/utils/api";
+
+type GenericItemType = {
+    name: string,
+    image: string,
+    tagline: string,
+    id: string
+}
+
+export default function Blog() {
+    const {data: itemData, isLoading: areItemsLoading} = api.blog.getAll.useQuery()
+    const [list, setList] = useState<null | JSX.Element[]>(null)
+
+    useEffect(() => {
+        if (itemData) {
+            setList(
+                itemData.map((v: GenericItemType, k) => {
+                    return <BlogCard 
+                        name={v.name}
+                        tagline={v.tagline}
+                        id={v.id}
+                        image={v.image}
+                        key={k}
+                    />
+                })
+            )
+        }
+    }, [itemData])
+
+    if (list) {
+        return (
+            <RootLayout>
+                <div className="text-white w-1/2 mx-auto">
+                    <div className="space-x-2 space-y-2">
+                        {
+                            list.length > 0 ? list : <NotFound />
+                        }
+                    </div>
+                </div>
+            </RootLayout>
+        )
+    } else if (areItemsLoading) {
+        <RootLayout>
+            <div className="text-white">
+                <p>Loading..</p>
+            </div>
+        </RootLayout>
+    } else {
+        return (
+            <RootLayout>
+                <NotFound />
+            </RootLayout>
+        )
+    }
+}