From 90f60a4d53eb486cf6a03cfa30785a6d57ce9313 Mon Sep 17 00:00:00 2001
From: RemoStain <c.wise522@mybvc.ca>
Date: Sun, 3 Aug 2025 16:11:28 -0600
Subject: [PATCH] Implement /posts/new form

---
 src/App.js                | 15 +++++++++
 src/components/NewPost.js | 64 +++++++++++++++++++++++++++++++++++++++
 src/index.js              |  6 ++++
 3 files changed, 85 insertions(+)
 create mode 100644 src/App.js
 create mode 100644 src/components/NewPost.js
 create mode 100644 src/index.js

diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..8957043
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import NewPost from './components/NewPost';
+
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/posts/new" element={<NewPost />} />
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;
\ No newline at end of file
diff --git a/src/components/NewPost.js b/src/components/NewPost.js
new file mode 100644
index 0000000..22035a9
--- /dev/null
+++ b/src/components/NewPost.js
@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+
+function NewPost() {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [errors, setErrors] = useState([]);
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setErrors([]);
+
+    try {
+      const response = await axios.post('http://localhost:8000/posts/', {
+        title,
+        description,
+      });
+
+      const { title: newTitle } = response.data.post;
+      navigate(`/posts/${encodeURIComponent(newTitle)}`);
+    } catch (error) {
+      if (error.response?.data?.errors) {
+        setErrors(error.response.data.errors);
+      } else {
+        setErrors(['Unexpected error occurred']);
+      }
+    }
+  };
+
+  return (
+    <div>
+      <h2>Create a New Post</h2>
+      {errors.length > 0 && (
+        <ul style={{ color: 'red' }}>
+          {errors.map((err, idx) => <li key={idx}>{err}</li>)}
+        </ul>
+      )}
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label>Title:</label>
+          <input
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+          />
+        </div>
+        <div>
+          <label>Description:</label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            required
+          />
+        </div>
+        <button type="submit">Create Post</button>
+      </form>
+    </div>
+  );
+}
+
+export default NewPost;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..c760e59
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);
\ No newline at end of file