Skip to content

Commit

Permalink
Merge pull request #75 from BacPacNet/userpost
Browse files Browse the repository at this point in the history
add userPost Queries, skeleton
  • Loading branch information
bacpactech authored Jul 17, 2024
2 parents 1f1373d + 7b87bd0 commit 58e920c
Show file tree
Hide file tree
Showing 6 changed files with 197 additions and 31 deletions.
2 changes: 2 additions & 0 deletions src/app/community/[id]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import HeroSec from '@/components/communityUniversity/HeroSec'
import { useGetCommunity, useGetCommunityGroupPost, useGetCommunityGroups } from '@/services/community-university'
import { useUniStore } from '@/store/store'
import { ModalContentType } from '@/types/global'
import { PostInputType } from '@/types/constants'
import { useParams } from 'next/navigation'
import React, { useEffect, useState } from 'react'
import { IoIosArrowDown } from 'react-icons/io'
Expand Down Expand Up @@ -107,6 +108,7 @@ const Page = () => {
idToPost={currSelectedGroup._id}
setModalContentType={setModalContentType}
setIsModalOpen={setIsModalOpen}
type={PostInputType.Community}
/>
) : (
''
Expand Down
60 changes: 38 additions & 22 deletions src/app/timeline/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@ 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 } from '@/types/constants'
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 @@ -76,11 +78,10 @@ const recommendations = [

const Timeline = () => {
const [isModalOpen, setIsModalOpen] = useState(false)
const params = useParams()
const { userData, userProfileData, userFollowingData } = useUniStore()
const [modalContentType, setModalContentType] = useState<ModalContentType>()

console.log(params)
const { isLoading, data: TimelinePosts, error } = useGetUserPosts()
const timelinePosts = TimelinePosts?.timelinePosts

const modalContent = (modalContentType: string) => {
switch (modalContentType) {
Expand All @@ -97,6 +98,37 @@ const Timeline = () => {
}
}

const PostsContainer = () => {
if (isLoading) {
return Array.from({ length: 2 }).map((_, index) => <PostSkeleton key={index} />)
}
if (error) {
console.log(error)
return <div>Something Went Wrong!</div>
}
return timelinePosts?.map((post: any) => {
return (
<Post
key={post._id}
user="Joshua Welman"
adminId="123"
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}
/>
)
})
}

return (
<main>
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
Expand All @@ -117,25 +149,9 @@ 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={PostInputType.Timeline} />
<Dropdown options={options} defaultOption="Recent" />
<Post
user="Joshua Welman"
adminId="123"
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}
/>
<PostsContainer />
</div>
</div>
<Footer />
Expand Down
30 changes: 21 additions & 9 deletions src/components/Timeline/PostInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,21 @@ 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'
import { PostInputType } from '@/types/constants'
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 +46,28 @@ const PostInput: React.FC<PostInputProps> = ({ setIsModalOpen, setModalContentTy

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

CreateGroupPost(data)
//if type is community , add communityId field to data
if (type === PostInputType.Community) {
data.communityId = idToPost
CreateGroupPost(data)
} else if (type === PostInputType.Timeline) {
CreateTimelinePost(data)
}
// CreateGroupPost(data)
} else {
const data = {
communityId: idToPost,
const data: any = {
content: inputValue,
}
CreateGroupPost(data)
if (type === PostInputType.Community) {
data.communityId = idToPost
CreateGroupPost(data)
} else if (type === PostInputType.Timeline) {
CreateTimelinePost(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')
},
})
}
5 changes: 5 additions & 0 deletions src/types/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,8 @@ export const CommunityNavbarLinks: NavLink[] = [
{ label: 'University Community', href: '/community' },
{ label: 'Chatbot', href: '/chatbot' },
]

export enum PostInputType {
Community = 'Community',
Timeline = 'Timeline',
}

0 comments on commit 58e920c

Please sign in to comment.