From 91e9ed8877d5f76c7d7afa3c0267c6d0448558d4 Mon Sep 17 00:00:00 2001
From: Nishant Kaushal <101548649+nishant0708@users.noreply.github.com>
Date: Mon, 29 Jul 2024 01:42:53 +0530
Subject: [PATCH] Sorted Blog

---
 src/components/blogs/BlogReadPage.css | 312 +++++++++++++-------------
 src/components/blogs/Blogs.css        |  59 +++--
 src/components/blogs/Blogs.jsx        |  64 ++++--
 src/firebase/auth.js                  |   2 +
 4 files changed, 231 insertions(+), 206 deletions(-)

diff --git a/src/components/blogs/BlogReadPage.css b/src/components/blogs/BlogReadPage.css
index 2b854d94..758b01f0 100644
--- a/src/components/blogs/BlogReadPage.css
+++ b/src/components/blogs/BlogReadPage.css
@@ -1,170 +1,176 @@
-.blog-read-page_container{
-    width: 100%;
-    min-height: 69vh;
-    background: linear-gradient(135deg, #4375ff, #80ccff);
-   padding: 50px 20px;
-}
-#dark .blog-read-page_container{
-  background: linear-gradient(to right, rgba(37, 37, 37, 0.5), rgba(22, 21, 21, 0.5));
-}
-  .blog-read-page {
-    max-width: 800px;
-    margin: 0px auto;
-    padding: 40px;
-    background-color: #ffffff;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-   
-  }
-  #dark .blog-read-page{
-    background-color: #2d2d2d;
-  }
-  .blog-header {
-    margin-bottom: 20px;
-    margin-bottom: 0px;
-    padding-bottom: 5px;
-    border-bottom: 2px solid rgba(0, 0, 0, 0.222);
-  }
-  
-  .blog-title {
-    font-size: 2.5em;
-    font-weight: bold;
-    margin-bottom: 10px;
-    text-align: left;
-  }
-  
-  .blog-meta {
-    display: flex;
-    align-items: center;
-  }
-  .comment-button{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap:2px;
-  }
-  .blog-read-page_container .blog-tags{
-    text-align: left;
-  }
-  .author-avatar {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    object-fit: cover;
-    margin-right: 15px;
-  }
-  
-  .meta-info {
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .author-name {
-    font-size: 1.2em;
-    font-weight: 500;
-  }
-  
-  .blog-date {
-    font-size: 0.9em;
-    color: #777777;
-    text-align: justify;
-  }
-  .share-icon {
-    min-width: 50px;
-    cursor: pointer;
-  }
-  .share-button-icons {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 16px;
-   
-  }
-  .share-button-icons span{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 50px;
-    cursor: pointer;
-    height: 50px;
-    border-radius: 50%;
-  }
-  .close-button{
-   width: 80px;
-   margin-top: 20px !important;
-    cursor: pointer;
-    margin: auto;
-    background-color: rgb(29, 97, 223);
-  color: white  ;
+.blog-read-page_container {
+  width: 100%;
+  min-height: 69vh;
+  background: linear-gradient(135deg, #4375ff, #80ccff);
+  padding: 50px 20px;
+}
+#dark .blog-read-page_container {
+  background: linear-gradient(
+    to right,
+    rgba(37, 37, 37, 0.5),
+    rgba(22, 21, 21, 0.5)
+  );
+}
+.blog-read-page {
+  max-width: 800px;
+  margin: 0px auto;
+  padding: 40px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
+#dark .blog-read-page {
+  background-color: #2d2d2d;
+}
+.blog-header {
+  margin-bottom: 20px;
+  margin-bottom: 0px;
+  padding-bottom: 5px;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.222);
+}
+
+.blog-title {
+  font-size: 2.5em;
+  font-weight: bold;
+  margin-bottom: 10px;
+  text-align: left;
+}
+
+.blog-meta {
+  display: flex;
+  align-items: center;
+}
+.comment-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+.blog-read-page_container .blog-tags {
+  text-align: left;
+}
+.author-avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-right: 15px;
+}
+
+.meta-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.author-name {
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.blog-date {
+  font-size: 0.9em;
+  color: #777777;
+  text-align: justify;
+}
+.share-icon {
+  min-width: 50px;
+  cursor: pointer;
+}
+.share-button-icons {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 16px;
+}
+.share-button-icons span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
+  cursor: pointer;
+  height: 50px;
+  border-radius: 50%;
+}
+.close-button {
+  width: 80px;
+  margin-top: 20px !important;
+  cursor: pointer;
+  margin: auto;
+  background-color: rgb(29, 97, 223);
+  color: white;
   height: 40px;
   font-size: 18px;
   border-radius: 5px;
-  }
-  .blog_share_con{
-    margin-top: 20px;
-  }
-  .blog_share_title{
-    font-size: 2rem;
-    font-weight: 600;
-    display: -webkit-box;
+}
+.blog_share_con {
+  margin-top: 20px;
+}
+.blog_share_title {
+  font-size: 2rem;
+  font-weight: 600;
+  display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  }
-  .blog_share_summ{
-    font-size: 1.5rem;
-    font-weight: 400;
-    display: -webkit-box;
+}
+.blog_share_summ {
+  font-size: 1.5rem;
+  font-weight: 400;
+  display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  }
-.right_blog_icon{
+}
+.right_blog_icon {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
 }
 
