diff --git a/app/profilePage/page.tsx b/app/profilePage/page.tsx index 4c8e595..594d479 100644 --- a/app/profilePage/page.tsx +++ b/app/profilePage/page.tsx @@ -7,9 +7,11 @@ import { useRouter } from 'next/navigation'; import { auth , db } from '@/utils/firebase' import { useAuthState } from 'react-firebase-hooks/auth' -import { collection, query , where , onSnapshot, orderBy} from 'firebase/firestore'; +import { collection, query , where , onSnapshot, orderBy, and, startAfter, limit, getDocs} from 'firebase/firestore'; import { useCollectionData } from 'react-firebase-hooks/firestore'; import Post from '@/components/Post'; +import Loader from '@/components/ui/Loader'; +import { Button } from '@/components/ui/button'; @@ -36,30 +38,165 @@ const ProfilePage = (props: Props) => { const router = useRouter(); const [user, loading] = useAuthState(auth); // console.log(user); + const [postType, setPostType] = useState("normal"); + const [isAnonymous, setIsAnonymous] = useState(false); const [questions, setQuestions] = useState([]); + const [anonymousQuestions, setAnonymousQuestions] = useState([]); + const [loadingPosts, setLoadingPosts] = useState(true); + const [LastDoc, setLastDoc] = useState(null); + const [anonymousMorePosts, setAnonymousMorePosts] = useState(false); + const [anonymousLastdoc, setAnonymousLastdoc] = useState(null); + const [start, setStart] = useState(true); + const [anonymousStart, setAnonymousStart] = useState(true); + const [morePosts, setMorePosts] = useState(false); + + const [loadMore, setLoadMore] = useState(false); useEffect(() => { - if (!user) { - router.push('/auth'); - } else { - const questionsRef = collection(db, 'questions'); - const q = query(questionsRef, where('uid', '==', user.uid), orderBy('createdAt', 'desc')); - const unsub = onSnapshot(q, (snapshot) => { - setQuestions(snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() } as PostType))); - }); + const fetchData = async () => { + try { + if (!user) { + router.push('/auth'); + } else { + setLoadingPosts(true); + const questionsRef = collection(db, 'questions'); + let q; + + if (postType === 'normal') { + if(start){ + q = query(questionsRef, and(where('uid', '==', user.uid), + where('anonymity', '==', false)), orderBy('createdAt', 'desc'), limit(7)); + const snapshot = await getDocs(q); + setQuestions(snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() } as PostType))); + const lastdoc = snapshot.docs[snapshot.docs.length - 1]; + if(lastdoc)setMorePosts(true); + else setMorePosts(false); + setLastDoc(lastdoc); + setStart(false); + } + else{ + const moreQ = query( + questionsRef, + and(where('uid', '==', user.uid), + where('anonymity', '==', false)), + orderBy('createdAt', 'desc'), + startAfter(LastDoc), + limit(7) + ); + + const moreSnapshot = await getDocs(moreQ); + setQuestions((prevQuestions) => [ + ...prevQuestions, + ...moreSnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() } as PostType)), + ]); + const lastdoc = moreSnapshot.docs[moreSnapshot.docs.length - 1]; + if(lastdoc)setMorePosts(true); + else setMorePosts(false); + setLastDoc(lastdoc); + } + } else { + if(anonymousStart){ + q = query( + questionsRef, + and(where('uid', '==', user.uid), + where('anonymity', '==', true)), + orderBy('createdAt', 'desc'), + limit(7) + ); + const snapshot = await getDocs(q); + setAnonymousQuestions(snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() } as PostType))); + const lastdoc = snapshot.docs[snapshot.docs.length - 1]; + if(lastdoc)setAnonymousMorePosts(true); + else setAnonymousMorePosts(false); + setAnonymousLastdoc(lastdoc); + setAnonymousStart(false); + } + else{ + const moreQ = query( + questionsRef, + and(where('uid', '==', user.uid), + where('anonymity', '==', true)), + orderBy('createdAt', 'desc'), + startAfter(anonymousLastdoc), + limit(7) + ); - return () => { - unsub(); + const moreSnapshot = await getDocs(moreQ); + setAnonymousQuestions((prevQuestions) => [ + ...prevQuestions, + ...moreSnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() } as PostType)), + ]); + const lastdoc = moreSnapshot.docs[moreSnapshot.docs.length - 1]; + if(lastdoc)setAnonymousMorePosts(true); + else setAnonymousMorePosts(false); + setAnonymousLastdoc(lastdoc); + } + }; + + } + setLoadingPosts(false); + } catch (error) { + console.error('Error fetching data:', error); + setLoadingPosts(false); } - } - }, [user, loading, router]); + }; + + fetchData(); + }, [user, loading, router, postType, loadMore]); + + const handleToggleSwitch = () => { + setStart(true); + setAnonymousStart(true); + setIsAnonymous((prevIsAnonymous) => !prevIsAnonymous); + setPostType((prevPostType) => { + if(prevPostType=='normal')return 'anonymous' + else return 'normal' + }); + }; + + const handleLoadMore = () => { + setLoadMore((prev)=>!prev) + }; + + console.log("LastDoc ", LastDoc); return (
- - {(questions?.length === 0) ? ( -
+
+ +
+
+ { +
{ + isAnonymous?
{ + (anonymousQuestions?.length === 0) ? ( + !loadingPosts&&
+ Profile Pic +

No posts yet

+
+ ) : ( + anonymousQuestions && + anonymousQuestions.map((post, index) => ( + // +
+ +
+ )) + )} +
: + (questions?.length === 0) ? ( + !loadingPosts&&
{
)) - )} - + ) + } +
+ } +
+
+ { + loadingPosts?
: +
+ {isAnonymous? + anonymousMorePosts?:
No More Posts...
:morePosts? + :
No More Posts...
+ } +
+} +
diff --git a/components/ui/Loader.tsx b/components/ui/Loader.tsx new file mode 100644 index 0000000..1a4a92f --- /dev/null +++ b/components/ui/Loader.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +interface LoaderProps { + size?: string; + color?: string; +} + +const Loader: React.FC = ({ size = '24px', color = '#000000' }) => { + return ( +
+ +
+ + Loading... +
+ +
+ ); +}; + +export default Loader; \ No newline at end of file