From 76278124e9b43eec69248269e9054182d1754e37 Mon Sep 17 00:00:00 2001
From: Aidan <aidan@p0ntus.com>
Date: Fri, 31 Jan 2025 16:23:19 -0500
Subject: [PATCH] fix post link, use <Link> instead of <a>, add bun instruction
 for setup complete, load categories from api for post create, fix margin on
 post title

---
 app/admin/page.tsx           |   7 ++++---
 app/admin/posts/new/page.tsx |  36 ++++++++++++++++++++++++++---------
 app/admin/posts/page.tsx     |   9 +++++----
 app/posts/[slug]/page.tsx    |   2 +-
 bun.lockb                    | Bin 253969 -> 253969 bytes
 server/setup.js              |   7 ++++---
 strings.json                 |   2 +-
 7 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 7cbe72b..3ebc693 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { useEffect, useState } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
@@ -52,7 +53,7 @@ export default function Home() {
             setPostCardLoading(false);
             throw new Error(strings.errorsUnknownError);
           }
-        } else if (data.count) {
+        } else if (data.count || data.count === 0) {
           console.log(strings.logsTotalPosts, data.count);
           setTotalPosts(data.count);
           setPostCardLoading(false);
@@ -166,10 +167,10 @@ export default function Home() {
           </CardHeader>
           <CardContent className="grid gap-4">
             <Button className="w-full justify-start" variant="outline" asChild>
-              <a href="/admin/posts/new">
+              <Link href="/admin/posts/new">
                 <PlusCircle className="mr-2 h-4 w-4" />
                 {strings.createPostButtonText}
-              </a>
+              </Link>
             </Button>
             <Button className="w-full justify-start" variant="outline" asChild>
               <a href="/admin/users/new">
diff --git a/app/admin/posts/new/page.tsx b/app/admin/posts/new/page.tsx
index 08bc2a6..c76bab8 100644
--- a/app/admin/posts/new/page.tsx
+++ b/app/admin/posts/new/page.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import dynamic from "next/dynamic"
 import strings from "@/strings.json"
 import { Input } from "@/components/ui/input"
@@ -17,14 +17,13 @@ const MDEditor = dynamic(() => import("@uiw/react-md-editor"), {
 import "@uiw/react-md-editor/markdown-editor.css"
 import "@uiw/react-markdown-preview/markdown.css"
 
-const categories = ["Example Category 1", "Example Category 2"]
-
 export default function CreatePost() {
   const [title, setTitle] = useState("")
   const [description, setDescription] = useState("")
   const [category, setCategory] = useState("")
   const [slug, setSlug] = useState("")
   const [content, setContent] = useState("")
+  const [categories, setCategories] = useState<{ id: string; slug: string; name: string }[]>([])
 
   const handleEditorChange = (value: string | undefined) => {
     setContent(value || "")
@@ -54,6 +53,22 @@ export default function CreatePost() {
     console.log({ title, description, category, slug, content, date })
   }
 
+  useEffect(() => {
+    console.log(strings.logsFetchCategoryList);
+    fetch('http://localhost:3001/api/categories/fetchList')
+      .then(response => response.json())
+      .then(data => {
+        if (!data.categories) {
+          throw new Error(strings.errorsFetchCategoryListFail);
+        }
+        console.log(strings.logsOnFetchedCategory);
+        setCategories(data.categories);
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  }, []);
+
   return (
     <div className="space-y-8">
       <h1 className="text-4xl font-bold text-primary">{strings.adminNewPostHeader}</h1>
@@ -89,8 +104,8 @@ export default function CreatePost() {
                 </SelectTrigger>
                 <SelectContent>
                   {categories.map((cat) => (
-                    <SelectItem key={cat} value={cat}>
-                      {cat}
+                    <SelectItem key={cat.id} value={cat.name}>
+                      {cat.name}
                     </SelectItem>
                   ))}
                 </SelectContent>
@@ -99,10 +114,13 @@ export default function CreatePost() {
             <div className="space-y-2">
               <Label htmlFor="slug">{strings.newPostSlugFieldLabel}</Label>
               <Input
-                id="slug"
-                value={slug}
-                onChange={(e) => setSlug(e.target.value)}
-                placeholder={strings.newPostSlugFieldPlaceholder}
+              id="slug"
+              value={slug}
+              onChange={(e) => {
+                const value = e.target.value.replace(/[^a-zA-Z0-9-]/g, "");
+                setSlug(value);
+              }}
+              placeholder={strings.newPostSlugFieldPlaceholder}
               />
             </div>
             <div className="space-y-2">
diff --git a/app/admin/posts/page.tsx b/app/admin/posts/page.tsx
index a0bff07..4c3a497 100644
--- a/app/admin/posts/page.tsx
+++ b/app/admin/posts/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
@@ -31,7 +32,7 @@ export default function Posts() {
         });
 
         if (!res.ok) {
-          alert(strings.errorsFetchTotalPostCtErr);
+          console.log(strings.errorsFetchTotalPostCtErr);
           setPostCardError(true);
           throw new Error(`${strings.errorsFetchTotalPostCtErr}: ${res.status}`);
         }
@@ -49,7 +50,7 @@ export default function Posts() {
             setPostCardLoading(false);
             throw new Error(strings.errorsUnknownError);
           }
-        } else if (data.count) {
+        } else if (data.count || data.count === 0) {
           console.log(strings.logsTotalPosts, data.count);
           setTotalPosts(data.count);
           setPostCardLoading(false);
@@ -73,10 +74,10 @@ export default function Posts() {
           </CardHeader>
           <CardContent className="grid gap-4">
             <Button className="w-full justify-start" variant="outline" asChild>
-              <a href="/admin/post">
+              <Link href="/admin/posts/new">
                 <PlusCircle className="mr-2 h-4 w-4" />
                 {strings.createPostButtonText}
-              </a>
+              </Link>
             </Button>
           </CardContent>
         </Card>
diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index cbbe883..2e83a55 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -109,7 +109,7 @@ export default function PostPage() {
 
   return (
     <div>
-      <h1 className="text-4xl font-bold my-4">{postTitle}</h1>
+      <h1 className="text-4xl font-bold mb-4">{postTitle}</h1>
       <p className="italic text-muted-foreground">{strings.postPublishedOnLabel} {postDate}</p>
       <div className="flex flex-wrap gap-2 my-4">
         <span className="border border-white text-bold px-3 py-1 rounded-md">
diff --git a/bun.lockb b/bun.lockb
index 94d963f5e3ef5aa21d417c37d5b3186f862b0af5..ee6f3dfdde001750b2b7e9dfd0b0440a88677320 100755
GIT binary patch
delta 83
zcmV-Z0IdI!zz>nY4}gRLv;w?$0XUbvcLFg1IhXHu0)iVg004ae0012T0DwIf<BS*;
pC=dbxUNSB*E;W~ocmgv4HJ8A60_y=Xx2$;r{GS0fx2YKeXvSCS8rA>+

delta 83
zcmV-Z0IdI!zz>nY4}gRLv;w?$0XLVucLFg1IG68t0)iVf004ae0012T0DwIf<BS*;
pC=dbxUNSB*E;N^ncmgv4G?&150_y=Wx2$;r{GS0cx2YKeXvS9A8qELz

diff --git a/server/setup.js b/server/setup.js
index 7c74ddc..ceb0603 100644
--- a/server/setup.js
+++ b/server/setup.js
@@ -109,9 +109,10 @@ figlet('BlogPop', (err, data) => {
 
         console.log("┌────────────────────────────────────────────────────┐");
         console.log("│                  ✓ SETUP COMPLETE                  │");
-        console.log("├──────────────┬─────────────────────────────────────┤");
-        console.log("│ START SERVER │ $ node index.js                     │");
-        console.log("└──────────────┴─────────────────────────────────────┘")
+        console.log("├─────────────────────┬──────────────────────────────┤");
+        console.log("│ START SERVER (NODE) │ $ node index.js              │");
+        console.log("│ START SERVER (BUN)  │ $ bun index.js               │")
+        console.log("└─────────────────────┴──────────────────────────────┘")
 
         db.close();
         rl.close();
diff --git a/strings.json b/strings.json
index 31fca14..95f080d 100644
--- a/strings.json
+++ b/strings.json
@@ -36,7 +36,7 @@
     "newPostTitleFieldPlaceholder": "Enter post title",
     "newPostDescriptionFieldPlaceholder": "Enter post description",
     "newPostCategoryFieldPlaceholder": "Select a category",
-    "newPostSlugFieldPlaceholder": "Enter post slug (i.e. /example-slug)",
+    "newPostSlugFieldPlaceholder": "Enter post slug (ex: inputting example will create a post at example.com/posts/example)",
 
     "newUserNameFieldLabel": "Name",
     "newUserEmailFieldLabel": "Email",