From b69449b683aedc30107fd1dcf42ac76732f216cb Mon Sep 17 00:00:00 2001 From: Levi Zigza Date: Tue, 13 Aug 2024 12:58:31 -0600 Subject: [PATCH] Finished Project 3 --- next.config.mjs | 16 +-- package-lock.json | 16 +-- package.json | 2 +- src/api/axiosConfig.js | 18 ++- src/api/postsApi.js | 60 ++++++--- src/components/CreatePostForm.js | 57 ++++++++ src/components/Header.jsx | 183 ++++++++++++++------------ src/lib/generateRssFeed.js | 99 +++++++------- src/pages/index.jsx | 216 ++++++------------------------- src/pages/posts/[slug].jsx | 73 ++++++++--- src/pages/posts/index.jsx | 21 ++- src/pages/posts/new.js | 149 +++++++++++++++++++++ 12 files changed, 540 insertions(+), 370 deletions(-) create mode 100644 src/components/CreatePostForm.js create mode 100644 src/pages/posts/new.js diff --git a/next.config.mjs b/next.config.mjs index f3abdd7..63a8d9f 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,15 +1,15 @@ -import nextMDX from '@next/mdx' -import remarkGfm from 'remark-gfm' -import rehypePrism from '@mapbox/rehype-prism' +import nextMDX from '@next/mdx'; +import remarkGfm from 'remark-gfm'; +import rehypePrism from '@mapbox/rehype-prism'; /** @type {import('next').NextConfig} */ const nextConfig = { - pageExtensions: ['jsx', 'mdx'], + pageExtensions: ['jsx', 'mdx', 'js'], reactStrictMode: true, experimental: { - scrollRestoration: true, + // scrollRestoration: true, // Comment out or remove this line }, -} +}; const withMDX = nextMDX({ extension: /\.mdx?$/, @@ -17,6 +17,6 @@ const withMDX = nextMDX({ remarkPlugins: [remarkGfm], rehypePlugins: [rehypePrism], }, -}) +}); -export default withMDX(nextConfig) +export default withMDX(nextConfig); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 1e1c817..b1a2167 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "@next/mdx": "^13.0.2", "@tailwindcss/typography": "^0.5.4", "autoprefixer": "^10.4.12", - "axios": "^1.2.0", + "axios": "^1.7.2", "clsx": "^2.0.0", "fast-glob": "^3.2.11", "feed": "^4.2.2", @@ -1363,11 +1363,11 @@ } }, "node_modules/axios": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz", - "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==", + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz", + "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==", "dependencies": { - "follow-redirects": "^1.15.0", + "follow-redirects": "^1.15.6", "form-data": "^4.0.0", "proxy-from-env": "^1.1.0" } @@ -3237,9 +3237,9 @@ "integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==" }, "node_modules/follow-redirects": { - "version": "1.15.2", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", - "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", "funding": [ { "type": "individual", diff --git a/package.json b/package.json index a26b950..83c48ce 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "@next/mdx": "^13.0.2", "@tailwindcss/typography": "^0.5.4", "autoprefixer": "^10.4.12", - "axios": "^1.2.0", + "axios": "^1.7.2", "clsx": "^2.0.0", "fast-glob": "^3.2.11", "feed": "^4.2.2", diff --git a/src/api/axiosConfig.js b/src/api/axiosConfig.js index bd45cb2..d7b802e 100644 --- a/src/api/axiosConfig.js +++ b/src/api/axiosConfig.js @@ -1,12 +1,10 @@ -import axios from "axios" -import { isHyperlink } from '@/lib/isHyperlink' +import axios from 'axios'; -const BASE_URL = process.env.DOTNET_SERVER_URL +const axiosInstance = axios.create({ + baseURL: 'http://localhost:5000/api', + headers: { + 'Content-Type': 'application/json', + }, +}); -const AXIOS_BASE = axios.create({ - baseURL: BASE_URL, - }) - -const JSON_CLIENT = isHyperlink(BASE_URL) ? AXIOS_BASE : false - -export default JSON_CLIENT +export default axiosInstance; \ No newline at end of file diff --git a/src/api/postsApi.js b/src/api/postsApi.js index 54f8964..f5267c6 100644 --- a/src/api/postsApi.js +++ b/src/api/postsApi.js @@ -1,23 +1,51 @@ -import API from './axiosConfig' +// src/api/postsApi.js -export const getPosts = () => { +const apiUrl = process.env.DOTNET_SERVER_URL || 'http://localhost:5000'; + +export const getPosts = async () => { try { - return API.get('/posts/') - .then((res) => res.data) - } - catch (e) { - console.error(e) - return [] + const response = await fetch(`${apiUrl}/api/posts`); + if (!response.ok) { + const errorDetails = await response.text(); + throw new Error(`Error fetching posts: ${response.status} ${response.statusText} - ${errorDetails}`); + } + return await response.json(); + } catch (error) { + console.error('Error fetching posts:', error); + throw error; } -} +}; -export const getPost = (postSlug) => { +export const getPost = async (slug) => { try { - return API.get(`/posts/${postSlug}`) - .then((res) => res.data) + const response = await fetch(`${apiUrl}/api/posts/${slug}`); + if (!response.ok) { + const errorDetails = await response.text(); + throw new Error(`Error fetching post: ${response.status} ${response.statusText} - ${errorDetails}`); + } + return await response.json(); + } catch (error) { + console.error('Error fetching post:', error); + throw error; } - catch (e) { - console.error(e) - return {} +}; + +export const createPost = async (post) => { + try { + const response = await fetch(`${apiUrl}/api/posts`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(post), + }); + if (!response.ok) { + const errorDetails = await response.text(); + throw new Error(`Error creating post: ${response.status} ${response.statusText} - ${errorDetails}`); + } + return await response.json(); + } catch (error) { + console.error('Error creating post:', error); + throw error; } -} +}; diff --git a/src/components/CreatePostForm.js b/src/components/CreatePostForm.js new file mode 100644 index 0000000..7ea6f3d --- /dev/null +++ b/src/components/CreatePostForm.js @@ -0,0 +1,57 @@ +import React, { useState } from 'react'; +import { createPost } from '../api/postsApi'; + +const CreatePostForm = () => { + const [title, setTitle] = useState(''); + const [description, setDescription] = useState(''); + const [body, setBody] = useState(''); + + const handleSubmit = async (e) => { + e.preventDefault(); + try { + const newPost = { title, description, body }; + const response = await createPost(newPost); + console.log('Post created successfully:', response); + // Optionally, reset the form or handle post-creation logic + setTitle(''); + setDescription(''); + setBody(''); + } catch (error) { + console.error('Error creating post:', error); + } + }; + + return ( +
+
+ + setTitle(e.target.value)} + required + /> +
+
+ + setDescription(e.target.value)} + required + /> +
+
+ +