From bca03405609e1ed1ce6b85e5010805b4cd9c2aa5 Mon Sep 17 00:00:00 2001 From: Rituraj Singh <2300520140055@ietlucknow.ac.in> Date: Sun, 8 Sep 2024 06:04:57 +0530 Subject: [PATCH] devi ji --- backend/src/controller/poll.js | 2 + frontend/src/assets/SmoothLoaderHome.jsx | 71 ++++++++++++ frontend/src/assets/SmoothLoaderN.jsx | 60 +++++----- frontend/src/components/Polls.jsx | 140 +++++++++++------------ frontend/src/components/Sidenav.jsx | 15 ++- frontend/src/pages/CreatePost.jsx | 2 +- frontend/src/pages/Home.jsx | 109 ++++++++++-------- frontend/src/pages/HotTopicPosts.jsx | 6 +- frontend/src/pages/Room.jsx | 24 ++-- frontend/src/utils/getRoomPolls.js | 8 +- 10 files changed, 266 insertions(+), 171 deletions(-) create mode 100644 frontend/src/assets/SmoothLoaderHome.jsx diff --git a/backend/src/controller/poll.js b/backend/src/controller/poll.js index 918719a..a319aaa 100644 --- a/backend/src/controller/poll.js +++ b/backend/src/controller/poll.js @@ -2,6 +2,8 @@ import prisma from "../../db/db.config.js"; export const createPoll = async (req, res) => { const { title, options,subCommunity,topic } = req.body; + console.log( title, options,subCommunity,topic); + try { const poll = await prisma.poll.create({ data: { diff --git a/frontend/src/assets/SmoothLoaderHome.jsx b/frontend/src/assets/SmoothLoaderHome.jsx new file mode 100644 index 0000000..5ca4156 --- /dev/null +++ b/frontend/src/assets/SmoothLoaderHome.jsx @@ -0,0 +1,71 @@ +const SmoothLoaderHome = () => { + return ( + + + + + + + ); + }; + + export default SmoothLoaderHome; + + + import React from 'react'; +import { VscFoldDown } from 'react-icons/vsc'; + +export const AnimatedFoldDownArrow = () => { + return ( +
+ + +
+ ); +}; diff --git a/frontend/src/assets/SmoothLoaderN.jsx b/frontend/src/assets/SmoothLoaderN.jsx index 3504fd7..51d436b 100644 --- a/frontend/src/assets/SmoothLoaderN.jsx +++ b/frontend/src/assets/SmoothLoaderN.jsx @@ -1,37 +1,37 @@ const SmoothLoaderN = () => { return ( + - - - - - + + + + ); }; diff --git a/frontend/src/components/Polls.jsx b/frontend/src/components/Polls.jsx index f36f0ff..7006d98 100644 --- a/frontend/src/components/Polls.jsx +++ b/frontend/src/components/Polls.jsx @@ -43,37 +43,36 @@ const Polls = ({ poll, setPollVote, user, inRoom, room, topic, joined }) => { const [loading, setloading] = useState(false) const dropdownRef = useRef(null); - - - + + + const [hasVoted, setHasVoted] = useState(false); const [loadingOptionId, setLoadingOptionId] = useState(null); - - + + const [totalVotes, setTotalVotes] = useState(0); - + useEffect(() => { - + const totalVotesPerPoll = poll?.options?.reduce((total, option) => total + option.votes.length, 0); - + setTotalVotes(totalVotesPerPoll) - + }, [poll]); // Run this effect when options change - - + + const handleVote = async (selectedOption) => { - if(!isLogin){ + if (!isLogin) { toast("Login to vote", { icon: 'ℹ️', }) return; } - if(inRoom) - { - if(!joined){ + if (inRoom) { + if (!joined) { toast("First Join Room", { icon: 'ℹ️', }) @@ -102,8 +101,8 @@ const Polls = ({ poll, setPollVote, user, inRoom, room, topic, joined }) => { setloading(false) setLoadingOptionId(null) }; - - + + const handleToggle = () => { setOpen((v) => !v) } @@ -111,52 +110,52 @@ const Polls = ({ poll, setPollVote, user, inRoom, room, topic, joined }) => { if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { setOpen(false); } - + }; - + const [itemId, setitemId] = useState(null); const [openConfirm, setOpenConfirm] = useState(false) const [ifDelete, setifDelete] = useState(false); - const handleDeletePoll=(id)=>{ + const handleDeletePoll = (id) => { setitemId(id); - setOpenConfirm(true) + setOpenConfirm(true) } useEffect(() => { - if(ifDelete){ + if (ifDelete) { deletePoll(itemId) } }, [ifDelete]) - -const deletePoll=async(id)=>{ - + const deletePoll = async (id) => { + - setLoading(true) - try { setLoading(true) - const res= await axios.delete(`${baseAddress}poll/deletepoll`,{ - params:{ - id, + + try { + setLoading(true) + const res = await axios.delete(`${baseAddress}poll/deletepoll`, { + params: { + id, + } + }) + if (res.status == 202) { + toast.success("Poll Deleted!") + dispatch(deleteUserPoll(id)) + dispatch(deleteHomePost(id)) + if (inRoom) dispatch(decreaseRoomPolls()) } - }) - if(res.status==202){ - toast.success("Poll Deleted!") - dispatch(deleteUserPoll(id)) - dispatch(deleteHomePost(id)) - if(inRoom)dispatch(decreaseRoomPolls()) + setLoading(false); + } catch (error) { + console.log(error); + toast.error("Server Issue"); } - setLoading(false); - } catch (error) { - console.log(error); - toast.error("Server Issue"); + setLoading(false) } - setLoading(false) -} useEffect(() => { @@ -175,39 +174,40 @@ const deletePoll=async(id)=>{ }; - const handleShare = async(poll)=>{ - + const handleShare = async (poll) => { + if (navigator.share) { - try { - await navigator.share({ - title: poll?.title, - text: `Check out ${poll?.createdBy?.username}'s latest poll on our site!`, - url: `${window.location.origin}/poll/${poll?.id}`, - }); - } catch (error) { - console.error('Error in post sharing', error); - } + try { + await navigator.share({ + title: poll?.title, + text: `Check out ${poll?.createdBy?.username}'s latest poll on our site!`, + url: `${window.location.origin}/poll/${poll?.id}`, + }); + } catch (error) { + console.error('Error in post sharing', error); + } } else { - navigator.clipboard.writeText(`${window.location.origin}/poll/${poll?.id}/$`) - .then(() => { - alert('Post link copied to clipboard'); - }) - .catch((error) => { - console.error('Error in Post copying link to clipboard', error); - }); + navigator.clipboard.writeText(`${window.location.origin}/poll/${poll?.id}/$`) + .then(() => { + alert('Post link copied to clipboard'); + }) + .catch((error) => { + console.error('Error in Post copying link to clipboard', error); + }); } - - } + + } return (<> - {openConfirm && } + {openConfirm && }
handleClick(e, poll?.id)} key={poll.id}>
Navigate(`/u/${poll?.createdBy?.username}`)} src={poll?.createdBy?.dp || dp} alt="Profile" className="w-8 h-8 rounded-full cursor-pointer bg-white" />
- Navigate(`/u/${poll?.createdBy?.username}`)} className='font-semibold cursor-pointer hover:text-green-900'>u/{poll?.createdBy?.username}•{(inRoom && <> Navigate(`/room/${user.userID}/${room?.title}`)} className=' cursor-pointer hover:text-rose-900 text-sm font-semibold'>q/{room?.title} •) + + Navigate(`/u/${poll?.createdBy?.username}`)} className='font-semibold cursor-pointer hover:text-green-900'>u/{poll?.createdBy?.username}•{(inRoom && <> Navigate(`/room/${room?.CreatorId}/${room?.title}`)} className=' cursor-pointer hover:text-rose-900 text-sm font-semibold'>q/{room?.title} •) || (topic && <> Navigate(`/q/${topic}`)} className=' cursor-pointer hover:text-rose-900 text-sm font-semibold'>q/{topic} •)}{`${getTime(poll?.createdAt)} ago`}
@@ -215,19 +215,19 @@ const deletePoll=async(id)=>{
{isOpen && (
    - {poll?.userId === userInfo?.userID &&
  • + {poll?.userId === userInfo?.userID &&
  • + {<>Delete }
    • }
  • -
@@ -285,7 +285,7 @@ const deletePoll=async(id)=>{
- + ) } diff --git a/frontend/src/components/Sidenav.jsx b/frontend/src/components/Sidenav.jsx index 1ede5dc..2f37072 100644 --- a/frontend/src/components/Sidenav.jsx +++ b/frontend/src/components/Sidenav.jsx @@ -107,8 +107,9 @@ const Sidenav = () => {
- {dispatch(setShowSideNav(false)) - + { + dispatch(setShowSideNav(false)) + }} to={"/"} className={(e) => { return e.isActive ? 'w-full flex rounded-2xl items-center gap-2 px-4 py-2 bg-[#65692375]' : 'w-full flex rounded items-center gap-2 px-4 py-2' }}>Home dispatch(setShowSideNav(false))} to={"/popular"} className={(e) => { return e.isActive ? 'flex w-full rounded-2xl items-center gap-2 px-4 py-2 bg-[#65692375]' : 'flex w-full rounded items-center gap-2 px-4 py-2' }}>Popular {!isLogin && dispatch(setShowSideNav(false))} to={"/about/"} className={(e) => { return e.isActive ? 'flex w-full rounded-2xl items-center gap-2 px-4 py-2 bg-[#65692375]' : 'flex w-full rounded items-center gap-2 px-4 py-2' }}>About} @@ -128,7 +129,10 @@ const Sidenav = () => { {roomLoader ?
: (myAllRoom?.map(function (val) { - return dispatch(setShowSideNav(false))} key={val.room.id} to={`/room/${val?.room?.CreatorId}/${val?.room?.title}`} state={{ joined: true }} className={'w-full flex rounded items-center gap-2 pl-4 py-1 hover:bg-[#65692375]'}>{val?.room.title} + return dispatch(setShowSideNav(false))} key={val.room.id} to={`/room/${val?.room?.CreatorId}/${val?.room?.title}`} state={{ joined: true }} className={({ isActive }) => + `w-full flex rounded-xl items-center gap-2 pl-4 py-1 hover:bg-[#65692375] + ${isActive ? 'bg-[#65692375] font-semibold' : ''}` + }>{val?.room.title} }))}
@@ -150,7 +154,10 @@ const Sidenav = () => {
{roomLoader2 ?
: (notJoinedRooms?.map(function (val) { - return dispatch(setShowSideNav(false))} key={val.id} to={`/room/${val?.CreatorId}/${val?.title}`} className={'w-full flex rounded items-center gap-2 pl-4 py-1 hover:bg-[#65692375]'}>{val?.title} + return dispatch(setShowSideNav(false))} key={val.id} to={`/room/${val?.CreatorId}/${val?.title}`} className={({ isActive }) => + `w-full flex rounded-xl items-center gap-2 pl-4 py-1 hover:bg-[#65692375] + ${isActive ? 'bg-[#65692375] font-semibold' : ''}` + }>{val?.title} }))}
} diff --git a/frontend/src/pages/CreatePost.jsx b/frontend/src/pages/CreatePost.jsx index dbd2954..3a8ff47 100644 --- a/frontend/src/pages/CreatePost.jsx +++ b/frontend/src/pages/CreatePost.jsx @@ -309,7 +309,7 @@ export const CreatePoll = () => { const dispatch = useDispatch() const Navigate = useNavigate() const { roomTitle,roomCreatorId } = useOutletContext() - const [selectedOption, setSelectedOption] = useState(null); + const [selectedOption, setSelectedOption] = useState(""); const handleSelectChange = (event) => { setSelectedOption(event.target.value); diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx index 12aa2c6..0676af9 100644 --- a/frontend/src/pages/Home.jsx +++ b/frontend/src/pages/Home.jsx @@ -16,6 +16,8 @@ import Polls from '../components/Polls'; import { clearOffset, setPollOffset, setPostOffset } from '../redux/offset'; import { addRoomCreatorId, addRoomTitle, setOnNewRoomPost } from '../redux/RoomCreatePosts'; import SmoothLoader from '../assets/SmoothLoader'; +import { VscFoldDown } from "react-icons/vsc"; +import SmoothLoaderHome, { AnimatedFoldDownArrow } from '../assets/SmoothLoaderHome'; const Home = () => { @@ -117,53 +119,68 @@ const Home = () => { getPost(); // Fetch next set of data }; - return ( -
-
} - endMessage={ -

- {`${posts.length === 0 ? "It looks like there's no posts to display." : "You've reached the end of the page!"}`} -

- } - > - {isLogin && } -
- handleNewPost()} className='bg-[#eff1d3] rounded-full p-1'> - {isLoading ? : } - -
- -
- { (posts.length === 0) ? ( - - ) :( - posts?.map((post) => ( - 'body' in post ? ( - - ) : ( - - ) - )) - )} -
- + // Refresh function for pull down to refresh + const refresh = async () => { + console.log("refresh"); + + setHasMore(true); + await handleNewPost(); // Clear posts and reset offsets + }; + + return (<> + +
+
} + endMessage={ +

+ {`${posts.length === 0 ? "It looks like there's no posts to display." : "You've reached the end of the page!"}`} +

+ } + refreshFunction={refresh} + pullDownToRefresh={true} + pullDownToRefreshThreshold={100} + pullDownToRefreshContent={ +
+ } + releaseToRefreshContent={ +
+ } + scrollableTarget="scrollableDiv" // Specify the scrollable div + > + {isLogin && } +
+ {posts.length === 0 ? ( + + ) : ( + posts.map(post => + 'body' in post ? ( + + ) : ( + + ) + ) + )}
+ +
+ + ); }; diff --git a/frontend/src/pages/HotTopicPosts.jsx b/frontend/src/pages/HotTopicPosts.jsx index c05f746..a95e88f 100644 --- a/frontend/src/pages/HotTopicPosts.jsx +++ b/frontend/src/pages/HotTopicPosts.jsx @@ -149,7 +149,7 @@ const HotTopicPosts = ({ title, topic, dp, bg }) => { }, [page]); const fetchMoreData = () => { - if (isLoading || !hasMore) return; + if (!hasMore || isLoading) return; setPage((prevPage) => prevPage + 1); // Increment page number for infinite scroll }; @@ -175,7 +175,7 @@ const HotTopicPosts = ({ title, topic, dp, bg }) => { } >
- { intLoading ? : hotposts.map((post) => ( + { hotposts.map((post) => ( { }, [page]); const fetchMoreData = () => { - if (!hasMore) return; + if (!hasMore || isLoading) return; setPage((prevPage) => prevPage + 1); }; diff --git a/frontend/src/pages/Room.jsx b/frontend/src/pages/Room.jsx index 2f5211b..a337cb0 100644 --- a/frontend/src/pages/Room.jsx +++ b/frontend/src/pages/Room.jsx @@ -588,7 +588,7 @@ export const RoomPost = ({title,privateRoom,joined,data})=>{ }, [page]) const fetchMoreData = () => { - if (!hasMore) return; + if (!hasMore || isLoading) return; setPage((prevPage) => prevPage + 10); }; @@ -598,7 +598,7 @@ export const RoomPost = ({title,privateRoom,joined,data})=>{ dataLength={hotposts.length} next={fetchMoreData} hasMore={hasMore} - loader={} + loader={} endMessage={hotposts.length > 0 ?

{"You've reached the end of the page!"}

:

No posts available to display!

} > @@ -606,9 +606,7 @@ export const RoomPost = ({title,privateRoom,joined,data})=>{
{ - (isLoading && (hotposts.length)==0) ? ( - - ):( + ( hotposts.map((post) => ( { const dispatch = useDispatch(); useEffect(()=>{ + setisLoading(true) setPage(0); dispatch(clearPollInfo()); setHasMore(true); - setTimeout(() => { - getRoomsPolls(joined,privateRoom,dispatch,setPoll,clearPollInfo,setisLoading,isLoading,setHasMore,0,title); + setTimeout(async() => { + await getRoomsPolls(joined,privateRoom,dispatch,setPoll,clearPollInfo,isLoading,setHasMore,0,title); + setisLoading(false) }, 500); },[title]) useEffect(() => { if (joined || !privateRoom) { - if(page>0)getRoomsPolls(joined,privateRoom,dispatch,setPoll,clearPollInfo,setisLoading,isLoading,setHasMore,page,title); + if(page>0)getRoomsPolls(joined,privateRoom,dispatch,setPoll,clearPollInfo,isLoading,setHasMore,page,title); } }, [page]) const fetchMoreData = () => { - if (!hasMore) return; + console.log(page, isLoading,hasMore); + + if (!hasMore || isLoading) return; setPage((prevPage) => prevPage + 10); }; return
@@ -673,9 +675,7 @@ export const RoomPolls = ({title,privateRoom,joined,data})=>{ >
- {(isLoading && (hotposts.length)==0) ? ( - - ):( + {( hotposts.map((post) => ( { - setisLoading(true); +const getRoomsPolls = async(joined,privateRoom,dispatch,setHotPost,clearHotPostsInfo,isLoading,setHasMore,page,title)=>{ + if (!joined && privateRoom) { setHasMore(false); dispatch(setHotPost([])) - setisLoading(false); + return; } else { @@ -31,13 +31,11 @@ const getRoomsPolls = async(joined,privateRoom,dispatch,setHotPost,clearHotPosts setHasMore(false); } - setisLoading(false); console.log("InsidegetPolls ",isLoading) } } catch (error) { console.log(error); setHasMore(false); // Stop fetching if there's an error - setisLoading(false); console.log("InsidegetPolls ",isLoading) }