From b64d6df3d202fb5e3981209b288d9f48ff267fa0 Mon Sep 17 00:00:00 2001 From: Aamil13 Date: Thu, 25 Jul 2024 11:16:57 +0530 Subject: [PATCH 1/4] added single-post page,loaders and spinners for request --- src/app/community/[id]/page.tsx | 71 ++++++++++------- src/app/community/loading.tsx | 11 ++- src/app/post/[id]/page.tsx | 76 +++++++++++++++++++ src/app/timeline/page.tsx | 1 + src/components/Timeline/Post.tsx | 43 ++++++++--- src/components/Timeline/PostInput.tsx | 17 ++++- .../CommunityProfileContainer.tsx | 8 ++ .../communityUniversity/CreateNewGroup.tsx | 20 ++++- src/components/spinner/Spinner.tsx | 10 +++ .../universityCommunityCart.tsx | 2 +- src/services/community-timeline.ts | 8 +- src/services/community-university.ts | 34 ++++++++- 12 files changed, 249 insertions(+), 52 deletions(-) create mode 100644 src/app/post/[id]/page.tsx create mode 100644 src/components/spinner/Spinner.tsx diff --git a/src/app/community/[id]/page.tsx b/src/app/community/[id]/page.tsx index fedf137..e7e1fd4 100644 --- a/src/app/community/[id]/page.tsx +++ b/src/app/community/[id]/page.tsx @@ -17,6 +17,7 @@ import { useParams } from 'next/navigation' import React, { useEffect, useState } from 'react' import { IoIosArrowDown } from 'react-icons/io' import Navbar from '@/components/Timeline/Navbar' +import PostSkeleton from '@/components/Timeline/PostSkeleton' const roberta = { avatarUrl: '/timeline/avatar2.png', @@ -37,7 +38,11 @@ const Page = () => { const { data: communityGroups } = useGetCommunityGroups(id, isJoined) const [currSelectedGroup, setCurrSelectedGroup] = useState(communityGroups?.groups[0]) const [isJoinedInGroup, setIsJoinedInGroup] = useState(false) - const { data: communityGroupPost } = useGetCommunityGroupPost(currSelectedGroup?._id, isJoinedInGroup) + const { + data: communityGroupPost, + isLoading: communityGroupPostLoading, + isError, + } = useGetCommunityGroupPost(currSelectedGroup?._id, isJoinedInGroup) const modalContent = (modalContentType: string) => { switch (modalContentType) { @@ -52,6 +57,10 @@ const Page = () => { } } + useEffect(() => { + setCurrSelectedGroup(communityGroups?.groups[0]) + }, [communityGroups && !!currSelectedGroup]) + useEffect(() => { const findGroupRole = (communities: any) => { return communities?.some((community: any) => { @@ -69,6 +78,7 @@ const Page = () => { findGroupRole(userData.userUnVerifiedCommunities) } }, [currSelectedGroup, userData]) + return ( <> setIsModalOpen(false)}> @@ -113,31 +123,40 @@ const Page = () => { '' )} - {communityGroupPost?.communityPosts.map((item: any) => ( -
- -
- ))} + {communityGroupPostLoading ? ( + + ) : isError ? ( +
Something went wrong!
+ ) : !communityGroupPost?.communityPosts.length ? ( +
No post Yet!
+ ) : ( + communityGroupPost?.communityPosts.map((item: any) => ( +
+ +
+ )) + )} )} diff --git a/src/app/community/loading.tsx b/src/app/community/loading.tsx index 2b019b0..b5d9a4f 100644 --- a/src/app/community/loading.tsx +++ b/src/app/community/loading.tsx @@ -1,4 +1,11 @@ export default function Loading() { - // You can add any UI inside Loading, including a Skeleton. - return
dsdsdsdsdsd
+ return ( +
+
+ + + +
+
+ ) } diff --git a/src/app/post/[id]/page.tsx b/src/app/post/[id]/page.tsx new file mode 100644 index 0000000..6655cbe --- /dev/null +++ b/src/app/post/[id]/page.tsx @@ -0,0 +1,76 @@ +'use client' +import Post from '@/components/Timeline/Post' +import { useGetPost } from '@/services/community-university' +import { useParams, useSearchParams } from 'next/navigation' +import Modal from '@/components/Timeline/Modal' +import ConnectionsModal from '@/components/Timeline/Modals/ConnectionsModal' +import PollModal from '@/components/Timeline/Modals/PollModal' + +import React, { useState } from 'react' +import { ModalContentType } from '@/types/global' +import Navbar from '@/components/Timeline/Navbar' +import { PostType } from '@/types/constants' +import { useUniStore } from '@/store/store' +import PostSkeleton from '@/components/Timeline/PostSkeleton' +const UserPost = () => { + const { id } = useParams<{ id: string }>() + const searchParams = useSearchParams() + const Type = searchParams.get('isType') + const [isModalOpen, setIsModalOpen] = useState(false) + const [modalContentType, setModalContentType] = useState() + const { data, isLoading } = useGetPost(id, Type) + const item = data?.post + + const { userProfileData } = useUniStore() + const modalContent = (modalContentType: string) => { + switch (modalContentType) { + case 'ConnectionsModal': + return + case 'PollModal': + return + default: + return null + } + } + + return ( +
+ setIsModalOpen(false)}> + {modalContentType && modalContent(modalContentType)} + + + +
+ {isLoading ? ( + + ) : ( + + )} +
+
+ ) +} + +export default UserPost diff --git a/src/app/timeline/page.tsx b/src/app/timeline/page.tsx index b484905..a16a5e0 100644 --- a/src/app/timeline/page.tsx +++ b/src/app/timeline/page.tsx @@ -117,6 +117,7 @@ const Timeline = () => { setIsModalOpen={setIsModalOpen} postID={post._id} type={PostType.Timeline} + isType={'communityId' in post ? 'CommunityPost' : 'userPost'} /> ) }) diff --git a/src/components/Timeline/Post.tsx b/src/components/Timeline/Post.tsx index 9caf759..851a520 100644 --- a/src/components/Timeline/Post.tsx +++ b/src/components/Timeline/Post.tsx @@ -9,6 +9,7 @@ import { FaBookmark } from 'react-icons/fa6' // import { MdOutlineImage } from 'react-icons/md' import { MdGifBox, MdOutlineBookmarkBorder } from 'react-icons/md' import { HiReply, HiOutlineBell, HiOutlineFlag } from 'react-icons/hi' +import { MdOutlineOpenInNew } from 'react-icons/md' import { BiRepost } from 'react-icons/bi' import { ModalContentType } from '@/types/global' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover' @@ -31,6 +32,8 @@ import dayjs from 'dayjs' import relativeTime from 'dayjs/plugin/relativeTime' import { replaceImage } from '@/services/uploadImage' import { PostCommentData, PostType } from '@/types/constants' +import Link from 'next/link' +import { Spinner } from '../spinner/Spinner' dayjs.extend(relativeTime) @@ -57,13 +60,20 @@ interface PostProps { media?: [] saved?: boolean isUniversity?: boolean - postID?: string + postID: string profileDp?: string adminId: string type: PostType + isType: string + isSinglePost?: boolean } -const PostOptions = () => { +interface PostOptionType { + postID: string + isType: string +} + +const PostOptions = ({ postID, isType }: PostOptionType) => { return ( @@ -71,6 +81,12 @@ const PostOptions = () => {
+
+ + +

