Skip to content

Commit

Permalink
add userPost Queries, skeleton
Browse files Browse the repository at this point in the history
  • Loading branch information
ayushtiwari110 committed Jul 13, 2024
1 parent a203933 commit 11f4ef4
Show file tree
Hide file tree
Showing 5 changed files with 184 additions and 26 deletions.
1 change: 1 addition & 0 deletions src/app/community/[id]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ const Page = () => {
idToPost={currSelectedGroup._id}
setModalContentType={setModalContentType}
setIsModalOpen={setIsModalOpen}
type="Community"
/>
)}
</div>
Expand Down
46 changes: 29 additions & 17 deletions src/app/timeline/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import { ModalContentType } from '@/types/global'
import Recommendations from '@/components/Timeline/Recommendations'
import { useUniStore } from '@/store/store'
import { useParams } from 'next/navigation'
import { useGetUserPosts } from '@/services/community-timeline'
import PostSkeleton from '@/components/Timeline/PostSkeleton'
interface User {
name: string
bio: string
Expand Down Expand Up @@ -79,7 +81,11 @@ const Timeline = () => {
const params = useParams()
const { userData, userProfileData, userFollowingData } = useUniStore()
const [modalContentType, setModalContentType] = useState<ModalContentType>()
const { isLoading, data: TimelinePosts, error } = useGetUserPosts()
const timelinePosts = TimelinePosts?.timelinePosts
console.log(timelinePosts)

console.log(isLoading, TimelinePosts, error)
console.log(params)

const modalContent = (modalContentType: string) => {
Expand Down Expand Up @@ -117,24 +123,30 @@ const Timeline = () => {
<Recommendations people={recommendations} />
</div>
<div className="flex flex-col justify-center items-stretch gap-5 max-w-[696px]">
<PostInput setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} />
<PostInput setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} type="Timeline" />
<Dropdown options={options} defaultOption="Recent" />
<Post
user="Joshua Welman"
university="Nagoya University"
year="2nd Yr. Graduate"
text="Can someone help me with this chemistry equation? Here’s the link to the google drive:"
link="https://www.butkochem.com/homework/A1-35"
date="9:31 PM · Feb 11, 2024"
avatar="/timeline/avatar.png"
likes={[{ userId: '663a034cb65c15b36f959894' }, { userId: '663a034cb65c15b36f959894' }]}
comments={3}
reposts={2}
shares={1}
userComments={comments}
setModalContentType={setModalContentType}
setIsModalOpen={setIsModalOpen}
/>
{isLoading && Array.from({ length: 2 }).map((_, index) => <PostSkeleton key={index} />)}
{!isLoading &&
timelinePosts?.map((post: any) => {
return (
<Post
key={post._id}
user="Joshua Welman"
university={post.userId}
year="2nd Yr. Graduate"
text={post.content}
date={post.createdAt}
avatar="/timeline/avatar.png"
likes={post.likeCount}
comments={0}
reposts={2}
shares={1}
userComments={comments}
setModalContentType={setModalContentType}
setIsModalOpen={setIsModalOpen}
/>
)
})}
</div>
</div>
<Footer />
Expand Down
32 changes: 23 additions & 9 deletions src/components/Timeline/PostInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,20 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover
import EmojiPicker from 'emoji-picker-react'
import { useCreateGroupPost } from '@/services/community-university'
import { replaceImage } from '@/services/uploadImage'
import { useCreateUserPost } from '@/services/community-timeline'
interface PostInputProps {
setModalContentType: React.Dispatch<React.SetStateAction<ModalContentType>>
setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>
idToPost?: string
profileDp?: string
type: string
}

const PostInput: React.FC<PostInputProps> = ({ setIsModalOpen, setModalContentType, idToPost, profileDp }) => {
const PostInput: React.FC<PostInputProps> = ({ setIsModalOpen, setModalContentType, idToPost, profileDp, type }) => {
const [inputValue, setInputValue] = useState('')
const [ImageValue, setImageValue] = useState<File[] | []>([])
const { mutate: CreateGroupPost } = useCreateGroupPost()

const { mutate: CreateTimelinePost } = useCreateUserPost()
const handleEmojiClick = (emojiData: any) => {
setInputValue((prevValue) => prevValue + emojiData.emoji)
}
Expand All @@ -43,19 +45,31 @@ const PostInput: React.FC<PostInputProps> = ({ setIsModalOpen, setModalContentTy

if (ImageValue) {
const imagedata = await processImages(ImageValue)
const data = {
communityId: idToPost,
const data: any = {
// communityId: idToPost,
content: inputValue,
imageUrl: imagedata,
}

CreateGroupPost(data)
//if type is community , add communityId field to data
if (type === 'Community') {
data.communityId = idToPost
CreateGroupPost(data)
} else if (type === 'Timeline') {
CreateTimelinePost(data)
}
// CreateGroupPost(data)
} else {
const data = {
communityId: idToPost,
const data: any = {
// communityId: idToPost,
content: inputValue,
}
CreateGroupPost(data)
if (type === 'Community') {
data.communityId = idToPost
CreateGroupPost(data)
} else if (type === 'Timeline') {
CreateTimelinePost(data)
}
// CreateGroupPost(data)
}
}

Expand Down
21 changes: 21 additions & 0 deletions src/components/Timeline/PostSkeleton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from 'react'
import { Skeleton } from '../ui/Skeleton'
const PostSkeleton = () => {
return (
<div className="border rounded-lg border-border pb-10 bg-slate-50">
<div className="my-10 ml-10 flex gap-4 items-center">
<Skeleton className=" bg-slate-400 p-2 h-14 w-14 rounded-full" />
<div>
<Skeleton className="bg-slate-300 h-4 w-24" />
<Skeleton className="mt-1 bg-slate-300 h-3 w-20" />
<Skeleton className="mt-1 bg-slate-300 h-3 w-16" />
</div>
</div>
<Skeleton className="mx-10 h-3 bg-slate-300" />
<Skeleton className="mx-10 my-1 h-3 bg-slate-300" />
<Skeleton className="mx-10 h-3 bg-slate-300" />
</div>
)
}

export default PostSkeleton
110 changes: 110 additions & 0 deletions src/services/community-timeline.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { client } from './api-Client'
import axios from 'axios'
import useCookie from '@/hooks/useCookie'

export async function DeleteUserPost(postId: string, token: any) {
const response = await client(`/userpost/${postId}`, { method: 'DELETE', headers: { Authorization: `Bearer ${token}` } })
return response
}

export async function UpdateUserPost(data: any, postId: string, token: any) {
const response = await client(`/userpost/${postId}`, { method: 'PUT', headers: { Authorization: `Bearer ${token}` }, data })
return response
}

export async function LikeUnilikeUserPost(postId: string, token: any) {
const response = await client(`/userpost/likeunlike/${postId}`, { method: 'PUT', headers: { Authorization: `Bearer ${token}` } })
return response
}

export async function getAllUserPosts(token: any) {
const response: any = await client('/userpost/', { headers: { Authorization: `Bearer ${token}` } })
return response
}

export async function CreateUserPost(data: any, token: any) {
const response = await client(`/userpost/`, { method: 'POST', headers: { Authorization: `Bearer ${token}` }, data })
return response
}

//Query Functions

export const useDeletePost = () => {
const [cookieValue] = useCookie('uni_user_token')
const queryClient = useQueryClient()
return useMutation({
mutationFn: (postId: any) => DeleteUserPost(postId, cookieValue),
onSuccess: (response: any) => {
console.log(response, 'response')

queryClient.invalidateQueries({ queryKey: ['userPosts'] })
},
onError: (res: any) => {
console.log(res.response.data.message, 'res')
},
})
}

export const useUpdateUserPost = () => {
const [cookieValue] = useCookie('uni_user_token')
const queryClient = useQueryClient()
return useMutation({
mutationFn: ({ postData, postId }: { postData: any; postId: any }) => UpdateUserPost(postData, postId, cookieValue),

onSuccess: (response: any) => {
console.log(response, 'response')

queryClient.invalidateQueries({ queryKey: ['userPosts'] })
},
onError: (res: any) => {
console.log(res.response.data.message, 'res')
},
})
}

export function useGetUserPosts() {
const [cookieValue] = useCookie('uni_user_token')

const { isLoading, data, error } = useQuery({
queryKey: ['userPosts'],
queryFn: () => getAllUserPosts(cookieValue),
})

let errorMessage = null
if (axios.isAxiosError(error) && error.response) {
errorMessage = error.response.data
}

return { isLoading, data, error: errorMessage }
}

export const useCreateUserPost = () => {
const [cookieValue] = useCookie('uni_user_token')
const queryClient = useQueryClient()
return useMutation({
mutationFn: (data: any) => CreateUserPost(data, cookieValue),

onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['userPosts'] })
},
onError: (res: any) => {
console.log(res.response.data.message, 'res')
},
})
}

export const useLikeUnilikeGroupPost = () => {
const [cookieValue] = useCookie('uni_user_token')
const queryClient = useQueryClient()
return useMutation({
mutationFn: (postId: any) => LikeUnilikeUserPost(postId, cookieValue),

onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['userPosts'] })
},
onError: (res: any) => {
console.log(res.response.data.message, 'res')
},
})
}

0 comments on commit 11f4ef4

Please sign in to comment.