Merge pull request #132 from BacPacNet/feat-mobile-view-UI

fix: UI for comment and profile

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"
     />

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>
   )

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>

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)}

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">

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">

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}

src/components/organisms/ProfileCard/index.tsx

@@ -2,16 +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 { Skeleton } from '@/components/ui/Skeleton'
 import { useUniStore } from '@/store/store'
 import { useToggleFollow } from '@/services/connection'
 import { IoIosShareAlt } from 'react-icons/io'
@@ -47,7 +43,6 @@ interface UserProfileCardProps {
   isVerifiedUniversity: boolean
   degree: string
   country: string
-
   isSelfProfile?: boolean
   userId?: string
   universityLogo: string

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"
             />

src/content/constant.ts

@@ -0,0 +1,3 @@
+export const MESSAGES = {
+  SOMETHING_WENT_WRONG: 'Something went wrong',
+}

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)
+    },
   })
 }