th3cyb3rhub · kabir0x23 · May 26, 2024 · May 26, 2024
diff --git a/src/App.jsx b/src/App.jsx
@@ -8,7 +8,6 @@ import ScrollToTop from "./components/Other/ScrollToTop";
 import {
     About,
     Community,
-    CreateBlog,
     // CyberGames,
     Footer,
     InterviewQuestions,
@@ -72,6 +71,7 @@ import ResetPassword from "src/pages/ResetPassword";
 import Register from "src/pages/Register";
 // import CyberNews from "./components/Resources/CyberNews/CyberNews";
 import ChatBox from "src/components/Chat/ChatBox/ChatBox";
+import CheatSheetsRoutes from "src/components/CheatSheets/CheatSheetsRoutes.jsx";
 
 // import isAuthenticated from "./features/isAuthenticated";
 // import ChatBot from "./components/ChatBot/ChatBot";
@@ -153,7 +153,6 @@ const App = () => {
                         <Route path={"/explore/*"} element={<ExploreRoutes />} />
                         <Route path={"/feeds/*"} element={<FeedsRoute />} />
                         <Route path={"/blogs/*"} element={<BlogsRoute />} />
-                        <Route exact path={"/blogs/create-blog"} element={<CreateBlog />} />
 
                         <Route path={"/forum/*"} element={<ForumRoute />} />
 
@@ -170,7 +169,7 @@ const App = () => {
                         <Route path={"/roadmaps/*"} element={<RoadmapsRoute />} />
                         <Route path={"/interviewQuestions"} element={<InterviewQuestions />} />
                         <Route path={"/tools/*"} element={<ToolsRoutes />} />
-                        {/* <Route path={"/cheatsheets/*"} element={<CheatSheetsRoutes />} /> */}
+                        <Route path={"/cheatsheets/*"} element={<CheatSheetsRoutes />} />
                         <Route path={"/courses/*"} element={<CoursesRoute />} />
                         <Route exact path={"/victimhelp"} element={<VictimHelp />} />
 

diff --git a/src/components/Blogs/BlogCard/BlogCard.jsx b/src/components/Blogs/BlogCard/BlogCard.jsx
@@ -25,18 +25,35 @@ import { useDispatch, useSelector } from "react-redux";
 import { BiEdit } from "react-icons/bi";
 import { deleteBlog } from "src/features/blogs/blogSlice";
 import { AiFillDelete } from "react-icons/ai";
+import { PostStat, PostStatLabel } from "src/components/Feeds/FeedPosts/FeedPostsElements.jsx";
+import { BsBookmarks, BsBookmarksFill } from "react-icons/bs";
+import { addBookmark, removeBookmark } from "src/features/bookmarks/bookmarkSlice.js";
 
 const image = "https://user-images.githubusercontent.com/44284877/210166161-ad2f71a7-df74-43b9-8330-af9740d9e8ba.png";
 
-const BlogCard = ({ blog }) => {
+const BlogCard = ({ blog, bookmarks }) => {
     const pathname = window.location.pathname;
-    const isDashboard = pathname.split("/").includes("dashboard");
-    console.log(pathname.split("/")[1]);
+    const isDashboard = pathname.split("/").includes("my-blogs");
     const dispatch = useDispatch();
     const coverImage = blog?.coverImage;
     const coverImageUrl = cdnContentImagesUrl(`/blog/${coverImage}`) || image;
     const { user } = useSelector((state) => state.auth);
 
+    const userId = user?._id;
+
+    const isBookmarked = () => {
+        return bookmarks?.some((bookmark) => bookmark.user === userId && bookmark.itemId === blog?._id);
+    };
+
+    const itemType = "blog";
+
+    const handleBookmark = (_id) => {
+        if (isBookmarked(_id)) {
+            dispatch(removeBookmark({ itemType, itemId: _id }));
+        } else {
+            dispatch(addBookmark({ itemType, itemId: _id }));
+        }
+    };
     return (
         <ContainerCard>
             <span>
@@ -57,13 +74,13 @@ const BlogCard = ({ blog }) => {
                         <RouterLink to={{ pathname: `/blogs/${encodeURL(blog?.title)}` }}>
                             <BlogCardImage src={coverImageUrl || image} alt={""} />
                         </RouterLink>
+                        <Username> @{blog?.username}</Username>
                     </BlogImageSection>
                 </DetailsSection>
                 <MainSection>
                     <SubSection>
                         <RouterLink to={{ pathname: `/blogs/${encodeURL(blog?.title)}` }}>
                             <Title> {blog?.title} </Title>
-                            {/* <Description> {blog?.content.slice(0, 125)} </Description> */}
                         </RouterLink>
                     </SubSection>
                 </MainSection>
@@ -72,11 +89,15 @@ const BlogCard = ({ blog }) => {
                 <Categories>
                     {blog?.tags
                         .slice(0, 3)
-                        .map((tag, id) => (tag.length !== 0 ? <Category key={id}>{tag.slice(0, 30)}</Category> : null))}
-
+                        .map((tag, id) => (tag.length !== 0 ? <Category key={id}>{tag.slice(0, 18)}</Category> : null))}
                     {blog?.tags.length > 3 ? <Category>+ {blog?.tags.length - 3}</Category> : null}
                 </Categories>
-                <Username> @{blog?.username}</Username>
+
+                <PostStat style={{ padding: "8px" }}>
+                    <PostStatLabel onClick={() => handleBookmark(blog?._id)}>
+                        {isBookmarked(blog?._id) ? <BsBookmarksFill /> : <BsBookmarks />}
+                    </PostStatLabel>
+                </PostStat>
             </FooterDetailsSection>
         </ContainerCard>
     );

diff --git a/src/components/Blogs/BlogCard/BlogCardElements.jsx b/src/components/Blogs/BlogCard/BlogCardElements.jsx
@@ -1,24 +1,24 @@
 import styled from "styled-components";
 import { BsCheck } from "react-icons/bs";
-
 export const ContainerCard = styled.div`
     display: flex;
     flex-direction: column;
     width: 100%;
+    max-width: 400px;
     text-align: start;
     background: #111;
     justify-content: space-between;
     border-radius: 5px;
-    transition: 0.3s ease-in-out;
+    transition: transform 0.3s ease-in-out; /* Corrected property name */
     border: 1px solid #1f1f1f;
 
     &:hover {
-        scale: 1.03;
-        transition: 0.3s ease-in-out;
+        transform: scale(1.03); /* Corrected property name */
     }
 `;
 
 export const BlogImageSection = styled.div`
+    position: relative;
     display: flex;
     flex-direction: column;
     justify-content: end;
@@ -75,7 +75,7 @@ export const BlogCardImage = styled.img`
     width: 100%;
     height: auto;
     object-fit: cover;
-    max-height: 300px;
+    max-height: 150px;
     display: block;
     margin: 0 auto;
     border-radius: 15px 15px 0 0;
@@ -91,7 +91,7 @@ export const MainSection = styled.div`
 `;
 
 export const SubSection = styled.div`
-    padding: 25px;
+    padding: 15px 15px 10px;
 
     @media screen and (width <= 600px) {
         padding: 10px 10px 15px 15px;
@@ -100,6 +100,7 @@ export const SubSection = styled.div`
 
 export const DetailsSection = styled.div`
     display: flex;
+    position: relative;
     flex-direction: column;
     text-align: start;
     width: 100%;
@@ -115,11 +116,11 @@ export const FooterDetailsSection = styled.div`
     display: flex;
     align-items: end;
     justify-content: space-between;
-    padding: 5px 5px 15px 0;
+    padding: 0 10px 10px;
 `;
 
 export const Title = styled.div`
-    font-size: 20px;
+    font-size: 14px;
     font-weight: bold;
     margin-bottom: 5px;
     word-wrap: break-word;
@@ -149,18 +150,23 @@ export const Description = styled.div`
     }
 `;
 export const Username = styled.p`
-    padding: 0 5px 0 0;
-
-    @media screen and (width <= 600px) {
-        font-size: 10px;
-    }
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    background-color: rgb(0 0 0 / 70%);
+    color: #d3d3d3;
+    padding: 5px;
+    border-radius: 5px;
+    font-size: 10px;
+    font-weight: bold;
 `;
+
 export const Date = styled.p`
     font-size: 10px;
     margin: 0 5px 0 0;
 `;
+
 export const Categories = styled.div`
-    margin-left: 25px;
     display: flex;
     flex-wrap: wrap;
     word-wrap: break-word;
@@ -175,7 +181,7 @@ export const Category = styled.p`
     margin: 5px 5px 5px 0;
     border-radius: 2px;
     cursor: pointer;
-    font-size: 13px;
+    font-size: 11px;
     transition: transform 0.3s;
 
     &:hover {

diff --git a/src/components/Blogs/BlogCard/BlogCards.jsx b/src/components/Blogs/BlogCard/BlogCards.jsx
@@ -4,7 +4,7 @@ import BlogCard from "./BlogCard";
 import LoadingSpinner from "src/components/Other/MixComponents/Spinner/LoadingSpinner";
 import NotFound from "src/NotFound";
 
-const BlogCards = ({ blogs, searchTerm, isBlogLoading, blogsBookmarksData, displayAt, selectedTags }) => {
+const BlogCards = ({ blogs, searchTerm, isBlogLoading, blogsBookmarksData, displayAt, selectedTags, bookmarks }) => {
     if (isBlogLoading) return <LoadingSpinner />;
     if (!blogs.length) return <NotFound title="Blogs Not Found" description="There are no blog posts" />;
 
@@ -35,7 +35,7 @@ const BlogCards = ({ blogs, searchTerm, isBlogLoading, blogsBookmarksData, displ
                 ?.slice()
                 .reverse()
                 .map((blog) => (
-                    <BlogCard key={blog?._id} blog={blog} />
+                    <BlogCard key={blog?._id} blog={blog} bookmarks={bookmarks} />
                 ))}
         </AllBlogs>
     ) : null;

diff --git a/src/components/Blogs/BlogComments/AddCommentFormElements.jsx b/src/components/Blogs/BlogComments/AddCommentFormElements.jsx
@@ -13,7 +13,6 @@ export const AddCommentFormContainer = styled.div`
     overflow-y: auto;
     box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
     color: #f5f5f5;
-    border: 1px solid rgb(65 65 65);
     background: transparent;
 `;
 
@@ -35,7 +34,7 @@ export const Input = styled.input`
     border-radius: 5px;
     background: #262525;
     border: transparent;
-    color: #f5f5f5;
+    color: #c6c6c6;
     width: 100%;
     height: 50px;
     font-size: 15px;
@@ -47,7 +46,10 @@ export const Input = styled.input`
     }
 
     &:hover {
-        border: 1px solid #aaa;
+        background: #292828;
+        border: transparent;
+        color: #ddd;
+        outline: none;
     }
 
     &::placeholder {

diff --git a/src/components/Blogs/Blogs.jsx b/src/components/Blogs/Blogs.jsx
@@ -10,6 +10,7 @@ import BlogCards from "src/components/Blogs/BlogCard/BlogCards";
 import { getAllUserDetails, userDetailReset } from "src/features/userDetail/userDetailSlice";
 import { getFollowData, reset } from "src/features/follow/followSlice";
 import Sidebar from "src/components/Common/SocialSidebar/Sidebar";
+import { getBookmarks } from "src/features/bookmarks/bookmarkSlice.js";
 
 const Blogs = () => {
     const dispatch = useDispatch();
@@ -26,14 +27,17 @@ const Blogs = () => {
         (state) => state.userDetail,
     );
     const { followData } = useSelector((state) => state.followData);
+    const { bookmarks } = useSelector((state) => state.bookmarks);
 
     const userId = user?._id;
 
     useEffect(() => {
         if (isBlogError) console.log(blogMessage);
         if (isUserDetailError) console.log(userDetailMessage);
         if (userId) dispatch(getFollowData(userId));
+
         dispatch(getAllBlogs());
+        dispatch(getBookmarks());
         dispatch(getAllUserDetails());
 
         return () => {
@@ -105,7 +109,7 @@ const Blogs = () => {
             <BlogsContainer>
                 <BlogsSection>
                     <MiddleContainer>
-                        <BlogCards selectedTags={selectedTags} blogs={filteredBlogs || blogs} />
+                        <BlogCards bookmarks={bookmarks} selectedTags={selectedTags} blogs={filteredBlogs || blogs} />
                     </MiddleContainer>
                     <Sidebar
                         sidebarType={"blogs"}

diff --git a/src/components/Blogs/BlogsElements.jsx b/src/components/Blogs/BlogsElements.jsx
@@ -24,7 +24,6 @@ export const BlogsSection = styled.div`
 `;
 export const MiddleContainer = styled.div`
     width: 100%;
-    max-width: 1500px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -41,11 +40,13 @@ export const SubContainerTop = styled.div`
 export const AllBlogs = styled(ExploreContentContainer)`
     background-color: ${(props) => (props.$displayAt === "explore" ? "#090909" : "#000000")};
     padding: ${(props) => (props.$displayAt ? "15px" : "0")};
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Adjust this as per your requirement */
+    gap: 15px;
 
     @media screen and (width <= 800px) {
-        grid-auto-rows: 0fr;
-        gap: 15px;
-        padding: 15px;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     }
 `;
 

diff --git a/src/components/Blogs/BlogsRoute.jsx b/src/components/Blogs/BlogsRoute.jsx
@@ -1,12 +1,20 @@
 import React from "react";
 import { Route, Routes } from "react-router-dom";
-import { Blogs, NotFound, SingleBlog } from "src/components/index";
+import { Blogs, CreateBlog, EditBlog, NotFound, SingleBlog, UserBlogs } from "src/components/index";
+import CreateBlogV2 from "src/components/Blogs/ManageBlogs/CreateBlogV2/CreateBlogV2.jsx";
 
 const BlogsRoute = () => {
     return (
         <Routes>
             <Route index element={<Blogs />} />
             <Route exact path={":title"} element={<SingleBlog />} />
+            <Route exact path={"create-blog"} element={<CreateBlog />} />
+
+            <Route exact path={"my-blogs"} element={<UserBlogs />} />
+
+            <Route exact path={"create"} element={<CreateBlogV2 />} />
+            <Route exact path={"my-blogs/edit/:blogTitle"} element={<EditBlog />} />
+
             {/* <Route element={<NotFound/>}/> */}
             <Route path={"*"} element={<NotFound />} />
         </Routes>