From 7874a53c56e24d39afb745a3273eb0a13ef3ee8f Mon Sep 17 00:00:00 2001 From: "@Shoveet2003" Date: Tue, 28 May 2024 00:45:08 +0530 Subject: [PATCH] Server connected with frontend! --- .github/workflows/nextjs.yml | 94 +++++++++++++++ components/Blogs/BlogCard.js | 11 ++ components/Opportunities/oppCard.js | 11 +- db/models/Blog.js | 8 ++ db/models/BlogComment.js | 22 ++++ package.json | 5 + pages/_app.js | 90 ++++++++++---- pages/adFix.js | 12 ++ pages/api/blogs/comments/fetchComments.js | 20 ++++ pages/api/blogs/comments/publishComment.js | 28 +++++ pages/api/blogs/fetchBlogs.js | 19 +++ pages/api/blogs/publishBlog.js | 2 + ...stOpportunity.js => publishOpportunity.js} | 52 ++++---- pages/blog/[blogId].js | 113 +++++++++++++++++- pages/blog/index.js | 29 +++++ public/images/blog/blogDetails/photo1.avif | Bin 99691 -> 0 bytes public/images/blog/test.png | Bin 0 -> 7849 bytes styles/BlogDetail.module.css | 77 +++++++++++- 18 files changed, 538 insertions(+), 55 deletions(-) create mode 100644 .github/workflows/nextjs.yml create mode 100644 db/models/BlogComment.js create mode 100644 pages/adFix.js create mode 100644 pages/api/blogs/comments/fetchComments.js create mode 100644 pages/api/blogs/comments/publishComment.js create mode 100644 pages/api/blogs/fetchBlogs.js rename pages/api/opportunities/{postOpportunity.js => publishOpportunity.js} (96%) delete mode 100644 public/images/blog/blogDetails/photo1.avif create mode 100644 public/images/blog/test.png diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml new file mode 100644 index 00000000..0dc360b7 --- /dev/null +++ b/.github/workflows/nextjs.yml @@ -0,0 +1,94 @@ +# Sample workflow for building and deploying a Next.js site to GitHub Pages +# +# To get started with Next.js see: https://nextjs.org/docs/getting-started +# +name: Deploy Next.js site to Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: ["test"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow one concurrent deployment +concurrency: + group: "pages" + cancel-in-progress: true + +jobs: + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v3 + - name: Detect package manager + id: detect-package-manager + run: | + if [ -f "${{ github.workspace }}/yarn.lock" ]; then + echo "manager=yarn" >> $GITHUB_OUTPUT + echo "command=install" >> $GITHUB_OUTPUT + echo "runner=yarn" >> $GITHUB_OUTPUT + exit 0 + elif [ -f "${{ github.workspace }}/package.json" ]; then + echo "manager=npm" >> $GITHUB_OUTPUT + echo "command=ci" >> $GITHUB_OUTPUT + echo "runner=npx --no-install" >> $GITHUB_OUTPUT + exit 0 + else + echo "Unable to determine packager manager" + exit 1 + fi + - name: Setup Node + uses: actions/setup-node@v3 + with: + node-version: "16" + cache: ${{ steps.detect-package-manager.outputs.manager }} + - name: Setup Pages + uses: actions/configure-pages@v2 + with: + # Automatically inject basePath in your Next.js configuration file and disable + # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized). + # + # You may remove this line if you want to manage the configuration yourself. + static_site_generator: next + - name: Restore cache + uses: actions/cache@v3 + with: + path: | + .next/cache + # Generate a new cache whenever packages or source files change. + key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }} + # If source files changed but packages didn't, rebuild from a prior cache. + restore-keys: | + ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}- + - name: Install dependencies + run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} + - name: Build with Next.js + run: ${{ steps.detect-package-manager.outputs.runner }} next build + - name: Static HTML export with Next.js + run: ${{ steps.detect-package-manager.outputs.runner }} next export + - name: Upload artifact + uses: actions/upload-pages-artifact@v1 + with: + path: ./out + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v1 diff --git a/components/Blogs/BlogCard.js b/components/Blogs/BlogCard.js index 48c38840..c0f50a10 100644 --- a/components/Blogs/BlogCard.js +++ b/components/Blogs/BlogCard.js @@ -1,11 +1,18 @@ import styles from "@styles/scss/blogcard.module.scss"; import Image from "next/image"; +<<<<<<< HEAD:components/Blogs/BlogCard.js import dataScienceImg from "@images/blog/dataScience.webp"; +======= +>>>>>>> 2e3ced3f1a6c1a70341b50aee0bde119b118a150:components/BlogCard.js import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faThumbsUp, faComment } from "@fortawesome/free-solid-svg-icons"; import Link from "next/link"; const BlogCard = (props) => { +<<<<<<< HEAD:components/Blogs/BlogCard.js const { id, image, comments, likes ,title,author} = props; +======= + const { id, title, image, comments, likes } = props; +>>>>>>> 2e3ced3f1a6c1a70341b50aee0bde119b118a150:components/BlogCard.js return ( <> { >
+<<<<<<< HEAD:components/Blogs/BlogCard.js data-science-amupedia-blogs +======= + data-science-amupedia-blogs +>>>>>>> 2e3ced3f1a6c1a70341b50aee0bde119b118a150:components/BlogCard.js

