From f966b3ed79f855c7b1e743dc413c19070b370f60 Mon Sep 17 00:00:00 2001
From: DianaJoyaG <diana.joya@hotmail.com>
Date: Wed, 14 Aug 2024 20:33:50 -0600
Subject: [PATCH] Try to fix bug

---
 src/api/axiosConfig.js    |  3 +-
 src/api/postsApi.js       | 12 +++++++
 src/pages/posts/index.jsx | 12 +++++--
 src/pages/posts/new.jsx   | 67 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 91 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/posts/new.jsx

diff --git a/src/api/axiosConfig.js b/src/api/axiosConfig.js
index bd45cb2..15de38b 100644
--- a/src/api/axiosConfig.js
+++ b/src/api/axiosConfig.js
@@ -1,7 +1,8 @@
 import axios from "axios"
 import { isHyperlink } from '@/lib/isHyperlink'
 
-const BASE_URL = process.env.DOTNET_SERVER_URL
+// Define the base URL for backend API
+const BASE_URL = 'http://localhost:5000';
 
 const AXIOS_BASE = axios.create({
     baseURL: BASE_URL,
diff --git a/src/api/postsApi.js b/src/api/postsApi.js
index 54f8964..cbe362d 100644
--- a/src/api/postsApi.js
+++ b/src/api/postsApi.js
@@ -21,3 +21,15 @@ export const getPost = (postSlug) => {
     return {}
   }
 }
+
+
+export const createPost = async (postData) => {
+  try {
+    const response = await API.post('/posts', postData);
+    return response.data;
+  } catch (error) {
+    console.error('Error creating post:', error.response?.data || error.message);
+    throw error;
+  }
+}
+
diff --git a/src/pages/posts/index.jsx b/src/pages/posts/index.jsx
index c0daf46..a298bc4 100644
--- a/src/pages/posts/index.jsx
+++ b/src/pages/posts/index.jsx
@@ -1,9 +1,9 @@
 import Head from 'next/head'
-
+import Link from 'next/link'
 import { Card } from '@/components/Card'
 import { SimpleLayout } from '@/components/SimpleLayout'
 import { formatDate } from '@/lib/formatDate'
-import { getPosts, getPost } from "@/api/postsApi"
+import { getPosts } from "@/api/postsApi"
 
 function Post({ post }) {
   const date = new Date(post.createdDate)
@@ -50,6 +50,14 @@ export default function PostsIndex({ posts }) {
         title="Writing on software design, company building, and the aerospace industry."
         intro="All of my long-form thoughts on programming, leadership, product design, and more, collected in chronological order."
       >
+
+        {/* Link to create a new post */}
+        <div className="flex justify-end">
+          <Link href="/posts/new" className="text-blue-500 hover:underline">
+          Create New Post
+          </Link>
+        </div>
+
         <div className="md:border-l md:border-zinc-100 md:pl-6">
           <div className="flex max-w-3xl flex-col space-y-16">
             {posts.map((post) => (
diff --git a/src/pages/posts/new.jsx b/src/pages/posts/new.jsx
new file mode 100644
index 0000000..baf02e5
--- /dev/null
+++ b/src/pages/posts/new.jsx
@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+import { createPost } from '@/api/postsApi';
+
+export default function NewPost() {
+  const [title, setTitle] = useState('');
+  const [body, setBody] = useState('');
+  const [error, setError] = useState('');
+  const router = useRouter();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+  
+    try {
+      const postData = {
+        title,        
+        body 
+      };
+      await createPost(postData);
+      router.push('/posts'); // Redirect to the posts list after successful submission
+    } catch (error) {
+      setError('Failed to create post');
+    }
+  };
+  
+
+  return (
+    <div className="flex justify-center items-center min-h-screen">
+      <form onSubmit={handleSubmit} className="w-full max-w-md p-6 bg-white rounded shadow-md">
+        <h2 className="text-lg font-semibold mb-4">Create New Post</h2>
+        {error && <p className="text-red-500 mb-4">{error}</p>}
+        <div className="mb-4">
+          <label htmlFor="title" className="block text-sm font-medium text-gray-700">
+            Title
+          </label>
+          <input
+            type="text"
+            id="title"
+            name="title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            className="mt-1 p-2 block w-full border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+          />
+        </div>
+        <div className="mb-4">
+          <label htmlFor="body" className="block text-sm font-medium text-gray-700">
+            Description blog
+          </label>
+          <input
+            type="text"
+            id="body"
+            name="body"
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            className="mt-1 p-2 block w-full border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+          />
+        </div>
+        <button
+          type="submit"
+          className="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600"
+        >
+          Create Post
+        </button>
+      </form>
+    </div>
+  );
+}