From 2dae0e31192595a3b54b6419d02ed463ce8a0f6e Mon Sep 17 00:00:00 2001 From: ArkadiK94 Date: Tue, 14 May 2024 14:00:15 +0300 Subject: [PATCH 01/10] feat: change modal structure why: to close it in better way with overlay how: use portal --- src/components/Common/ModalOptions/Modal.jsx | 46 +++++++++++++ .../Options.css | 0 .../Common/ModalOptions/Options.jsx | 29 +++++++++ .../OptionsElements.jsx | 29 ++++++--- .../index.js | 0 .../Common/ModalWindowOptions/Options.jsx | 65 ------------------- .../FeedPage/FeedComments/FeedComments.jsx | 1 + .../Feeds/FeedPage/FeedComments/ReplyCard.jsx | 11 +++- .../Feeds/FeedPage/FeedPagePost.jsx | 6 +- src/components/Feeds/FeedPosts/FeedPost.jsx | 6 +- .../Feeds/FeedPosts/FeedPostsElements.jsx | 4 +- .../Homepage/Registration/CenterCard.jsx | 4 +- src/pages/Register.jsx | 4 +- 13 files changed, 117 insertions(+), 88 deletions(-) create mode 100644 src/components/Common/ModalOptions/Modal.jsx rename src/components/Common/{ModalWindowOptions => ModalOptions}/Options.css (100%) create mode 100644 src/components/Common/ModalOptions/Options.jsx rename src/components/Common/{ModalWindowOptions => ModalOptions}/OptionsElements.jsx (79%) rename src/components/Common/{ModalWindowOptions => ModalOptions}/index.js (100%) delete mode 100644 src/components/Common/ModalWindowOptions/Options.jsx diff --git a/src/components/Common/ModalOptions/Modal.jsx b/src/components/Common/ModalOptions/Modal.jsx new file mode 100644 index 00000000..0f339681 --- /dev/null +++ b/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( + + onClose(e, false)} /> + + onClose(e, false)}> + + + + + Edit + + + + Delete + + + + + , + document.getElementById(modalContainerId), + ); +}; +export default Modal; diff --git a/src/components/Common/ModalWindowOptions/Options.css b/src/components/Common/ModalOptions/Options.css similarity index 100% rename from src/components/Common/ModalWindowOptions/Options.css rename to src/components/Common/ModalOptions/Options.css diff --git a/src/components/Common/ModalOptions/Options.jsx b/src/components/Common/ModalOptions/Options.jsx new file mode 100644 index 00000000..e42e2eb4 --- /dev/null +++ b/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 ( + handleClickEvent(e, true)}> + + + + ); +}; +export default Options; diff --git a/src/components/Common/ModalWindowOptions/OptionsElements.jsx b/src/components/Common/ModalOptions/OptionsElements.jsx similarity index 79% rename from src/components/Common/ModalWindowOptions/OptionsElements.jsx rename to src/components/Common/ModalOptions/OptionsElements.jsx index 38b5c621..0565dd53 100644 --- a/src/components/Common/ModalWindowOptions/OptionsElements.jsx +++ b/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,20 @@ 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: 100; +`; +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: 1000; +`; diff --git a/src/components/Common/ModalWindowOptions/index.js b/src/components/Common/ModalOptions/index.js similarity index 100% rename from src/components/Common/ModalWindowOptions/index.js rename to src/components/Common/ModalOptions/index.js diff --git a/src/components/Common/ModalWindowOptions/Options.jsx b/src/components/Common/ModalWindowOptions/Options.jsx deleted file mode 100644 index bfc7c792..00000000 --- a/src/components/Common/ModalWindowOptions/Options.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import React, { useEffect, useRef, useState } from "react"; -import { BsThreeDotsVertical } from "react-icons/bs"; -import { TbEditCircle } from "react-icons/tb"; -import { AiTwotoneDelete } from "react-icons/ai"; -import { MdClose } from "react-icons/md"; - -import { - OptionsList, - OptionsContainer, - OptionsMainContainer, - OptionsItem, - OptionLabel, - OptionsClose, -} from "./OptionsElements"; -import "./Options.css"; - -const Options = ({ onDelete, onEdit }) => { - const [isOpen, setIsOpen] = useState(false); - const modalWindow = useRef(null); - - useEffect(() => { - function handleClickOutside(event) { - if (modalWindow.current && !modalWindow.current.contains(event.target)) { - setIsOpen(false); - } - } - document.addEventListener("mousedown", handleClickOutside); - return () => { - document.removeEventListener("mousedown", handleClickOutside); - }; - }, [modalWindow]); - const handleClickEvent = (e, option) => { - e.stopPropagation(); - e.preventDefault(); - setIsOpen(option); - }; - - return ( - handleClickEvent(e, true)}> - - {isOpen && ( - - handleClickEvent(e, false)}> - - - - - Edit - - - - Delete - - - - - )} - - ); -}; -export default Options; diff --git a/src/components/Feeds/FeedPage/FeedComments/FeedComments.jsx b/src/components/Feeds/FeedPage/FeedComments/FeedComments.jsx index d02b2627..9ac50326 100644 --- a/src/components/Feeds/FeedPage/FeedComments/FeedComments.jsx +++ b/src/components/Feeds/FeedPage/FeedComments/FeedComments.jsx @@ -40,6 +40,7 @@ const FeedComments = ({ user, replies, likes, bookmarks, views, isFeedReplyLoadi views={feedViewsData({ feedId: reply._id })} bookmarks={feedUserBookmarksData({ replyId: reply._id })} updateFeedView={updateFeedView} + id={id} /> ))} diff --git a/src/components/Feeds/FeedPage/FeedComments/ReplyCard.jsx b/src/components/Feeds/FeedPage/FeedComments/ReplyCard.jsx index 52f115a6..5320cb3f 100644 --- a/src/components/Feeds/FeedPage/FeedComments/ReplyCard.jsx +++ b/src/components/Feeds/FeedPage/FeedComments/ReplyCard.jsx @@ -14,9 +14,9 @@ import { dateFormatter } from "src/components/Common/dateFormatter"; import PostActionsAndStats from "src/components/Feeds/FeedPosts/PostActionsAndStats"; import { cdnContentImagesUrl } from "src/features/apiUrl"; import { IconVerified } from "src/components/Explore/Users/UsersElements"; -import Options from "src/components/Common/ModalWindowOptions"; +import Options from "src/components/Common/ModalOptions"; -const ReplyCard = ({ reply, user, comments, likes, bookmarks, views, displayAt, updateFeedView }) => { +const ReplyCard = ({ id, reply, user, comments, likes, bookmarks, views, displayAt, updateFeedView }) => { const avatar = cdnContentImagesUrl("/user/" + (reply?.avatar || "avatarDummy.png")); // const dispatch = useDispatch(); const handleCommentDelete = () => {}; @@ -35,7 +35,12 @@ const ReplyCard = ({ reply, user, comments, likes, bookmarks, views, displayAt, {dateFormatter({ date: new Date(reply?.createdAt) })} - {user && user._id === reply.user && } + {user && user._id === reply.user && ( + + )} {reply?.reply} diff --git a/src/components/Feeds/FeedPage/FeedPagePost.jsx b/src/components/Feeds/FeedPage/FeedPagePost.jsx index 87d85a7d..e17875f9 100644 --- a/src/components/Feeds/FeedPage/FeedPagePost.jsx +++ b/src/components/Feeds/FeedPage/FeedPagePost.jsx @@ -23,7 +23,7 @@ import ImageSlider from "src/components/Common/ImageSlider/ImageSlider"; import { ImageContainer, ImagesContainer, FeedImage } from "src/components/Feeds/PostForm/AddPostElements"; import { IconVerified } from "src/components/Explore/Users/UsersElements"; import { cdnContentImagesUrl } from "src/features/apiUrl"; -import Options from "src/components/Common/ModalWindowOptions"; +import Options from "src/components/Common/ModalOptions"; import { deleteFeed } from "src/features/feeds/feedsSlice"; const FeedPagePost = ({ feed, user, comments, likes, bookmarks, views, updateFeedView }) => { @@ -62,7 +62,9 @@ const FeedPagePost = ({ feed, user, comments, likes, bookmarks, views, updateFee {dateFormatter({ date: new Date(feed?.createdAt) })} - {user && user._id === feed.user && } + {user && user._id === feed.user && ( + + )} {feed?.content ? feed?.content : feed?.reply} diff --git a/src/components/Feeds/FeedPosts/FeedPost.jsx b/src/components/Feeds/FeedPosts/FeedPost.jsx index abfb7d0a..41269717 100644 --- a/src/components/Feeds/FeedPosts/FeedPost.jsx +++ b/src/components/Feeds/FeedPosts/FeedPost.jsx @@ -18,7 +18,7 @@ import { dateFormatter } from "src/components/Common/dateFormatter"; import { ImageContainer, ImagesContainer, FeedImage } from "src/components/Feeds/PostForm/AddPostElements"; import { IconVerified } from "src/components/Explore/Users/UsersElements"; import { cdnContentImagesUrl } from "src/features/apiUrl"; -import Options from "src/components/Common/ModalWindowOptions"; +import Options from "src/components/Common/ModalOptions"; import { deleteFeed } from "src/features/feeds/feedsSlice"; import { useDispatch } from "react-redux"; @@ -40,7 +40,9 @@ const FeedPost = ({ feed, user, comments, likes, bookmarks, views, setStopRefres {dateFormatter({ date: new Date(feed?.createdAt) })} - {user && user._id === feed.user && } + {user && user._id === feed.user && ( + + )} diff --git a/src/components/Feeds/FeedPosts/FeedPostsElements.jsx b/src/components/Feeds/FeedPosts/FeedPostsElements.jsx index dcc62d3f..c547bb25 100644 --- a/src/components/Feeds/FeedPosts/FeedPostsElements.jsx +++ b/src/components/Feeds/FeedPosts/FeedPostsElements.jsx @@ -58,7 +58,7 @@ export const RightSection = styled.div` export const RightHeaderSection = styled.div` display: flex; justify-content: space-between; - align-items: center; + align-items: end; gap: 10px; `; export const PostTags = styled.div` @@ -82,7 +82,7 @@ export const PostHeader = styled.div` position: relative; display: flex; justify-content: space-between; - align-items: center; + align-items: start; gap: 10px; margin-bottom: 10px; width: 100%; diff --git a/src/components/Homepage/Registration/CenterCard.jsx b/src/components/Homepage/Registration/CenterCard.jsx index 718b25ca..48f473af 100644 --- a/src/components/Homepage/Registration/CenterCard.jsx +++ b/src/components/Homepage/Registration/CenterCard.jsx @@ -16,7 +16,7 @@ export const Container = styled.div` } ${(props) => - props.authPopup + props.$authPopup ? ` ` @@ -41,7 +41,7 @@ export const CenterCard = styled.div` background-blend-mode: soft-light; ${(props) => - props.authPopup + props.$authPopup ? ` ` diff --git a/src/pages/Register.jsx b/src/pages/Register.jsx index 0613400b..bb529d7d 100644 --- a/src/pages/Register.jsx +++ b/src/pages/Register.jsx @@ -127,8 +127,8 @@ const Register = ({ authPopup }) => { }; return ( - - + + {!authPopup ? (
From 9c4677cbc4a192f77728bd598be926da757b6b22 Mon Sep 17 00:00:00 2001 From: ArkadiK94 Date: Tue, 14 May 2024 14:44:01 +0300 Subject: [PATCH 02/10] feat: add delete comment functionality who: dispatch with correct method and url --- .../Common/ModalOptions/OptionsElements.jsx | 1 + .../Feeds/FeedPage/FeedComments/FeedComments.jsx | 1 - .../Feeds/FeedPage/FeedComments/ReplyCard.jsx | 15 +++++++++++---- .../feeds/feedComments/feedCommentServices.js | 4 ++-- .../feeds/feedComments/feedCommentsSlice.js | 5 +++-- 5 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/components/Common/ModalOptions/OptionsElements.jsx b/src/components/Common/ModalOptions/OptionsElements.jsx index 0565dd53..62e501c2 100644 --- a/src/components/Common/ModalOptions/OptionsElements.jsx +++ b/src/components/Common/ModalOptions/OptionsElements.jsx @@ -46,6 +46,7 @@ export const OptionsOverlay = styled.div` inset: 0; background-color: rgb(0 0 0 / 20%); z-index: 100; + cursor: default; `; export const OptionsModalContainer = styled.div` width: 200px; diff --git a/src/components/Feeds/FeedPage/FeedComments/FeedComments.jsx b/src/components/Feeds/FeedPage/FeedComments/FeedComments.jsx index 9ac50326..d02b2627 100644 --- a/src/components/Feeds/FeedPage/FeedComments/FeedComments.jsx +++ b/src/components/Feeds/FeedPage/FeedComments/FeedComments.jsx @@ -40,7 +40,6 @@ const FeedComments = ({ user, replies, likes, bookmarks, views, isFeedReplyLoadi views={feedViewsData({ feedId: reply._id })} bookmarks={feedUserBookmarksData({ replyId: reply._id })} updateFeedView={updateFeedView} - id={id} /> ))} diff --git a/src/components/Feeds/FeedPage/FeedComments/ReplyCard.jsx b/src/components/Feeds/FeedPage/FeedComments/ReplyCard.jsx index 5320cb3f..7d117c6e 100644 --- a/src/components/Feeds/FeedPage/FeedComments/ReplyCard.jsx +++ b/src/components/Feeds/FeedPage/FeedComments/ReplyCard.jsx @@ -15,11 +15,18 @@ import PostActionsAndStats from "src/components/Feeds/FeedPosts/PostActionsAndSt import { cdnContentImagesUrl } from "src/features/apiUrl"; import { IconVerified } from "src/components/Explore/Users/UsersElements"; import Options from "src/components/Common/ModalOptions"; +import { deleteComment } from "src/features/feeds/feedComments/feedCommentsSlice"; +import { useDispatch } from "react-redux"; +import { useParams } from "react-router"; -const ReplyCard = ({ id, reply, user, comments, likes, bookmarks, views, displayAt, updateFeedView }) => { +const ReplyCard = ({ reply, user, comments, likes, bookmarks, views, displayAt, updateFeedView }) => { const avatar = cdnContentImagesUrl("/user/" + (reply?.avatar || "avatarDummy.png")); - // const dispatch = useDispatch(); - const handleCommentDelete = () => {}; + const dispatch = useDispatch(); + const { feedId } = useParams(); + const handleCommentDelete = () => { + dispatch(deleteComment({ feedId, commentId: reply._id })); + console.log("d"); + }; return ( @@ -38,7 +45,7 @@ const ReplyCard = ({ id, reply, user, comments, likes, bookmarks, views, display {user && user._id === reply.user && ( )} diff --git a/src/features/feeds/feedComments/feedCommentServices.js b/src/features/feeds/feedComments/feedCommentServices.js index a7278f84..67b9ee49 100644 --- a/src/features/feeds/feedComments/feedCommentServices.js +++ b/src/features/feeds/feedComments/feedCommentServices.js @@ -44,7 +44,7 @@ const updateComment = async (feedId, commentId, content, token) => { console.error(error); } }; - +// // Delete a comment const deleteComment = async (feedId, commentId, token) => { const config = { @@ -54,7 +54,7 @@ const deleteComment = async (feedId, commentId, token) => { }; try { - const response = await axios.delete(API_URL + commentId, config); + const response = await axios.delete(`${API_URL}/${feedId}/replies/${commentId}`, config); return response.data; } catch (error) { console.error(error); diff --git a/src/features/feeds/feedComments/feedCommentsSlice.js b/src/features/feeds/feedComments/feedCommentsSlice.js index 9586b5d8..73552b9d 100644 --- a/src/features/feeds/feedComments/feedCommentsSlice.js +++ b/src/features/feeds/feedComments/feedCommentsSlice.js @@ -50,8 +50,9 @@ export const updateComment = createAsyncThunk( ); // Delete a comment -export const deleteComment = createAsyncThunk("comments/deleteComment", async (feedId, commentId, thunkAPI) => { +export const deleteComment = createAsyncThunk("comments/deleteComment", async ({ feedId, commentId }, thunkAPI) => { try { + console.log(feedId, commentId, "in feed comments slice"); const token = thunkAPI.getState().auth.user.token; await feedService.deleteComment(feedId, commentId, token); return commentId; @@ -98,7 +99,7 @@ const commentSlice = createSlice({ .addCase(addFeedComment.rejected, (state, action) => { state.isFeedReplyLoading = false; state.isFeedReplyError = true; - state.isFeedReplySucces = false; + state.isFeedReplySuccess = false; state.feedCommentMessage = action.payload; }) .addCase(updateComment.pending, (state) => { From dc4c4bf1489c7c60fda30740bc4d7d155cd9e68c Mon Sep 17 00:00:00 2001 From: ArkadiK94 Date: Tue, 14 May 2024 18:44:38 +0300 Subject: [PATCH 03/10] fix: width of profile image in feeds --- src/components/Feeds/FeedPosts/FeedPostsElements.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Feeds/FeedPosts/FeedPostsElements.jsx b/src/components/Feeds/FeedPosts/FeedPostsElements.jsx index c547bb25..7e602375 100644 --- a/src/components/Feeds/FeedPosts/FeedPostsElements.jsx +++ b/src/components/Feeds/FeedPosts/FeedPostsElements.jsx @@ -45,7 +45,7 @@ export const LeftSection = styled.div` justify-content: flex-start; gap: 5px; width: max-content; - margin-right: 20px; + min-width: 60px; `; export const RightSection = styled.div` From c37965fff0f24ef4e009d6d8c4d1e1f3143fe139 Mon Sep 17 00:00:00 2001 From: ArkadiK94 Date: Fri, 24 May 2024 20:53:41 +0300 Subject: [PATCH 04/10] feat: adding main feed edit option why: so users could edit feed how: changing the ModifyFeed component --- .../Feeds/FeedPage/FeedComments/ReplyCard.jsx | 1 - .../Feeds/FeedPage/FeedPagePost.jsx | 87 ++++++++------ src/components/Feeds/FeedPosts/FeedPost.jsx | 111 ++++++++++++------ src/components/Feeds/Feeds.jsx | 8 +- src/components/Feeds/FeedsElements.jsx | 3 + .../Feeds/PostForm/AddPostElements.jsx | 1 - src/components/Feeds/PostForm/AddThreads.jsx | 2 +- .../PostForm/{AddFeed.jsx => ModifyFeed.jsx} | 42 ++++--- src/features/apiUrl.js | 3 +- 9 files changed, 159 insertions(+), 99 deletions(-) rename src/components/Feeds/PostForm/{AddFeed.jsx => ModifyFeed.jsx} (85%) diff --git a/src/components/Feeds/FeedPage/FeedComments/ReplyCard.jsx b/src/components/Feeds/FeedPage/FeedComments/ReplyCard.jsx index 7d117c6e..b9c6453c 100644 --- a/src/components/Feeds/FeedPage/FeedComments/ReplyCard.jsx +++ b/src/components/Feeds/FeedPage/FeedComments/ReplyCard.jsx @@ -25,7 +25,6 @@ const ReplyCard = ({ reply, user, comments, likes, bookmarks, views, displayAt, const { feedId } = useParams(); const handleCommentDelete = () => { dispatch(deleteComment({ feedId, commentId: reply._id })); - console.log("d"); }; return ( diff --git a/src/components/Feeds/FeedPage/FeedPagePost.jsx b/src/components/Feeds/FeedPage/FeedPagePost.jsx index e17875f9..161c3813 100644 --- a/src/components/Feeds/FeedPage/FeedPagePost.jsx +++ b/src/components/Feeds/FeedPage/FeedPagePost.jsx @@ -25,11 +25,13 @@ import { IconVerified } from "src/components/Explore/Users/UsersElements"; import { cdnContentImagesUrl } from "src/features/apiUrl"; import Options from "src/components/Common/ModalOptions"; import { deleteFeed } from "src/features/feeds/feedsSlice"; +import ModifyFeed from "src/components/Feeds/PostForm/ModifyFeed"; const FeedPagePost = ({ feed, user, comments, likes, bookmarks, views, updateFeedView }) => { const dispatch = useDispatch(); const [showPopupWindow, setShowPopupWindow] = useState(false); const [selectedImageIndex, setSelectedImageIndex] = useState(null); + const [editMode, setEditMode] = useState(false); const handleImageClick = (index) => { setSelectedImageIndex(index); setShowPopupWindow(true); @@ -39,9 +41,12 @@ const FeedPagePost = ({ feed, user, comments, likes, bookmarks, views, updateFee const avatar = cdnContentImagesUrl("/user/" + (feed?.avatar || "avatarDummy.png")); const feedImage = (image) => cdnContentImagesUrl(`/feed/${image}`); - const handleDeleteFeed = async () => { + const handleDeleteFeed = () => { dispatch(deleteFeed(feed._id)).then(() => navigate("/feeds", { replace: true })); }; + const handleEditFeed = () => { + setEditMode(true); + }; return ( @@ -63,46 +68,56 @@ const FeedPagePost = ({ feed, user, comments, likes, bookmarks, views, updateFee {dateFormatter({ date: new Date(feed?.createdAt) })} {user && user._id === feed.user && ( - + )} - {feed?.content ? feed?.content : feed?.reply} + {editMode ? ( + + ) : ( + <> + {feed?.content ? feed?.content : feed?.reply} - - {feed?.images?.map((image, index) => ( - - handleImageClick(index)} - src={feedImage(image)} - alt={feed.username + `image${index}`} - /> - - ))} - {showPopupWindow && selectedImageIndex !== null ? ( - setShowPopupWindow(false)}> - setShowPopupWindow(false)} - /> - - ) : null} - + + {feed?.images?.map((image, index) => ( + + handleImageClick(index)} + src={feedImage(image)} + alt={feed.username + `image${index}`} + /> + + ))} + {showPopupWindow && selectedImageIndex !== null ? ( + setShowPopupWindow(false)}> + setShowPopupWindow(false)} + /> + + ) : null} + - {feed?.tags ? ( - - {feed?.tags.map( - (tag, id) => - tag !== "" && ( - - {tag} - - ), - )} - - ) : null} + {feed?.tags ? ( + + {feed?.tags.map( + (tag, id) => + tag !== "" && ( + + {tag} + + ), + )} + + ) : null} + + )} { const dispatch = useDispatch(); + const [editMode, setEditMode] = useState(false); + const avatar = cdnContentImagesUrl("/user/" + (feed?.avatar || "avatarDummy.png")); const feedImage = (image) => cdnContentImagesUrl(`/feed/${image}`); const handleDeleteFeed = () => dispatch(deleteFeed(feed._id)); + const handleEditFeed = () => { + setEditMode(true); + }; return ( - - - - - {feed?.username} - {feed?.verified && } - - - {dateFormatter({ date: new Date(feed?.createdAt) })} - {user && user._id === feed.user && ( - - )} - - - - {feed?.content.slice(0, 225)} - {feed?.content.length > 225 && ( - <> - ... show more. - - )} - - + {editMode && ( + <> + + + + {feed?.username} + {feed?.verified && } + + + {dateFormatter({ date: new Date(feed?.createdAt) })} + + + + + )} + + {!editMode && ( + <> + + + + + {feed?.username} + {feed?.verified && } + + + {dateFormatter({ date: new Date(feed?.createdAt) })} + {user && user._id === feed.user && ( + + )} + + - - {feed?.images?.length > 0 ? ( - - {feed?.images?.map((image, index) => ( - - - - ))} - - ) : null} - + + {feed?.content.slice(0, 225)} + {feed?.content.length > 225 && ( + <> + ... show more. + + )} + + - {feed?.tags?.length > 0 ? ( - {feed?.tags?.map((tag, id) => tag !== "" && {tag})} - ) : null} + + {feed?.images?.length > 0 ? ( + + {feed?.images?.map((image, index) => ( + + + + ))} + + ) : null} + + {feed?.tags?.length > 0 ? ( + + {feed?.tags?.map((tag, id) => tag !== "" && {tag})} + + ) : null} + + )} { - + + + { const [addThread, setAddThread] = useState(true); diff --git a/src/components/Feeds/PostForm/AddFeed.jsx b/src/components/Feeds/PostForm/ModifyFeed.jsx similarity index 85% rename from src/components/Feeds/PostForm/AddFeed.jsx rename to src/components/Feeds/PostForm/ModifyFeed.jsx index 4ee0768f..83142a29 100644 --- a/src/components/Feeds/PostForm/AddFeed.jsx +++ b/src/components/Feeds/PostForm/ModifyFeed.jsx @@ -18,10 +18,10 @@ import { ImageUploadLabel } from "src/components/Blogs/ManageBlogs/CreateBlog/Cr import { cdnContentImagesUrl, getApiUrl } from "src/features/apiUrl"; import axios from "axios"; import { CircleSpinner } from "react-spinners-kit"; -import { createFeed } from "src/features/feeds/feedsSlice"; +import { createFeed, updateFeed } from "src/features/feeds/feedsSlice"; import { toast } from "react-toastify"; -const AddPost = ({ showPostTags, userDetails }) => { +const ModifyPost = ({ showPostTags, userDetails, editFeed = "" }) => { const dispatch = useDispatch(); const textareaRef = useRef(null); const imageInputRef = useRef(null); @@ -30,10 +30,10 @@ const AddPost = ({ showPostTags, userDetails }) => { const [isFeedLoading, setIsFeedLoading] = useState(false); - const [content, setContent] = useState(""); - const [tags, setTags] = useState([]); + const [content, setContent] = useState(editFeed?.content || ""); + const [tags, setTags] = useState(editFeed?.tags || []); const [files, setFiles] = useState([]); - const [feedImages, setFeedImages] = useState([]); + const [feedImages, setFeedImages] = useState(editFeed?.images || []); const [showAuthPopup, setShowAuthPopup] = useState(false); const maxCharacterCount = 1500; @@ -123,6 +123,7 @@ const AddPost = ({ showPostTags, userDetails }) => { } for (const file of files) { + console.log(file); await uploadFeedImage({ file }); } } @@ -134,8 +135,11 @@ const AddPost = ({ showPostTags, userDetails }) => { tags, images: feedImages, }; - - dispatch(createFeed(data)); + if (editFeed) { + dispatch(updateFeed({ id: editFeed?._id, feedData: data })); + } else { + dispatch(createFeed(data)); + } toast.success("Feed posted successfully"); @@ -153,13 +157,15 @@ const AddPost = ({ showPostTags, userDetails }) => { }; const userDetail = userDetails?.find((userDetail) => userDetail?.user === user?._id); - const avatar = cdnContentImagesUrl("/user/" + (userDetail?.avatar || "avatarDummy.png")); + const avatar = cdnContentImagesUrl("/user/" + (userDetail?.avatar || editFeed?.avatar || "avatarDummy.png")); return ( - - - + {!editFeed && ( + + + + )}
{
- {files.map((file, index) => ( - + {files?.map((file, index) => ( + handleRemoveImage(index)}>✕ @@ -198,8 +204,8 @@ const AddPost = ({ showPostTags, userDetails }) => { {files.length < 4 && ( { {files.length < 4 && } @@ -223,7 +229,7 @@ const AddPost = ({ showPostTags, userDetails }) => { ) : ( - Create + {editFeed ? "Update" : "Create"} )} @@ -234,4 +240,4 @@ const AddPost = ({ showPostTags, userDetails }) => { ); }; -export default AddPost; +export default ModifyPost; diff --git a/src/features/apiUrl.js b/src/features/apiUrl.js index 73e5ac82..20cf2240 100644 --- a/src/features/apiUrl.js +++ b/src/features/apiUrl.js @@ -16,7 +16,8 @@ const securityUrlWs = "wss://security.api.thecyberhub.org"; export const webEnv = import.meta.env.VITE_WEB_ENV || "production"; -const assetsURL = "https://thecyberhub-assets.s3.ap-south-1.amazonaws.com/thecyberhub-assets"; +const assetsURL = + import.meta.env.VITE_ASSETSURLS3 || "https://thecyberhub-assets.s3.ap-south-1.amazonaws.com/thecyberhub-assets"; const cdnAssets = `${assetsURL}/assets`; export const cdnContentImagesUrl = (props) => { From ce20259d80979efb3fc271a95cc2cf9c5f33c139 Mon Sep 17 00:00:00 2001 From: ArkadiK94 Date: Fri, 24 May 2024 23:24:32 +0300 Subject: [PATCH 05/10] refactor: combine feedsSlice and feedsServer with feedComments --- src/app/store.js | 2 - src/components/Explore/FeedsExplore.jsx | 5 +- .../FeedPage/FeedComments/AddFeedComment.jsx | 18 +-- .../FeedPage/FeedComments/FeedComments.jsx | 7 +- .../Feeds/FeedPage/FeedComments/ReplyCard.jsx | 6 +- src/components/Feeds/FeedPage/FeedPage.jsx | 16 +- src/components/Feeds/FeedPosts/FeedPosts.jsx | 5 +- src/components/Feeds/PostForm/ModifyFeed.jsx | 2 +- .../Header/Dropdowns/DropdownElements.jsx | 43 +++--- .../Header/Sidebar/SidebarElements.jsx | 38 ++--- .../feeds/feedComments/feedCommentServices.js | 71 --------- .../feeds/feedComments/feedCommentsSlice.js | 137 ------------------ src/features/feeds/feedsService.js | 21 +-- src/features/feeds/feedsSlice.js | 12 +- 14 files changed, 72 insertions(+), 311 deletions(-) delete mode 100644 src/features/feeds/feedComments/feedCommentServices.js delete mode 100644 src/features/feeds/feedComments/feedCommentsSlice.js diff --git a/src/app/store.js b/src/app/store.js index 96efa27f..7bd6bce8 100644 --- a/src/app/store.js +++ b/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, diff --git a/src/components/Explore/FeedsExplore.jsx b/src/components/Explore/FeedsExplore.jsx index 4ff60bf5..886811b9 100644 --- a/src/components/Explore/FeedsExplore.jsx +++ b/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 ; @@ -65,7 +62,7 @@ const FeedsExplore = ({ feeds, searchTerm, feedBookmarksData, isFeedLoading, dis }; const feedCommentsData = ({ feedId }) => { - return feedComments?.filter((reply) => reply.feedId === feedId); + return feeds?.filter((feed) => feed._id === feedId).comments; }; return ( diff --git a/src/components/Feeds/FeedPage/FeedComments/AddFeedComment.jsx b/src/components/Feeds/FeedPage/FeedComments/AddFeedComment.jsx index 233a3a46..186762c5 100644 --- a/src/components/Feeds/FeedPage/FeedComments/AddFeedComment.jsx +++ b/src/components/Feeds/FeedPage/FeedComments/AddFeedComment.jsx @@ -2,7 +2,7 @@ import React, { useRef, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { AddFeedCommentContainer, FeedCommentInput } from "./AddFeedCommentsElements"; import { FooterSection, PostFormButton } from "src/components/Feeds/PostForm/AddPostElements"; -import { addFeedComment } from "src/features/feeds/feedComments/feedCommentsSlice"; +import { createFeed } from "src/features/feeds/feedsSlice"; import { LeftSection, PostHeader, PostHeaderImg, RightSection } from "src/components/Feeds/FeedPosts/FeedPostsElements"; import AuthPopup from "src/pages/AuthPopup/AuthPopup"; import { cdnContentImagesUrl } from "src/features/apiUrl"; @@ -12,8 +12,8 @@ const AddFeedComment = ({ feedId, userDetails }) => { const { user } = useSelector((state) => state.auth); const userDetail = userDetails?.find((userDetail) => userDetail?.user === user?._id); - const [addReply, setAddReply] = useState({ reply: "" }); - const { reply } = addReply; + const [addReply, setAddReply] = useState({ content: "" }); + const { content } = addReply; const [showAuthPopup, setShowAuthPopup] = useState(false); const handleSubmit = (e) => { @@ -24,9 +24,9 @@ const AddFeedComment = ({ feedId, userDetails }) => { return; } - const replyData = { reply }; - dispatch(addFeedComment({ feedId, replyData })); - setAddReply({ reply: "" }); + const replyData = { content }; + dispatch(createFeed({ feedData: replyData, mainFeedId: feedId })); + setAddReply({ content: "" }); }; const textareaRef = useRef(null); @@ -35,7 +35,7 @@ const AddFeedComment = ({ feedId, userDetails }) => { const textarea = textareaRef.current; textarea.style.height = "auto"; // Reset height to recalculate scrollHeight textarea.style.height = `${textarea.scrollHeight}px`; // Set height to fit content - setAddReply({ reply: textarea.value }); // Update only the 'reply' property in the state + setAddReply({ content: textarea.value }); // Update only the 'content' property in the state }; const avatar = cdnContentImagesUrl("/user/" + (userDetail?.avatar || "avatarDummy.png")); @@ -50,8 +50,8 @@ const AddFeedComment = ({ feedId, userDetails }) => { diff --git a/src/components/Feeds/FeedPage/FeedComments/FeedComments.jsx b/src/components/Feeds/FeedPage/FeedComments/FeedComments.jsx index d02b2627..25e22480 100644 --- a/src/components/Feeds/FeedPage/FeedComments/FeedComments.jsx +++ b/src/components/Feeds/FeedPage/FeedComments/FeedComments.jsx @@ -1,8 +1,7 @@ import React from "react"; import ReplyCard from "./ReplyCard"; -import LoadingSpinner from "src/components/Other/MixComponents/Spinner/LoadingSpinner"; -const FeedComments = ({ user, replies, likes, bookmarks, views, isFeedReplyLoading, updateFeedView }) => { +const FeedComments = ({ user, replies, likes, bookmarks, views, updateFeedView }) => { const feedLikesData = ({ replyId }) => { return likes?.filter((like) => like?.itemId === replyId); }; @@ -21,10 +20,6 @@ const FeedComments = ({ user, replies, likes, bookmarks, views, isFeedReplyLoadi return

Be the first to comment on this post

; } - if (isFeedReplyLoading) { - return ; - } - return ( <> {replies diff --git a/src/components/Feeds/FeedPage/FeedComments/ReplyCard.jsx b/src/components/Feeds/FeedPage/FeedComments/ReplyCard.jsx index b9c6453c..44989ef1 100644 --- a/src/components/Feeds/FeedPage/FeedComments/ReplyCard.jsx +++ b/src/components/Feeds/FeedPage/FeedComments/ReplyCard.jsx @@ -15,16 +15,14 @@ import PostActionsAndStats from "src/components/Feeds/FeedPosts/PostActionsAndSt import { cdnContentImagesUrl } from "src/features/apiUrl"; import { IconVerified } from "src/components/Explore/Users/UsersElements"; import Options from "src/components/Common/ModalOptions"; -import { deleteComment } from "src/features/feeds/feedComments/feedCommentsSlice"; +import { deleteFeed } from "src/features/feeds/feedsSlice"; import { useDispatch } from "react-redux"; -import { useParams } from "react-router"; const ReplyCard = ({ reply, user, comments, likes, bookmarks, views, displayAt, updateFeedView }) => { const avatar = cdnContentImagesUrl("/user/" + (reply?.avatar || "avatarDummy.png")); const dispatch = useDispatch(); - const { feedId } = useParams(); const handleCommentDelete = () => { - dispatch(deleteComment({ feedId, commentId: reply._id })); + dispatch(deleteFeed(reply._id)); }; return ( diff --git a/src/components/Feeds/FeedPage/FeedPage.jsx b/src/components/Feeds/FeedPage/FeedPage.jsx index fbac5e93..7300044d 100644 --- a/src/components/Feeds/FeedPage/FeedPage.jsx +++ b/src/components/Feeds/FeedPage/FeedPage.jsx @@ -10,7 +10,6 @@ import { getAllUserDetails, userDetailReset } from "src/features/userDetail/user import { FeedLikeReset, getFeedLikes } from "src/features/feeds/feedLikes/feedLikesSlice"; import { getBookmarks } from "src/features/bookmarks/bookmarkSlice"; import { getViews } from "src/features/feeds/views/viewSlice"; -import { feedReplyReset, getFeedComments } from "src/features/feeds/feedComments/feedCommentsSlice"; import FeedPagePost from "./FeedPagePost"; import FeedReplies from "./FeedComments/FeedComments"; @@ -24,9 +23,6 @@ const FeedPage = () => { const dispatch = useDispatch(); const { feedId } = useParams(); const { feeds, isFeedLoading, isFeedError, feedMessage } = useSelector((state) => state.feeds); - const { feedComments, isFeedReplyLoading, isFeedReplyError, feedCommentMessage } = useSelector( - (state) => state.feedComments, - ); const { user, isUserError, userMessage } = useSelector((state) => state.auth); const { userDetails, isUserDetailLoading, isUserDetailError, userDetailMessage } = useSelector( (state) => state.userDetail, @@ -37,13 +33,11 @@ const FeedPage = () => { useEffect(() => { if (isFeedError) console.log(feedMessage); - if (isFeedReplyError) console.log(feedCommentMessage); if (isUserError) console.log(userMessage); if (isUserDetailError) console.log(userDetailMessage); if (isFeedLikeError) console.log(feedLikeMessage); dispatch(getAllFeeds()); - dispatch(getFeedComments()); dispatch(getAllUserDetails()); dispatch(getFeedLikes()); dispatch(getBookmarks()); @@ -53,11 +47,10 @@ const FeedPage = () => { dispatch(feedReset()); dispatch(userDetailReset()); dispatch(FeedLikeReset()); - dispatch(feedReplyReset()); }; }, [dispatch]); - const feed = feeds?.find((feed) => feed?._id === feedId) || feedComments?.find((feed) => feed?._id === feedId); + const feed = feeds?.find((feed) => feed?._id === feedId); const userDetail = userDetails?.find((userDetail) => userDetail?.user === feed?.user); @@ -83,7 +76,7 @@ const FeedPage = () => { return views?.filter((view) => view.itemId === feedId); }; - const feedRepliesData = feedComments?.map((reply) => { + const feedRepliesData = feeds?.map((reply) => { const userDetail = userDetails?.find((userDetail) => userDetail?.user === reply?.user); const { username, avatar, verified } = userDetail || {}; @@ -92,10 +85,10 @@ const FeedPage = () => { }); const feedCommentsData = ({ feedId }) => { - return feedRepliesData?.filter((reply) => reply?.feedId === feedId); + return feedRepliesData?.filter((reply) => reply?.mainFeedId === feedId && reply?._id !== reply?.mainFeedId); }; - if (isApiLoading || isUserDetailLoading || isFeedLoading || isFeedReplyLoading) return ; + if (isApiLoading || isUserDetailLoading || isFeedLoading) return ; if (!isApiWorking) return ; @@ -126,7 +119,6 @@ const FeedPage = () => { bookmarks={bookmarks} likes={feedLikes} views={views} - isFeedReplyLoading={isFeedReplyLoading} updateFeedView={true} /> diff --git a/src/components/Feeds/FeedPosts/FeedPosts.jsx b/src/components/Feeds/FeedPosts/FeedPosts.jsx index 32074767..ca6c7ace 100644 --- a/src/components/Feeds/FeedPosts/FeedPosts.jsx +++ b/src/components/Feeds/FeedPosts/FeedPosts.jsx @@ -6,7 +6,6 @@ import FeedPost from "./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 { getAllFeeds } from "src/features/feeds/feedsSlice"; // import { HiRefresh } from "react-icons/hi"; @@ -18,7 +17,6 @@ const FeedPosts = ({ feeds, searchTerm, showOnlyFollowingPosts, isFeedLoading, d const { feedLikes } = useSelector((state) => state.feedLikes); const { bookmarks } = useSelector((state) => state.bookmarks); const { views } = useSelector((state) => state.views); - const { feedComments } = useSelector((state) => state.feedComments); const { followData } = useSelector((state) => state.followData); // const [numPostsToShow, setNumPostsToShow] = useState(50); @@ -27,7 +25,6 @@ const FeedPosts = ({ feeds, searchTerm, showOnlyFollowingPosts, isFeedLoading, d dispatch(getFeedLikes()); dispatch(getBookmarks()); dispatch(getViews()); - dispatch(getFeedComments()); }, [dispatch]); if (isFeedLoading) return ; @@ -82,7 +79,7 @@ const FeedPosts = ({ feeds, searchTerm, showOnlyFollowingPosts, isFeedLoading, d }; const feedCommentsData = ({ feedId }) => { - return feedComments?.filter((reply) => reply.feedId === feedId); + return feeds?.filter((feed) => feed._id === feedId).comments; }; // const [stopRefresh, setStopRefresh] = useState(false); diff --git a/src/components/Feeds/PostForm/ModifyFeed.jsx b/src/components/Feeds/PostForm/ModifyFeed.jsx index 83142a29..2de62051 100644 --- a/src/components/Feeds/PostForm/ModifyFeed.jsx +++ b/src/components/Feeds/PostForm/ModifyFeed.jsx @@ -138,7 +138,7 @@ const ModifyPost = ({ showPostTags, userDetails, editFeed = "" }) => { if (editFeed) { dispatch(updateFeed({ id: editFeed?._id, feedData: data })); } else { - dispatch(createFeed(data)); + dispatch(createFeed({ feedData: data })); } toast.success("Feed posted successfully"); diff --git a/src/components/Header/Dropdowns/DropdownElements.jsx b/src/components/Header/Dropdowns/DropdownElements.jsx index 2297589b..d5153cac 100644 --- a/src/components/Header/Dropdowns/DropdownElements.jsx +++ b/src/components/Header/Dropdowns/DropdownElements.jsx @@ -9,7 +9,7 @@ export const SideCloseIcon = styled(CloseIcon)` width: 20px; cursor: pointer; - @media screen and (min-width: 900px) { + @media screen and (width >= 900px) { display: none; } `; @@ -23,13 +23,10 @@ export const DropdownContainer = styled.div` top: 80px; left: 0; z-index: 999; - display: block; - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - @media screen and (max-width: 821px) { + @media screen and (width <= 821px) { display: flex; background: transparent; position: static; @@ -52,19 +49,18 @@ export const DropdownItemsContainer = styled.div` width: max-content; padding: 25px; - // sidebar - @media screen and (max-width: 821px) { + /* sidebar */ + @media screen and (width <= 821px) { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); - text-align: center; width: 100%; padding: 0; margin: 0; height: 100%; - @media screen and (max-width: 380px) { + @media screen and (width <= 380px) { grid-template-columns: 1fr; grid-template-rows: repeat(6, auto); } @@ -83,7 +79,7 @@ export const DropdownItemContainer = styled.div` cursor: pointer; } - @media screen and (max-width: 821px) { + @media screen and (width <= 821px) { /* width: min-content; */ display: flex; align-items: flex-start; @@ -92,10 +88,10 @@ export const DropdownItemContainer = styled.div` padding: 0 1rem; gap: 10px; width: 100%; + background: rgb(26 26 29 / 53%); - background: rgba(26, 26, 29, 0.53); - @media screen and (max-width: 768px) { - // height: max-content; + @media screen and (width <= 768px) { + /* height: max-content; */ position: relative; } } @@ -111,7 +107,8 @@ export const DropdownItem = styled.h2` transform: scale(1.01); border-bottom: 3px solid #ff6b08; } - @media screen and (max-width: 768px) { + + @media screen and (width <= 768px) { font-size: 1.1rem; width: max-content; margin: 0; @@ -126,9 +123,10 @@ export const DropdownDesc = styled.p` align-items: start; color: #ababab; word-wrap: break-word; - @media screen and (max-width: 821px) { + + @media screen and (width <= 821px) { font-size: 0.8rem; - widht: max-content; + width: max-content; display: none; } `; @@ -136,7 +134,8 @@ export const DropdownDesc = styled.p` export const DropdownRouterLink = styled(LinkRouter)` text-decoration: none; color: #f5f5f5; - @media screen and (max-width: 821px) { + + @media screen and (width <= 821px) { display: flex; align-items: center; justify-content: center; @@ -146,18 +145,18 @@ export const DropdownRouterLink = styled(LinkRouter)` list-style: none; color: #f5f5f5; cursor: pointer; - //width: 80%; + + /* width: 80%; */ width: 100%; margin: 10px auto; + background: rgb(26 26 26); - background: rgb(26, 26, 26); - //border: 1px solid rgba(194, 113, 62, 0.2); + /* border: 1px solid rgb(194 113 62 / 20%); */ border-radius: 10px; - transition: all 0.3s ease-in-out; &:hover { - //color: #ff6b08; + /* color: #ff6b08; */ scale: 101%; transition: 0.2s ease-in-out; } diff --git a/src/components/Header/Sidebar/SidebarElements.jsx b/src/components/Header/Sidebar/SidebarElements.jsx index dc47eda8..b7d4fe80 100644 --- a/src/components/Header/Sidebar/SidebarElements.jsx +++ b/src/components/Header/Sidebar/SidebarElements.jsx @@ -7,7 +7,6 @@ export const SidebarContainer = styled.nav` z-index: 999; width: 100%; height: 100%; - //background: #0d0d0d; background: transparent; display: ${({ $isOpen }) => ($isOpen ? "grid" : "none")}; align-items: center; @@ -16,11 +15,12 @@ export const SidebarContainer = styled.nav` top: ${({ $isOpen }) => ($isOpen ? "0" : "-100%")}; overflow: auto; transition: all 0.2s ease-in-out; - //background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)); + + /* background: linear-gradient(135deg, rgb(0 0 0 / 10%), rgb(255 255 255 / 0%)); */ backdrop-filter: blur(120px); - -webkit-backdrop-filter: blur(120px); - //border: 1px solid rgba(3, 3, 3, 0.18); - box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); + + /* border: 1px solid rgb(3 3 3 / 18%); */ + box-shadow: 0 8px 32px 0 rgb(0 0 0 / 37%); `; export const CloseIcon = styled(FaTimes)` @@ -49,7 +49,8 @@ export const SidebarWrapper = styled.div` width: 100%; display: flex; justify-content: center; - //align-items: center; + + /* align-items: center; */ flex-direction: column; color: #f5f5f5; `; @@ -62,9 +63,9 @@ export const SidebarNavItem = styled.div` padding: 0 1rem; gap: 10px; - //background: rgba(26, 26, 29, 0.53); - @media screen and (max-width: 768px) { - // height: max-content; + /* background: rgba(26, 26, 29, 0.53); */ + @media screen and (width <= 768px) { + /* height: max-content; */ position: relative; } `; @@ -80,14 +81,14 @@ export const SidebarLink = styled(RouterLink)` font-family: "Fira Code", monospace; color: #f5f5f5; cursor: pointer; - //width: 80%; + + /* width: 80%; */ width: 100%; margin: 10px auto; + background: rgb(194 108 62 / 4%); - background: rgba(194, 108, 62, 0.04); - //border: 1px solid rgba(194, 113, 62, 0.2); + /* border: 1px solid rgb(194 113 62 / 20%); */ border-radius: 10px; - transition: all 0.3s ease-in-out; &:hover { @@ -104,14 +105,15 @@ export const SideBtnWrap = styled.div` align-items: center; `; export const SidebarMenu = styled.div` - /*display: grid; + /* display: grid; grid-template-columns: 1fr; - grid-template-rows:repeat(6, 80px);*/ + grid-template-rows:repeat(6, 80px); */ background: transparent; text-align: center; display: flex; flex-direction: column; - @media screen and (min-width: 480px) { + + @media screen and (width >= 480px) { grid-template-rows: repeat(6, 60px); } `; @@ -120,7 +122,7 @@ export const SidebarRoute = styled(RouterLink)` background: #ff6b08; white-space: nowrap; padding: 16px 64px; - color: #000000; + color: #000; font-size: 16px; outline: none; border: none; @@ -131,6 +133,6 @@ export const SidebarRoute = styled(RouterLink)` &:hover { transition: all 0.2s ease-in-out; background: #f5f5f5; - color: #000000; + color: #000; } `; diff --git a/src/features/feeds/feedComments/feedCommentServices.js b/src/features/feeds/feedComments/feedCommentServices.js deleted file mode 100644 index 67b9ee49..00000000 --- a/src/features/feeds/feedComments/feedCommentServices.js +++ /dev/null @@ -1,71 +0,0 @@ -import axios from "axios"; -import { getApiUrl } from "src/features/apiUrl"; - -const API_URL = getApiUrl("api/feeds"); // Replace with the actual API endpoint for replies - -// Get replies for a feed -const getComments = async () => { - try { - const response = await axios.get(`${API_URL}/replies`); - return response.data; - } catch (error) { - console.error(error); - } -}; - -// Add a comment to a feed -const addComment = async (feedId, replyData, token) => { - const config = { - headers: { - Authorization: `Bearer ${token}`, - }, - }; - - try { - const response = await axios.post(`${API_URL}/${feedId}/replies`, replyData, config); - return response.data; - } catch (error) { - console.error(error); - } -}; - -// Update a comment -const updateComment = async (feedId, commentId, content, token) => { - const config = { - headers: { - Authorization: `Bearer ${token}`, - }, - }; - - try { - const response = await axios.put(API_URL + commentId, { content }, config); - return response.data; - } catch (error) { - console.error(error); - } -}; -// -// Delete a comment -const deleteComment = async (feedId, commentId, token) => { - const config = { - headers: { - Authorization: `Bearer ${token}`, - }, - }; - - try { - const response = await axios.delete(`${API_URL}/${feedId}/replies/${commentId}`, config); - return response.data; - } catch (error) { - console.error(error); - } -}; - -const commentService = { - getComments, - addComment, - updateComment, - deleteComment, -}; - -export default commentService; diff --git a/src/features/feeds/feedComments/feedCommentsSlice.js b/src/features/feeds/feedComments/feedCommentsSlice.js deleted file mode 100644 index 73552b9d..00000000 --- a/src/features/feeds/feedComments/feedCommentsSlice.js +++ /dev/null @@ -1,137 +0,0 @@ -import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; -import feedService from "./feedCommentServices"; - -const initialState = { - feedComments: [], - isFeedReplyLoading: false, - isFeedReplyError: false, - isFeedReplySuccess: false, - feedCommentMessage: "", -}; - -// Fetch comments for a feed -export const getFeedComments = createAsyncThunk("comments/fetchComments", async (_, thunkAPI) => { - try { - return await feedService.getComments(); - } catch (error) { - const message = - (error.response && error.response.data && error.response.data.message) || error.message || error.toString(); - return thunkAPI.rejectWithValue(message); - } -}); - -// Add a comment to a feed -export const addFeedComment = createAsyncThunk("comments/addComment", async ({ feedId, replyData }, thunkAPI) => { - try { - const token = thunkAPI.getState().auth.user.token; - return await feedService.addComment(feedId, replyData, token); - } catch (error) { - const message = - (error.response && error.response.data && error.response.data.message) || error.message || error.toString(); - return thunkAPI.rejectWithValue(message); - } -}); - -// Update a comment -export const updateComment = createAsyncThunk( - "comments/updateComment", - async ({ feedId, commentId, content }, thunkAPI) => { - try { - const token = thunkAPI.getState().auth.user.token; - return await feedService.updateComment(feedId, commentId, content, token); - } catch (error) { - const message = - (error.response && error.response.data && error.response.data.message) || - error.message || - error.toString(); - return thunkAPI.rejectWithValue(message); - } - }, -); - -// Delete a comment -export const deleteComment = createAsyncThunk("comments/deleteComment", async ({ feedId, commentId }, thunkAPI) => { - try { - console.log(feedId, commentId, "in feed comments slice"); - const token = thunkAPI.getState().auth.user.token; - await feedService.deleteComment(feedId, commentId, token); - return commentId; - } catch (error) { - const message = - (error.response && error.response.data && error.response.data.message) || error.message || error.toString(); - return thunkAPI.rejectWithValue(message); - } -}); - -const commentSlice = createSlice({ - name: "feedComments", - initialState, - reducers: { - feedReplyReset: (state) => initialState, - }, - extraReducers: (builder) => { - builder - .addCase(getFeedComments.pending, (state) => { - state.isFeedReplyLoading = true; - state.isFeedReplyError = false; - }) - .addCase(getFeedComments.fulfilled, (state, action) => { - state.isFeedReplyLoading = false; - state.isFeedReplyError = false; - state.isFeedReplySuccess = true; - state.feedComments = action.payload; - }) - .addCase(getFeedComments.rejected, (state, action) => { - state.isFeedReplyLoading = false; - state.isFeedReplyError = true; - state.isFeedReplySuccess = false; - state.feedCommentMessage = action.payload; - }) - .addCase(addFeedComment.pending, (state) => { - state.isFeedReplyLoading = true; - state.isFeedReplyError = false; - }) - .addCase(addFeedComment.fulfilled, (state, action) => { - state.isFeedReplyLoading = false; - state.isFeedReplySuccess = true; - state.feedComments = [...state.feedComments, action.payload]; - }) - .addCase(addFeedComment.rejected, (state, action) => { - state.isFeedReplyLoading = false; - state.isFeedReplyError = true; - state.isFeedReplySuccess = false; - state.feedCommentMessage = action.payload; - }) - .addCase(updateComment.pending, (state) => { - state.isFeedReplyLoading = true; - state.isFeedReplyError = false; - }) - .addCase(updateComment.fulfilled, (state, action) => { - state.isFeedReplyLoading = false; - state.feedComments = state.feedComments.map((comment) => - comment._id === action.payload._id ? { ...comment, ...action.payload } : comment, - ); - }) - .addCase(updateComment.rejected, (state, action) => { - state.isFeedReplyLoading = false; - state.isFeedReplyError = true; - state.feedCommentMessage = action.payload; - }) - .addCase(deleteComment.pending, (state) => { - state.isFeedReplyLoading = true; - state.isFeedReplyError = false; - }) - .addCase(deleteComment.fulfilled, (state, action) => { - state.isFeedReplyLoading = false; - state.feedComments = state.feedComments.filter((comment) => comment._id !== action.payload); - }) - .addCase(deleteComment.rejected, (state, action) => { - state.isFeedReplyLoading = false; - state.isFeedReplyError = true; - state.feedCommentMessage = action.payload; - }); - }, -}); - -export const { feedReplyReset } = commentSlice.actions; -export default commentSlice.reducer; diff --git a/src/features/feeds/feedsService.js b/src/features/feeds/feedsService.js index 1e4811bb..f82cd6f2 100644 --- a/src/features/feeds/feedsService.js +++ b/src/features/feeds/feedsService.js @@ -2,19 +2,6 @@ import axios from "axios"; import { getApiUrl } from "src/features/apiUrl"; const API_URL = getApiUrl("api/feeds/"); -const addComment = async (feedId, commentData, token) => { - try { - const config = { - headers: { - Authorization: `Bearer ${token}`, - }, - }; - const response = await axios.post(API_URL + feedId + "/comment", { comment: commentData }, config); - return response.data; - } catch (error) { - throw new Error(error); - } -}; // Get All feeds const getAllFeeds = async () => { @@ -27,14 +14,14 @@ const getAllFeeds = async () => { }; // Create new feed -const createFeed = async (feedData, token) => { +const createFeed = async (feedData, token, mainFeedId = "") => { const config = { headers: { Authorization: `Bearer ${token}`, }, }; - - const response = await axios.post(API_URL, feedData, config); + console.log({ ...feedData, mainFeedId }, feedData); + const response = await axios.post(API_URL, { ...feedData, mainFeedId }, config); return response.data; }; @@ -64,7 +51,6 @@ const getFeeds = async (token) => { return response.data; }; - // Delete user feed const deleteFeed = async (feedId, token) => { const config = { @@ -79,7 +65,6 @@ const deleteFeed = async (feedId, token) => { }; const feedsService = { - addComment, getAllFeeds, createFeed, updateFeed, diff --git a/src/features/feeds/feedsSlice.js b/src/features/feeds/feedsSlice.js index 6ef48619..ec20074d 100644 --- a/src/features/feeds/feedsSlice.js +++ b/src/features/feeds/feedsSlice.js @@ -10,10 +10,10 @@ const initialState = { }; // Create new feed -export const createFeed = createAsyncThunk("feed/create", async (feedData, thunkAPI) => { +export const createFeed = createAsyncThunk("feed/create", async ({ feedData, mainFeedId = "" }, thunkAPI) => { try { const token = thunkAPI.getState().auth.user.token; - return await feedsService.createFeed(feedData, token); + return await feedsService.createFeed(feedData, token, mainFeedId); } catch (error) { const message = (error.response && error.response.data && error.response.data.message) || error.message || error.toString(); @@ -83,7 +83,13 @@ export const feedsSlice = createSlice({ state.isFeedSuccess = true; state.isFeedLoading = false; state.isFeedError = false; - state.feeds.push(action.payload); + const mainFeedId = action.payload.mainFeedId; + if (mainFeedId) { + const mainFeedIndex = state.feeds.findIndex((feed) => feed._id === mainFeedId); + state.feeds[mainFeedIndex].comments.push(action.payload); + } else { + state.feeds.push(action.payload); + } }) .addCase(createFeed.rejected, (state, action) => { state.isFeedLoading = false; From 4c5b38aa0fcb32acf08fc573727af12027b5a4ed Mon Sep 17 00:00:00 2001 From: ArkadiK94 Date: Sat, 25 May 2024 19:35:25 +0300 Subject: [PATCH 06/10] fix: icons problem --- package-lock.json | 94 +++++++++---------- .../Notetaker/Category/CategoryElements.jsx | 16 ++-- .../Notetaker/Category/CategoryItem.jsx | 4 +- .../Notetaker/Category/CategoryList.jsx | 2 +- .../Dashboard/Notetaker/NoteElements.jsx | 8 +- .../Dashboard/Notetaker/NoteItem.jsx | 2 +- .../Dashboard/Settings/Display/display.css | 2 +- .../Dashboard/Settings/Display/index.jsx | 2 +- .../Header/Dropdowns/DropdownElements.jsx | 4 +- 9 files changed, 71 insertions(+), 63 deletions(-) diff --git a/package-lock.json b/package-lock.json index 05deac40..d954eb0e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "thecyberhub.org", "version": "0.53.14", "dependencies": { - "@fortawesome/free-solid-svg-icons": "^6.5.2", + "@fortawesome/free-solid-svg-icons": "^6.5.2", "@fortawesome/react-fontawesome": "^0.2.1", "@radix-ui/react-slot": "^1.0.2", "@reduxjs/toolkit": "^2.2.4", @@ -609,52 +609,6 @@ "node": ">=12" } }, - "node_modules/@fortawesome/fontawesome-common-types": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz", - "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==", - "hasInstallScript": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/@fortawesome/fontawesome-svg-core": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz", - "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==", - "hasInstallScript": true, - "peer": true, - "dependencies": { - "@fortawesome/fontawesome-common-types": "6.5.2" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/@fortawesome/free-solid-svg-icons": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz", - "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==", - "hasInstallScript": true, - "dependencies": { - "@fortawesome/fontawesome-common-types": "6.5.2" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/@fortawesome/react-fontawesome": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.1.tgz", - "integrity": "sha512-ldr5QO2MneAX5W5WBCYB2pZp/PiHDD1hy9YEBLcXUyJb0qnO86oP8RU+CgmYVSH/R4Dbe2ernhcWOrcgaKD9NQ==", - "dependencies": { - "prop-types": "^15.8.1" - }, - "peerDependencies": { - "@fortawesome/fontawesome-svg-core": "~1 || ~6", - "react": ">=16.3" - } - }, "node_modules/@esbuild/android-x64": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz", @@ -1046,6 +1000,52 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz", + "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz", + "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==", + "hasInstallScript": true, + "peer": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz", + "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.1.tgz", + "integrity": "sha512-ldr5QO2MneAX5W5WBCYB2pZp/PiHDD1hy9YEBLcXUyJb0qnO86oP8RU+CgmYVSH/R4Dbe2ernhcWOrcgaKD9NQ==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", diff --git a/src/components/Dashboard/Notetaker/Category/CategoryElements.jsx b/src/components/Dashboard/Notetaker/Category/CategoryElements.jsx index 54a0244d..b50f86bc 100644 --- a/src/components/Dashboard/Notetaker/Category/CategoryElements.jsx +++ b/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; @@ -83,7 +83,9 @@ export const CategoryItemElement = styled.li` `; export const CategoryItemShortTitle = styled.p` text-transform: capitalize; - font: 15px "Roboto Mono", monospace; + font: + 15px "Roboto Mono", + monospace; font-weight: 600; `; @@ -103,7 +105,9 @@ export const ModifyCategoryModalInput = styled.input` outline: none; text-transform: capitalize; background-color: #090909; - font: 16px Poppins, sans-serif; + font: + 16px Poppins, + sans-serif; line-height: 1; `; export const ModifyCategoryModalButtons = styled.div` diff --git a/src/components/Dashboard/Notetaker/Category/CategoryItem.jsx b/src/components/Dashboard/Notetaker/Category/CategoryItem.jsx index c5c0e364..a82137f2 100644 --- a/src/components/Dashboard/Notetaker/Category/CategoryItem.jsx +++ b/src/components/Dashboard/Notetaker/Category/CategoryItem.jsx @@ -66,7 +66,7 @@ const CategoryItem = ({ if (requiredCategory) { return ( - onPick(category)} isPicked={isPicked}> + onPick(category)} $isPicked={isPicked}> {category.name.slice(0, 23)} @@ -84,7 +84,7 @@ const CategoryItem = ({ /> ) : ( - onPick(category)} isPicked={isPicked}> + onPick(category)} $isPicked={isPicked}> {category.name.slice(0, 23)} diff --git a/src/components/Dashboard/Notetaker/Category/CategoryList.jsx b/src/components/Dashboard/Notetaker/Category/CategoryList.jsx index 84bcfaa9..734a978f 100644 --- a/src/components/Dashboard/Notetaker/Category/CategoryList.jsx +++ b/src/components/Dashboard/Notetaker/Category/CategoryList.jsx @@ -13,7 +13,7 @@ const CategoryList = ({ editCategoryId, }) => { return ( - + {!children.length && !addMode && ( There Are No {
} Unique Categories )} diff --git a/src/components/Dashboard/Notetaker/NoteElements.jsx b/src/components/Dashboard/Notetaker/NoteElements.jsx index 069154b9..11b3ee12 100644 --- a/src/components/Dashboard/Notetaker/NoteElements.jsx +++ b/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; @@ -103,7 +103,9 @@ export const NoteItemElement = styled.li` export const NoteItemShortTitle = styled.p` text-transform: capitalize; - font: 15px "Roboto Mono", monospace; + font: + 15px "Roboto Mono", + monospace; font-weight: 600; `; diff --git a/src/components/Dashboard/Notetaker/NoteItem.jsx b/src/components/Dashboard/Notetaker/NoteItem.jsx index 189f2bc2..e3585a5d 100644 --- a/src/components/Dashboard/Notetaker/NoteItem.jsx +++ b/src/components/Dashboard/Notetaker/NoteItem.jsx @@ -10,7 +10,7 @@ import NotePinning from "./NotePinning"; const NoteItem = ({ _id, title, pinned, onPick, onPin, isPicked }) => { return ( - onPick(_id)} isPicked={isPicked}> + onPick(_id)} $isPicked={isPicked}> {title.slice(0, 23)} diff --git a/src/components/Dashboard/Settings/Display/display.css b/src/components/Dashboard/Settings/Display/display.css index 7fbb8c8b..0f83cefb 100644 --- a/src/components/Dashboard/Settings/Display/display.css +++ b/src/components/Dashboard/Settings/Display/display.css @@ -192,7 +192,7 @@ input:hover { box-shadow: 0 0 0 4px rgb(234 76 137 / 10%); } -.icon { +.icon-team-page { position: absolute; left: 1rem; fill: #9e9ea7; diff --git a/src/components/Dashboard/Settings/Display/index.jsx b/src/components/Dashboard/Settings/Display/index.jsx index 27afecc9..c85c98e0 100644 --- a/src/components/Dashboard/Settings/Display/index.jsx +++ b/src/components/Dashboard/Settings/Display/index.jsx @@ -122,7 +122,7 @@ export default function Login() {
- +