From 0a78b6ae472dbf74d715135dc6a2f9f5433fdd6c Mon Sep 17 00:00:00 2001 From: Sawan Date: Sun, 10 Nov 2024 10:44:43 +0530 Subject: [PATCH] Added backend API for stories --- backend/app.js | 4 + backend/controllers/postsController.js | 25 ++++++ backend/models/postModel.js | 13 ++++ backend/routes/storiesRoutes.js | 9 +++ frontend/src/components/Footer.js | 1 + frontend/src/pages/Stories.js | 57 +++++++++----- frontend/src/styles/output.css | 104 +++++++------------------ 7 files changed, 116 insertions(+), 97 deletions(-) create mode 100644 backend/controllers/postsController.js create mode 100644 backend/models/postModel.js create mode 100644 backend/routes/storiesRoutes.js diff --git a/backend/app.js b/backend/app.js index 1b30621..779fc98 100644 --- a/backend/app.js +++ b/backend/app.js @@ -11,6 +11,8 @@ import addBlog from "./routes/addBlogRoutes.js"; import subscribe from "./routes/subscribeRoutes.js"; import discussion from "./routes/discussionRoutes.js"; import faqRoutes from "./routes/faqRoutes.js"; +import stories from "./routes/storiesRoutes.js"; + import cors from "cors"; import path from "path"; // Import path module @@ -42,6 +44,8 @@ app.use("/api/addBlog", addBlog); app.use("/api/newsletter", subscribe); app.use("/api/discussion", discussion); app.use("/api/faq", faqRoutes); +app.use("/api/stories", stories); + const PORT = process.env.PORT || 5000; app.listen(PORT, () => { diff --git a/backend/controllers/postsController.js b/backend/controllers/postsController.js new file mode 100644 index 0000000..8b6e1a5 --- /dev/null +++ b/backend/controllers/postsController.js @@ -0,0 +1,25 @@ +// postsController.js +import Post from "../models/postModel.js"; + +// Fetch all posts +export const getPosts = async (req, res) => { + try { + const posts = await Post.find(); + res.status(200).json(posts); + } catch (error) { + res.status(500).json({ message: "Error fetching posts", error }); + } +}; + +// Save a new post +export const savePost = async (req, res) => { + const { title, content, category, date } = req.body; + + try { + const newPost = new Post({ title, content, category, date }); + const savedPost = await newPost.save(); + res.status(201).json(savedPost); + } catch (error) { + res.status(500).json({ message: "Error saving post", error }); + } +}; diff --git a/backend/models/postModel.js b/backend/models/postModel.js new file mode 100644 index 0000000..f5dba18 --- /dev/null +++ b/backend/models/postModel.js @@ -0,0 +1,13 @@ +// postModel.js +import mongoose from "mongoose"; + +const postSchema = new mongoose.Schema({ + title: String, + content: String, + category: String, + date: { type: Date, default: Date.now }, +}); + +const Post = mongoose.model("Post", postSchema); + +export default Post; diff --git a/backend/routes/storiesRoutes.js b/backend/routes/storiesRoutes.js new file mode 100644 index 0000000..4115163 --- /dev/null +++ b/backend/routes/storiesRoutes.js @@ -0,0 +1,9 @@ +import express from "express"; +import { getPosts, savePost } from "../controllers/postsController.js"; + +const router = express.Router(); + +router.get("/getposts", getPosts); +router.post("/saveposts", savePost); + +export default router; diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js index b10d669..d95ebd0 100644 --- a/frontend/src/components/Footer.js +++ b/frontend/src/components/Footer.js @@ -23,6 +23,7 @@ export function renderFooter() {
  • Blog
  • Contact
  • Terms Of Use
    • +
  • Explore Stories
    • diff --git a/frontend/src/pages/Stories.js b/frontend/src/pages/Stories.js index ea51fa8..effd545 100644 --- a/frontend/src/pages/Stories.js +++ b/frontend/src/pages/Stories.js @@ -5,34 +5,53 @@ export function renderStories(container) { let category = ''; // Function to fetch posts from localStorage - const fetchPosts = () => { - const storedPosts = localStorage.getItem('posts'); - if (storedPosts) { - posts = JSON.parse(storedPosts); + const fetchPosts = async () => { + try { + const response = await fetch('http://localhost:5000/api/stories/getposts'); + if (response.ok) { + // Get the list of posts from the backend + const fetchedPosts = await response.json(); + posts = fetchedPosts; // Update the local posts array + render(); // Render posts on the page + } else { + console.error('Error fetching posts:', response.statusText); + } + } catch (error) { + console.error('Error fetching posts:', error); } - render(); // Render after fetching posts }; // Function to handle form submission - const handleSubmit = (e) => { + const handleSubmit = async (e) => { e.preventDefault(); if (title && content && category) { const newPost = { title, content, category, date: new Date().toISOString() }; - // Add new post to the posts array - posts.unshift(newPost); - - // Save the updated posts to localStorage - localStorage.setItem('posts', JSON.stringify(posts)); - // Clear form fields - title = ''; - content = ''; - category = ''; - - render(); // Re-render after saving the post - - + try { + // Send the new post data to the backend API + const response = await fetch('http://localhost:5000/api/stories/saveposts', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(newPost), + }); + + if (response.ok) { + // Clear form fields + title = ''; + content = ''; + category = ''; + + await fetchPosts(); + + } else { + console.error('Error submitting post:', response.statusText); + } + } catch (error) { + console.error('Error submitting post:', error); + } } }; diff --git a/frontend/src/styles/output.css b/frontend/src/styles/output.css index e6d7106..85d914a 100644 --- a/frontend/src/styles/output.css +++ b/frontend/src/styles/output.css @@ -600,10 +600,6 @@ video { border-width: 0; } -.fixed { - position: fixed; -} - .absolute { position: absolute; } @@ -640,14 +636,6 @@ video { top: 0.75rem; } -.right-4 { - right: 1rem; -} - -.top-4 { - top: 1rem; -} - .z-10 { z-index: 10; } @@ -1044,11 +1032,6 @@ video { border-color: rgb(147 197 253 / var(--tw-border-opacity)); } -.border-gray-100 { - --tw-border-opacity: 1; - border-color: rgb(243 244 246 / var(--tw-border-opacity)); -} - .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); @@ -1064,6 +1047,11 @@ video { border-color: rgb(156 163 175 / var(--tw-border-opacity)); } +.border-gray-600 { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); +} + .border-gray-700 { --tw-border-opacity: 1; border-color: rgb(55 65 81 / var(--tw-border-opacity)); @@ -1074,14 +1062,14 @@ video { border-color: rgb(74 222 128 / var(--tw-border-opacity)); } -.border-indigo-100 { +.border-indigo-500 { --tw-border-opacity: 1; - border-color: rgb(224 231 255 / var(--tw-border-opacity)); + border-color: rgb(99 102 241 / var(--tw-border-opacity)); } -.border-indigo-500 { +.border-indigo-700 { --tw-border-opacity: 1; - border-color: rgb(99 102 241 / var(--tw-border-opacity)); + border-color: rgb(67 56 202 / var(--tw-border-opacity)); } .border-teal-600 { @@ -1093,16 +1081,6 @@ video { border-color: transparent; } -.border-gray-600 { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); -} - -.border-indigo-700 { - --tw-border-opacity: 1; - border-color: rgb(67 56 202 / var(--tw-border-opacity)); -} - .bg-\[\#8b5cf6\] { --tw-bg-opacity: 1; background-color: rgb(139 92 246 / var(--tw-bg-opacity)); @@ -1143,6 +1121,11 @@ video { background-color: rgb(31 41 55 / var(--tw-bg-opacity)); } +.bg-gray-900 { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); +} + .bg-green-100 { --tw-bg-opacity: 1; background-color: rgb(220 252 231 / var(--tw-bg-opacity)); @@ -1198,16 +1181,6 @@ video { background-color: rgb(254 249 195 / var(--tw-bg-opacity)); } -.bg-gray-500 { - --tw-bg-opacity: 1; - background-color: rgb(107 114 128 / var(--tw-bg-opacity)); -} - -.bg-gray-900 { - --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); -} - .object-cover { -o-object-fit: cover; object-fit: cover; @@ -1260,6 +1233,11 @@ video { padding-right: 1rem; } +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; @@ -1305,11 +1283,6 @@ video { padding-bottom: 2rem; } -.px-5 { - padding-left: 1.25rem; - padding-right: 1.25rem; -} - .pb-2 { padding-bottom: 0.5rem; } @@ -1430,6 +1403,11 @@ video { color: rgb(30 64 175 / var(--tw-text-opacity)); } +.text-gray-300 { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + .text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); @@ -1475,9 +1453,9 @@ video { color: rgb(22 101 52 / var(--tw-text-opacity)); } -.text-indigo-500 { +.text-indigo-400 { --tw-text-opacity: 1; - color: rgb(99 102 241 / var(--tw-text-opacity)); + color: rgb(129 140 248 / var(--tw-text-opacity)); } .text-indigo-600 { @@ -1530,16 +1508,6 @@ video { color: rgb(133 77 14 / var(--tw-text-opacity)); } -.text-gray-300 { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} - -.text-indigo-400 { - --tw-text-opacity: 1; - color: rgb(129 140 248 / var(--tw-text-opacity)); -} - .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); @@ -1646,11 +1614,6 @@ body.dark-mode { background-color: rgb(117 63 241 / var(--tw-bg-opacity)); } -.hover\:bg-blue-600:hover { - --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); -} - .hover\:bg-blue-700:hover { --tw-bg-opacity: 1; background-color: rgb(29 78 216 / var(--tw-bg-opacity)); @@ -1676,11 +1639,6 @@ body.dark-mode { background-color: rgb(22 163 74 / var(--tw-bg-opacity)); } -.hover\:bg-indigo-50:hover { - --tw-bg-opacity: 1; - background-color: rgb(238 242 255 / var(--tw-bg-opacity)); -} - .hover\:bg-indigo-600:hover { --tw-bg-opacity: 1; background-color: rgb(79 70 229 / var(--tw-bg-opacity)); @@ -1716,11 +1674,6 @@ body.dark-mode { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.hover\:bg-indigo-900:hover { - --tw-bg-opacity: 1; - background-color: rgb(49 46 129 / var(--tw-bg-opacity)); -} - .hover\:text-blue-700:hover { --tw-text-opacity: 1; color: rgb(29 78 216 / var(--tw-text-opacity)); @@ -2000,11 +1953,6 @@ body.dark-mode { color: rgb(253 224 71 / var(--tw-text-opacity)); } -.dark\:text-gray-500:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - .dark\:shadow-gray-800\/30:is(.dark *) { --tw-shadow-color: rgb(31 41 55 / 0.3); --tw-shadow: var(--tw-shadow-colored);