Assignment 3 done - Mukta

src/api/axiosConfig.js

@@ -1,12 +1,30 @@
-import axios from "axios"
-import { isHyperlink } from '@/lib/isHyperlink'
+import axios from 'axios';
 
-const BASE_URL = process.env.DOTNET_SERVER_URL
+// Define base URL and headers in environment variables
+const BASE_URL = process.env.API_BASE_URL || 'http://localhost:5000/api';
 
-const AXIOS_BASE = axios.create({
-    baseURL: BASE_URL,
-  })
+// Create Axios instance with predefined configuration
+const axiosInstance = axios.create({
+  baseURL: BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
 
-const JSON_CLIENT = isHyperlink(BASE_URL) ? AXIOS_BASE : false
+// Optional: Add interceptors if needed for requests and responses
+// axiosInstance.interceptors.request.use(config => {
+//   // Modify request config if needed (e.g., add authentication tokens)
+//   return config;
+// }, error => {
+//   return Promise.reject(error);
+// });
 
-export default JSON_CLIENT
+// axiosInstance.interceptors.response.use(response => {
+//   // Modify response data if needed
+//   return response;
+// }, error => {
+//   // Handle response errors
+//   return Promise.reject(error);
+// });
+
+export default axiosInstance;

src/api/postsApi.js

@@ -1,23 +1,51 @@
-import API from './axiosConfig'
+const apiUrl = process.env.DOTNET_SERVER_URL || 'http://localhost:5000';
 
-export const getPosts = () => {
+// Helper function for API requests
+const fetchApi = async (endpoint, options = {}) => {
   try {
-    return API.get('/posts/')
-      .then((res) => res.data)
-  }
-  catch (e) {
-    console.error(e)
-    return []
-  }
-}
+    const url = `${apiUrl}${endpoint}`;
+    console.log(`Fetching URL: ${url}`);
+    console.log('Options:', options);
 
-export const getPost = (postSlug) => {
-  try {
-    return API.get(`/posts/${postSlug}`)
-      .then((res) => res.data)
-  }
-  catch (e) {
-    console.error(e)
-    return {}
+    const response = await fetch(url, options);
+
+    if (!response.ok) {
+      let errorDetails = 'No error details available.';
+      try {
+        // Try to parse the error details from the response body
+        errorDetails = await response.text();
+      } catch (err) {
+        // If parsing fails, keep the default message
+        console.error('Error details parsing failed:', err);
+      }
+      throw new Error(`Error ${options.method || 'GET'} ${endpoint}: ${response.status} ${response.statusText} - ${errorDetails}`);
+    }
+
+    try {
+      // Try to parse the JSON response
+      return await response.json();
+    } catch (err) {
+      // If JSON parsing fails, fall back to plain text
+      console.warn('Response is not JSON, returning text:', err);
+      return response.text();
+    }
+  } catch (error) {
+    console.error(`Error during ${options.method || 'GET'} request to ${endpoint}:`, error);
+    throw error;
   }
-}
+};
+
+// Fetch all posts
+export const getPosts = () => fetchApi('/api/posts');
+
+// Fetch a single post by slug
+export const getPost = (slug) => fetchApi(`/api/posts/${slug}`);
+
+// Create a new post
+export const createPost = (post) => fetchApi('/api/posts', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  body: JSON.stringify(post),
+});

src/components/CreatePostForm.js

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { useRouter } from 'next/router';
+import { createPost } from '../api/postsApi';
+
+const CreatePostForm = () => {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [body, setBody] = useState('');
+  const router = useRouter();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const newPost = { title, description, body };
+      const response = await createPost(newPost);
+      console.log('Post created successfully:', response);
+
+      // Redirect to the posts page or the newly created post's page
+      router.push('/posts'); // or use `router.push(`/posts/${response.data.slug}`) if your API returns a slug
+    } catch (error) {
+      console.error('Error creating post:', error);
+    }
+  };
+
+  return (
+<form onSubmit={handleSubmit} style={styles.form}>
+<div style={styles.formGroup}>
+<label style={styles.label}>Title:</label>
+<input
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          required
+          style={styles.input}
+        />
+</div>
+<div style={styles.formGroup}>
+<label style={styles.label}>Description:</label>
+<input
+          type="text"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          required
+          style={styles.input}
+        />
+</div>
+<div style={styles.formGroup}>
+<label style={styles.label}>Body:</label>
+<textarea
+          value={body}
+          onChange={(e) => setBody(e.target.value)}
+          required
+          style={styles.textarea}
+        />
+</div>
+<button type="submit" style={styles.button}>Create Post</button>
+</form>
+  );
+};
+
+const styles = {
+  form: {
+    maxWidth: '600px',
+    margin: '0 auto',
+    padding: '20px',
+    borderRadius: '8px',
+    backgroundColor: '#f9f9f9',
+    boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',
+  },
+  formGroup: {
+    marginBottom: '15px',
+  },
+  label: {
+    display: 'block',
+    marginBottom: '5px',
+    fontWeight: 'bold',
+  },
+  input: {
+    width: '100%',
+    padding: '10px',
+    fontSize: '16px',
+    borderRadius: '4px',
+    border: '1px solid #ccc',
+    boxSizing: 'border-box',
+  },
+  textarea: {
+    width: '100%',
+    padding: '10px',
+    fontSize: '16px',
+    borderRadius: '4px',
+    border: '1px solid #ccc',
+    boxSizing: 'border-box',
+    minHeight: '100px',
+  },
+  button: {
+    padding: '10px 20px',
+    fontSize: '16px',
+    color: '#fff',
+    backgroundColor: '#007bff',
+    border: 'none',
+    borderRadius: '4px',
+    cursor: 'pointer',
+  },
+};
+
+export default CreatePostForm;