Merge pull request #121 from BacPacNet/community-group-sort

Community group sort

src/app/(withLayout)/community/[communityId]/[groupId]/page.tsx

@@ -18,7 +18,7 @@ export default function Page({ params }: { params: { communityId: string; groupI
         isGroupAdmin={isGroupAdmin}
         setIsGroupAdmin={setIsGroupAdmin}
       />
-      {isGroupAdmin && <UserPostContainer communityID={communityId} communityGroupID={communityGroupID} type={PostInputType.Community} />}
+      <UserPostContainer communityID={communityId} communityGroupID={communityGroupID} type={PostInputType.Community} />
       <CommunityGroupPostContainer containerRef={containerRef} />
     </div>
   )

src/app/(withLayout)/profile/[...id]/page.tsx

@@ -1,19 +1,14 @@
 'use client'
-import Spinner from '@/components/atoms/spinner'
 import { openModal } from '@/components/molecules/Modal/ModalManager'
 import ProfilePostContainer from '@/components/organisms/PostsContainer'
-import PostContainer from '@/components/organisms/PostsContainer'
 import { UserProfileCard } from '@/components/organisms/ProfileCard'
-import Modal from '@/components/Timeline/Modal'
 import ConnectionsModal from '@/components/Timeline/Modals/ConnectionsModal'
 import EditProfileModal from '@/components/Timeline/Modals/EditProfileModal'
-import ProfileCard from '@/components/Timeline/ProfileCard'
 import { Skeleton } from '@/components/ui/Skeleton'
 import { useCheckSelfProfile } from '@/lib/utils'
 import { useGetUserData } from '@/services/user'
-import { PostType } from '@/types/constants'
 import { ModalContentType } from '@/types/global'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 
 export default function Profile({ params }: { params: { id: string } }) {
   const userId = params.id[0]

src/app/post/[id]/page.tsx

@@ -27,9 +27,9 @@ const SinglePost = () => {
     currImageIndex: null,
   })
 
-  if (Object.keys(data).length === 0) {
-    return <div className="h-screen flex justify-center items-center">Not Allowed</div>
-  }
+  // if (!data || Object.keys(data).length === 0) {
+  //   return <div className="h-screen flex justify-center items-center">Not Allowed</div>
+  // }
 
   if (isError) {
     return <div className="h-screen flex justify-center items-center">Not Allowed</div>

src/components/Navbar/Navbar.tsx

@@ -43,7 +43,7 @@ const Navbar: React.FC = () => {
   const [hover, setHover] = useState<boolean>(false)
   const [activeItem, setActiveItem] = useState('')
   const [, , deleteCookie] = useCookie('uni_user_token')
-  const { userProfileData, userData, resetUserData, resetUserProfileData } = useUniStore()
+  const { userProfileData, userData, resetUserData } = useUniStore()
   const router = useRouter()
   const { refetch: refetchNotification } = useGetNotification(3, false)
   const { data: notificationData } = useGetNotification(3, false)
@@ -67,7 +67,6 @@ const Navbar: React.FC = () => {
   const handleLogout = () => {
     deleteCookie()
     resetUserData()
-    resetUserProfileData()
     setIsLogin(false)
     router.push('/login')
   }

src/components/Timeline/Modals/EditProfileModal.tsx

@@ -51,11 +51,11 @@ const EditProfileModal = () => {
     formState: { errors },
   } = useForm<editProfileInputs>({
     defaultValues: {
-      first_name: userData.firstName,
-      last_name: userData.lastName,
+      first_name: userData?.firstName,
+      last_name: userData?.lastName,
       bio: userProfileData?.bio,
       phone_number: userProfileData?.phone_number,
-      gender: userData.gender,
+      gender: userData?.gender,
       dob: userProfileData?.dob ? new Date(userProfileData?.dob).toISOString().split('T')[0] : '',
       country: userProfileData?.country,
       city: userProfileData?.city,

src/components/Timeline/ProfileCard.tsx

@@ -142,7 +142,7 @@ const ProfileCard: React.FC<ProfileProps> = ({
           <div className="flex">
             <div className="group relative">
               <img
-                src={`${userProfileData?.profile_dp?.imageUrl ? userProfileData.profile_dp.imageUrl : '/icons/avatar.svg'} `}
+                src={`${userProfileData?.profile_dp?.imageUrl ? userProfileData?.profile_dp.imageUrl : '/icons/avatar.svg'} `}
                 alt="Profile"
                 className="h-24 w-24 rounded-full border-4 border-white"
                 width={24}
@@ -169,7 +169,7 @@ const ProfileCard: React.FC<ProfileProps> = ({
         </div>
       </div>
       <div className="px-8 mt-8 py-5">
-        <h2 className="text-lg font-semibold">{userData.firstName}</h2>
+        <h2 className="text-lg font-semibold">{userData?.firstName}</h2>
         <p className="text-gray-dark text-xs py-1">{userProfileData?.bio}</p>
         {!isUserProfile && <button className="w-full bg-primary text-white py-2 mt-2 rounded-lg text-xs font-medium">Create Avatar</button>}
         <div className="mt-5 flex flex-col gap-4 sm:grid sm:grid-cols-2 sm:gap-x-6 lg:flex">
@@ -180,7 +180,7 @@ const ProfileCard: React.FC<ProfileProps> = ({
           />
           <ProfileItem iconName={HiLibrary} text={'Department of ' + userProfileData?.major} field="Department" />
           <ProfileItem iconName={FaLocationDot} text={userProfileData?.city + ' ' + userProfileData?.country} field="Location" />
-          <ProfileItem iconName={MdEmail} text={userData.email} textClassName="break-all" field="Email" />
+          <ProfileItem iconName={MdEmail} text={userData?.email} textClassName="break-all" field="Email" />
           <ProfileItem iconName={MdPhone} text={userProfileData?.phone_number} field="Contact" />
           <ProfileItem
             iconName={FaBirthdayCake}

src/components/atoms/LogoNavbar/index.tsx

@@ -26,6 +26,7 @@ import useCookie from '@/hooks/useCookie'
 import { IoMenu } from 'react-icons/io5'
 import { RxCross2 } from 'react-icons/rx'
 import MobileLeftNavbar from '@/components/molecules/MobileLeftNavbar'
+import { useLogout } from '@/hooks/useLogOut'
 
 interface Props {
   showOnlyLogo?: boolean
@@ -37,25 +38,20 @@ export default function LogoNavbar({ showOnlyLogo = false }: Props) {
   const pathname = usePathname()
   const router = useRouter()
   const shouldPadding = nonPaddingUrls.some((path) => pathname.includes(path)) || pathname === '/'
-  const { userProfileData, resetUserProfileData } = useUniStore()
-  const [, , deleteCookie] = useCookie('uni_user_token')
+  const { userProfileData, userData } = useUniStore()
+
+  const { handleLogout } = useLogout()
   const [isLogin, setIsLogin] = useState<boolean | undefined>(undefined)
   const { data: notificationData } = useGetNotification(3, true)
   const { data: messageNotificationData } = useGetMessageNotification(3, true)
   const notifications = notificationData?.pages.flatMap((page) => page.notifications) || []
   const messageNotifications = messageNotificationData?.pages.flatMap((page) => page.message) || []
   const isUserLoggedIn = useCallback(() => {
-    setIsLogin(!!userProfileData.users_id)
+    setIsLogin(!!userProfileData?.users_id)
   }, [userProfileData])
   const [showLeftNavbar, setShowLeftNavbar] = useState(false)
   const [showRightMenu, setShowRightMenu] = useState(false)
 
-  const handleLogout = () => {
-    deleteCookie()
-    resetUserProfileData()
-    router.push('/login')
-  }
-
   useEffect(() => {
     isUserLoggedIn()
   }, [userProfileData, isUserLoggedIn])

src/components/communityUniversity/GroupInfo.tsx

@@ -93,7 +93,7 @@ const GroupInfo = ({ data, isJoinedinCommunity, setIsJoinedInGroup, isJoinedInGr
             <>
               <img className="absolute bottom-8 -z-10 object-cover w-full" src={coverImage} alt="bg" />
               <div className="absolute bottom-8 z-0 w-full h-full  group">
-                <div className={`${data?.adminUserId._id == userData.id ? 'block ' : 'hidden'} w-full  text-end  mt-10 pr-4 `}>
+                <div className={`${data?.adminUserId._id == userData?.id ? 'block ' : 'hidden'} w-full  text-end  mt-10 pr-4 `}>
                   <input style={{ display: 'none' }} type="file" id="file" onChange={(e) => handleCoverImageUpload(e)} />
                   <label htmlFor="file">Change cover image</label>
                 </div>
@@ -102,7 +102,7 @@ const GroupInfo = ({ data, isJoinedinCommunity, setIsJoinedInGroup, isJoinedInGr
           ) : (
             <>
               <div className="absolute bottom-8 -z-10 w-full h-full bg-gray group" />
-              <div className={`${data?.adminUserId._id == userData.id ? 'block absolute ' : 'hidden'} w-full z-30 top-0 left-2/3 `}>
+              <div className={`${data?.adminUserId._id == userData?.id ? 'block absolute ' : 'hidden'} w-full z-30 top-0 left-2/3 `}>
                 <input style={{ display: 'none' }} type="file" id="file" onChange={(e) => handleCoverImageUpload(e)} />
                 <label htmlFor="file">Change cover image</label>
               </div>
@@ -111,7 +111,7 @@ const GroupInfo = ({ data, isJoinedinCommunity, setIsJoinedInGroup, isJoinedInGr
           {logoImage ? (
             <div className="group relative">
               <img className="w-20 h-20 object-cover rounded-full ms-10 max-md:hidden " src={logoImage} alt="dp" />
-              <div className={`${data?.adminUserId._id == userData.id ? 'block absolute ' : 'hidden'} absolute top-3 right-1/4`}>
+              <div className={`${data?.adminUserId._id == userData?.id ? 'block absolute ' : 'hidden'} absolute top-3 right-1/4`}>
                 <input style={{ display: 'none' }} type="file" id="file2" onChange={(e) => handleLogoImageUpload(e)} />
                 <label htmlFor="file2">
                   <p className="">
@@ -122,7 +122,7 @@ const GroupInfo = ({ data, isJoinedinCommunity, setIsJoinedInGroup, isJoinedInGr
             </div>
           ) : (
             <div className="w-20 h-20 object-cover rounded-full ms-10 max-md:hidden bg-orange relative group ">
-              <div className={`${data?.adminUserId._id == userData.id ? 'group-hover:block' : 'hidden'} absolute top-1/3 right-1/3`}>
+              <div className={`${data?.adminUserId._id == userData?.id ? 'group-hover:block' : 'hidden'} absolute top-1/3 right-1/3`}>
                 <input style={{ display: 'none' }} type="file" id="file2" onChange={(e) => handleLogoImageUpload(e)} />
                 <label htmlFor="file2">
                   <p className="">
@@ -146,7 +146,7 @@ const GroupInfo = ({ data, isJoinedinCommunity, setIsJoinedInGroup, isJoinedInGr
             <p className="text-sm font-semibold text-neutral-500 mt-2 max-lg:hidden">{data?.memberCount} Members </p>
             <div className="lg:hidden flex justify-between items-center">
               <p className="text-sm font-semibold text-neutral-500 mt-4">{data?.memberCount} Members </p>
-              {data?.adminUserId?._id == userData.id ? (
+              {data?.adminUserId?._id == userData?.id ? (
                 <button onClick={() => setAssignUsers(true)} className=" bg-[#6647FF] py-3 px-3 text-white rounded-full min-w-fit">
                   <IoMdSettings />
                 </button>
@@ -157,7 +157,7 @@ const GroupInfo = ({ data, isJoinedinCommunity, setIsJoinedInGroup, isJoinedInGr
               )}
             </div>
           </div>
-          {data?.adminUserId?._id == userData.id ? (
+          {data?.adminUserId?._id == userData?.id ? (
             <button onClick={() => setAssignUsers(true)} className="max-lg:hidden bg-[#6647FF] py-3 px-3 text-white rounded-full min-w-fit">
               <IoMdSettings />
             </button>

src/components/communityUniversity/HeroSec.tsx

@@ -73,7 +73,7 @@ const HeroSec = ({ data, setIsJoined, isJoined }: any) => {
             />
             <div
               className={`${
-                data?.community?.adminId == userData.id ? 'block  ' : 'hidden'
+                data?.community?.adminId == userData?.id ? 'block  ' : 'hidden'
               } absolute w-full z-30 top-[5%] left-[84%] max-lg:left-3/4 max-md:left-2/3 max-sm:left-1/3`}
             >
               <input style={{ display: 'none' }} type="file" id="CommunityCoverImagefile" onChange={(e) => handleCoverImageUpload(e)} />
@@ -82,7 +82,7 @@ const HeroSec = ({ data, setIsJoined, isJoined }: any) => {
           </>
         ) : (
           <div className="absolute bottom-20 z-0 object-cover w-full h-full max-md:bottom-52 bg-gray">
-            <div className={`${data?.community?.adminId == userData.id ? 'block  ' : 'hidden'} absolute w-full z-30 top-1/4 left-[84%] `}>
+            <div className={`${data?.community?.adminId == userData?.id ? 'block  ' : 'hidden'} absolute w-full z-30 top-1/4 left-[84%] `}>
               <input style={{ display: 'none' }} type="file" id="CommunityCoverImagefile" onChange={(e) => handleCoverImageUpload(e)} />
               <label htmlFor="CommunityCoverImagefile">Change cover image</label>
             </div>
@@ -111,7 +111,7 @@ const HeroSec = ({ data, setIsJoined, isJoined }: any) => {
                 src={data?.community?.communityLogoUrl.imageUrl}
                 alt="dp"
               />
-              <div className={`${data?.community?.adminId == userData.id ? 'block  ' : 'hidden'} absolute top-1/4`}>
+              <div className={`${data?.community?.adminId == userData?.id ? 'block  ' : 'hidden'} absolute top-1/4`}>
                 <input style={{ display: 'none' }} type="file" id="communitylogoImagefile" onChange={(e) => handleLogoImageUpload(e)} />
                 <label htmlFor="communitylogoImagefile">
                   <p className="">
@@ -122,7 +122,7 @@ const HeroSec = ({ data, setIsJoined, isJoined }: any) => {
             </>
           ) : (
             <div className="w-28 h-28 object-contain border-4 border-neutral-300 rounded-full bg-white flex items-center justify-center z-10">
-              <div className={`${data?.community?.adminId == userData.id ? 'block  ' : 'hidden'}  `}>
+              <div className={`${data?.community?.adminId == userData?.id ? 'block  ' : 'hidden'}  `}>
                 <input style={{ display: 'none' }} type="file" id="communitylogoImagefile" onChange={(e) => handleLogoImageUpload(e)} />
                 <label htmlFor="communitylogoImagefile">
                   <p className="">
@@ -140,14 +140,14 @@ const HeroSec = ({ data, setIsJoined, isJoined }: any) => {
             <img className="object-contain" src={chatboticon.src} alt="chatboticon" />
             <label className="text-neutral-500 font-medium max-lg:text-sm">Chatbot Support</label>
           </div>
-          {!isJoined && data?.community?.adminId != userData.id ? (
+          {!isJoined && data?.community?.adminId != userData?.id ? (
             <button
               onClick={() => JoinCommunity(data?.community?._id)}
               className="text-[#6647FF]  font-medium bg-[#F3F2FF] px-2 py-1 max-md:py-3 rounded-xl mr-10 max-xl:mr-5 max-lg:text-sm max-md:mr-0"
             >
               Join Community
             </button>
-          ) : data?.community?.adminId == userData.id ? (
+          ) : data?.community?.adminId == userData?.id ? (
             <button className="text-[#6647FF]  font-medium bg-[#F3F2FF] px-2 py-2 w-max h-max  rounded-full mr-10 max-xl:mr-5 max-lg:text-sm max-md:mr-0">
               <IoMdSettings />
             </button>