diff --git a/src/component/Home Page/TweetComp.jsx b/src/component/Home Page/TweetComp.jsx index 911b9f0..c60206d 100644 --- a/src/component/Home Page/TweetComp.jsx +++ b/src/component/Home Page/TweetComp.jsx @@ -7,14 +7,17 @@ import avatar from "../Assets/avatar.svg"; import bookmark from "../Assets/bookmarks.svg"; import { useState } from "react"; import { useDispatch, useSelector } from "react-redux"; -import TweetLikeAction, { RetweetDetails, TweetListWithTag } from "../../react-redux/actions/Tweets.jsx"; -import greenLike from "../Assets/greenLike.svg" -import greenComment from "../Assets/greenComment.svg" -import greenRetweet from "../Assets/greenRetweet.svg" -import greenShare from "../Assets/greenSend.svg" -import greenBookmarks from "../Assets/greenBookmarks.svg" +import TweetLikeAction, { + RetweetDetails, + TweetListWithTag, +} from "../../react-redux/actions/Tweets.jsx"; +import greenLike from "../Assets/greenLike.svg"; +import greenComment from "../Assets/greenComment.svg"; +import greenRetweet from "../Assets/greenRetweet.svg"; +import greenShare from "../Assets/greenSend.svg"; +import greenBookmarks from "../Assets/greenBookmarks.svg"; import DoBookmarkAction from "../../react-redux/actions/Bookmarks.jsx"; -import deleteIcon from "../Assets/delete.svg" +import deleteIcon from "../Assets/delete.svg"; import { TweetFeedAction } from "../../react-redux/actions/Tweets.jsx"; import { type } from "@testing-library/user-event/dist/type"; import CreateTweet from "./createTweet"; @@ -24,298 +27,483 @@ import ReactHashtag from "react-hashtag"; import { unstable_createStaticHandler } from "@remix-run/router"; function Tweet(props) { - const video = props.video - const image = props.image - const id = props.number; - const bookmarkShow = props.bookmarked - const retweets = props.retweet; - const dispatch = useDispatch(); - const [tweetCount, setTweetCount] = useState(props.likeCount) - const [replyCount, setReplyCount] = useState(props.replyCount) - const [replyingto, setReplyingto] = useState([]) - const { tweetData } = useSelector((s) => s.TweetFeedReducer) - useEffect(() => { - if (localStorage.getItem('idx')==props.number) { - const index = localStorage.getItem('idx'); - setReplyCount(replyCount+1); - localStorage.removeItem('idx') + const video = props.video; + const image = props.image; + const id = props.number; + const bookmarkShow = props.bookmarked; + const retweets = props.retweet; + const dispatch = useDispatch(); + const [tweetCount, setTweetCount] = useState(props.likeCount); + const [replyCount, setReplyCount] = useState(props.replyCount); + const [replyingto, setReplyingto] = useState([]); + const { tweetData } = useSelector((s) => s.TweetFeedReducer); + useEffect(() => { + if (localStorage.getItem("idx") == props.number) { + const index = localStorage.getItem("idx"); + setReplyCount(replyCount + 1); + localStorage.removeItem("idx"); } -}, [tweetData]); + }, [tweetData]); - useEffect(() => { - if (props.replies != null){ - setReplyingto(props.replies) - } - else{ - setReplyingto([]) - } - }, [props.replies]) - useEffect(() => { - setTweetCount(props.likeCount) - if (props.LIKES) { - document.getElementsByClassName("tweetLike")[id].style.color = "green" - document.getElementsByClassName("likeIcon")[id].src = greenLike - } - else { - document.getElementsByClassName("likeIcon")[id].src = like - document.getElementsByClassName("tweetLike")[id].style.color = "white" - } - }, [props.LIKES]) - useEffect(() => { - if (bookmarkShow) { - document.getElementsByClassName("bookmarkIcon")[id].src = greenBookmarks - } - else { - document.getElementsByClassName("bookmarkIcon")[id].src = bookmark - } - }, [bookmarkShow]) - function handleTweetLike(tweetid) { - dispatch(TweetLikeAction(tweetid)) - var imagepath = document.getElementsByClassName("tweetLike")[id].style.color; - if (imagepath === "white") { - document.getElementsByClassName("tweetLike")[id].style.color = "green" - document.getElementsByClassName("likeIcon")[id].src = greenLike - setTweetCount(tweetCount => tweetCount + 1) - } - else { - document.getElementsByClassName("likeIcon")[id].src = like - document.getElementsByClassName("tweetLike")[id].style.color = "white" - setTweetCount(tweetCount => tweetCount - 1) - } + useEffect(() => { + if (props.replies != null) { + setReplyingto(props.replies); + } else { + setReplyingto([]); } - - const { responseBM, markBM } = useSelector((b) => b.BookmarkReducer) - - function handleTweetBookmark(e, tweetid) { - e.stopPropagation(); - document.getElementsByClassName("bookmarkIcon")[id].src = greenBookmarks - dispatch(DoBookmarkAction(tweetid)) - if (markBM) { - if (responseBM === "Saved") { - document.getElementsByClassName("bookmarkIcon")[id].src = bookmark - } - if (responseBM === "Unsaved") { - document.getElementsByClassName("bookmarkIcon")[id].src = greenBookmarks - } - } + }, [props.replies]); + useEffect(() => { + setTweetCount(props.likeCount); + if (props.LIKES) { + document.getElementsByClassName("tweetLike")[id].style.color = "green"; + document.getElementsByClassName("likeIcon")[id].src = greenLike; + } else { + document.getElementsByClassName("likeIcon")[id].src = like; + document.getElementsByClassName("tweetLike")[id].style.color = "white"; } - function setOPacity() { - var items = document.getElementsByClassName("POPUPBG") - for (var i = 0; i < items.length; i++) { - document.getElementsByClassName("POPUPBG")[i].style.opacity = 0.4; - } + }, [props.LIKES]); + useEffect(() => { + if (bookmarkShow) { + document.getElementsByClassName("bookmarkIcon")[id].src = greenBookmarks; + } else { + document.getElementsByClassName("bookmarkIcon")[id].src = bookmark; } - - function handleRetweet(tweetid, name, image, video, text) { - dispatch(RetweetDetails(tweetid, name, video, text, image)) - sessionStorage.setItem("retweetId", tweetid) - setOPacity() - var retweetPath = document.getElementsByClassName("tweetRetweet")[id].style.color; - document.getElementById("CREATETWEET").style.display = "block" - document.getElementById("CTweetText").style.display = "block"; - document.getElementById("CTRETWEETDIV").style.display = "flex"; - document.getElementById("buttonTweet").style.display = "none"; - document.getElementById("buttonReply").style.display = "none"; - document.getElementById("buttonReply2").style.display = "none"; - document.getElementById("buttonRetweet").style.display = "block"; - document.getElementById("CTReplyDiv").style.display = "none" - if (retweetPath === "white") { - document.getElementsByClassName("tweetRetweet")[id].style.color = "green" - document.getElementsByClassName("retweetIcon")[id].src = greenRetweet - } - else { - document.getElementsByClassName("retweetIcon")[id].src = retweet - document.getElementsByClassName("tweetRetweet")[id].style.color = "white" - } + }, [bookmarkShow]); + function handleTweetLike(tweetid) { + dispatch(TweetLikeAction(tweetid)); + var imagepath = + document.getElementsByClassName("tweetLike")[id].style.color; + if (imagepath === "white") { + document.getElementsByClassName("tweetLike")[id].style.color = "green"; + document.getElementsByClassName("likeIcon")[id].src = greenLike; + setTweetCount((tweetCount) => tweetCount + 1); + } else { + document.getElementsByClassName("likeIcon")[id].src = like; + document.getElementsByClassName("tweetLike")[id].style.color = "white"; + setTweetCount((tweetCount) => tweetCount - 1); } + } - function handleTweetReply(tweetid, name, image, video, text) { - // setReplyCount(replyCount=> replyCount+1) - localStorage.setItem('idx',props.number) - dispatch(RetweetDetails(tweetid, name, video, text, image)) - sessionStorage.setItem("retweetId", tweetid) - setOPacity() - document.getElementById("CREATETWEET").style.display = "block" - document.getElementById("CTReplyDiv").style.display = "block" - document.getElementById("CTRETWEETDIV").style.display = "none"; - document.getElementById("CTweetText").style.display = "none"; - document.getElementById("buttonTweet").style.display = "none"; - document.getElementById("buttonRetweet").style.display = "none"; - document.getElementById("buttonReply").style.display = "block"; - document.getElementById("buttonReply2").style.display = "none"; - } + const { responseBM, markBM } = useSelector((b) => b.BookmarkReducer); - function handleTweetShare(tweetid) { - sessionStorage.setItem("shareTweetId", tweetid) - document.getElementById("SHAREBLOCK").style.display = "flex" - // setOPacity(); + function handleTweetBookmark(e, tweetid) { + e.stopPropagation(); + document.getElementsByClassName("bookmarkIcon")[id].src = greenBookmarks; + dispatch(DoBookmarkAction(tweetid)); + if (markBM) { + if (responseBM === "Saved") { + document.getElementsByClassName("bookmarkIcon")[id].src = bookmark; + } + if (responseBM === "Unsaved") { + document.getElementsByClassName("bookmarkIcon")[id].src = + greenBookmarks; + } } - function showProfilePopup() { - document.getElementsByClassName("tweetPopcomp")[id].style.display = "block" + } + function setOPacity() { + var items = document.getElementsByClassName("POPUPBG"); + for (var i = 0; i < items.length; i++) { + document.getElementsByClassName("POPUPBG")[i].style.opacity = 0.4; } + } - function hideProfilePopup() { - document.getElementsByClassName("tweetPopcomp")[id].style.display = "none" - } - const navigate = useNavigate(); - function handleToTweet(tweetId) { - navigate(`/totweet/${tweetId}`) + function handleRetweet(tweetid, name, image, video, text) { + dispatch(RetweetDetails(tweetid, name, video, text, image)); + sessionStorage.setItem("retweetId", tweetid); + setOPacity(); + var retweetPath = + document.getElementsByClassName("tweetRetweet")[id].style.color; + document.getElementById("CREATETWEET").style.display = "block"; + document.getElementById("CTweetText").style.display = "block"; + document.getElementById("CTRETWEETDIV").style.display = "flex"; + document.getElementById("buttonTweet").style.display = "none"; + document.getElementById("buttonReply").style.display = "none"; + document.getElementById("buttonReply2").style.display = "none"; + document.getElementById("buttonRetweet").style.display = "block"; + document.getElementById("CTReplyDiv").style.display = "none"; + if (retweetPath === "white") { + document.getElementsByClassName("tweetRetweet")[id].style.color = "green"; + document.getElementsByClassName("retweetIcon")[id].src = greenRetweet; + } else { + document.getElementsByClassName("retweetIcon")[id].src = retweet; + document.getElementsByClassName("tweetRetweet")[id].style.color = "white"; } + } + + function handleTweetReply(tweetid, name, image, video, text) { + // setReplyCount(replyCount=> replyCount+1) + localStorage.setItem("idx", props.number); + dispatch(RetweetDetails(tweetid, name, video, text, image)); + sessionStorage.setItem("retweetId", tweetid); + setOPacity(); + document.getElementById("CREATETWEET").style.display = "block"; + document.getElementById("CTReplyDiv").style.display = "block"; + document.getElementById("CTRETWEETDIV").style.display = "none"; + document.getElementById("CTweetText").style.display = "none"; + document.getElementById("buttonTweet").style.display = "none"; + document.getElementById("buttonRetweet").style.display = "none"; + document.getElementById("buttonReply").style.display = "block"; + document.getElementById("buttonReply2").style.display = "none"; + } - /* HASHTAGS */ - const { loading, tagTweets, getTag } = useSelector((ta) => ta.TagTweetFeedReducer) - function showTagTweet(e, tag) { - e.stopPropagation(); - dispatch(TweetListWithTag(tag.slice(1))) - navigate("/tagtweet") - if (getTag) { - navigate("/tagtweet") - } + function handleTweetShare(tweetid) { + sessionStorage.setItem("shareTweetId", tweetid); + document.getElementById("SHAREBLOCK").style.display = "flex"; + // setOPacity(); + } + function showProfilePopup() { + document.getElementsByClassName("tweetPopcomp")[id].style.display = "block"; + } + + function hideProfilePopup() { + document.getElementsByClassName("tweetPopcomp")[id].style.display = "none"; + } + const navigate = useNavigate(); + function handleToTweet(tweetId) { + navigate(`/totweet/${tweetId}`); + } + + /* HASHTAGS */ + const { loading, tagTweets, getTag } = useSelector( + (ta) => ta.TagTweetFeedReducer + ); + function showTagTweet(e, tag) { + e.stopPropagation(); + dispatch(TweetListWithTag(tag.slice(1))); + navigate("/tagtweet"); + if (getTag) { + navigate("/tagtweet"); } + } + + function showMentionedUser(name) { + navigate(`/profile/${name.slice(1)}`); + } - function showMentionedUser(name){ - navigate(`/profile/${name.slice(1)}`) + const [specialText, setSpecialText] = useState(props.text); + + useEffect(() => { + var y = document.getElementsByClassName("tweetText"); + for (var i = 0; i < y.length; i++) { + y[i].innerHTML = y[i].innerHTML.replace( + /(^|\s)([#][A-Za-z\d-]+)/g, + "$1$2" + ); + y[i].innerHTML = y[i].innerHTML.replace( + /(^|\s)([@][A-Za-z\d-]+)/g, + "$2" + ); + } + var x = document.getElementsByClassName("hashtagg"); + for (let j = 0; j < x.length; j++) { + let hashtag = x[j].innerHTML; + x[j].onclick = function (e) { + showTagTweet(e, hashtag); + }; } - const [specialText, setSpecialText] = useState(props.text) - - useEffect(() => { - - var y = document.getElementsByClassName("tweetText") - for (var i = 0; i < y.length; i++) { - y[i].innerHTML = y[i].innerHTML.replace(/(^|\s)([#][A-Za-z\d-]+)/, "$1$2") - y[i].innerHTML = y[i].innerHTML.replace(/(^|\s)([@][A-Za-z\d-]+)/, "$2") - } - var x = document.getElementsByClassName("hashtagg") - for (let j = 0; j < x.length; j++) { - let hashtag = x[j].innerHTML - x[j].onclick = function (e) { - showTagTweet(e, hashtag) - } - } - - var z = document.getElementsByClassName("mention") - for (let j = 0; j < z.length; j++) { - let mention= z[j].innerHTML - let count=j; - z[j].onclick = function () { - showMentionedUser( mention) - } - } - }, []) + var z = document.getElementsByClassName("mention"); + for (let j = 0; j < z.length; j++) { + let mention = z[j].innerHTML; + let count = j; + z[j].onclick = function () { + showMentionedUser(mention); + }; + } + }, []); - return <> - {retweets == null ? (
-
{ handleToTweet(props.tweetId) }} > - {(props.displaypic === null) ? () : - ()} -
-

{props.name}

-

@{props.username}

-
- { handleTweetBookmark(e, props.tweetId) }} /> -
- {replyingto.length > 0 ? (

Replying to {replyingto.length > 0 ? (replyingto.map((name) => { - return { - navigate(`/profile/${name}`) - }}>@{name} - })) : null}

) : null} -
- {(image != null && image.startsWith("blob:")) ? ( - image) : ( - image != null ? (image) : null)} + return ( + <> + {retweets == null ? ( +
+
{ + handleToTweet(props.tweetId); + }} + > + {props.displaypic === null ? ( + + ) : ( + + )} +
+

{props.name}

+

+ @{props.username} +

- + { + handleTweetBookmark(e, props.tweetId); + }} + /> +
+ {replyingto.length > 0 ? ( +

+ Replying to{" "} + {replyingto.length > 0 + ? replyingto.map((name) => { + return ( + { + navigate(`/profile/${name}`); + }} + > + @{name} + + ); + }) + : null} +

+ ) : null} +
+ {image != null && image.startsWith("blob:") ? ( + user + ) : image != null ? ( + user + ) : null} +
- {(video != null && video.startsWith("blob:")) ? ( - ) : ( - video != null ? () : null)} - {/* {video != null ?