fix: UI for comment and profile

BacPacNet · Dec 19, 2024 · 938379f · 938379f
1 parent cd1bf38
commit 938379f
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 51 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)
+    },
   })
 }