{title} diff --git a/components/Opportunities/oppCard.js b/components/Opportunities/oppCard.js index f9792a59..f77fefd7 100644 --- a/components/Opportunities/oppCard.js +++ b/components/Opportunities/oppCard.js @@ -1,17 +1,18 @@ +/* eslint-disable jsx-a11y/alt-text */ import styles from "@styles/oppCard.module.css"; import Link from "node_modules/next/link"; -const OppCard = (props) => { - const { title, date, image } = props; +const OppCard = (data) => { + const { title, date, image } = data.data; return (
-

Image

+
-

Title

- Date Added - +

{title}

+ {date}
Apply Now diff --git a/db/models/Blog.js b/db/models/Blog.js index 24fe7470..bc05355f 100644 --- a/db/models/Blog.js +++ b/db/models/Blog.js @@ -16,6 +16,14 @@ const blogSchema = new mongoose.Schema({ type: String, required: true, }, + like: { + type: Number, + required: true, + }, + numberOfComments: { + type: Number, + required: true, + } }); const Blog = mongoose.models.Blog || mongoose.model("Blog", blogSchema); diff --git a/db/models/BlogComment.js b/db/models/BlogComment.js new file mode 100644 index 00000000..17a2c6e8 --- /dev/null +++ b/db/models/BlogComment.js @@ -0,0 +1,22 @@ +import mongoose from "mongoose"; + +const blogCommentSchema = new mongoose.Schema({ + userName: { + type: String, + }, + blogId: { + type: String, + required: true, + }, + message: { + type: String, + required: true, + }, + date: { + type: String, + required: true, + } +}); + +const BlogComment = mongoose.models.BlogComment || mongoose.model("BlogComment", blogCommentSchema); +export default BlogComment; diff --git a/package.json b/package.json index db20b76e..37d58e53 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,13 @@ "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", +<<<<<<< HEAD "@fortawesome/react-fontawesome": "^0.2.0", "aos": "^2.3.4", +======= + "@fortawesome/react-fontawesome": "^0.1.16", + "@types/webidl-conversions": "^7.0.0", +>>>>>>> 2e3ced3f1a6c1a70341b50aee0bde119b118a150 "axios": "^0.27.2", "bcryptjs": "^2.4.3", "framer-motion": "^5.5.5", diff --git a/pages/_app.js b/pages/_app.js index 9b04d25e..4fa93fe1 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,5 +1,10 @@ +<<<<<<< HEAD import Navbar from "@comp/common/Navbar"; import jwt from "jsonwebtoken"; +======= +import Navbar from "@comp/Navbar"; +// import jwt from "jsonwebtoken"; +>>>>>>> 2e3ced3f1a6c1a70341b50aee0bde119b118a150 import "@styles/globals.css"; import Head from "node_modules/next/head"; // import { useEffect } from 'react'; @@ -71,30 +76,31 @@ function MyApp({ Component, pageProps, router }) { // } // }, []); - return ( - - {/*
*/} - - {/* */} - - - {/* */} +<<<<<<< HEAD Amupedia {/* Primary meta tags */} @@ -151,6 +157,50 @@ function MyApp({ Component, pageProps, router }) { ); +======= + + Amupedia + + + + + + + + + + + + + + ); +>>>>>>> 2e3ced3f1a6c1a70341b50aee0bde119b118a150 } export default MyApp; diff --git a/pages/adFix.js b/pages/adFix.js new file mode 100644 index 00000000..aec4c26e --- /dev/null +++ b/pages/adFix.js @@ -0,0 +1,12 @@ +const body = document.querySelector('body'); +const googleAd = document.querySelector('ins[data-anchor-status]'); + +setInterval(() => { + if (googleAd.getAttribute("data-anchor-status") === "displayed") { + body.style.paddingTop = "100px"; + } else if (googleAd.getAttribute("data-anchor-status") === "dismissed") { + body.style.paddingTop = "0"; + } +}, 0); + +console.log("Testing"); \ No newline at end of file diff --git a/pages/api/blogs/comments/fetchComments.js b/pages/api/blogs/comments/fetchComments.js new file mode 100644 index 00000000..edeaeb16 --- /dev/null +++ b/pages/api/blogs/comments/fetchComments.js @@ -0,0 +1,20 @@ +import db from "db/db"; +import BlogComment from "db/models/BlogComment"; +import nextConnect from "next-connect"; +const handler = nextConnect(); + +handler.get(async (req, res) => { + try { + await db.connect(); + const data = req.body; + console.log(data); + const result = await BlogComment.find(); + console.log(result) + await db.disconnect(); + res.status(200).json({ success: true, result: result }); + } catch (error) { + res.status(500).json({ success: false, error }); + } +}); + +export default handler; diff --git a/pages/api/blogs/comments/publishComment.js b/pages/api/blogs/comments/publishComment.js new file mode 100644 index 00000000..a7d9b51b --- /dev/null +++ b/pages/api/blogs/comments/publishComment.js @@ -0,0 +1,28 @@ +import db from "db/db"; +import BlogComment from "db/models/BlogComment"; +import nextConnect from "next-connect"; +const handler = nextConnect(); + +handler.post(async (req, res) => { + try { + await db.connect(); + const data = req.body; + const today = new Date(); + const dd = String(today.getDate()).padStart(2, '0'); + const mm = String(today.getMonth() + 1).padStart(2, '0'); + const yyyy = today.getFullYear(); + console.log(data); + const result = await BlogComment.create({ + userName: req.body.userName, + blogId: req.body.blogId, + message: req.body.message, + date: mm + '/' + dd + '/' + yyyy, + }); + await db.disconnect(); + res.status(200).json({ success: true, result: result }); + } catch (error) { + res.status(500).json({ success: false, error }); + } +}); + +export default handler; diff --git a/pages/api/blogs/fetchBlogs.js b/pages/api/blogs/fetchBlogs.js new file mode 100644 index 00000000..507424f4 --- /dev/null +++ b/pages/api/blogs/fetchBlogs.js @@ -0,0 +1,19 @@ +import db from 'db/db'; +import Blog from 'db/models/Blog'; +import nextConnect from 'next-connect'; +const handler = nextConnect(); + +handler.get(async (req, res) => { + try { + await db.connect(); + const data = req.body; + console.log(data); + const result = await Blog.find(); + await db.disconnect(); + res.status(200).json({ success: true, result: result }); + } catch (error) { + res.status(500).json({ success: false, error }); + } +}); + +export default handler; diff --git a/pages/api/blogs/publishBlog.js b/pages/api/blogs/publishBlog.js index 0d58ebce..e94d50f5 100644 --- a/pages/api/blogs/publishBlog.js +++ b/pages/api/blogs/publishBlog.js @@ -13,6 +13,8 @@ handler.post(async (req, res) => { title: req.body.title, coverImg: req.body.coverImg, content: req.body.content, + like: 0, // we dont need that because it will automatically set it + numberOfComments: 0, }); await db.disconnect(); res.status(200).json({ success: true, result: result }); diff --git a/pages/api/opportunities/postOpportunity.js b/pages/api/opportunities/publishOpportunity.js similarity index 96% rename from pages/api/opportunities/postOpportunity.js rename to pages/api/opportunities/publishOpportunity.js index 480717bc..88a66354 100644 --- a/pages/api/opportunities/postOpportunity.js +++ b/pages/api/opportunities/publishOpportunity.js @@ -1,26 +1,26 @@ -import db from 'db/db'; -import Opportunities from 'db/models/Opportunities'; -import nextConnect from 'next-connect'; -const handler = nextConnect(); - -handler.post(async (req, res) => { - try { - await db.connect(); - - console.log(data); - const result = await Opportunities.create({ - id: data.id, - image: data.image, - title: data.title, - date: data.date, - applyNow: data.applyNow, - description: data.description, - }); - await db.disconnect(); - res.status(200).json({ success: true, result: result }); - } catch (error) { - res.status(500).json({ success: false, error }); - } -}); - -export default handler; +import db from 'db/db'; +import Opportunities from 'db/models/Opportunities'; +import nextConnect from 'next-connect'; +const handler = nextConnect(); + +handler.post(async (req, res) => { + try { + await db.connect(); + + console.log(data); + const result = await Opportunities.create({ + id: data.id, + image: data.image, + title: data.title, + date: data.date, + applyNow: data.applyNow, + description: data.description, + }); + await db.disconnect(); + res.status(200).json({ success: true, result: result }); + } catch (error) { + res.status(500).json({ success: false, error }); + } +}); + +export default handler; diff --git a/pages/blog/[blogId].js b/pages/blog/[blogId].js index aa6a5f0e..e64ccfae 100644 --- a/pages/blog/[blogId].js +++ b/pages/blog/[blogId].js @@ -11,6 +11,7 @@ import { faLinkedin } from "node_modules/@fortawesome/free-brands-svg-icons/inde import { faLink } from "node_modules/@fortawesome/free-solid-svg-icons/index"; import { faBookmark } from "node_modules/@fortawesome/free-solid-svg-icons/index"; import { faEllipsisH } from "node_modules/@fortawesome/free-solid-svg-icons/index"; +<<<<<<< HEAD import {faArrowLeft} from "node_modules/@fortawesome/free-solid-svg-icons/index"; import BlogCard from "components/Blogs/BlogCard"; import blogData from "/data/blogdata"; @@ -27,12 +28,50 @@ export default function BlogId() { console.log(blog) console.log("heelo",blogId); +======= +import BlogCard from "components/BlogCard"; +import axios from 'axios'; +// import blogData from "/data/blogdata"; +import Link from "next/link"; + +export default function BlogId({ blogsData, commentsData }) { + const router = useRouter(); + const { blogId } = router.query; + const blogDetail = blogsData.result[blogId]; + console.log(blogDetail) + const { userId, title, coverImg, content, _id } = blogDetail; + console.log(coverImg) + + const submitComment = (e) => { + e.preventDefault(); + const message = document.getElementById("userCommentMessage").value; + const userCommentName = document.querySelector(".userCommentName").value; + const blogId = _id; + if (message.length < 3) { + return alert("Message must longer than 3 characters") + } + if (userCommentName < 3) { + return alert("Your Name must longer than 3 characters") + } + if (blogId.length <= 1) { + return alert("Blog Id must be longer than 1 characters") + } + axios.post("http://localhost:3000/api/blogs/comments/publishComment", { userName: userCommentName, blogId, message }).then(res => { + console.log(res) + alert("Comment has been sent!") + }) + } +>>>>>>> 2e3ced3f1a6c1a70341b50aee0bde119b118a150 return (
+<<<<<<< HEAD

{blog.title}

+======= +

{title}

+>>>>>>> 2e3ced3f1a6c1a70341b50aee0bde119b118a150
    @@ -44,7 +83,7 @@ export default function BlogId() {
  • - Test User + {userId}
  • @@ -95,6 +134,7 @@ export default function BlogId() {
+<<<<<<< HEAD
{blog.description} +======= + blogDetailPicture +
+
+

+ {content} +

+>>>>>>> 2e3ced3f1a6c1a70341b50aee0bde119b118a150 +
+
+

Comment

+
+

Write a comment...

+
+ + +
+ +
+
    + {commentsData.result.map((comment, index) => { + if (comment.blogId === _id) { + return ( + ( +
  • +
    +
    + + {comment.userName} +
    + {comment.date} +
    +
    +

    {comment.message}

    +
    +
    • + ) + ) + } + })} +
+

See other blogs

- {blogData.map((blogItem) => ( + {blogsData.result.map((blogItem, index) => ( >>>>>> 2e3ced3f1a6c1a70341b50aee0bde119b118a150 /> ))}
@@ -126,8 +222,21 @@ export default function BlogId() { ); } +<<<<<<< HEAD export async function getServerSideProps(context) { return { props: {}, }; } +======= +export const getServerSideProps = async () => { + const resBlogs = await fetch('http://localhost:3000/api/blogs/fetchBlogs'); + const resBlogComments = await fetch('http://localhost:3000/api/blogs/comments/fetchComments'); + const blogsData = await resBlogs.json(); + const commentsData = await resBlogComments.json(); + + return { + props: { blogsData, commentsData } + } +} +>>>>>>> 2e3ced3f1a6c1a70341b50aee0bde119b118a150 diff --git a/pages/blog/index.js b/pages/blog/index.js index 42c78772..7cb2ccb4 100644 --- a/pages/blog/index.js +++ b/pages/blog/index.js @@ -3,6 +3,7 @@ import BlogCard from "components/Blogs/BlogCard"; import Footer from "components/common/Footer"; import Header from "components/common/Header/Header"; import styles from "@styles/scss/blog.module.scss"; +<<<<<<< HEAD import blogData from "/data/blogdata"; import GoToTop from "components/GoToTop"; import WriteBlog from "./writeblog"; @@ -19,6 +20,20 @@ export default function Blogs() { blogItem.title.toLowerCase().includes(query.toLowerCase()) ); +======= +// import blogData from "/data/blogdata"; + +export const getStaticProps = async () => { + const res = await fetch('http://localhost:3000/api/blogs/fetchBlogs'); + const blogsData = await res.json(); + + return { + props: { blogsData } + } +} + +export default function Blogs({ blogsData }) { +>>>>>>> 2e3ced3f1a6c1a70341b50aee0bde119b118a150 return ( <> @@ -40,6 +55,7 @@ export default function Blogs() {
{/* Write a blog */}
+<<<<<<< HEAD {filteredBlogData.length > 0 ? ( filteredBlogData.map((blogItem) => ( )}
+======= + {blogsData.result.map((blogItem, index) => ( + + ))} +
+>>>>>>> 2e3ced3f1a6c1a70341b50aee0bde119b118a150