diff --git a/.env.local b/.env.local new file mode 100644 index 0000000..46b7cff --- /dev/null +++ b/.env.local @@ -0,0 +1 @@ +DOTNET_SERVER_URL=http://localhost:5000 diff --git a/src/api/axiosConfig.js b/src/api/axiosConfig.js index bd45cb2..764d6cd 100644 --- a/src/api/axiosConfig.js +++ b/src/api/axiosConfig.js @@ -7,6 +7,8 @@ const AXIOS_BASE = axios.create({ baseURL: BASE_URL, }) -const JSON_CLIENT = isHyperlink(BASE_URL) ? AXIOS_BASE : false +// const JSON_CLIENT = isHyperlink(BASE_URL) ? AXIOS_BASE : false +const JSON_CLIENT = BASE_URL ? AXIOS_BASE : axios.create({ baseURL: 'http://localhost:5000' }) + export default JSON_CLIENT diff --git a/src/pages/posts/new.jsx b/src/pages/posts/new.jsx new file mode 100644 index 0000000..85da0b6 --- /dev/null +++ b/src/pages/posts/new.jsx @@ -0,0 +1,194 @@ +import { useState } from 'react' +import { useRouter } from 'next/router' +import Head from 'next/head' +import { SimpleLayout } from '@/components/SimpleLayout' +import { Container } from '@/components/Container' +import axios from '@/api/axiosConfig' + +export default function CreatePostPage() { + const router = useRouter() + + const [title, setTitle] = useState('') + const [description, setDescription] = useState('') + const [errors, setErrors] = useState([]) + + const handleSubmit = async (e) => { + e.preventDefault() + setErrors([]) + + // Custom client-side validation + if (!title.trim()) { + setErrors(['Title cannot be blank']) + return + } + + try { + const response = await axios.post('/posts', { title, description }) + const { post } = response.data + router.push(`/posts/${post.slug}`) + } catch (error) { + if (error.response?.data?.errors) { + setErrors(error.response.data.errors) + } else { + setErrors(['Something went wrong. Please try again.']) + } + } + } + + return ( + <> + + Create Post - MyFirstBlog + + + + + +
+ {errors.length > 0 && ( +
+
    + {errors.map((err, idx) => ( +
  • {err}
    • + ))} +
+
+ )} + +
+ + setTitle(e.target.value)} + className="mt-1 block w-full rounded-md border border-zinc-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" + /> +
+ +
+ +