-  .blog-content {
-    line-height: 1.6;
-    margin-top: 20px;
-    text-align: justify;
-  }
-  #dark .blog-content *{
-    color: white;
-  }
-  .Edit_icon{
-    text-align: end;
-  }
-  #dark .Edit_icon{
-    color: white;
-  }
-  .icons_blog_read{
-    display: flex;
-    justify-content: space-between;
-    margin-top: 5px;
-    align-items: center;
-  }
-  .like_icon{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 2px;
-  }
-  .like_icon p{
-    font-size: 12px;
-  }
-  .blog-content *{
-   max-width: 100%;
-  }
-  .blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5, .blog-content h6 {
-    margin-top: 1.5em;
-    margin-bottom: 0.5em;
-  }
-  
-  .blog-content p {
-    margin-bottom: 1em;
-  }
-  
\ No newline at end of file
+.blog-content {
+  line-height: 1.6;
+  margin-top: 20px;
+  text-align: justify;
+}
+#dark .blog-content * {
+  color: white;
+}
+.Edit_icon {
+  text-align: end;
+}
+#dark .Edit_icon {
+  color: white;
+}
+.icons_blog_read {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 5px;
+  align-items: center;
+}
+.like_icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+.like_icon p {
+  font-size: 12px;
+}
+.blog-content * {
+  max-width: 100%;
+}
+.blog-content h1,
+.blog-content h2,
+.blog-content h3,
+.blog-content h4,
+.blog-content h5,
+.blog-content h6 {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.blog-content p {
+  margin-bottom: 1em;
+}
diff --git a/src/components/blogs/Blogs.css b/src/components/blogs/Blogs.css
index d73b1381..9b42dcce 100644
--- a/src/components/blogs/Blogs.css
+++ b/src/components/blogs/Blogs.css
@@ -33,12 +33,12 @@ body {
   justify-content: center;
   margin-bottom: 2rem;
 }
-.blogs-header{
+.blogs-header {
   display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-margin-top: 80px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: 80px;
 }
 .blogs-header p {
   font-size: 1.2em;
@@ -148,13 +148,11 @@ margin-top: 80px;
 }
 
 .blog-card p {
-  color:black !important;
-  
+  color: black !important;
 }
 
 #dark .blog-card p {
   color: black;
- 
 }
 
 .blog-tag {
@@ -253,21 +251,21 @@ margin-top: 80px;
   width: 22vw;
   padding: 10px;
 }
-.blogwrite{
+.blogwrite {
   background-color: rgb(5, 6, 45);
   border-radius: 6px;
   padding: 5px;
- width: 200px;
- height: 50px;
- color: white;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
-margin:20px 0px;
+  width: 200px;
+  height: 50px;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 20px 0px;
   transition: 300ms;
 }
-.blogwrite:hover{
+.blogwrite:hover {
   background-color: rgb(24, 25, 99);
 }
 .click-btn1 a {
@@ -294,7 +292,7 @@ margin:20px 0px;
   left: 30%;
   top: 70px !important;
   height: 90vh !important;
-    max-width: 600px;
+  max-width: 600px;
   background-color: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -302,31 +300,33 @@ margin:20px 0px;
   padding: 20px;
   overflow: scroll;
 }
-#dark .modal-jobs1{
+#dark .modal-jobs1 {
   background-color: black !important;
   color: white !important;
 }
-.modal-jobs1 img{
+.modal-jobs1 img {
   border-radius: 50%;
   margin-right: 10px;
 }
-#dark .modal-jobs1 div,#dark .modal-jobs1 p,#dark .modal-jobs1 .jobs-container1 .abc{
+#dark .modal-jobs1 div,
+#dark .modal-jobs1 p,
+#dark .modal-jobs1 .jobs-container1 .abc {
   background-color: black !important;
   color: white !important;
 }
-@media only screen and (max-width:900px){
-  .modal-jobs1{
+@media only screen and (max-width: 900px) {
+  .modal-jobs1 {
     left: 20%;
     width: 80vw;
   }
 }
-@media only screen and (max-width:600px){
-  .modal-jobs1{
+@media only screen and (max-width: 600px) {
+  .modal-jobs1 {
     left: 20px;
     width: 90vw;
   }
 }
-.blackb{
+.blackb {
   background-color: black;
   opacity: 0.6;
   height: 100vh;
@@ -337,12 +337,11 @@ margin:20px 0px;
   left: 0;
 }
 .blog_share_summ {
- 
 }
 
 .clip-text {
   /* Ensure the text doesn't break out of its container */
   overflow: hidden;
   white-space: nowrap;
-text-overflow: ellipsis;  
-}
\ No newline at end of file
+  text-overflow: ellipsis;
+}
diff --git a/src/components/blogs/Blogs.jsx b/src/components/blogs/Blogs.jsx
index 9016215f..2584e7e8 100644
--- a/src/components/blogs/Blogs.jsx
+++ b/src/components/blogs/Blogs.jsx
@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from "react";
-import './Blogs.css'; // Import CSS file for styles
+import "./Blogs.css"; // Import CSS file for styles
 import Footer from "../Footer/Footer";
 import { useNavigate } from "react-router-dom"; // Import Link and useNavigate from react-router-dom
-import { getDatabase, ref, get } from 'firebase/database';
+import { getDatabase, ref, get } from "firebase/database";
 import DOMPurify from "dompurify";
 import { marked } from "marked";
 import Navbar from "../Navbar/Navbar";
-import { toast, ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import { toast, ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import BlogsSkeleton from "./BlogsSkeleton"; // Import Skeleton component
 
 const Blogs = () => {
@@ -16,15 +16,14 @@ const Blogs = () => {
   const [blogsData, setBlogsData] = useState([]);
   const [loading, setLoading] = useState(true); // Loading state
   const navigate = useNavigate();
-  const userId = localStorage.getItem('userUid');
+  const userId = localStorage.getItem("userUid");
   const [user, setUser] = useState(null);
 
   useEffect(() => {
-    if (localStorage.getItem('login')) {
+    if (localStorage.getItem("login")) {
       setLogin(true);
     }
   }, []);
-
   useEffect(() => {
     const fetchBlogs = async () => {
       try {
@@ -32,7 +31,7 @@ const Blogs = () => {
 
         // Fetch user data if logged in
         if (userId) {
-          const userRef = ref(db, 'users/' + userId);
+          const userRef = ref(db, "users/" + userId);
           const userSnap = await get(userRef);
 
           if (userSnap.exists()) {
@@ -41,40 +40,46 @@ const Blogs = () => {
 
             const articleCreated = userData.articleCreated;
             if (articleCreated) {
-              const idArray = articleCreated.split(',');
+              const idArray = articleCreated.split(",");
               const idObject = idArray.reduce((acc, id) => {
                 acc[id.trim()] = true;
                 return acc;
               }, {});
               setIds(idObject);
             } else {
-              console.log('No articles created by the user.');
+              console.log("No articles created by the user.");
             }
           } else {
-            console.log('No user data available');
+            console.log("No user data available");
           }
         }
 
         // Fetch all articles
-        const articlesRef = ref(db, 'articles');
+        const articlesRef = ref(db, "articles");
         const snapshot = await get(articlesRef);
 
         if (snapshot.exists()) {
           const data = snapshot.val();
-          const blogsArray = Object.values(data).map(blog => ({
+          const blogsArray = Object.values(data).map((blog) => ({
+            id: blog.id,
             title: blog.title,
             date: new Date(blog.createdAt).toLocaleDateString(),
-            summary: stripMarkdown(blog.content.substring(0, 100)) + '...',
+            summary: stripMarkdown(blog.content.substring(0, 100)) + "...",
             tags: blog.tags,
             author: blog.author,
-            link: `/blogs/${blog.id}`
+            createdAt: new Date(blog.createdAt), // Parse createdAt to Date object
+            link: `/blogs/${blog.id}`,
           }));
+
+          // Sort blogs by createdAt timestamp in descending order
+          blogsArray.sort((a, b) => b.createdAt - a.createdAt);
+
           setBlogsData(blogsArray);
         } else {
-          console.log('No data available');
+          console.log("No data available");
         }
       } catch (error) {
-        console.error('Error fetching blogs:', error);
+        console.error("Error fetching blogs:", error);
       } finally {
         setTimeout(() => {
           setLoading(false); // Set loading to false after 2 seconds
@@ -93,11 +98,11 @@ const Blogs = () => {
   };
 
   useEffect(() => {
-    if (localStorage.getItem('newblog')) {
+    if (localStorage.getItem("newblog")) {
       toast.success("Blog Created Successfully!! 🚀", {
         className: "toast-message",
       });
-      localStorage.removeItem('newblog');
+      localStorage.removeItem("newblog");
     }
   }, []);
 
@@ -109,21 +114,34 @@ const Blogs = () => {
         <header className="blogs-header">
           <h1>Our Latest Blogs</h1>
           <p>Stay updated with our latest news and articles on counseling.</p>
-          {isLoggedIn && <button onClick={() => navigate('/blogwrite')} className="blogwrite">Create Blog</button>}
+          {isLoggedIn && (
+            <button
+              onClick={() => navigate("/blogwrite")}
+              className="blogwrite"
+            >
+              Create Blog
+            </button>
+          )}
         </header>
         <div className="blogs-list">
-          { loading ? (
+          {loading ? (
             <BlogsSkeleton count={blogsData.length} /> // Display skeleton while loading
           ) : (
             blogsData.map((blog, index) => (
-              <div key={index} className="blog-card" onClick={() => navigate(blog.link)}>
+              <div
+                key={index}
+                className="blog-card"
+                onClick={() => navigate(blog.link)}
+              >
                 <h2 className="clip-text">{blog.title}</h2>
                 <p className="blog-date">{blog.date}</p>
                 <p className="clip-text">{blog.summary}</p>
                 <p className="blog-author">By: {blog.author}</p>
                 <div className="blog-tags">
                   {blog.tags.map((tag, tagIndex) => (
-                    <span key={tagIndex} className="blog-tag">{tag}</span>
+                    <span key={tagIndex} className="blog-tag">
+                      {tag}
+                    </span>
                   ))}
                 </div>
                 <button className="click-btn1">
diff --git a/src/firebase/auth.js b/src/firebase/auth.js
index 0a3a2514..2f53e1a0 100644
--- a/src/firebase/auth.js
+++ b/src/firebase/auth.js
@@ -13,7 +13,9 @@ const firebaseConfig = {
   messagingSenderId: "1055143292636",
   appId: "1:1055143292636:web:1397f7974a27bd486e0e19",
   measurementId: "G-MJST0MPDZ3"
+
 };
+
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
 const analytics = getAnalytics(app);