Open Post

+ +

Save Post

@@ -156,15 +172,18 @@ const Post: React.FC = ({ profileDp, adminId, type, + isType, + isSinglePost, }) => { const { mutate: LikeUnlikeGroupPost } = useLikeUnilikeGroupPost() const { mutate: LikeUnlikeTimelinePost } = useLikeUnlikeTimelinePost() - const { mutate: CreateGroupPostComment } = useCreateGroupPostComment() + const { mutate: CreateGroupPostComment, isPending: CreateGroupPostCommentLoading } = useCreateGroupPostComment(isSinglePost ? isSinglePost : false) const { mutate: likeGroupPostComment } = useLikeUnlikeGroupPostComment() - const { mutate: CreateUserPostComment } = useCreateUserPostComment() + const { mutate: CreateUserPostComment, isPending: CreateUserPostCommentLoading } = useCreateUserPostComment(isSinglePost ? isSinglePost : false) const { mutate: likeUserPostComment } = useLikeUnlikeUserPostComment() const [comment, setComment] = useState('') const [ImageValue, setImageValue] = useState(null) + const [isLoading, setIsLoading] = useState(false) const [showCommentSec, setShowCommentsec] = useState(false) const { userData } = useUniStore() @@ -174,6 +193,7 @@ const Post: React.FC = ({ if (comment.length <= 1) { return console.log('Please type something to comment!') } + setIsLoading(true) if (ImageValue) { const imagedata: any = await replaceImage(ImageValue, '') @@ -202,6 +222,9 @@ const Post: React.FC = ({ CreateGroupPostComment(data) } } + setIsLoading(false) + setImageValue(null) + setComment('') } const LikeUnlikeHandler = (postId: string) => { @@ -251,7 +274,7 @@ const Post: React.FC = ({
{saved && } - +
{/* media div */} @@ -334,9 +357,9 @@ const Post: React.FC = ({
- {comment.length > 1 && ( + {comment?.length > 1 && ( )} @@ -349,10 +372,10 @@ const Post: React.FC = ({

)} - {userComments.length && showCommentSec ?
Most Relevant / Most Recent
: ''} + {userComments?.length && showCommentSec ?
Most Relevant / Most Recent
: ''} {/* Comments Section */}
- {userComments.map((comment: any) => ( + {userComments?.map((comment: any) => (
{/* Comment Info */}
@@ -401,7 +424,7 @@ const Post: React.FC = ({ ))}
- {userComments.length > 5 && showCommentSec ? : ''} + {userComments?.length > 5 && showCommentSec ? : ''}
diff --git a/src/components/Timeline/PostInput.tsx b/src/components/Timeline/PostInput.tsx index 89ea054..d4e3607 100644 --- a/src/components/Timeline/PostInput.tsx +++ b/src/components/Timeline/PostInput.tsx @@ -13,6 +13,7 @@ import { useCreateGroupPost } from '@/services/community-university' import { replaceImage } from '@/services/uploadImage' import { useCreateUserPost } from '@/services/community-timeline' import { CommunityPostData, PostInputData, PostInputType } from '@/types/constants' +import { Spinner } from '../spinner/Spinner' interface PostInputProps { setModalContentType: React.Dispatch> setIsModalOpen: React.Dispatch> @@ -24,8 +25,10 @@ interface PostInputProps { const PostInput: React.FC = ({ setIsModalOpen, setModalContentType, idToPost, profileDp, type }) => { const [inputValue, setInputValue] = useState('') const [ImageValue, setImageValue] = useState([]) - const { mutate: CreateGroupPost } = useCreateGroupPost() + const [isLoading, setIsLoading] = useState(false) + const { mutate: CreateGroupPost, isPending } = useCreateGroupPost() const { mutate: CreateTimelinePost } = useCreateUserPost() + const handleEmojiClick = (emojiData: any) => { setInputValue((prevValue) => prevValue + emojiData.emoji) } @@ -44,6 +47,8 @@ const PostInput: React.FC = ({ setIsModalOpen, setModalContentTy return console.log('Please type something to post!') } + setIsLoading(true) + if (ImageValue) { const imagedata = await processImages(ImageValue) const data: PostInputData = { @@ -74,6 +79,8 @@ const PostInput: React.FC = ({ setIsModalOpen, setModalContentTy CreateTimelinePost(data) } } + + setIsLoading(false) } return ( @@ -89,8 +96,12 @@ const PostInput: React.FC = ({ setIsModalOpen, setModalContentTy value={inputValue} onChange={(e) => setInputValue(e.target.value)} /> - {ImageValue && ( diff --git a/src/components/communityProfile/CommunityProfileContainer.tsx b/src/components/communityProfile/CommunityProfileContainer.tsx index 5f75cf1..96d6da0 100644 --- a/src/components/communityProfile/CommunityProfileContainer.tsx +++ b/src/components/communityProfile/CommunityProfileContainer.tsx @@ -58,6 +58,8 @@ const CommunityProfileContainer = () => { {selectedOption == valueType.Posts ? ( { /> ) : selectedOption == valueType.Media ? ( { /> ) : selectedOption == valueType.Saved ? ( { ) : ( void } @@ -16,10 +17,11 @@ const CreateNewGroup = ({ setNewGroup }: Props) => { const [logoImage, setLogoImage] = useState() const [coverImage, setCoverImage] = useState() const [userPopUp, setUserPopUp] = useState(false) + const [isLoading, setIsLoading] = useState(false) const [selectedUsers, setSelectedUsers] = useState([]) const selectedUsersId = selectedUsers.map((item: any) => item._id) const [searchInput, setSearchInput] = useState('') - const { mutate: createGroup } = useCreateCommunityGroup() + const { mutate: createGroup, isPending } = useCreateCommunityGroup() const { register: GroupRegister, handleSubmit: handleGroupCreate, @@ -30,7 +32,7 @@ const CreateNewGroup = ({ setNewGroup }: Props) => { const onGroupSubmit = async (data: any) => { let CoverImageData let logoImageData - + setIsLoading(true) if (coverImage) { const imagedata: any = await replaceImage(coverImage, '') CoverImageData = { communityGroupLogoCoverUrl: { imageUrl: imagedata?.imageUrl, publicId: imagedata?.publicId } } @@ -47,6 +49,7 @@ const CreateNewGroup = ({ setNewGroup }: Props) => { selectedUsersId, } createGroup({ communityId: id, data: dataToPush }) + setIsLoading(false) } const { data } = useGetCommunityUsers(id, userPopUp, values.communityGroupType, searchInput) @@ -81,6 +84,9 @@ const CreateNewGroup = ({ setNewGroup }: Props) => { className="w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border border-neutral-300 rounded-2xl" /> + {data?.user?.map((item: any) => ( ))} @@ -166,9 +172,15 @@ const CreateNewGroup = ({ setNewGroup }: Props) => { + - diff --git a/src/components/spinner/Spinner.tsx b/src/components/spinner/Spinner.tsx new file mode 100644 index 0000000..4a70abb --- /dev/null +++ b/src/components/spinner/Spinner.tsx @@ -0,0 +1,10 @@ +import React from 'react' + +export const Spinner = () => { + return ( +
+ ) +} diff --git a/src/components/universityCommunity/universityCommunityCart.tsx b/src/components/universityCommunity/universityCommunityCart.tsx index ee95ea9..380d479 100644 --- a/src/components/universityCommunity/universityCommunityCart.tsx +++ b/src/components/universityCommunity/universityCommunityCart.tsx @@ -24,7 +24,7 @@ const UniversityCommunityCart = ({ UniversityName, UniversityAddress, University } } return ( -
+

{UniversityName}

{address}

diff --git a/src/services/community-timeline.ts b/src/services/community-timeline.ts index aa626cb..10ea572 100644 --- a/src/services/community-timeline.ts +++ b/src/services/community-timeline.ts @@ -44,14 +44,18 @@ export async function LikeUnlikeUserPostComment(UserPostCommentId: string, token //Query Functions for UserPost, UserPostComment -export const useCreateUserPostComment = () => { +export const useCreateUserPostComment = (isSinglePost: boolean) => { const [cookieValue] = useCookie('uni_user_token') const queryClient = useQueryClient() return useMutation({ mutationFn: (data: PostCommentData) => CreateUserPostComment(data, cookieValue), onSuccess: () => { - queryClient.invalidateQueries({ queryKey: ['userPosts'] }) + if (isSinglePost) { + queryClient.invalidateQueries({ queryKey: ['getPost'] }) + } else { + queryClient.invalidateQueries({ queryKey: ['userPosts'] }) + } }, onError: (res: any) => { console.log(res.response.data.message, 'res') diff --git a/src/services/community-university.ts b/src/services/community-university.ts index 83d8e21..469c7f6 100644 --- a/src/services/community-university.ts +++ b/src/services/community-university.ts @@ -73,6 +73,11 @@ export async function getAllCommunityGroupPost(communityId: string, token: any) } //posts +export async function getPost(postID: string, isType: string | null, token: any) { + const response: any = await client(`/communitypost/singlePost/${postID}?isType=${isType}`, { headers: { Authorization: `Bearer ${token}` } }) + return response +} + export async function CreateGroupPost(data: any, token: any) { const response = await client(`/communitypost`, { method: 'POST', headers: { Authorization: `Bearer ${token}` }, data }) return response @@ -223,7 +228,7 @@ export const useUpdateCommunityGroup = () => { export function useGetCommunityGroupPost(communityId: string, isJoined: boolean) { const [cookieValue] = useCookie('uni_user_token') - const { isLoading, data, error } = useQuery({ + const { isLoading, data, error, isError } = useQuery({ queryKey: ['communityGroupsPost', communityId], queryFn: () => getAllCommunityGroupPost(communityId, cookieValue), enabled: isJoined, @@ -234,7 +239,7 @@ export function useGetCommunityGroupPost(communityId: string, isJoined: boolean) errorMessage = error.response.data } - return { isLoading, data, error: errorMessage } + return { isLoading, data, isError, error: errorMessage } } export const useLikeUnilikeGroupPost = () => { @@ -269,14 +274,18 @@ export const useCreateGroupPost = () => { }) } -export const useCreateGroupPostComment = () => { +export const useCreateGroupPostComment = (isSinglePost: boolean) => { const [cookieValue] = useCookie('uni_user_token') const queryClient = useQueryClient() return useMutation({ mutationFn: (data: any) => CreateGroupPostComment(data, cookieValue), onSuccess: () => { - queryClient.invalidateQueries({ queryKey: ['communityGroupsPost'] }) + if (isSinglePost) { + queryClient.invalidateQueries({ queryKey: ['getPost'] }) + } else { + queryClient.invalidateQueries({ queryKey: ['communityGroupsPost'] }) + } }, onError: (res: any) => { console.log(res.response.data.message, 'res') @@ -347,3 +356,20 @@ export const useUserGroupRole = () => { }, }) } + +export function useGetPost(postId: string, isType: string | null) { + const [cookieValue] = useCookie('uni_user_token') + + const { isLoading, data, error } = useQuery({ + queryKey: ['getPost', postId], + queryFn: () => getPost(postId, isType, cookieValue), + enabled: !!postId, + }) + + let errorMessage = null + if (axios.isAxiosError(error) && error.response) { + errorMessage = error.response.data + } + + return { isLoading, data, error: errorMessage } +} From 3edcbf30ae7264b92b2a5b9b6522f3011db714f4 Mon Sep 17 00:00:00 2001 From: Aamil13 Date: Thu, 25 Jul 2024 12:42:02 +0530 Subject: [PATCH 2/4] changed the api endpoint to /post --- src/services/community-university.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/services/community-university.ts b/src/services/community-university.ts index 469c7f6..4f9cc1d 100644 --- a/src/services/community-university.ts +++ b/src/services/community-university.ts @@ -74,7 +74,7 @@ export async function getAllCommunityGroupPost(communityId: string, token: any) //posts export async function getPost(postID: string, isType: string | null, token: any) { - const response: any = await client(`/communitypost/singlePost/${postID}?isType=${isType}`, { headers: { Authorization: `Bearer ${token}` } }) + const response: any = await client(`/post/singlePost/${postID}?isType=${isType}`, { headers: { Authorization: `Bearer ${token}` } }) return response } From 43c8268d59c2bbee8eecc3439edd7dc108cd6d52 Mon Sep 17 00:00:00 2001 From: Aamil13 Date: Thu, 25 Jul 2024 18:20:57 +0530 Subject: [PATCH 3/4] refactored and added type --- src/app/community/[id]/page.tsx | 96 ++++++++++++++++++---------- src/app/community/page.tsx | 14 +++- src/app/post/[id]/page.tsx | 67 ++++++++++--------- src/services/community-university.ts | 12 ++-- src/services/university-community.ts | 20 ++++-- src/services/user.ts | 4 +- src/services/userProfile.ts | 4 +- src/utils/ZustandSocketProvider.tsx | 8 +-- 8 files changed, 140 insertions(+), 85 deletions(-) diff --git a/src/app/community/[id]/page.tsx b/src/app/community/[id]/page.tsx index e7e1fd4..cd4085e 100644 --- a/src/app/community/[id]/page.tsx +++ b/src/app/community/[id]/page.tsx @@ -26,6 +26,27 @@ const roberta = { comment: 'Sorry that was a strange thing to ask.', replyingTo: 'Johnny Nitro and Kathryn Murphy', } + +interface communityPostType { + _id: string + user_id: { + firstName: string + lastName: string + _id: string + university_name: string + study_year: string + degree: string + profile_dp: { + imageUrl: string + } + } + content: string + createdAt: string + likeCount: [] + comments: [] + imageUrl: [] +} + const Page = () => { const [isModalOpen, setIsModalOpen] = useState(false) const [modalContentType, setModalContentType] = useState() @@ -40,7 +61,7 @@ const Page = () => { const [isJoinedInGroup, setIsJoinedInGroup] = useState(false) const { data: communityGroupPost, - isLoading: communityGroupPostLoading, + isFetching: communityGroupPostLoading, isError, } = useGetCommunityGroupPost(currSelectedGroup?._id, isJoinedInGroup) @@ -79,6 +100,44 @@ const Page = () => { } }, [currSelectedGroup, userData]) + const PostContainer = () => { + if (communityGroupPostLoading) { + return + } + if (isError) { + return
Something went wrong!
+ } + if (!communityGroupPost?.communityPosts.length) { + return
No post Yet!
+ } + return communityGroupPost?.communityPosts.map((item: communityPostType) => ( +
+ +
+ )) + } + return ( <> setIsModalOpen(false)}> @@ -123,40 +182,7 @@ const Page = () => { '' )}
- {communityGroupPostLoading ? ( - - ) : isError ? ( -
Something went wrong!
- ) : !communityGroupPost?.communityPosts.length ? ( -
No post Yet!
- ) : ( - communityGroupPost?.communityPosts.map((item: any) => ( -
- -
- )) - )} +
)} diff --git a/src/app/community/page.tsx b/src/app/community/page.tsx index 77bcd72..7d707fc 100644 --- a/src/app/community/page.tsx +++ b/src/app/community/page.tsx @@ -6,10 +6,18 @@ import UniversityCard from '@/components/universityCommunity/universityCommunity import { useGetUserSubscribedCommunityGroups } from '@/services/university-community' import Loading from '../loading' +interface CommunityType { + _id: string + communityLogoUrl: { + imageUrl: string + } + name: string + collegeID: string +} const Page = () => { - const { data: SubscribedData, isLoading } = useGetUserSubscribedCommunityGroups() + const { data: SubscribedData, isFetching } = useGetUserSubscribedCommunityGroups() - if (isLoading) return + if (isFetching) return return ( <> @@ -18,7 +26,7 @@ const Page = () => {

Joined Communities

{SubscribedData?.community?.length ? (
- {SubscribedData?.community?.map((item: any) => ( + {SubscribedData?.community?.map((item: CommunityType) => ( { const { id } = useParams<{ id: string }>() const searchParams = useSearchParams() const Type = searchParams.get('isType') const [isModalOpen, setIsModalOpen] = useState(false) const [modalContentType, setModalContentType] = useState() - const { data, isLoading } = useGetPost(id, Type) + const { data, isFetching } = useGetPost(id, Type) const item = data?.post - + const [cookieValue] = useCookie('uni_user_token') const { userProfileData } = useUniStore() const modalContent = (modalContentType: string) => { switch (modalContentType) { @@ -33,6 +34,40 @@ const UserPost = () => { } } + const PostHolder = () => { + if (!cookieValue) { + return
Login to view Post.
+ } + if (isFetching) { + return + } + return ( + + ) + } + return (
setIsModalOpen(false)}> @@ -41,33 +76,7 @@ const UserPost = () => {
- {isLoading ? ( - - ) : ( - - )} +
) diff --git a/src/services/community-university.ts b/src/services/community-university.ts index 4f9cc1d..4c6b6c1 100644 --- a/src/services/community-university.ts +++ b/src/services/community-university.ts @@ -74,7 +74,7 @@ export async function getAllCommunityGroupPost(communityId: string, token: any) //posts export async function getPost(postID: string, isType: string | null, token: any) { - const response: any = await client(`/post/singlePost/${postID}?isType=${isType}`, { headers: { Authorization: `Bearer ${token}` } }) + const response: any = await client(`/communitypost/post/${postID}?isType=${isType}`, { headers: { Authorization: `Bearer ${token}` } }) return response } @@ -228,7 +228,7 @@ export const useUpdateCommunityGroup = () => { export function useGetCommunityGroupPost(communityId: string, isJoined: boolean) { const [cookieValue] = useCookie('uni_user_token') - const { isLoading, data, error, isError } = useQuery({ + const { isFetching, data, error, isError } = useQuery({ queryKey: ['communityGroupsPost', communityId], queryFn: () => getAllCommunityGroupPost(communityId, cookieValue), enabled: isJoined, @@ -239,7 +239,7 @@ export function useGetCommunityGroupPost(communityId: string, isJoined: boolean) errorMessage = error.response.data } - return { isLoading, data, isError, error: errorMessage } + return { isFetching, data, isError, error: errorMessage } } export const useLikeUnilikeGroupPost = () => { @@ -360,10 +360,10 @@ export const useUserGroupRole = () => { export function useGetPost(postId: string, isType: string | null) { const [cookieValue] = useCookie('uni_user_token') - const { isLoading, data, error } = useQuery({ + const { isFetching, data, error } = useQuery({ queryKey: ['getPost', postId], queryFn: () => getPost(postId, isType, cookieValue), - enabled: !!postId, + enabled: !!postId && !!cookieValue, }) let errorMessage = null @@ -371,5 +371,5 @@ export function useGetPost(postId: string, isType: string | null) { errorMessage = error.response.data } - return { isLoading, data, error: errorMessage } + return { isFetching, data, error: errorMessage } } diff --git a/src/services/university-community.ts b/src/services/university-community.ts index 0f43c8b..63ec105 100644 --- a/src/services/university-community.ts +++ b/src/services/university-community.ts @@ -3,17 +3,29 @@ import { client } from './api-Client' import { useQuery } from '@tanstack/react-query' import axios from 'axios' +interface community { + _id: string + communityLogoUrl: { + imageUrl: string + } + name: string + collegeID: string +} +interface CommunityType { + community: community[] +} + export async function getUserSubscribedCommunityGroups(token: any) { - const response: any = await client(`/community`, { headers: { Authorization: `Bearer ${token}` } }) + const response: CommunityType = await client(`/community`, { headers: { Authorization: `Bearer ${token}` } }) return response } export function useGetUserSubscribedCommunityGroups() { const [cookieValue] = useCookie('uni_user_token') - const { isLoading, data, error } = useQuery({ + const { isFetching, data, error } = useQuery({ queryKey: ['UserSubscribedCommunityGroups'], queryFn: () => getUserSubscribedCommunityGroups(cookieValue), - enabled: true, + enabled: !!cookieValue, }) let errorMessage = null @@ -21,5 +33,5 @@ export function useGetUserSubscribedCommunityGroups() { errorMessage = error.response.data } - return { isLoading, data, error: errorMessage } + return { isFetching, data, error: errorMessage } } diff --git a/src/services/user.ts b/src/services/user.ts index 10bd562..86b5a58 100644 --- a/src/services/user.ts +++ b/src/services/user.ts @@ -9,13 +9,13 @@ export async function getUserData(token: any, id: string) { return response } -export function useGetUserData() { +export function useGetUserData(type: string) { const [cookieValue] = useCookie('uni_user_token') const { userData } = useUniStore() const { isLoading, data, error, refetch } = useQuery({ queryKey: ['getRefetchUserData'], queryFn: () => getUserData(cookieValue, userData.id), - enabled: !!cookieValue, + enabled: !!cookieValue && type != '', }) let errorMessage = null diff --git a/src/services/userProfile.ts b/src/services/userProfile.ts index 78606b1..4ce26e1 100644 --- a/src/services/userProfile.ts +++ b/src/services/userProfile.ts @@ -8,13 +8,13 @@ export async function getUserProfileData(token: any) { return response } -export function useGetUserProfileData() { +export function useGetUserProfileData(type: string) { const [cookieValue] = useCookie('uni_user_token') const { isLoading, data, error, refetch } = useQuery({ queryKey: ['getRefetchUserProfileData'], queryFn: () => getUserProfileData(cookieValue), - enabled: !!cookieValue, + enabled: !!cookieValue && type !== '', }) let errorMessage = null diff --git a/src/utils/ZustandSocketProvider.tsx b/src/utils/ZustandSocketProvider.tsx index c1a2ce2..23ca1eb 100644 --- a/src/utils/ZustandSocketProvider.tsx +++ b/src/utils/ZustandSocketProvider.tsx @@ -12,12 +12,12 @@ type ZustandSocketProviderProps = { } const ZustandSocketProvider: React.FC = ({ children }) => { - const initializeSocket = useUniStore((state: any) => state.initializeSocket) - const disconnectSocket = useUniStore((state: any) => state.disconnectSocket) + const initializeSocket = useUniStore((state) => state.initializeSocket) + const disconnectSocket = useUniStore((state) => state.disconnectSocket) const { userData, type, setUserUnVerifiedCommunities, setUserVerifiedCommunities, setUserFollowers, setIsRefetched } = useUniStore() const { refetch: refetchNotification } = useGetNotification() - const { refetch: refetchUserData, data: RefetcheduserData } = useGetUserData() - const { refetch: refetchUserProfileData, data: RefetcheduserProfileData } = useGetUserProfileData() + const { refetch: refetchUserData, data: RefetcheduserData } = useGetUserData(type) + const { refetch: refetchUserProfileData, data: RefetcheduserProfileData } = useGetUserProfileData(type) useEffect(() => { if (userData.id) { From 6546dfcc1c1ff4184e4c2677cf1d56a6226eaf9a Mon Sep 17 00:00:00 2001 From: Aamil13 Date: Fri, 26 Jul 2024 16:36:49 +0530 Subject: [PATCH 4/4] removed query destructuring and following/follower slice, moved sec-Navbar to layout --- src/app/[id]/page.tsx | 2 - src/app/community/[id]/connections/page.tsx | 2 - src/app/community/[id]/page.tsx | 6 +-- src/app/community/page.tsx | 2 - src/app/layout.tsx | 2 + src/app/post/[id]/page.tsx | 10 ++-- src/app/timeline/page.tsx | 6 +-- src/components/Navbar/Navbar.tsx | 3 +- src/components/Timeline/Navbar.tsx | 5 ++ src/hooks/useCookie.ts | 1 + src/services/auth.ts | 2 - src/services/community-university.ts | 52 +++++++++---------- src/services/connection.ts | 24 ++++----- src/services/notification.ts | 8 +-- src/services/university-community.ts | 8 +-- src/services/user.ts | 8 +-- src/services/userProfile.ts | 8 +-- src/store/store.ts | 2 - src/store/storeType.ts | 4 +- .../userFollowingSlice/userFollowingSlice.ts | 26 ---------- .../userFollowingSlice/userFollowingType.ts | 4 -- src/types/constants.ts | 5 ++ 22 files changed, 79 insertions(+), 111 deletions(-) delete mode 100644 src/store/userFollowingSlice/userFollowingSlice.ts delete mode 100644 src/store/userFollowingSlice/userFollowingType.ts diff --git a/src/app/[id]/page.tsx b/src/app/[id]/page.tsx index e04a602..ac1dd07 100644 --- a/src/app/[id]/page.tsx +++ b/src/app/[id]/page.tsx @@ -1,6 +1,5 @@ 'use client' import Footer from '@/components/Footer/Footer' -import Navbar from '@/components/Timeline/Navbar' import Modal from '@/components/Timeline/Modal' import EditProfileModal from '@/components/Timeline/Modals/EditProfileModal' import ProfileCard from '@/components/Timeline/ProfileCard' @@ -30,7 +29,6 @@ const Profile = () => { setIsModalOpen(false)}> {modalContentType && modalContent(modalContentType)} -
{ return (
-
{ return communityGroupPost?.communityPosts.map((item: communityPostType) => (
{ setIsModalOpen(false)}> {modalContentType && modalContent(modalContentType)} -
diff --git a/src/app/community/page.tsx b/src/app/community/page.tsx index 7d707fc..08cc8fc 100644 --- a/src/app/community/page.tsx +++ b/src/app/community/page.tsx @@ -1,6 +1,5 @@ 'use client' import React from 'react' -import Navbar from '@/components/Timeline/Navbar' import Footer from '@/components/Footer/Footer' import UniversityCard from '@/components/universityCommunity/universityCommunityCart' import { useGetUserSubscribedCommunityGroups } from '@/services/university-community' @@ -21,7 +20,6 @@ const Page = () => { return ( <> -

Joined Communities

{SubscribedData?.community?.length ? ( diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b242327..c5e95c7 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -6,6 +6,7 @@ import Navbar from '../components/Navbar/Navbar' import { ReactQueryClientProvider } from '@/utils/Provider' import ZustandSocketProvider from '@/utils/ZustandSocketProvider' +import SecNavbar from '@/components/Timeline/Navbar' type FontClassName = string const inter = Inter({ subsets: ['latin'] }) as { className: FontClassName } @@ -38,6 +39,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) + {children} diff --git a/src/app/post/[id]/page.tsx b/src/app/post/[id]/page.tsx index ba4a595..8fb52a3 100644 --- a/src/app/post/[id]/page.tsx +++ b/src/app/post/[id]/page.tsx @@ -8,7 +8,7 @@ import PollModal from '@/components/Timeline/Modals/PollModal' import React, { useState } from 'react' import { ModalContentType } from '@/types/global' -import Navbar from '@/components/Timeline/Navbar' + import { PostType } from '@/types/constants' import { useUniStore } from '@/store/store' import PostSkeleton from '@/components/Timeline/PostSkeleton' @@ -19,7 +19,7 @@ const UserPost = () => { const Type = searchParams.get('isType') const [isModalOpen, setIsModalOpen] = useState(false) const [modalContentType, setModalContentType] = useState() - const { data, isFetching } = useGetPost(id, Type) + const { data, isFetching, isPending } = useGetPost(id, Type) const item = data?.post const [cookieValue] = useCookie('uni_user_token') const { userProfileData } = useUniStore() @@ -35,12 +35,13 @@ const UserPost = () => { } const PostHolder = () => { - if (!cookieValue) { + if (!cookieValue && !isPending) { return
Login to view Post.
} - if (isFetching) { + if (isFetching || isPending) { return } + return ( { setIsModalOpen(false)}> {modalContentType && modalContent(modalContentType)} -
diff --git a/src/app/timeline/page.tsx b/src/app/timeline/page.tsx index a16a5e0..2714d68 100644 --- a/src/app/timeline/page.tsx +++ b/src/app/timeline/page.tsx @@ -1,6 +1,5 @@ 'use client' import React, { useState } from 'react' -import Navbar from '@/components/Timeline/Navbar' import ProfileCard from '@/components/Timeline/ProfileCard' import PostInput from '@/components/Timeline/PostInput' import Dropdown from '@/components/Timeline/DropDown' @@ -12,7 +11,7 @@ import PollModal from '@/components/Timeline/Modals/PollModal' import EditProfileModal from '@/components/Timeline/Modals/EditProfileModal' import ReplyModal from '@/components/Timeline/Modals/ReplyModal' import { ModalContentType } from '@/types/global' -import { PostInputType, PostType } from '@/types/constants' +import { PostInputType, PostType, singlePostEnum } from '@/types/constants' import Recommendations from '@/components/Timeline/Recommendations' import { useUniStore } from '@/store/store' import { useGetUserPosts } from '@/services/community-timeline' @@ -117,7 +116,7 @@ const Timeline = () => { setIsModalOpen={setIsModalOpen} postID={post._id} type={PostType.Timeline} - isType={'communityId' in post ? 'CommunityPost' : 'userPost'} + isType={'communityId' in post ? singlePostEnum.CommunityPost : singlePostEnum.userPost} /> ) }) @@ -128,7 +127,6 @@ const Timeline = () => { setIsModalOpen(false)}> {modalContentType && modalContent(modalContentType)} -
{ const [hover, setHover] = useState(false) const [activeItem, setActiveItem] = useState('') const [, , deleteCookie] = useCookie('uni_user_token') - const { userProfileData, userData, resetUserData, resetUserProfileData, resetUserFollowingData } = useUniStore() + const { userProfileData, userData, resetUserData, resetUserProfileData } = useUniStore() const router = useRouter() const { data: notificationData } = useGetNotification() @@ -62,7 +62,6 @@ const Navbar: React.FC = () => { deleteCookie() resetUserData() resetUserProfileData() - resetUserFollowingData() setIsLogin(false) router.push('/login') } diff --git a/src/components/Timeline/Navbar.tsx b/src/components/Timeline/Navbar.tsx index dc293d7..7619615 100644 --- a/src/components/Timeline/Navbar.tsx +++ b/src/components/Timeline/Navbar.tsx @@ -3,6 +3,7 @@ import React from 'react' import { CommunityNavbarLinks } from '@/types/constants' import { useRouter, usePathname } from 'next/navigation' import { useUniStore } from '@/store/store' +import useCookie from '@/hooks/useCookie' const Navbar: React.FC = () => { // const tabs = ['Timeline', 'Profile', 'Notifications', 'Messages', 'Connections', 'University Community', 'Chatbot'] @@ -11,7 +12,11 @@ const Navbar: React.FC = () => { const id = userData?.id const path = usePathname() const activeTab = path.split('/').pop() + const [cookieValue] = useCookie('uni_user_token') + if (!cookieValue) { + return + } return (