From 938379f57c174decfb4cb7420986c00eb7dcf281 Mon Sep 17 00:00:00 2001
From: bacpactech <bacpactech@gmail.com>
Date: Thu, 19 Dec 2024 16:58:30 +0530
Subject: [PATCH 1/2] fix: UI for comment and profile

---
 .../atoms/RenderProfileDP/index.tsx           |  6 +--
 src/components/atoms/SubText/index.tsx        |  2 +-
 src/components/molecules/PostCard/index.tsx   |  2 +-
 .../molecules/PostCommentBox/index.tsx        | 11 +++--
 src/components/organism/Login/LoginBox.tsx    |  5 --
 src/components/organisms/LeftNavbar/index.tsx |  2 +-
 .../organisms/PostsContainer/index.tsx        |  2 +
 .../organisms/ProfileCard/index.tsx           | 48 ++++++-------------
 .../organisms/UserPostContainer/index.tsx     |  2 +-
 src/content/constant.ts                       |  3 ++
 src/services/auth.ts                          |  6 +++
 11 files changed, 38 insertions(+), 51 deletions(-)
 create mode 100644 src/content/constant.ts

diff --git a/src/components/atoms/RenderProfileDP/index.tsx b/src/components/atoms/RenderProfileDP/index.tsx
index 1ea4ae3..4c49be8 100644
--- a/src/components/atoms/RenderProfileDP/index.tsx
+++ b/src/components/atoms/RenderProfileDP/index.tsx
@@ -16,10 +16,10 @@ function ProfilePicture({ userProfileData }: Props) {
 
   return (
     <Image
-      width={50}
-      height={50}
+      width={60}
+      height={60}
       objectFit="cover"
-      className="w-[50px] h-[50px] rounded-full flex-none"
+      className="w-[60px] h-[60px] rounded-full flex-none"
       src={userProfileData.profile_dp?.imageUrl || avatar}
       alt="profile.png"
     />
diff --git a/src/components/atoms/SubText/index.tsx b/src/components/atoms/SubText/index.tsx
index acd57fa..cb3d4e5 100644
--- a/src/components/atoms/SubText/index.tsx
+++ b/src/components/atoms/SubText/index.tsx
@@ -6,7 +6,7 @@ interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
 
 export default function SubText({ children, className = '', ...rest }: TitleProps) {
   return (
-    <p className={`text-2xs font-normal text-neutral-500 font-inter ${className}`} {...rest}>
+    <p className={`text-2xs font-normal text-neutral-500 font-inter  ${className}`} {...rest}>
       {children}
     </p>
   )
diff --git a/src/components/molecules/PostCard/index.tsx b/src/components/molecules/PostCard/index.tsx
index 7d127e7..1e95f29 100644
--- a/src/components/molecules/PostCard/index.tsx
+++ b/src/components/molecules/PostCard/index.tsx
@@ -159,7 +159,7 @@ const PostCard = ({
       <div className="flex items-start py-4 gap-4 justify-between">
         <div onClick={handleProfileClicked} className="flex gap-4 cursor-pointer">
           <div className="rounded-full w-[45px] h-[45px]">
-            <Image src={avatarLink || avatar} width={45} height={45} className="object-none rounded-full h-[inherit]" alt="avatar.png" />
+            <Image src={avatarLink || avatar} width={45} height={45} className="object-cover rounded-full h-[inherit]" alt="avatar.png" />
           </div>
           <div>
             <h3 className="font-medium text-sm text-neutral-600">{user}</h3>
diff --git a/src/components/molecules/PostCommentBox/index.tsx b/src/components/molecules/PostCommentBox/index.tsx
index f686547..8878280 100644
--- a/src/components/molecules/PostCommentBox/index.tsx
+++ b/src/components/molecules/PostCommentBox/index.tsx
@@ -32,6 +32,7 @@ import {
 import { IoMdCode } from 'react-icons/io'
 import NestedCommentModal from '../nestedCommentModal'
 import useDeviceType from '@/hooks/useDeviceType'
+import { formatDistanceToNow } from 'date-fns'
 dayjs.extend(relativeTime)
 
 type Props = {
@@ -314,18 +315,18 @@ const PostCommentBox = ({ showCommentSec, postID, type, data }: Props) => {
 
             <div>
               <h3 className="font-medium text-sm max-sm:text-xs text-neutral-600 ">{comment?.commenterId?.firstName}</h3>
-              <p className="text-2xs max-sm:text-[10px] text-neutral-500">{comment?.commenterProfileId?.university_name}</p>
-              <p className="text-2xs max-sm:text-[10px] text-neutral-500">{`${comment?.commenterProfileId?.study_year}nd Yr ${comment?.commenterProfileId?.degree}`}</p>
+              {/*<p className="text-2xs max-sm:text-[10px] text-neutral-500">{comment?.commenterProfileId?.university_name}</p>*/}
+              <p className="text-2xs max-sm:text-[10px] text-neutral-500">{`${comment?.commenterProfileId?.study_year} year, ${comment?.commenterProfileId?.degree}`}</p>
             </div>
             <p className="ml-auto text-xs max-sm:text-[10px] text-gray">
-              {comment.createdAt && dayjs(new Date(comment?.createdAt).toString()).format('h:mm A · MMM D, YYYY')}
+              {comment.createdAt && formatDistanceToNow(comment?.createdAt as unknown as Date, { addSuffix: true })}
             </p>
           </div>
         </div>
-        <div className="flex gap-4 ps-[86px] max-sm:ps-[70px]">
+        <div className="flex gap-4 ps-[60px] max-sm:ps-[70px]">
           <pre className="font-poppins text-xs pt-1 break-words lg:min-w-[450px] max-lg:min-w-[200px]">{comment?.content}</pre>
         </div>
-        <div className="flex justify-start ps-[86px] max-sm:ps-[70px] mt-3 gap-5 max-sm:gap-2 text-s max-sm:text-s">
+        <div className="flex justify-start ps-[60px] max-sm:ps-[70px] mt-3 gap-5 max-sm:gap-2 text-s max-sm:text-s">
           <div className="flex items-center cursor-pointer">
             <AiOutlineLike
               onClick={() => likePostCommentHandler(comment._id)}
diff --git a/src/components/organism/Login/LoginBox.tsx b/src/components/organism/Login/LoginBox.tsx
index 844dacc..87cd3a7 100644
--- a/src/components/organism/Login/LoginBox.tsx
+++ b/src/components/organism/Login/LoginBox.tsx
@@ -98,14 +98,9 @@ const LoginBox = () => {
             <label className="w-fit text-neutral-500 text-xs cursor-pointer hover:text-primary hover:underline">Forgot Password?</label>
           </div>
 
-          {/*<div className="flex gap-2 items-center">
-            <input className="w-4 h-4 border-neutral-300" type="checkbox" />
-            <p className="text-neutral-900 text-sm">Remember device for 30 days</p>
-          </div>*/}
           <Button disabled={isPending} variant="primary">
             {isPending ? <Spinner /> : 'Log in'}
           </Button>
-          <InputWarningText>{isAxiosError(error) && error.response?.data?.message}</InputWarningText>
         </form>
       </div>
       <button className="mt-4 mx-auto">
diff --git a/src/components/organisms/LeftNavbar/index.tsx b/src/components/organisms/LeftNavbar/index.tsx
index 2662cd7..e99c497 100644
--- a/src/components/organisms/LeftNavbar/index.tsx
+++ b/src/components/organisms/LeftNavbar/index.tsx
@@ -57,7 +57,7 @@ export default function LeftNavbar({ toggleLeftNavbar }: Props) {
             <SubText>{truncateString(userProfileData?.university_name || '')}</SubText>
           </Tooltip>
 
-          <SubText>{userProfileData?.major}</SubText>
+          <SubText>{truncateString(userProfileData?.major || '')}</SubText>
         </div>
       </div>
       <div className="px-4 pt-9">
diff --git a/src/components/organisms/PostsContainer/index.tsx b/src/components/organisms/PostsContainer/index.tsx
index 52d36a6..b4981ea 100644
--- a/src/components/organisms/PostsContainer/index.tsx
+++ b/src/components/organisms/PostsContainer/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import Loading from '@/app/register/loading'
+import Card from '@/components/atoms/Card'
 import PostImageSlider from '@/components/atoms/PostImageSlider'
 import { openImageModal } from '@/components/molecules/ImageWrapper/ImageManager'
 import PostCard from '@/components/molecules/PostCard'
@@ -53,6 +54,7 @@ const ProfilePostContainer = ({ userId = '', containerRef }: Props) => {
   }, [imageCarasol])
 
   const renderPostWithRespectToPathName = () => {
+    if (userSelfPosts?.length === 0) return <Card className="rounded-2xl px-4 text-center text-xs">No Post Available</Card>
     return userSelfPosts?.map((post: communityPostType, idx: number) => (
       <PostCard
         key={post?._id}
diff --git a/src/components/organisms/ProfileCard/index.tsx b/src/components/organisms/ProfileCard/index.tsx
index b46cc76..e6955a6 100644
--- a/src/components/organisms/ProfileCard/index.tsx
+++ b/src/components/organisms/ProfileCard/index.tsx
@@ -11,7 +11,6 @@ import badge from '@assets/badge.svg'
 import useDeviceType from '@/hooks/useDeviceType'
 import { format } from 'date-fns'
 import { ModalContentType } from '@/types/global'
-import { Skeleton } from '@/components/ui/Skeleton'
 import { useUniStore } from '@/store/store'
 import { useToggleFollow } from '@/services/connection'
 import { IoIosShareAlt } from 'react-icons/io'
@@ -20,14 +19,7 @@ import { IoFlagOutline } from 'react-icons/io5'
 import { RiMessage2Fill } from 'react-icons/ri'
 import { FaCalendarCheck } from 'react-icons/fa6'
 import { MdSubject } from 'react-icons/md'
-import { FaCamera } from 'react-icons/fa'
 import Buttons from '@/components/atoms/Buttons'
-import { useEditProfile } from '@/services/edit-profile'
-import { replaceImage } from '@/services/uploadImage'
-import { ChangeEvent } from 'react'
-import { openModal } from '@/components/molecules/Modal/ModalManager'
-import EditProfileModal from '@/components/Timeline/Modals/EditProfileModal'
-import ConnectionsModal from '@/components/Timeline/Modals/ConnectionsModal'
 
 interface UserProfileCardProps {
   name: string
@@ -47,17 +39,18 @@ interface UserProfileCardProps {
   isVerifiedUniversity: boolean
   degree: string
   country: string
-
+  setModalContentType: React.Dispatch<React.SetStateAction<ModalContentType>>
+  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>
   isSelfProfile?: boolean
   userId?: string
   universityLogo: string
   occupation: string
   affiliation: string
+  handleShowModal: (value: string) => void
 }
 
 export function UserProfileCard({
   name,
-  isPremium,
   description,
   university,
   isVerified,
@@ -73,32 +66,27 @@ export function UserProfileCard({
   avatarUrl,
   isVerifiedUniversity,
   country,
-
+  setModalContentType,
+  setIsModalOpen,
   isSelfProfile,
   userId,
   universityLogo,
   occupation,
   affiliation,
+  handleShowModal,
 }: UserProfileCardProps) {
   const { isDesktop } = useDeviceType()
   const { userProfileData } = useUniStore()
 
   const { mutate: toggleFollow } = useToggleFollow('Following')
-  const { mutate: mutateEditProfile, isPending } = useEditProfile()
   const userFollowingIDs = userProfileData && userProfileData?.following?.map((following) => following.userId)
 
-  const handleImageUpload = async (e: ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files
-    if (files && files[0]) {
-      const data: any = await replaceImage(files[0], userProfileData?.profile_dp?.publicId)
-
-      const dataToPush = { profile_dp: { imageUrl: data?.imageUrl, publicId: data?.publicId } }
-
-      mutateEditProfile(dataToPush)
-    } else {
-      console.error('No file selected.')
-    }
+  const handleOpenModal = (modalType: ModalContentType) => {
+    setModalContentType(modalType)
+    setIsModalOpen(true)
+    handleShowModal(modalType || '')
   }
+
   return (
     <Card className="rounded-2xl px-8">
       <div className="flex flex-wrap lg:flex-nowrap gap-4 lg:gap-8 items-start">
@@ -110,14 +98,6 @@ export function UserProfileCard({
             height={isDesktop ? 126 : 90}
             className="rounded-full object-cover lg:w-[126px] lg:h-[126px] w-[90px] h-[90px]"
           />
-          {isSelfProfile && (
-            <div className="group-hover:block hidden absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 bg-primary-50 py-1 px-2 rounded-full text-primary font-medium cursor-pointer">
-              <input style={{ display: 'none' }} type="file" id="changeProfileImage" onChange={(e) => handleImageUpload(e)} />
-              <label htmlFor="changeProfileImage" className="bg-primary w-10 h-10 flex justify-center items-center rounded-full p-2 text-neutral-800">
-                <FaCamera color="white" />
-              </label>
-            </div>
-          )}
         </div>
         <div className="w-full">
           <div className="flex w-full items-center justify-between flex-wrap gap-4">
@@ -127,7 +107,7 @@ export function UserProfileCard({
             </div>
             {isSelfProfile ? (
               <div
-                onClick={() => openModal(<EditProfileModal />)}
+                onClick={() => handleOpenModal('EditProfileModal')}
                 className="flex gap-2 items-center text-2xs lg:text-xs text-primary-500 cursor-pointer"
               >
                 <button>Edit Profile</button>
@@ -175,10 +155,10 @@ export function UserProfileCard({
               {isVerifiedUniversity && <Image src={badge} alt={name} width={12} height={12} className="ml-1 " />}
             </div>
             <div className="flex gap-4 text-neutral-700 font-semibold">
-              <span onClick={() => openModal(<ConnectionsModal userId={userId} />)} className=" text-xs lg:text-sm cursor-pointer">
+              <span onClick={() => handleOpenModal('ConnectionsModal')} className=" text-xs lg:text-sm cursor-pointer">
                 {following || '0'} Following
               </span>
-              <span onClick={() => openModal(<ConnectionsModal userId={userId} />)} className=" text-xs lg:text-sm cursor-pointer">
+              <span onClick={() => handleOpenModal('ConnectionsModal')} className=" text-xs lg:text-sm cursor-pointer">
                 {followers || '0'} Followers
               </span>
             </div>
diff --git a/src/components/organisms/UserPostContainer/index.tsx b/src/components/organisms/UserPostContainer/index.tsx
index a882848..2011e35 100644
--- a/src/components/organisms/UserPostContainer/index.tsx
+++ b/src/components/organisms/UserPostContainer/index.tsx
@@ -139,7 +139,7 @@ function UserPostContainer({ communityID, communityGroupID, type }: props) {
               width={45}
               height={45}
               objectFit="cover"
-              className="object-none rounded-full h-[inherit]"
+              className="object-cover rounded-full h-[inherit]"
               src={userProfileData?.profile_dp?.imageUrl || avatar}
               alt="avatar.png"
             />
diff --git a/src/content/constant.ts b/src/content/constant.ts
new file mode 100644
index 0000000..8da1c30
--- /dev/null
+++ b/src/content/constant.ts
@@ -0,0 +1,3 @@
+export const MESSAGES = {
+  SOMETHING_WENT_WRONG: 'Something went wrong',
+}
diff --git a/src/services/auth.ts b/src/services/auth.ts
index 8620829..b1736d0 100644
--- a/src/services/auth.ts
+++ b/src/services/auth.ts
@@ -4,6 +4,8 @@ import { client } from './api-Client'
 import { useUniStore } from '@/store/store'
 import useCookie from '@/hooks/useCookie'
 import { useRouter } from 'next/navigation'
+import { showCustomDangerToast } from '@/components/atoms/CustomToasts/CustomToasts'
+import { MESSAGES } from '@/content/constant'
 
 interface data {
   email: string
@@ -77,6 +79,10 @@ export const useHandleLogin = () => {
       setCookieValue(response.tokens.access.token, response.tokens.access.expires)
       setRefreshCookieValue(response.tokens.refresh.token, response.tokens.refresh.expires)
     },
+    onError: (error: any) => {
+      console.log(error)
+      showCustomDangerToast(error.response.data.message || MESSAGES.SOMETHING_WENT_WRONG)
+    },
   })
 }
 

From 01e7f8ced7b20fe0174f1f0832e706d8cb86600d Mon Sep 17 00:00:00 2001
From: bacpactech <bacpactech@gmail.com>
Date: Thu, 19 Dec 2024 17:09:58 +0530
Subject: [PATCH 2/2] fix: userProfileCard

---
 .../organisms/ProfileCard/index.tsx           | 49 ++++++++++++-------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/components/organisms/ProfileCard/index.tsx b/src/components/organisms/ProfileCard/index.tsx
index e6955a6..16ecc2c 100644
--- a/src/components/organisms/ProfileCard/index.tsx
+++ b/src/components/organisms/ProfileCard/index.tsx
@@ -2,15 +2,12 @@ import Card from '@/components/atoms/Card'
 import avatar from '@assets/avatar.svg'
 import Image from 'next/image'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover'
-//import { Badge } from "@/components/ui/badge";
-//import { Button } from "@/components/ui/button";
 import { FaGraduationCap, FaEnvelope, FaPhone, FaMapMarkerAlt, FaBirthdayCake } from 'react-icons/fa'
 import { ImEarth } from 'react-icons/im'
 import { HiDotsHorizontal, HiPencilAlt } from 'react-icons/hi'
 import badge from '@assets/badge.svg'
 import useDeviceType from '@/hooks/useDeviceType'
 import { format } from 'date-fns'
-import { ModalContentType } from '@/types/global'
 import { useUniStore } from '@/store/store'
 import { useToggleFollow } from '@/services/connection'
 import { IoIosShareAlt } from 'react-icons/io'
@@ -19,7 +16,14 @@ import { IoFlagOutline } from 'react-icons/io5'
 import { RiMessage2Fill } from 'react-icons/ri'
 import { FaCalendarCheck } from 'react-icons/fa6'
 import { MdSubject } from 'react-icons/md'
+import { FaCamera } from 'react-icons/fa'
 import Buttons from '@/components/atoms/Buttons'
+import { useEditProfile } from '@/services/edit-profile'
+import { replaceImage } from '@/services/uploadImage'
+import { ChangeEvent } from 'react'
+import { openModal } from '@/components/molecules/Modal/ModalManager'
+import EditProfileModal from '@/components/Timeline/Modals/EditProfileModal'
+import ConnectionsModal from '@/components/Timeline/Modals/ConnectionsModal'
 
 interface UserProfileCardProps {
   name: string
@@ -39,18 +43,16 @@ interface UserProfileCardProps {
   isVerifiedUniversity: boolean
   degree: string
   country: string
-  setModalContentType: React.Dispatch<React.SetStateAction<ModalContentType>>
-  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>
   isSelfProfile?: boolean
   userId?: string
   universityLogo: string
   occupation: string
   affiliation: string
-  handleShowModal: (value: string) => void
 }
 
 export function UserProfileCard({
   name,
+  isPremium,
   description,
   university,
   isVerified,
@@ -66,27 +68,32 @@ export function UserProfileCard({
   avatarUrl,
   isVerifiedUniversity,
   country,
-  setModalContentType,
-  setIsModalOpen,
+
   isSelfProfile,
   userId,
   universityLogo,
   occupation,
   affiliation,
-  handleShowModal,
 }: UserProfileCardProps) {
   const { isDesktop } = useDeviceType()
   const { userProfileData } = useUniStore()
 
   const { mutate: toggleFollow } = useToggleFollow('Following')
+  const { mutate: mutateEditProfile, isPending } = useEditProfile()
   const userFollowingIDs = userProfileData && userProfileData?.following?.map((following) => following.userId)
 
-  const handleOpenModal = (modalType: ModalContentType) => {
-    setModalContentType(modalType)
-    setIsModalOpen(true)
-    handleShowModal(modalType || '')
-  }
+  const handleImageUpload = async (e: ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (files && files[0]) {
+      const data: any = await replaceImage(files[0], userProfileData?.profile_dp?.publicId)
+
+      const dataToPush = { profile_dp: { imageUrl: data?.imageUrl, publicId: data?.publicId } }
 
+      mutateEditProfile(dataToPush)
+    } else {
+      console.error('No file selected.')
+    }
+  }
   return (
     <Card className="rounded-2xl px-8">
       <div className="flex flex-wrap lg:flex-nowrap gap-4 lg:gap-8 items-start">
@@ -98,6 +105,14 @@ export function UserProfileCard({
             height={isDesktop ? 126 : 90}
             className="rounded-full object-cover lg:w-[126px] lg:h-[126px] w-[90px] h-[90px]"
           />
+          {isSelfProfile && (
+            <div className="group-hover:block hidden absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 bg-primary-50 py-1 px-2 rounded-full text-primary font-medium cursor-pointer">
+              <input style={{ display: 'none' }} type="file" id="changeProfileImage" onChange={(e) => handleImageUpload(e)} />
+              <label htmlFor="changeProfileImage" className="bg-primary w-10 h-10 flex justify-center items-center rounded-full p-2 text-neutral-800">
+                <FaCamera color="white" />
+              </label>
+            </div>
+          )}
         </div>
         <div className="w-full">
           <div className="flex w-full items-center justify-between flex-wrap gap-4">
@@ -107,7 +122,7 @@ export function UserProfileCard({
             </div>
             {isSelfProfile ? (
               <div
-                onClick={() => handleOpenModal('EditProfileModal')}
+                onClick={() => openModal(<EditProfileModal />)}
                 className="flex gap-2 items-center text-2xs lg:text-xs text-primary-500 cursor-pointer"
               >
                 <button>Edit Profile</button>
@@ -155,10 +170,10 @@ export function UserProfileCard({
               {isVerifiedUniversity && <Image src={badge} alt={name} width={12} height={12} className="ml-1 " />}
             </div>
             <div className="flex gap-4 text-neutral-700 font-semibold">
-              <span onClick={() => handleOpenModal('ConnectionsModal')} className=" text-xs lg:text-sm cursor-pointer">
+              <span onClick={() => openModal(<ConnectionsModal userId={userId} />)} className=" text-xs lg:text-sm cursor-pointer">
                 {following || '0'} Following
               </span>
-              <span onClick={() => handleOpenModal('ConnectionsModal')} className=" text-xs lg:text-sm cursor-pointer">
+              <span onClick={() => openModal(<ConnectionsModal userId={userId} />)} className=" text-xs lg:text-sm cursor-pointer">
                 {followers || '0'} Followers
               </span>
             </div>