Finished Project 3 -Levi Zigza

next.config.mjs

@@ -1,22 +1,22 @@
-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?$/,
   options: {
     remarkPlugins: [remarkGfm],
     rehypePlugins: [rehypePrism],
   },
-})
+});
 
-export default withMDX(nextConfig)
+export default withMDX(nextConfig);

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",

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;

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;
   }
-}
+};

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 (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <label>Title:</label>
+        <input
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          required
+        />
+      </div>
+      <div>
+        <label>Description:</label>
+        <input
+          type="text"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          required
+        />
+      </div>
+      <div>
+        <label>Body:</label>
+        <textarea
+          value={body}
+          onChange={(e) => setBody(e.target.value)}
+          required
+        />
+      </div>
+      <button type="submit">Create Post</button>
+    </form>
+  );
+};
+
+export default CreatePostForm;