Merging frontend into main repo

package.json

@@ -15,7 +15,7 @@
     "@mapbox/rehype-prism": "^0.8.0",
     "@mdx-js/loader": "^2.1.5",
     "@mdx-js/react": "^2.1.5",
-    "@next/mdx": "^13.0.2",
+    "@next/mdx": "^13.5.6",
     "@tailwindcss/typography": "^0.5.4",
     "autoprefixer": "^10.4.12",
     "axios": "^1.2.0",
@@ -25,8 +25,8 @@
     "focus-visible": "^5.2.0",
     "next": "^13.4.12",
     "postcss-focus-visible": "^9.0.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "remark-gfm": "^3.0.1",
     "tailwindcss": "^3.2.1"
   },

src/pages/posts/index.jsx

@@ -4,6 +4,7 @@ import { Card } from '@/components/Card'
 import { SimpleLayout } from '@/components/SimpleLayout'
 import { formatDate } from '@/lib/formatDate'
 import { getPosts, getPost } from "@/api/postsApi"
+import NewPost from './new'
 
 function Post({ post }) {
   const date = new Date(post.createdDate)
@@ -57,6 +58,7 @@ export default function PostsIndex({ posts }) {
             ))}
           </div>
         </div>
+        <NewPost />
       </SimpleLayout>
     </>
   )

src/pages/posts/new.jsx

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+
+export default function NewPost() {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [errors, setErrors] = useState([]);
+  const router = useRouter();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const res = await fetch('http://localhost:5000/posts', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ title, description }),
+      });
+
+      if (!res.ok) {
+        const errorText = await res.text();
+        console.error("Server returned an error:", errorText);
+
+        try {
+          const errorData = JSON.parse(errorText);
+          setErrors(errorData.errors || ["Unexpected error occurred"]);
+        } catch (parseError) {
+          setErrors([errorText]);
+        }
+        return;
+      }
+
+      const data = await res.json();
+      router.push(`/posts/${data.slug}`);
+    } catch (error) {
+      console.error("Network error or issue with fetch:", error);
+      setErrors(["Failed to create post. Please try again later."]);
+    }
+  };
+
+  return (
+    <div className="max-w-md  mt-10 p-6 bg-white shadow-md rounded-lg">
+      <h1 className="text-2xl font-bold mb-6">Create a New Post</h1>
+      {errors.length > 0 && (
+        <ul className="bg-red-100 text-red-700 p-4 rounded mb-6">
+          {errors.map((error, index) => (
+            <li key={index}>{error}</li>
+          ))}
+        </ul>
+      )}
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Title:</label>
+          <input
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm"
+            placeholder="Enter the title"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Description:</label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm"
+            placeholder="Enter the description"
+            rows="4"
+          ></textarea>
+        </div>
+        <div>
+          <button
+            type="submit"
+            className="w-full bg-teal-600 text-white py-2 px-4 rounded-md hover:bg-teal-700 transition duration-300"
+          >
+            Create Post
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}