Skip to content

Commit

Permalink
little changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rituraj67
Rituraj67 committed Aug 24, 2024
1 parent 473a14d commit d6bd301
Show file tree
Hide file tree
Showing 6 changed files with 99 additions and 79 deletions.
4 changes: 3 additions & 1 deletion frontend/src/components/Notification.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@ import SmallLoader from './SmallLoader';
import Loader from './Loader';
import baseAddress from '../utils/localhost';
import { addNewRoom } from '../redux/userRooms';

import { setRoomDetail } from '../redux/roomSlice';
import toast from 'react-hot-toast';
import { v4 as uuidv4 } from 'uuid';



Expand Down Expand Up @@ -117,7 +119,7 @@ const Notification = ({setIsNfnOpen}) => {
{notifications.length==0 && <div className=' p-4 text-red-950 text-center font-semibold'>You're all caught up! No new notifications.</div>}
<div className=' max-h-[70vh] sm:max-h-[60vh] overflow-auto scrollable-box'>
{notifications?.map(item =><>
<div key={item.id} onClick={()=>handleClick(item, item.id)} className=' cursor-pointer hover:bg-[#acb499] shadow-sm shadow-lime-800 px-2 py-1 xxs:px-4 xxs:py-2'>
<div key={`${uuidv4()}${item.id}`} onClick={()=>handleClick(item, item.id)} className=' cursor-pointer hover:bg-[#acb499] shadow-sm shadow-lime-800 px-2 py-1 xxs:px-4 xxs:py-2'>
<div className=' flex items-center justify-between'><span className='text-md '><span className='font-semibold'>{item.user2.username} </span>{item.title}</span><span className=' text-xs text-slate-600'>{getTime(item.createdAt)} ago</span></div>
{item.body?<div className='whitespace-pre-wrap break-words text-sm line-clamp-3 bg-[#9eb840] overflow-clip px-3 text-white m-1 py-1 rounded-lg'>{item.body}</div>:<></>}
</div>
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/components/Posts.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import Linkify from 'react-linkify';



const Posts = ({ id, post, title, body, media, countComment, inRoom, room, createdAt, user, upvotes,joined,postDetails }) => {
const Posts = ({ id, post, title,topic, body, media, countComment, inRoom, room, createdAt, user, upvotes,joined,postDetails }) => {
const userInfo = useSelector(state => state.user.userInfo);
const isLogin = useSelector(state => state.login.value);
const posts = useSelector(state => state.post.posts);
Expand Down Expand Up @@ -153,7 +153,8 @@ const Posts = ({ id, post, title, body, media, countComment, inRoom, room, creat
<header className='flex gap-2 items-center my-2'>
<img onClick={()=> Navigate(`/u/${user?.username}`)} src={user && user.dp ? user.dp : dp} alt="Profile" className="w-8 h-8 rounded-full cursor-pointer bg-white" />
<div className=' flex flex-wrap gap-1 xs:gap-2 md:gap-4 items-center'>
<span onClick={()=> Navigate(`/u/${user?.username}`)} className='font-semibold cursor-pointer hover:text-green-900'>u/{user?.username}</span>•{inRoom && <><span className=' text-sm font-semibold'>q/{room.title}</span> <span>•</span></>}<span className='text-xs text-gray-700'>{`${getTime(createdAt)} ago`}</span>
<span onClick={()=> Navigate(`/u/${user?.username}`)} className='font-semibold cursor-pointer hover:text-green-900'>u/{user?.username}</span>•{(inRoom && <><span onClick={()=> Navigate(`/room/${user.userID}/${room.title}`)} className=' cursor-pointer hover:text-rose-900 text-sm font-semibold'>q/{room.title}</span> <span>•</span></>)
|| (topic && <><span onClick={()=> Navigate(`/q/${topic}`)} className=' cursor-pointer hover:text-rose-900 text-sm font-semibold'>q/{topic}</span> <span>•</span></>)}<span className='text-xs text-gray-700'>{`${getTime(createdAt)} ago`}</span>

</div>
</header>
Expand Down
162 changes: 89 additions & 73 deletions frontend/src/pages/HotTopicPosts.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,117 +9,133 @@ import Postskelton from '../components/Postskelton';
import { setSkeltonLoader } from '../redux/skelton';
import { clearHotPostsInfo, setHotPost } from '../redux/Hotposts';
import Posts from '../components/Posts';
import { GrRefresh } from 'react-icons/gr';
import SmallLoader from '../components/SmallLoader';






const HotTopicPosts = ({title,topic,dp,bg}) => {
const HotTopicPosts = ({ title, topic, dp, bg }) => {



const isSkelton = useSelector((state) => state.skelton.value);
const hotposts = useSelector((state) => state.hotpost.hotposts);
const dispatch = useDispatch();

const [page, setPage] = useState(1);
const [hasMore, setHasMore] = useState(true);
const [isLoading, setisLoading] = useState(false)
const isSkelton = useSelector((state) => state.skelton.value);
const hotposts = useSelector((state) => state.hotpost.hotposts);
const dispatch = useDispatch();

const [page, setPage] = useState(1);
const [hasMore, setHasMore] = useState(true);

const getPost = async () => {
dispatch(setSkeltonLoader())
if(page==1){
dispatch(clearHotPostsInfo())
}
try {
const res = await axios.get(`${baseAddress}posts/q/hottopic`, {
params: {
page,
limit: 10,
topic
},
});

if (res.status === 200) {
const fetchedPosts = res.data.posts;

if (fetchedPosts.length < 10) {
setHasMore(false);
}

dispatch(setHotPost(fetchedPosts));
}
} catch (error) {
console.log(error);
setHasMore(false); // Stop fetching if there's an error

const getPost = async (reset = false) => {
dispatch(setSkeltonLoader())
setisLoading(true)
try {
if (reset) {
dispatch(clearHotPostsInfo());
setPage(1);
setHasMore(true);
}
const currentPage = reset ? 1 : page;
const res = await axios.get(`${baseAddress}posts/q/hottopic`, {
params: {
page: currentPage,
limit: 10,
topic
},
});

if (res.status === 200) {
const fetchedPosts = res.data.posts;

if (fetchedPosts.length < 10) {
setHasMore(false);
}
dispatch(setSkeltonLoader())
};

useEffect(() => {
setPage(1); // Reset page when topic changes
setHasMore(true); // Reset hasMore when topic changes
getPost(); // Fetch posts for the new topic
dispatch(clearHotPostsInfo())
}, [topic]);
dispatch(setHotPost(fetchedPosts));
}
} catch (error) {
console.log(error);
setHasMore(false); // Stop fetching if there's an error
}
dispatch(setSkeltonLoader())
setisLoading(false)

};


useEffect(() => {

getPost(true); // Fetch posts for the new topic
}, [topic]);



useEffect(() => {
getPost();
}, [page]);

useEffect(() => {
if (page > 1)
getPost();
}, [page]);



const fetchMoreData = () => {
setPage((prevPage) => prevPage + 1);
};

const fetchMoreData = () => {
if (isLoading || !hasMore) return;
setPage(currentPage=> currentPage+1)
};




return (

<div className=' min-h-screen border-x-2 border-black'>
<InfiniteScroll
return (<>

<Hottopic topic={title} dp={dp} bg={bg} />
<div className=' min-h-screen xs:pl-8 sm:pl-16'>

<InfiniteScroll
dataLength={hotposts.length}
next={fetchMoreData}
hasMore={hasMore}
loader={<Postskelton />}
endMessage={hotposts.length>0?<p className=' text-center font-semibold p-4'>You've reached the end of the page!</p>:<p className=' text-center font-semibold p-4'>No posts available to display!</p>}
loader={<div className='py-8'><Postskelton /></div>}
endMessage={<p className='text-center break-words font-semibold p-4'>{`${hotposts.length === 0 ? "It looks like there aren't any posts yet." : "You've reached the end of the page!"}`}</p>}
>
<Hottopic topic={title} dp={dp} bg={bg} />

<div className=' flex items-center justify-end mx-4 mt-3'>
<span onClick={() => getPost(true)} className=' bg-[#eff1d3] rounded-full p-1'>
{isLoading ? <SmallLoader /> : <GrRefresh className=' cursor-pointer text-blue-500 text-xl font-extrabold' />}
</span>
</div>


<div className="post">
{ (!hotposts)||(page==1 && isSkelton) ? (
{(isSkelton && hotposts.length == 0) ? (
<Postskelton />
) : (
hotposts.map((post) => (
<Posts
key={post.id}
id={post.id}
post={post}
title={post.title}
body={post.body}
media={post.img}
countComment={post.comments?.length}
createdAt={post.createdAt}
user={post?.user}
upvotes={post?.upvotes}
/>
)
<Posts
key={post.id}
id={post.id}
post={post}
title={post.title}
topic={topic}
body={post.body}
media={post.img}
countComment={post.comments?.length}
createdAt={post.createdAt}
user={post?.user}
upvotes={post?.upvotes}
/>
)
)
)}
</div>
</InfiniteScroll>
</InfiniteScroll>
</div>

)

</>
)
}

export default HotTopicPosts
Expand Down
1 change: 1 addition & 0 deletions frontend/src/pages/Overview.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ const Overview = () => {
key={`post-${e.id}-${uuidv4()}`}
inRoom={e.subCommunity}
room={e.room}
topic={e.topic}
id={e.id}
title={e.title}
body={e.body}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/ProfileComments.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@ export const UserComment = ({ comment }) => {

<div className="flex items-center w-full gap-2">
<div className="flex flex-wrap items-center">
<p className=" exclude-click text-sm font-medium overflow-clip">{data.dp ? 'u' : 'q'}/{data.username ? data.username : data?.title}<span>&nbsp;•&nbsp;</span> </p>
<p onClick={()=> Navigate(`/u/${data.username}`) } className=" exclude-click hover:text-green-900 text-sm font-medium overflow-clip">{data.dp ? 'u' : 'q'}/{data.username ? data.username : data?.title}<span>&nbsp;•&nbsp;</span> </p>

<span style={{ wordBreak: 'break-word' }} className=' hover:underline hover:text-blue-950 whitespace-pre-wrap text-xs overflow-clip'>{comment.post.title}</span>

Expand All @@ -273,7 +273,7 @@ export const UserComment = ({ comment }) => {
<header className=' flex items-center justify-stretch flex-wrap whitespace-pre-wrap leading-3'>
<span className='exclude-click text-sm font-mono font-semibold'>{comment?.user.username}</span>
<span className=' text-xs'>{comment.parentId ? ` replied to ` : ' commented '}</span>
<span className='exclude-click text-sm font-mono font-semibold'>{comment.parent?.user.username}</span>
<span onClick={()=> Navigate(`/u/${comment.parent?.user.username}`)} className=' exclude-click hover:text-green-900 text-sm font-mono font-semibold'>{comment.parent?.user.username}</span>
<span>• </span>
<span className="text-gray-500 text-[9px] xxs:text-xs line-clamp-1 overflow-clip">{getTime(comment.createdAt)} ago</span>
</header>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/ProfilePosts.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const ProfilePosts = () => {
<div className='py-8'>
{(isSkelton && userPost.length === 0) ? <Postskelton /> :
userPost.map(post => (
<Posts key={uuidv4()} post={post} inRoom={post.subCommunity} room={post.room} id={post.id} title={post.title} body={post.body} media={post.img} countComment={post.comments?.length} createdAt={post.createdAt} user={post.user} upvotes={post.upvotes} />
<Posts key={uuidv4()} post={post} topic={post.topic} inRoom={post.subCommunity} room={post.room} id={post.id} title={post.title} body={post.body} media={post.img} countComment={post.comments?.length} createdAt={post.createdAt} user={post.user} upvotes={post.upvotes} />
))
}
</div>
Expand Down

0 comments on commit d6bd301

Please sign in to comment.