Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

V2/single post #102

Merged
merged 3 commits into from
Nov 5, 2024
Merged

V2/single post #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6fc9493
added single post
Aamil13 Nov 4, 2024
fe72bea
added single post
Aamil13 Nov 5, 2024
8747ab0
Merge branch 'dev' of https://github.com/BacPacNet/web-app-client int…
Aamil13 Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 85 additions & 0 deletions src/app/post/[id]/Oldpage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
'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 { PostType } from '@/types/constants'
import { useUniStore } from '@/store/store'
import PostSkeleton from '@/components/Timeline/PostSkeleton'
import useCookie from '@/hooks/useCookie'
const UserPost = () => {
const { id } = useParams<{ id: string }>()
const searchParams = useSearchParams()
const Type = searchParams.get('isType')
const [isModalOpen, setIsModalOpen] = useState(false)
const [modalContentType, setModalContentType] = useState<ModalContentType>()
const { data, isFetching, isPending } = useGetPost(id, Type)
const item = data?.post
const [cookieValue] = useCookie('uni_user_token')
const { userProfileData } = useUniStore()
const modalContent = (modalContentType: string) => {
switch (modalContentType) {
case 'ConnectionsModal':
return <ConnectionsModal />
case 'PollModal':
return <PollModal />
default:
return null
}
}

const PostHolder = () => {
if (!cookieValue && !isPending) {
return <div className="text-center">Login to view Post.</div>
}
if (isFetching || isPending) {
return <PostSkeleton />
}

return (
<Post
isType={String(Type)}
isSinglePost={true}
user={item?.user_id?.firstName + ' ' + item?.user_id?.lastName}
adminId={item?.user_id?._id}
university={item?.user_id?.university_name}
year={item?.user_id?.study_year + ' Yr. ' + ' ' + item?.user_id?.degree}
text={item?.content}
date={item?.createdAt}
avatar={item?.user_id?.profile_dp?.imageUrl}
likes={item?.likeCount}
comments={item?.comments?.length}
postID={item?._id}
reposts={2}
shares={1}
userComments={[]}
setModalContentType={setModalContentType}
setIsModalOpen={setIsModalOpen}
isUniversity={true}
profileDp={userProfileData?.profile_dp?.imageUrl}
media={item?.imageUrl}
type={String(Type) == 'userPost' ? PostType.Timeline : PostType.Community}
/>
)
}

return (
<div>
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
{modalContentType && modalContent(modalContentType)}
</Modal>

<div className="border-2 border-neutral-300 rounded-md w-3/4 mx-auto mt-6">
<PostHolder />
</div>
</div>
)
}

export default UserPost
128 changes: 64 additions & 64 deletions src/app/post/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,85 @@
'use client'
import Post from '@/components/Timeline/Post'
import PostCard from '@/components/molecules/PostCard'

import Spinner from '@/components/atoms/spinner'
import useCookie from '@/hooks/useCookie'
import { useGetPost } from '@/services/community-university'
import { PostType } from '@/types/constants'
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 PostImageSlider from '@/components/atoms/PostImageSlider'

