BacPacNet · bacpactech · Dec 19, 2024 · Dec 19, 2024
diff --git a/src/app/(withLayout)/layout.tsx b/src/app/(withLayout)/layout.tsx
@@ -53,7 +53,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex gap-8 bg-surface-primary-50 h-with-navbar overflow-auto px-4">
       <div className="w-1/5 hidden lg:block ">
-        <div className="fixed w-1/5 left-0 z-10 ">
+        <div className="fixed min:w-[290px] w-1/5 left-0 z-10 ">
           <LeftNavbar />
         </div>
       </div>

diff --git a/src/app/(withLayout)/notifications/page.tsx b/src/app/(withLayout)/notifications/page.tsx
@@ -1,6 +1,13 @@
+import Card from '@/components/atoms/Card'
 import NotificationContainer from '@/components/organisms/NotificationContainer'
 import React from 'react'
 
 export default function NotificationsPage() {
-  return <NotificationContainer />
+  return (
+    <div className="py-8 h-with-navbar">
+      <div className="rounded-2xl h-full overflow-hidden font-poppins relative z-10 shadow-card bg-white">
+        <NotificationContainer />
+      </div>
+    </div>
+  )
 }
diff --git a/src/components/Notifiaction/CommunityAndCommunityGroupJoinNotification.tsx b/src/components/Notifiaction/CommunityAndCommunityGroupJoinNotification.tsx
@@ -60,7 +60,7 @@ const CommunityAndCommunityGroupJoinNotification = ({ data }: Props) => {
   }
 
   return (
-    <div className={`flex flex-col gap-2  border-b-2 border-neutral-300 pb-5 me-10 hover:bg-neutral-200 hover:p-5 transition-all duration-200 `}>
+    <div className={`flex flex-col gap-2 p-4 border-b-2 border-neutral-300 pb-5 hover:bg-neutral-200 transition-all duration-200 `}>
       <div className="flex justify-between ">
         <div className="flex gap-4 items-center  ">
           <Image

diff --git a/src/components/Notifiaction/CommunityPostCommentNotification.tsx b/src/components/Notifiaction/CommunityPostCommentNotification.tsx
@@ -54,7 +54,7 @@ const CommunityPostCommentNotification = ({ data }: Props) => {
   return (
     <div
       onClick={() => handleUpdateIsRead(data?._id)}
-      className={`flex flex-col gap-2  border-b-2 border-neutral-300 pb-5 me-10 hover:bg-neutral-200 hover:p-5 transition-all duration-200 cursor-pointer`}
+      className={`flex flex-col gap-2  border-b-2 border-neutral-300 p-4 hover:bg-neutral-200  transition-all duration-200 cursor-pointer`}
     >
       <div className="flex justify-between ">
         <div className="flex gap-4 items-center  ">

diff --git a/src/components/Notifiaction/ReactionToCommunityPostNotification.tsx b/src/components/Notifiaction/ReactionToCommunityPostNotification.tsx
@@ -56,7 +56,7 @@ const ReactionToCommunityPostNotification = ({ data }: Props) => {
   return (
     <div
       onClick={() => handleUpdateIsRead(data?._id)}
-      className={`flex flex-col gap-2  border-b-2 border-neutral-300 pb-5 me-10 hover:bg-neutral-200 hover:p-5 transition-all duration-200 cursor-pointer`}
+      className={`flex flex-col gap-2  border-b-2 border-neutral-300 p-4 hover:bg-neutral-200  transition-all duration-200 cursor-pointer`}
     >
       <div className="flex justify-between ">
         <div className="flex gap-4 items-center  ">

diff --git a/src/components/Notifiaction/ReactionToPostNotification.tsx b/src/components/Notifiaction/ReactionToPostNotification.tsx
@@ -56,7 +56,7 @@ const ReactionToPostNotification = ({ data }: Props) => {
   return (
     <div
       onClick={() => handleUpdateIsRead(data?._id)}
-      className={`flex flex-col gap-2  border-b-2 border-neutral-300 pb-5 me-10 hover:bg-neutral-200 hover:p-5 transition-all duration-200 cursor-pointer`}
+      className={`flex flex-col gap-2  border-b-2 border-neutral-300 p-4 hover:bg-neutral-200  transition-all duration-200 cursor-pointer`}
     >
       <div className="flex justify-between ">
         <div className="flex gap-4 items-center  ">

diff --git a/src/components/Notifiaction/StartedFollowingYouNotification.tsx b/src/components/Notifiaction/StartedFollowingYouNotification.tsx
@@ -54,7 +54,7 @@ const StartedFollowingYouNotification = ({ data }: Props) => {
   return (
     <div
       onClick={() => handleUpdateIsRead(data?._id)}
-      className={`flex flex-col gap-2  border-b-2 border-neutral-300 pb-5 me-10 hover:bg-neutral-200 hover:p-5 transition-all duration-200 cursor-pointer`}
+      className={`flex flex-col gap-2  border-b-2 border-neutral-300 p-4 hover:bg-neutral-200  transition-all duration-200 cursor-pointer`}
     >
       <div className="flex justify-between ">
         <div className="flex gap-4 items-center  ">

diff --git a/src/components/Notifiaction/UserPostCommentNotification.tsx b/src/components/Notifiaction/UserPostCommentNotification.tsx
@@ -55,7 +55,7 @@ const UserPostCommentNotification = ({ data }: Props) => {
   return (
     <div
       onClick={() => handleUpdateIsRead(data?._id)}
-      className={`flex flex-col gap-2  border-b-2 border-neutral-300 pb-5 me-10 hover:bg-neutral-200 hover:p-5 transition-all duration-200 cursor-pointer`}
+      className={`flex flex-col gap-2  border-b-2 border-neutral-300 p-4 hover:bg-neutral-200  transition-all duration-200 cursor-pointer`}
     >
       <div className="flex justify-between ">
         <div className="flex gap-4 items-center  ">

diff --git a/src/components/atoms/PostImageSlider/index.tsx b/src/components/atoms/PostImageSlider/index.tsx
@@ -22,8 +22,8 @@ type prop = {
 
 export default function PostImageSlider({ images, initialSlide, messageImage }: prop) {
   return (
-    <div className={` w-1/2 h-1/2 max-sm:w-11/12 max-sm:h-5/6  relative bg-red-900`}>
-      <p className="bg-white rounded-full self-end w-max absolute z-50 right-0 text2xs p-2" onClick={() => closeImageModal()}>
+    <div className={` w-1/2 h-1/2 max-sm:w-11/12 max-sm:h-5/6  relative`}>
+      <p className="bg-white rounded-full self-end w-max absolute z-50 right-2 top-2 text2xs p-1" onClick={() => closeImageModal()}>
         <RxCross2 />
       </p>
 
@@ -39,7 +39,7 @@ export default function PostImageSlider({ images, initialSlide, messageImage }:
         navigation={true}
         modules={[Keyboard, Navigation]}
         initialSlide={initialSlide || 0}
-        className="mySwiper "
+        className="mySwiper rounded-xl"
       >
         {images?.map((item: any) => (
           <SwiperSlide key={item?.imageUrl}>

diff --git a/src/components/molecules/CommunityGroupBanner/index.tsx b/src/components/molecules/CommunityGroupBanner/index.tsx
@@ -66,22 +66,6 @@ export default function CommunityGroupBanner({ communityID, communityGroupID, is
 
   const [dataToDisplay, setDataToDisplay] = useState({ title: '', desc: '', membersCount: 0, coverImage: '', logoImage: '', adminId: '', id: '' })
 
-  const userVerifiedCommunityIds = useMemo(() => {
-    return userData?.userVerifiedCommunities?.map((c) => c.communityId.toString()) || []
-  }, [userData])
-
-  const userUnverifiedVerifiedCommunityIds = useMemo(() => {
-    return userData?.userUnVerifiedCommunities?.map((c) => c.communityId.toString()) || []
-  }, [userData])
-
-  const userVerifiedCommunityGroupIds = useMemo(() => {
-    return userData?.userVerifiedCommunities?.flatMap((x) => x.communityGroups.map((y) => y.communityGroupId.toString())) || []
-  }, [userData])
-
-  const userUnverifiedVerifiedCommunityGroupIds = useMemo(() => {
-    return userData?.userUnVerifiedCommunities?.flatMap((x) => x.communityGroups.map((y) => y.communityGroupId.toString())) || []
-  }, [userData])
-
   const handleEditCommunityGroupModal = () => {
     if (!communityGroups) return
     openModal(<EditCommunityGroupModal setNewGroup={setShowEditGroupMoadal} communityGroups={communityGroups} />)
@@ -115,36 +99,10 @@ export default function CommunityGroupBanner({ communityID, communityGroupID, is
     }
   }
 
-  //group image
-  //  const handleGroupCoverImageUpload = async (e: any) => {
-  //    const files = e.target.files
-
-  //    if (files && files[0]) {
-  //      const imagedata: any = await replaceImage(files[0], selectedCommunityGroupData?.communityGroupLogoCoverUrl?.publicId)
-
-  //      const dataToPush = { communityGroupLogoCoverUrl: { imageUrl: imagedata?.imageUrl, publicId: imagedata?.publicId } }
-
-  //      UpdateCommunityGroup({ dataToPush, id: selectedCommunityGroupData?._id })
-  //    } else {
-  //      console.error('No file selected.')
-  //    }
-  //  }
-
-  //  const handleGroupLogoImageUpload = async (e: any) => {
-  //    const files = e.target.files
-
-  //    if (files && files[0]) {
-  //      const imagedata: any = await replaceImage(files[0], selectedCommunityGroupData?.communityGroupLogoUrl?.publicId)
-
-  //      const dataToPush = { communityGroupLogoUrl: { imageUrl: imagedata?.imageUrl, publicId: imagedata?.publicId } }
-  //      UpdateCommunityGroup({ dataToPush, id: selectedCommunityGroupData?._id })
-  //    } else {
-  //      console.error('No file selected.')
-  //    }
-  //  }
-
   if (isCommunityGroupsLoading) return <Skeleton className="w-full h-60 bg-slate-300 my-4" />
 
+  const { communityGroupCategory } = communityGroups || {}
+
   return (
     <>
       <div className="rounded-2xl bg-white shadow-card">

diff --git a/src/components/molecules/CreateNewGroupBox/index.tsx b/src/components/molecules/CreateNewGroupBox/index.tsx
@@ -112,9 +112,9 @@ const CreateNewGroup = ({ setNewGroup, communityId = '' }: Props) => {
             !coverImage ? 'border-2 border-neutral-200' : ''
           } rounded-md relative  flex flex-col w-full items-center justify-center h-40 `}
         >
-          {coverImage && <img className="w-full h-full  absolute -z-10 object-cover rounded-lg" src={URL.createObjectURL(coverImage)} alt="" />}
+          {coverImage && <img className="w-full h-full  absolute object-cover rounded-lg" src={URL.createObjectURL(coverImage)} alt="" />}
           <input style={{ display: 'none' }} type="file" id="CreateGroupImage" onChange={(e: any) => setCoverImage(e.target.files[0])} />
-          <label htmlFor="CreateGroupImage" className="flex flex-col items-center gap-2">
+          <label htmlFor="CreateGroupImage" className="flex flex-col items-center gap-2 z-10">
             <FiCamera size={40} className="text-primary-500" />
             <p className="text-neutral-900 font-medium ">
               <span className="text-primary-500">Upload</span> Banner Image

diff --git a/src/components/molecules/MessageTopBar/index.tsx b/src/components/molecules/MessageTopBar/index.tsx
@@ -21,7 +21,7 @@ const MessageTopBar = ({ currTab, setCurrTab, unreadNotAcceptedChatsCount, setSe
   return (
     <>
       <div className=" px-4 py-4 font-medium text-[20px] flex flex-col gap-9 relative border-b-[1px] border-neutral-200 font-poppins">
-        <div className=" flex gap-8 items-center text-2xs md:text-sm">
+        <div className="flex gap-8 items-center text-2xs md:text-sm break-words">
           <div
             onClick={() => {
               setCurrTab('Inbox'), setSelectedChat(undefined)
@@ -57,7 +57,7 @@ const MessageTopBar = ({ currTab, setCurrTab, unreadNotAcceptedChatsCount, setSe
             Starred
           </p>
 
-          <Buttons size="extra_small" onClick={() => handleShowModal()}>
+          <Buttons className="hidden md:block" size="extra_small" onClick={() => handleShowModal()}>
             Start a Chat
           </Buttons>
         </div>

diff --git a/src/components/molecules/NavbarUniversityItem/NavbarSubscribedUniversity/index.tsx b/src/components/molecules/NavbarUniversityItem/NavbarSubscribedUniversity/index.tsx
@@ -36,7 +36,7 @@ function NavbarSubscribedUniversity({ subscribedCommunities, communityId, handle
         key={index}
         className={`flex items-center justify-between hover:bg-secondary ${communityId === community._id && 'bg-secondary'}`}
       >
-        <div className={` flex items-center gap-3 py-2 px-4 cursor-pointer`}>
+        <div className={` flex items-center gap-2 py-2 px-4 cursor-pointer`}>
           <Image
             width={30}
             height={30}
@@ -45,7 +45,7 @@ function NavbarSubscribedUniversity({ subscribedCommunities, communityId, handle
             alt={community.name}
           />
 
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1">
             <p className="text-xs  xl:w-max ">{community.name} </p>
             <FaCircleCheck color="#6647ff" size={16} />
           </div>

diff --git a/src/components/molecules/Notification/index.tsx b/src/components/molecules/Notification/index.tsx
@@ -7,6 +7,7 @@ import { MdPersonAddAlt1 } from 'react-icons/md'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { MdOutlineNotificationImportant } from 'react-icons/md'
+import { useRouter } from 'next/navigation'
 dayjs.extend(relativeTime)
 
 type Notification = {
@@ -29,6 +30,7 @@ const NotificationBox = ({ notifications }: NotificationsProps) => {
   const { fetchNextPage, isFetchingNextPage, hasNextPage } = useGetNotification(3, false)
   const { mutate: updateIsSeen } = useUpdateIsSeenCommunityGroupNotification()
   const containerRef = useRef<HTMLDivElement>(null)
+  const router = useRouter()
 
   const handleIsSeenGroup = (id: string) => {
     const dataToPush = {
@@ -90,7 +92,9 @@ const NotificationBox = ({ notifications }: NotificationsProps) => {
       ))}
       {hasNextPage && (
         <div className="flex justify-center fixed rounded-b-md -bottom-6 bg-white w-11/12 ">
-          <button className="p-2 text-primary ">See More</button>
+          <button onClick={() => router.push('/notifications')} className="p-2 text-primary ">
+            See More
+          </button>
         </div>
       )}
     </div>

diff --git a/src/components/molecules/UserChatCard/index.tsx b/src/components/molecules/UserChatCard/index.tsx
@@ -2,6 +2,7 @@ import Image from 'next/image'
 import React from 'react'
 import avatar from '@assets/avatar.svg'
 import { FaUsers } from 'react-icons/fa'
+import { format } from 'date-fns'
 type User = {
   userId: {
     _id: string
@@ -29,7 +30,7 @@ const UserChatCard = ({ profilePic, users, lastMessage, isSeen, date, YourID, gr
     <>
       <div className=" hover:bg-secondary">
         <div className="flex justify-between p-4">
-          <div className="flex gap-4 items-center relative w-5/6">
+          <div className="flex gap-4 items-center relative">
             <div className="w-12 h-12 flex-none">
               {isGroupChat && !profilePic ? (
                 <FaUsers className="w-12 h-12 rounded-full bg-neutral-200 p-2 text-primary-700" />
@@ -57,8 +58,8 @@ const UserChatCard = ({ profilePic, users, lastMessage, isSeen, date, YourID, gr
               </p>
             </div>
           </div>
-          <div className="w-1/6 text-right">
-            <p className="text-neutral-400 font-normal text-[12px] ">{date}</p>
+          <div className="text-right">
+            <p className="text-neutral-400 font-normal text-[12px] ">{date && format(new Date(date), 'hh:mm a')}</p>
           </div>
         </div>
       </div>

diff --git a/src/components/molecules/UserMessages/index.tsx b/src/components/molecules/UserMessages/index.tsx
@@ -92,17 +92,17 @@ const UserCard = ({ profilePic, name, content, date, myMessage, id, reactions, c
   }
 
   return (
-    <div ref={ref} className="flex gap-4 relative w-full" onMouseDown={handleMouseDown} onMouseUp={handleMouseUp} onMouseLeave={handleMouseUp}>
-      <div className="relative w-14 h-14 flex-none">
-        <Image src={profilePic || avatar} alt="dp" width={40} height={40} className="w-14 h-14 rounded-full" />
+    <div ref={ref} className="flex gap-2 relative w-full">
+      <div className="relative w-10 h-10 flex-none">
+        <Image src={profilePic || avatar} alt="dp" width={40} height={40} className="w-10 h-10 rounded-full" />
         <p className={`w-4 h-4 ${isOnline ? 'bg-success-500' : 'bg-neutral-300'}  rounded-full border-2 border-white absolute bottom-0 right-0`}></p>
       </div>
-      <div className="w-full">
+      <div className="flex-1 overflow-y-auto">
         <div className="flex gap-2 items-center">
           <p className="text-sm font-semibold text-neutral-700">{name}</p>
           <p className="text-xs font-normal text-neutral-400">{dayjs(new Date(date).toString()).fromNow()}</p>
         </div>
-        <p className="text-xs text-neutral-900">{content}</p>
+        <p className="text-2xs lg:text-xs text-neutral-900 font-poppins whitespace-pre-wrap">{content}</p>
         {/* {media.length
           ? media.map((item) => <Image key={item.publicId} src={item?.imageUrl} alt="media" width={140} height={140} className="w-40 " />)
           : ''} */}
@@ -111,24 +111,24 @@ const UserCard = ({ profilePic, name, content, date, myMessage, id, reactions, c
         </div>
       </div>
       {/* //reaction  */}
-      {isReact && (
+      {/*{isReact && (
         <div className="absolute -bottom-8 bg-slate-200 rounded-full w-44 h-8 z-20 flex justify-between text-2xl ">
           {emojis.map((emoji) => (
             <p key={emoji} className="cursor-pointer" onClick={() => reactToMessage({ data: { messageId: id, emoji } })}>
               {emoji}
             </p>
           ))}
         </div>
-      )}
-      {reactions && (
+      )}*/}
+      {/*{reactions && (
         <div className="absolute -bottom-8  rounded-full w-8 h-8  flex justify-between text-2xl ">
           {reactions.map((emoji) => (
             <p key={emoji.userId} className="cursor-pointer">
               {emoji.emoji}
             </p>
           ))}
         </div>
-      )}
+      )}*/}
     </div>
   )
 }
@@ -193,7 +193,6 @@ const UserMessages = ({ name, profileCover, chatId, users, isRequest, isGroupCha
       <div className="flex flex-col h-[78%] overflow-y-scroll px-4  gap-8 ">
         {chatMessages?.map((item: Message, idx: number) => {
           const currentDate = formatDate(item.createdAt)
-
           // Check if the date has changed
           const shouldShowDateDivider = !dayjs(item.createdAt).isSame(previousDate, 'day')
           previousDate = dayjs(item.createdAt)

diff --git a/src/components/organisms/CommunityGroupPostContainer/index.tsx b/src/components/organisms/CommunityGroupPostContainer/index.tsx
@@ -31,7 +31,7 @@ function CommunityGroupPostContainer({ containerRef }: { containerRef: any }) {
     error,
     isFetching,
     dataUpdatedAt,
-  } = useGetCommunityGroupPost(communityId, communityGroupId, true, 2)
+  } = useGetCommunityGroupPost(communityId, communityGroupId, true, 10)
   const [communityGroupPostDatas, setCommunityGroupPostDatas] = useState([])
   // const communityGroupPostData = communityGroupPost?.pages.flatMap((page) => page?.finalPost) || []
 

diff --git a/src/components/organisms/NotificationContainer/index.tsx b/src/components/organisms/NotificationContainer/index.tsx
@@ -3,11 +3,7 @@ import React from 'react'
 import NotificationTab from '../NotificationTabs/NotificationTab'
 
 const NotificationContainer = () => {
-  return (
-    <div className="bg-white mt-4 rounded-2xl drop-shadow-lg h-with-navbar-space">
-      <NotificationTab />
-    </div>
-  )
+  return <NotificationTab />
 }
 
 export default NotificationContainer
diff --git a/src/components/organisms/NotificationTabs/NotificationTab.tsx b/src/components/organisms/NotificationTabs/NotificationTab.tsx
@@ -19,7 +19,7 @@ export const notificationRoleAccess = {
 }
 
 const NotificationTab = () => {
-  const { data: notificationData, fetchNextPage, isFetchingNextPage, hasNextPage } = useGetUserNotification(5, true)
+  const { data: notificationData, fetchNextPage, isFetchingNextPage, hasNextPage } = useGetUserNotification(10, true)
 
   const notifications = notificationData?.pages.flatMap((page) => page.notifications) || []
 
@@ -45,7 +45,7 @@ const NotificationTab = () => {
   }, [fetchNextPage, hasNextPage, isFetchingNextPage])
 
   return (
-    <div ref={containerRef} className=" p-4 overflow-y-scroll custom-scrollbar flex flex-col    gap-10   h-[600px]">
+    <div ref={containerRef} className="overflow-y-scroll custom-scrollbar flex flex-col h-[inherit]">
       {notifications?.map((item) => {
         if (item.type == notificationRoleAccess.GROUP_INVITE) {
           return <CommunityAndCommunityGroupJoinNotification key={item?._id} data={item} />

diff --git a/src/components/organisms/UserChats/index.tsx b/src/components/organisms/UserChats/index.tsx
@@ -43,7 +43,7 @@ const UserChats = ({ setSelectedChat, selectedChat, setIsRequest, currTabb, chat
             users={[item?.users]}
             isSeen={item?.latestMessage?.readByUsers?.includes(userData?.id || ' ')}
             lastMessage={item?.latestMessage?.content}
-            date={item?.latestMessage?.createdAt && dayjs(new Date(item?.latestMessage?.createdAt).toString()).fromNow()}
+            date={item?.latestMessage?.createdAt}
             YourID={userData?.id}
             unRead={item?.unreadMessagesCount}
           />
@@ -69,7 +69,7 @@ const UserChats = ({ setSelectedChat, selectedChat, setIsRequest, currTabb, chat
             users={[item?.users]}
             isSeen={item?.latestMessage?.readByUsers?.includes(userData?.id || ' ')}
             lastMessage={item?.latestMessage?.content}
-            date={item?.latestMessage?.createdAt && dayjs(new Date(item?.latestMessage?.createdAt).toString()).fromNow()}
+            date={item?.latestMessage?.createdAt}
             YourID={userData?.id}
             unRead={item?.unreadMessagesCount}
           />
@@ -91,7 +91,7 @@ const UserChats = ({ setSelectedChat, selectedChat, setIsRequest, currTabb, chat
             users={[item?.users]}
             isSeen={item?.latestMessage?.readByUsers?.includes(userData?.id || ' ')}
             lastMessage={item?.latestMessage?.content}
-            date={item?.latestMessage?.createdAt && dayjs(new Date(item?.latestMessage?.createdAt).toString()).fromNow()}
+            date={item?.latestMessage?.createdAt}
             YourID={userData?.id}
             unRead={item?.unreadMessagesCount}
           />

diff --git a/src/types/CommuityGroup/index.ts b/src/types/CommuityGroup/index.ts
@@ -20,7 +20,7 @@ export interface CommunityGroupType {
   memberCount: number
   communityGroupType: string
   communityGroupAccess: string
-  communityGroupCategory: string
+  communityGroupCategory: any
   __v: number
   adminUserProfile: AdminUserProfile
   communityGroupLogoCoverUrl?: {