feat: feeds | edit delete func

src/app/store.js

@@ -12,7 +12,6 @@ import feedLikeReduces from "src/features/feeds/feedLikes/feedLikesSlice";
 import blogLikeReduces from "src/features/blogs/blogLikes/blogLikesSlice";
 
 import blogCommentsReducer from "src/features/blogs/blogComments/blogCommentSlice";
-import feedCommentsReducer from "src/features/feeds/feedComments/feedCommentsSlice";
 
 import ctfReducer from "src/features/ctf/ctfSlice";
 import bookmarkReduces from "src/features/bookmarks/bookmarkSlice";
@@ -37,7 +36,6 @@ export default configureStore({
         forums: forumReducer,
 
         feeds: feedReducer,
-        feedComments: feedCommentsReducer,
 
         views: viewReducer,
         bookmarks: bookmarkReduces,

src/components/Blogs/BlogCard/BlogCard.jsx

@@ -57,7 +57,7 @@ const BlogCard = ({ blog, bookmarks }) => {
     return (
         <ContainerCard>
             <span>
-                {isDashboard && user && user._id === blog?.user ? (
+                {isDashboard && user?._id === blog?.user ? (
                     <EditBlogSection>
                         <ButtonDelete onClick={() => dispatch(deleteBlog(blog?._id))} style={{ padding: "2px 10px" }}>
                             <AiFillDelete size={25} /> Delete

src/components/Blogs/ManageBlogs/CreateBlogV2/CreateBlogV2.jsx

@@ -278,8 +278,8 @@ const CreateBlogV2 = () => {
                                     remainingCharacters <= 1000
                                         ? "#ff2525"
                                         : remainingCharacters <= 5000
-                                          ? "#ff6b08"
-                                          : "grey",
+                                        ? "#ff6b08"
+                                        : "grey",
                                 width: "100%",
                                 textAlign: "right",
                                 fontSize: "12px",

src/components/Blogs/ViewBlog/ViewBlogElements.jsx

@@ -91,9 +91,7 @@ export const ContentSection = styled.div`
 
 export const BlogSummary = styled.div`
     padding: 40px;
-    font:
-        17px Poppins,
-        sans-serif;
+    font: 17px Poppins, sans-serif;
 `;
 export const BlogContent = styled(ReactQuill)`
     padding: 25px;

src/components/Chat/Chat/ChatElement.jsx

@@ -85,9 +85,7 @@ export const Input = styled.input`
     color: #fff;
     background-color: #2a2a2a;
     background-clip: padding-box;
-    transition:
-        border-color 0.15s ease-in-out,
-        box-shadow 0.15s ease-in-out;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
     position: relative;
     flex: 1 1 auto;
     width: 100%;

src/components/Common/GeneralDashboardSidebar/GeneralDashboardSidebarElements.jsx

@@ -50,9 +50,7 @@ export const SideBarLink = styled(({ $isOpen, ...props }) => <NavLink {...props}
     padding: 7px 0;
     gap: 10px;
     padding-left: ${(props) => (props.$isOpen ? "10px" : "0")};
-    transition:
-        background 0.3s ease-in-out,
-        padding 0.3s ease-in-out;
+    transition: background 0.3s ease-in-out, padding 0.3s ease-in-out;
     width: 100%;
     justify-content: ${(props) => (props.$isOpen ? "unset" : "center")};
 
@@ -117,9 +115,7 @@ export const UserProfileDescription = styled.div`
     margin-left: ${(props) => (props.$isOpen ? "16px" : "0")};
     opacity: ${(props) => (props.$isOpen ? "1" : "0")};
     transform: ${(props) => (props.$isOpen ? "translateX(0)" : "translateX(-100%)")};
-    transition:
-        opacity 0.3s ease,
-        transform 0.3s ease;
+    transition: opacity 0.3s ease, transform 0.3s ease;
     visibility: ${(props) => (props.$isOpen ? "visible" : "hidden")};
     width: ${(props) => (props.$isOpen ? "unset" : "0")};
 

src/components/Common/InputEditor/InputEditorElements.jsx

@@ -13,9 +13,7 @@ const InputEditorField = css`
     outline: none;
     text-transform: capitalize;
     background-color: #090909;
-    font:
-        16px Poppins,
-        sans-serif;
+    font: 16px Poppins, sans-serif;
     line-height: 1;
 `;
 export const InputEditorTheInput = styled.input`

src/components/Common/ModalOptions/Modal.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+import ReactDom from "react-dom";
+import { TbEditCircle } from "react-icons/tb";
+import { AiTwotoneDelete } from "react-icons/ai";
+import { MdClose } from "react-icons/md";
+
+import {
+    OptionsList,
+    OptionsContainer,
+    OptionsItem,
+    OptionLabel,
+    OptionsClose,
+    OptionsOverlay,
+    OptionsModalContainer,
+} from "./OptionsElements";
+import "./Options.css";
+
+const Modal = ({ isOpen, onDelete, onEdit, onClose, modalContainerId }) => {
+    if (!isOpen) return;
+    return ReactDom.createPortal(
+        <OptionsContainer>
+            <OptionsOverlay onClick={(e) => onClose(e, false)} />
+            <OptionsModalContainer>
+                <OptionsClose onClick={(e) => onClose(e, false)}>
+                    <MdClose className="icon icon-close" size="18px" title="Close" />
+                </OptionsClose>
+                <OptionsList>
+                    <OptionsItem onClick={onEdit}>
+                        <OptionLabel>Edit</OptionLabel>
+                        <button>
+                            <TbEditCircle className="icon icon-edit" size="18px" title="Edit" />
+                        </button>
+                    </OptionsItem>
+                    <OptionsItem onClick={onDelete}>
+                        <OptionLabel>Delete</OptionLabel>
+                        <button>
+                            <AiTwotoneDelete className="icon icon-delete" size="18px" title="Delete" />
+                        </button>
+                    </OptionsItem>
+                </OptionsList>
+            </OptionsModalContainer>
+        </OptionsContainer>,
+        document.getElementById(modalContainerId),
+    );
+};
+export default Modal;

src/components/Common/ModalOptions/Options.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { BsThreeDotsVertical } from "react-icons/bs";
+
+import { OptionsMainContainer } from "./OptionsElements";
+import Modal from "./Modal";
+
+const Options = ({ onDelete, onEdit, modalContainerId }) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleClickEvent = (e, option) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setIsOpen(option);
+    };
+
+    return (
+        <OptionsMainContainer id={modalContainerId} $isOpen={isOpen} onClick={(e) => handleClickEvent(e, true)}>
+            <BsThreeDotsVertical size={18} />
+            <Modal
+                isOpen={isOpen}
+                onDelete={onDelete}
+                onEdit={onEdit}
+                onClose={handleClickEvent}
+                modalContainerId={modalContainerId}
+            />
+        </OptionsMainContainer>
+    );
+};
+export default Options;

src/components/Common/ModalWindowOptions/OptionsElements.jsx → src/components/Common/ModalOptions/OptionsElements.jsx

@@ -2,7 +2,8 @@ import styled from "styled-components";
 
 export const OptionsMainContainer = styled.div`
     position: relative;
-    padding: 5px;
+    padding: 2px;
+    max-width: 32px;
 
     &:hover {
         transform: ${({ $isOpen }) => !$isOpen && "scale(1.1)"};
@@ -11,16 +12,7 @@ export const OptionsMainContainer = styled.div`
     cursor: pointer;
 `;
 export const OptionsContainer = styled.div`
-    width: 200px;
-    height: 160px;
-    background-color: #0e0e0e;
     position: absolute;
-    right: 10px;
-    top: 25px;
-    border-radius: 10px;
-    border: 1px #3d3d3d solid;
-    box-shadow: 2px 2px 10px #333;
-    padding: 20px 0;
 `;
 export const OptionsList = styled.ul`
     padding: 15px 20px;
@@ -49,3 +41,21 @@ export const OptionsClose = styled.button`
     top: 5px;
     right: 5px;
 `;
+export const OptionsOverlay = styled.div`
+    position: fixed;
+    inset: 0;
+    background-color: rgb(0 0 0 / 20%);
+    z-index: 70;
+    cursor: default;
+`;
+export const OptionsModalContainer = styled.div`
+    width: 200px;
+    height: 160px;
+    position: relative;
+    background-color: #0e0e0e;
+    border-radius: 10px;
+    border: 1px #3d3d3d solid;
+    box-shadow: 2px 2px 10px #333;
+    padding: 20px 0;
+    z-index: 100;
+`;

src/components/Dashboard/Notetaker/Category/CategoryElements.jsx

@@ -27,17 +27,17 @@ export const CategoriesSidebarHeaderTitle = styled.h3`
     font-family: "Roboto Mono", monospace;
 `;
 export const CategoriesListContainer = styled.ul`
-    flex: ${(props) => (props.required || props.addMode ? "" : 1)};
+    flex: ${(props) => (props.required || props.$addMode ? "" : 1)};
     margin-bottom: ${(props) => (props.required ? "5px" : "0")};
     display: flex;
     flex-direction: column;
     gap: 5px;
     border: 2px solid #111;
     border-top: 0;
-    border-bottom: ${(props) => (props.addMode ? "0px" : "2px solid #111111")};
+    border-bottom: ${(props) => (props.$addMode ? "0px" : "2px solid #111111")};
     padding: 5px;
     overflow-y: auto;
-    z-index: ${(props) => (props.addMode ? "-100" : 0)};
+    z-index: ${(props) => (props.$addMode ? "-100" : 0)};
 `;
 export const CategoriesListNoFound = styled.h4`
     color: #787878;
@@ -66,7 +66,7 @@ export const CategoryItemElement = styled.li`
     width: 100%;
     padding: 10px;
     gap: 5px;
-    background-color: ${(props) => (props.isPicked ? "#2a2a2a" : "#090909")};
+    background-color: ${(props) => (props.$isPicked ? "#2a2a2a" : "#090909")};
     border: 1px solid #111;
     border-radius: 5px;
     color: #f5f5f5;

src/components/Dashboard/Notetaker/Category/CategoryItem.jsx

@@ -66,7 +66,7 @@ const CategoryItem = ({
     if (requiredCategory) {
         return (
             <CategoryItemElementContainer>
-                <CategoryItemElement onClick={() => onPick(category)} isPicked={isPicked}>
+                <CategoryItemElement onClick={() => onPick(category)} $isPicked={isPicked}>
                     <CategoryItemShortTitle>{category.name.slice(0, 23)}</CategoryItemShortTitle>
                 </CategoryItemElement>
             </CategoryItemElementContainer>
@@ -84,7 +84,7 @@ const CategoryItem = ({
                 />
             ) : (
                 <CategoryItemElementContainer>
-                    <CategoryItemElement onClick={() => onPick(category)} isPicked={isPicked}>
+                    <CategoryItemElement onClick={() => onPick(category)} $isPicked={isPicked}>
                         <CategoryItemShortTitle>{category.name.slice(0, 23)}</CategoryItemShortTitle>
                     </CategoryItemElement>
                     <CategoryOptionsMenuContainer>

src/components/Dashboard/Notetaker/Category/CategoryList.jsx

@@ -13,7 +13,7 @@ const CategoryList = ({
     editCategoryId,
 }) => {
     return (
-        <CategoriesListContainer required={required} addMode={addMode}>
+        <CategoriesListContainer required={required} $addMode={addMode}>
             {!children.length && !addMode && (
                 <CategoriesListNoFound>There Are No {<br />} Unique Categories</CategoriesListNoFound>
             )}

src/components/Dashboard/Notetaker/NoteElements.jsx

@@ -84,8 +84,8 @@ export const NoteItemElement = styled.li`
     width: 100%;
     padding: 10px;
     gap: 5px;
-    background-color: ${(props) => (props.isPicked ? "#2a2a2a" : "#090909")};
-    border: ${(props) => (props.isPinned ? "1px solid #2a2a2a" : "none")};
+    background-color: ${(props) => (props.$isPicked ? "#2a2a2a" : "#090909")};
+    border: ${(props) => (props.$isPinned ? "1px solid #2a2a2a" : "none")};
     border: 1px solid #111;
     border-radius: 5px;
     color: #f5f5f5;

src/components/Dashboard/Notetaker/NoteItem.jsx

@@ -10,7 +10,7 @@ import NotePinning from "./NotePinning";
 const NoteItem = ({ _id, title, pinned, onPick, onPin, isPicked }) => {
     return (
         <NoteItemElementContainer>
-            <NoteItemElement isPinned={pinned} onClick={() => onPick(_id)} isPicked={isPicked}>
+            <NoteItemElement $isPinned={pinned} onClick={() => onPick(_id)} $isPicked={isPicked}>
                 <NoteItemShortTitle>{title.slice(0, 23)}</NoteItemShortTitle>
             </NoteItemElement>
             <NoteItemPinningContainer isPinned={pinned}>

src/components/Explore/FeedsExplore.jsx

@@ -5,7 +5,6 @@ import FeedPost from "src/components/Feeds/FeedPosts/FeedPost";
 import { getFeedLikes } from "src/features/feeds/feedLikes/feedLikesSlice";
 import { getBookmarks } from "src/features/bookmarks/bookmarkSlice";
 import { getViews } from "src/features/feeds/views/viewSlice";
-import { getFeedComments } from "src/features/feeds/feedComments/feedCommentsSlice";
 import LoadingSpinner from "src/components/Other/MixComponents/Spinner/LoadingSpinner";
 import NotFound from "src/NotFound";
 
@@ -15,7 +14,6 @@ const FeedsExplore = ({ feeds, searchTerm, feedBookmarksData, isFeedLoading, dis
     const { feedLikes } = useSelector((state) => state.feedLikes);
     const { bookmarks, isBookmarkLoading, isBookmarkError, bookmarkMessage } = useSelector((state) => state.bookmarks);
     const { views } = useSelector((state) => state.views);
-    const { feedComments } = useSelector((state) => state.feedComments);
 
     useEffect(() => {
         if (isBookmarkError) console.log(bookmarkMessage);
@@ -24,7 +22,6 @@ const FeedsExplore = ({ feeds, searchTerm, feedBookmarksData, isFeedLoading, dis
             dispatch(getBookmarks());
         }
         dispatch(getViews());
-        dispatch(getFeedComments());
     }, [dispatch, isBookmarkError, bookmarkMessage]);
 
     if (isFeedLoading || isBookmarkLoading) return <LoadingSpinner />;
@@ -65,7 +62,7 @@ const FeedsExplore = ({ feeds, searchTerm, feedBookmarksData, isFeedLoading, dis
     };
 
     const feedCommentsData = ({ feedId }) => {
-        return feedComments?.filter((reply) => reply.feedId === feedId);
+        return feeds?.find((feed) => feed._id === feedId).comments;
     };
 
     return (