import { PostType } from '@/types/constants'
import { useUniStore } from '@/store/store'
import PostSkeleton from '@/components/Timeline/PostSkeleton'
import useCookie from '@/hooks/useCookie'
const UserPost = () => {
const SinglePost = () => {
const { id } = useParams<{ id: string }>()
const searchParams = useSearchParams()
const Type = searchParams.get('isType')
const [isModalOpen, setIsModalOpen] = useState(false)
const [modalContentType, setModalContentType] = useState<ModalContentType>()
const { data, isFetching, isPending } = useGetPost(id, Type)
const { data, isFetching, isPending, isError } = useGetPost(id, Type)
const item = data?.post
const [cookieValue] = useCookie('uni_user_token')
const { userProfileData } = useUniStore()
const modalContent = (modalContentType: string) => {
switch (modalContentType) {
case 'ConnectionsModal':
return <ConnectionsModal />
case 'PollModal':
return <PollModal />
default:
return null
}
}

const PostHolder = () => {
if (!cookieValue && !isPending) {
return <div className="text-center">Login to view Post.</div>
}
if (isFetching || isPending) {
return <PostSkeleton />
}
const [showCommentSection, setShowCommentSection] = useState('')

const [imageCarasol, setImageCarasol] = useState<{
isShow: boolean
images: any
currImageIndex: number | null
}>({
isShow: false,
images: [],
currImageIndex: null,
})

if (isError) {
return <div className="h-screen flex justify-center items-center">Not Allowed</div>
}

if (isFetching || (!data?.post && !isError)) {
return (
<Post
isType={String(Type)}
isSinglePost={true}
user={item?.user_id?.firstName + ' ' + item?.user_id?.lastName}
adminId={item?.user_id?._id}
university={item?.user_id?.university_name}
year={item?.user_id?.study_year + ' Yr. ' + ' ' + item?.user_id?.degree}
text={item?.content}
date={item?.createdAt}
avatar={item?.user_id?.profile_dp?.imageUrl}
likes={item?.likeCount}
comments={item?.comments.length}
postID={item?._id}
reposts={2}
shares={1}
userComments={item?.comments}
setModalContentType={setModalContentType}
setIsModalOpen={setIsModalOpen}
isUniversity={true}
profileDp={userProfileData?.profile_dp?.imageUrl}
media={item?.imageUrl}
type={String(Type) == 'userPost' ? PostType.Timeline : PostType.Community}
/>
<div className="h-screen flex justify-center items-center">
<Spinner />
</div>
)
}

return (
<div>
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
{modalContentType && modalContent(modalContentType)}
</Modal>

<div className="border-2 border-neutral-300 rounded-md w-3/4 mx-auto mt-6">
<PostHolder />
<div className="w-full flex justify-center ">
<div className="w-10/12 shadow-xl rounded-lg mt-10">
<PostCard
key={item?._id}
user={item?.user_id?.firstName + ' ' + item?.user_id?.lastName}
adminId={item?.user_id?._id}
university={item?.profiles[0]?.university_name}
year={item?.profiles[0]?.study_year + ' Yr. ' + ' ' + item?.profiles[0]?.degree}
text={item?.content}
date={item?.createdAt}
avatarLink={item?.profiles[0]?.profile_dp?.imageUrl}
commentCount={item?.comments}
likes={item?.likeCount}
postID={item?._id}
type={String(Type) == 'Timeline' ? PostType.Timeline : PostType.Community}
images={item?.imageUrl || []}
setImageCarasol={setImageCarasol}
idx={1}
showCommentSection={showCommentSection}
setShowCommentSection={setShowCommentSection}
/>
</div>
{imageCarasol.isShow && (
<div className="fixed h-screen w-full mx-auto flex items-center justify-center ">
<div
onClick={() =>
setImageCarasol({
isShow: false,
images: [],
currImageIndex: 0,
})
}
className="bg-black w-full h-full fixed -top-0 -left-[0%] z-30 opacity-50"
></div>
<PostImageSlider images={imageCarasol.images} initialSlide={imageCarasol.currImageIndex} />
</div>
)}
</div>
)
}

export default UserPost
export default SinglePost
6 changes: 3 additions & 3 deletions src/components/molecules/PostCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ const PostCard = ({
</div>
<div className="ml-auto text-gray-400">
{' '}
<PostCartOption postID="123" isType="group" />{' '}
<PostCartOption postID={postID} isType={type} />{' '}
</div>
</div>

Expand Down Expand Up @@ -192,7 +192,7 @@ const PostCard = ({
<span onClick={() => setShowCommentSection(showCommentSection == postID ? ' ' : postID)} className="flex items-center">
<FiMessageCircle className="mr-1 text-neutral-600" /> {commentCount}
</span>
<span className="flex items-center">
{/* <span className="flex items-center">
<Popover>
<PopoverTrigger>
<div className="flex gap-1 items-center">
Expand All @@ -213,7 +213,7 @@ const PostCard = ({
</div>
</PopoverContent>
</Popover>
</span>
</span> */}

<Popover>
<PopoverTrigger>
Expand Down
29 changes: 18 additions & 11 deletions src/components/molecules/PostCommentBox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
} from 'react-share'
import { IoMdCode } from 'react-icons/io'
import NestedCommentModal from '../nestedCommentModal'
import useDeviceType from '@/hooks/useDeviceType'
dayjs.extend(relativeTime)

type Props = {
Expand Down Expand Up @@ -85,6 +86,7 @@ const PostCommentBox = ({ showCommentSec, postID, type, data }: Props) => {
const [isReply, setIsReply] = useState(false)
const containerRef = useRef<HTMLDivElement>(null)
const [replyModal, setReplyModal] = useState({ enabled: false, commentID: '' })
const { isMobile } = useDeviceType()

const { mutate: likeGroupPostComment } = useLikeUnlikeGroupPostComment(false)
const { mutate: likeUserPostComment } = useLikeUnlikeUserPostComment(false)
Expand Down Expand Up @@ -168,6 +170,11 @@ const PostCommentBox = ({ showCommentSec, postID, type, data }: Props) => {
}

const setActiveComments = (clickedComment: any) => {
// console.log('ismm', isMobile, clickedComment)
if (isMobile && clickedComment.level == 1) {
return setReplyModal({ enabled: true, commentID: clickedComment._id })
}

if (clickedComment.level == 3) {
setReplyModal({ enabled: true, commentID: clickedComment._id })
}
Expand Down Expand Up @@ -236,10 +243,10 @@ const PostCommentBox = ({ showCommentSec, postID, type, data }: Props) => {
const CommentOption = () => {
return (
<div className="flex flex-col gap-2">
<div className="flex items-center gap-1">
{/* <div className="flex items-center gap-1">
<FiRepeat className="mr-1 text-neutral-600" />
<p>Repost </p>
</div>
</div> */}
<div className="flex items-center gap-1">
<FiShare2 className="mr-1 text-neutral-600" />
<p>Share </p>
Expand Down Expand Up @@ -273,23 +280,23 @@ const PostCommentBox = ({ showCommentSec, postID, type, data }: Props) => {
return comments?.map((comment, index: number) => (
<div key={comment._id} className={`my-4 h-full relative ${childCommentsId.includes(comment._id) ? 'ms-8 max-sm:ms-4 w-10/12' : 'w-full'} `}>
{comment?.replies?.length > 0 && visibleComments[comment._id] && comment?.level !== 3 ? (
<div className="absolute w-[1px] h-5/6 bg-neutral-300 top-20 left-14 max-sm:hidden"></div>
<div className="absolute w-[1px] h-[90%] bg-neutral-300 top-20 max-sm:top-16 left-14 max-sm:left-8"></div>
) : (
''
)}

<div>
<div className="flex p-4 max-sm:px-0 gap-4 ">
<div className="relative max-sm:hidden">
<div className="relative ">
{childCommentsId.includes(comment._id) ? (
<>
{/* <div className="absolute w-1 h-36 bg-neutral-300 -top-28 -left-14"></div> */}
{index == comments.length - 1 ? <div className="absolute w-2 h-96 bg-white top-5 -left-6"></div> : ''}
{index == comments.length - 1 ? <div className="absolute w-2 h-96 bg-white top-5 -left-6 max-sm:-left-4"></div> : ''}

<div
className={`absolute
top-5
-left-6 h-3 w-[43px] border-l border-b border-neutral-300 rounded-bl-xl`}
top-5 max-sm:top-4
-left-6 max-sm:-left-4 h-3 w-[43px] max-sm:w-8 border-l border-b border-neutral-300 rounded-bl-xl`}
></div>
</>
) : (
Expand All @@ -313,10 +320,10 @@ const PostCommentBox = ({ showCommentSec, postID, type, data }: Props) => {
</p>
</div>
</div>
<div className="flex gap-4 ps-[105px] max-sm:ps-14">
<div className="flex gap-4 ps-[105px] max-sm:ps-[70px]">
<p className="text-xs sm:text-sm pt-1 break-words lg:min-w-[450px] max-lg:min-w-[200px]">{comment?.content}</p>
</div>
<div className="flex justify-start ps-[105px] max-sm:ps-14 mt-3 gap-5 max-sm:gap-2 text-xs max-sm:text-2xs">
<div className="flex justify-start ps-[105px] max-sm:ps-[70px] mt-3 gap-5 max-sm:gap-2 text-xs max-sm:text-2xs">
<div className="flex items-center cursor-pointer">
<AiOutlineLike
onClick={() => likePostCommentHandler(comment._id)}
Expand All @@ -336,7 +343,7 @@ const PostCommentBox = ({ showCommentSec, postID, type, data }: Props) => {
<HiReply className="text-gray-dark" />
<span className="ml-2 ">Reply</span>
</div>
<span className="flex items-center">
{/* <span className="flex items-center">
<Popover>
<PopoverTrigger>
<div className="flex gap-1 items-center">
Expand All @@ -348,7 +355,7 @@ const PostCommentBox = ({ showCommentSec, postID, type, data }: Props) => {
<RepostPopUp />
</PopoverContent>
</Popover>
</span>
</span> */}

<Popover>
<PopoverTrigger>
Expand Down
Loading
Loading