fix: mobile UI

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

@@ -11,7 +11,7 @@ export default function Page({ params }: { params: { communityId: string; groupI
   const [isGroupAdmin, setIsGroupAdmin] = useState<boolean>(false)
 
   return (
-    <div ref={containerRef} className="h-with-navbar overflow-y-scroll">
+    <div ref={containerRef} className="h-with-navbar">
       <CommunityGroupBanner
         communityID={communityId}
         communityGroupID={communityGroupID}

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

@@ -40,7 +40,7 @@ export default function Profile({ params }: { params: { id: string } }) {
   const { logos } = university || {}
 
   return (
-    <div className="h-with-navbar py-4 overflow-y-scroll hideScrollbar">
+    <div className="h-with-navbar py-4 hideScrollbar">
       {isUserProfileDataLoading || !userProfileData ? (
         <Skeleton className="w-full h-60 bg-slate-300" />
       ) : (

src/app/(withLayout)/timeline/page.tsx

@@ -9,7 +9,7 @@ export default function Timeline() {
   const containerRef = useRef<HTMLDivElement>(null)
 
   return (
-    <div ref={containerRef} className="h-with-navbar overflow-y-scroll hideScrollbar">
+    <div ref={containerRef} className="h-with-navbar hideScrollbar">
       <UserPostContainer type={PostInputType.Timeline} />
       <TimelinePostContainer containerRef={containerRef} />
     </div>

src/components/Timeline/Modals/EditProfileModal.tsx

@@ -11,6 +11,7 @@ import { TiCameraOutline } from 'react-icons/ti'
 import { useEffect, useState } from 'react'
 import { replaceImage } from '@/services/uploadImage'
 import { currYear, degreeAndMajors, GenderOptions, occupationAndDepartment } from '@/types/RegisterForm'
+import { FaCamera } from 'react-icons/fa'
 
 export interface editProfileInputs {
   first_name: string
@@ -39,7 +40,7 @@ const EditProfileModal = () => {
   const { mutate: mutateEditProfile, isPending } = useEditProfile()
   const { userData, userProfileData } = useUniStore()
   const [userType, setUserType] = useState('student')
-  const [profileImage, setProfileImage] = useState<File | null>(null)
+  const [profileImage, setProfileImage] = useState<File | null | string>(userProfileData?.profile_dp?.imageUrl as string)
   const {
     register,
     handleSubmit,
@@ -128,7 +129,7 @@ const EditProfileModal = () => {
   const handleImageUpload = async () => {
     const files = profileImage
     if (files) {
-      const data: any = await replaceImage(files, userProfileData?.profile_dp?.publicId)
+      const data = await replaceImage(files, userProfileData?.profile_dp?.publicId)
 
       const dataToPush = { profile_dp: { imageUrl: data?.imageUrl, publicId: data?.publicId } }
 
@@ -167,6 +168,7 @@ const EditProfileModal = () => {
         major: '',
         degree: '',
         study_year: '',
+        ...(profileImageData && { profile_dp: profileImageData.profile_dp }),
       }
     } else {
       const { occupation, affiliation, ...rest } = data
@@ -175,10 +177,11 @@ const EditProfileModal = () => {
         ...rest,
         occupation: '',
         affiliation: '',
+        ...(profileImageData && { profile_dp: profileImageData.profile_dp }),
       }
     }
     // return console.log('submit', dataToPush)
-
+    console.log(dataToPush)
     mutateEditProfile(dataToPush)
   }
   return (
@@ -189,12 +192,31 @@ const EditProfileModal = () => {
         <span className="text-destructive-600">*</span> Are required fields to fill.
       </p>
       <form className="flex flex-col font-medium text-sm gap-4">
-        <div className="flex items-center gap-2  mt-4">
-          {profileImage && <img className="w-20 h-20  absolute -z-10 object-cover rounded-full" src={URL.createObjectURL(profileImage)} alt="aa" />}
-          <label htmlFor="changeProfileImage" className="w-20 h-20 rounded-full border border-neutral-200 flex items-center justify-center">
-            <input style={{ display: 'none' }} type="file" id="changeProfileImage" onChange={(e: any) => setProfileImage(e.target.files[0])} />
-            <TiCameraOutline className="text-primary text-lg" />
-          </label>
+        <div className="flex items-center gap-4 mt-4">
+          {profileImage ? (
+            <div className="relative w-20 h-20 rounded-full border border-neutral-200 group">
+              <img
+                className="rounded-full object-cover w-20 h-20"
+                src={typeof profileImage === 'string' ? profileImage : URL.createObjectURL(profileImage)}
+                alt="aa"
+              />
+              <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: any) => setProfileImage(e.target.files[0])} />
+                <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>
+          ) : (
+            <label htmlFor="changeProfileImage" className="w-20 h-20 rounded-full border border-neutral-200 flex items-center justify-center">
+              <input style={{ display: 'none' }} type="file" id="changeProfileImage" onChange={(e: any) => setProfileImage(e.target.files[0])} />
+              <TiCameraOutline className="text-primary text-lg" />
+            </label>
+          )}
+
           <p className="text-sm text-neutral-700">Edit Profile Picture</p>
         </div>
         <div className="flex flex-col">

src/components/Timeline/PostInput.tsx

@@ -37,8 +37,8 @@ const PostInput: React.FC<PostInputProps> = ({ setIsModalOpen, setModalContentTy
     const promises = images.map((image) => replaceImage(image, ''))
     const results = await Promise.all(promises)
     return results.map((result) => ({
-      imageUrl: result?.imageUrl,
-      publicId: result?.publicId,
+      imageUrl: result?.imageUrl || null,
+      publicId: result?.publicId || null,
     }))
   }
 

src/components/atoms/SelectDropdown/SelectDropdown.tsx

@@ -61,7 +61,7 @@ const SelectDropdown = ({ options, onChange, value, placeholder, icon, search =
         onClick={() => setShow(!show)}
         className={`${
           err ? 'border-red-400' : 'border-neutral-200'
-        } flex justify-between items-center py-2 px-3 border focus:ring-2 rounded-lg drop-shadow-sm  text-neutral-400 h-10 outline-none`}
+        } flex justify-between items-center py-2 px-3 border focus:ring-2 rounded-lg drop-shadow-sm  text-neutral-400  outline-none`}
       >
         <p
           className={`${value ? 'text-neutral-900' : 'text-neutral-400'} ${

src/components/molecules/MessageNotification/index.tsx

@@ -80,7 +80,13 @@ const MessageNotification = ({ message }: MessageNotificationsProps) => {
         <div key={item?._id} className="py-2 px-3 border-b border-neutral-300 flex justify-between">
           <div className="flex gap-2">
             <div className="flex gap-2 items-center">
-              <Image className="shadow-lg rounded-full" src={item?.groupLogoImage || avatar} width={36} height={36} alt="avatar" />
+              <Image
+                className="shadow-lg rounded-full w-9 h-9 object-none"
+                src={item?.groupLogoImage || avatar}
+                width={36}
+                height={36}
+                alt="avatar"
+              />
             </div>
             <div>
               <p>

src/components/molecules/Notification/index.tsx

@@ -72,7 +72,13 @@ const NotificationBox = ({ notifications }: NotificationsProps) => {
           <div className="flex flex-col gap-2">
             <div className="flex gap-2 items-center">
               <MdPersonAddAlt1 size={18} className="text-green-400" />
-              <Image className="shadow-lg rounded-full" src={item?.sender_id?.profileDp || avatar} width={36} height={36} alt="avatar" />
+              <Image
+                className="shadow-lg rounded-full w-9 h-9 object-none"
+                src={item?.sender_id?.profileDp || avatar}
+                width={36}
+                height={36}
+                alt="avatar"
+              />
             </div>
             <div>
               <p>{item?.sender_id?.firstName + ' ' + item?.sender_id?.lastName}</p>

src/components/molecules/PostCard/index.tsx

@@ -26,6 +26,7 @@ import {
 import { IoMdCode } from 'react-icons/io'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover'
 import { useRouter } from 'next/navigation'
+import { formatDistanceToNow } from 'date-fns'
 
 dayjs.extend(relativeTime)
 
@@ -155,37 +156,36 @@ const PostCard = ({
   }
   return (
     <div className={`bg-white rounded-2xl px-4`}>
-      <div className="flex items-center py-4 gap-4 justify-between">
+      <div className="flex items-start py-4 gap-4 justify-between">
         <div onClick={handleProfileClicked} className="flex gap-4 cursor-pointer">
-          <div>
-            <Image src={avatarLink || avatar} width={45} height={45} className="rounded-full" alt="avatar.png" />
+          <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" />
           </div>
           <div>
             <h3 className="font-medium text-sm text-neutral-600">{user}</h3>
             <div className="flex items-center gap-1">
-              <p className="text-[12px] text-neutral-500">{year},</p>
+              <p className="hidden md:block text-[12px] text-neutral-500">{year},</p>
               <p className="text-[12px] text-neutral-500">{university}</p>
             </div>
           </div>
         </div>
 
-        <div className=" text-primary-500 text-md bg-surface-primary-50 rounded-full flex p-1">
+        <div className=" text-primary-500 text-sm md:text-md bg-surface-primary-50 rounded-full flex p-1">
           <PostCartOption isSelfPost={adminId === userData?.id} postID={postID} isType={type} />
         </div>
       </div>
 
       <div>
-        <p className="text-sm text-neutral-700 font-medium py-4">{text}</p>
+        <p className="text-sm text-neutral-700 py-4">{text}</p>
       </div>
 
       {/* //post Image  */}
       <PostCardImageGrid images={images} setImageCarasol={setImageCarasol} idx={idx} type={type} />
       {/* Post Content */}
 
       {/* Timestamp */}
-      <p className="py-4 text-xs text-neutral-400 flex items-center">
-        <span className="text-neutral-500 break-words">{dayjs(new Date(date).toString()).format('h:m a · MMM DD, YYYY')}</span> · Post from {user} at{' '}
-        {university}
+      <p className="py-2 text-xs text-neutral-400 flex items-center">
+        <span className="text-neutral-500 break-words"> {formatDistanceToNow(date as unknown as Date, { addSuffix: true })}</span>
       </p>
 
       {/* Post Meta */}

src/components/molecules/PostCommentInput/index.tsx

@@ -188,9 +188,6 @@ function PostCommentInput({ postID, type, isSinglePost, adminID, isReply, commen
               <input id="postImage" type="file" multiple accept="image/*" className="hidden" onChange={(e) => handleImageChange(e)} />
               <GoFileMedia size={24} className="text-neutral-400" />
             </label>
-            <label htmlFor="postPool">
-              <VscSettings size={24} className="text-neutral-400" />
-            </label>
           </div>
         </div>
       </div>

src/components/molecules/userMessageInput/index.tsx

@@ -197,9 +197,6 @@ const UserMessageInput = ({ chatId, userProfileId, isRequestNotAccepted }: Props
               <input id="postImage" type="file" multiple accept="image/*" className="hidden" onChange={(e) => handleImageChange(e)} />
               <GoFileMedia size={24} className="text-neutral-400" />
             </label>
-            <label htmlFor="postPool">
-              <VscSettings size={24} className="text-neutral-400" />
-            </label>
           </div>
           <div className="flex">
             <button

src/components/organism/Login/LoginBox.tsx

@@ -29,13 +29,13 @@ const LoginBox = () => {
     },
   })
 
-  const { mutate: mutateLogin, isSuccess, error, isPending } = useHandleLogin()
+  const { mutate: mutateLogin, error, isPending } = useHandleLogin()
 
   const isAxiosError = (error: unknown): error is AxiosError<any> => {
     return (error as AxiosError)?.isAxiosError === true
   }
   const onSubmit = async (data: LoginForm) => {
-    await mutateLogin(data)
+    mutateLogin(data)
   }
 
   useEffect(() => {
@@ -47,12 +47,6 @@ const LoginBox = () => {
     }
   }, [])
 
-  useEffect(() => {
-    if (isSuccess) {
-      router.push(`/timeline`)
-    }
-  }, [isSuccess])
-
   return (
     <div className="flex flex-col  max-lg:w-1/2 max-md:w-2/3 max-sm:w-11/12">
       <div className="flex flex-col gap-8 border border-neutral-300 py-4 px-6  rounded-xl bg-white drop-shadow-md">

src/components/organism/MobileViewNavbar/index.tsx

@@ -52,7 +52,7 @@ export default function MobileViewNavbar({ closeLeftNavbar, toggleRightMenu, sho
         width={50}
         height={50}
         objectFit="cover"
-        className="w-[50px] h-[50px] rounded-full"
+        className="w-[50px] h-[50px] rounded-full flex-none"
         src={userProfileData.profile_dp?.imageUrl || avatar}
         alt="profile.png"
       />

src/components/organisms/LeftNavbar/index.tsx

@@ -59,7 +59,7 @@ export default function LeftNavbar({ toggleLeftNavbar }: Props) {
         width={50}
         height={50}
         objectFit="cover"
-        className="w-[50px] h-[50px] rounded-full"
+        className="w-[50px] h-[50px] rounded-full flex-none"
         src={userProfileData?.profile_dp?.imageUrl || avatar}
         alt="profile.png"
       />

src/components/organisms/ProfileCard/index.tsx

@@ -120,8 +120,8 @@ export function UserProfileCard({
           {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-red-500 w-10 h-10 flex justify-center items-center rounded-full p-2 text-neutral-800">
-                <FaCamera />
+              <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>
           )}
@@ -130,7 +130,7 @@ export function UserProfileCard({
           <div className="flex w-full items-center justify-between flex-wrap">
             <div className="flex gap-4 items-center">
               <p className="font-poppins text-neutral-700 text:md lg:text-[20px] font-bold">{name}</p>
-              {isPremium && <p className="bg-primary-800 text-white  rounded-xl px-4 text-xs">Premium</p>}
+              {isPremium && <p className="bg-primary-800 text-white  rounded-xl px-2 text-3xs">Premium</p>}
             </div>
             {isSelfProfile ? (
               <div className="flex gap-2 items-center text-xs lg:text-sm text-primary-500">

src/components/organisms/UserPostContainer/index.tsx

@@ -78,8 +78,8 @@ function UserPostContainer({ communityID, communityGroupID, type }: props) {
     const promises = imagesData.map((image) => replaceImage(image, ''))
     const results = await Promise.all(promises)
     return results.map((result) => ({
-      imageUrl: result?.imageUrl,
-      publicId: result?.publicId,
+      imageUrl: result?.imageUrl || null,
+      publicId: result?.publicId || null,
     }))
   }
 
@@ -133,16 +133,13 @@ function UserPostContainer({ communityID, communityGroupID, type }: props) {
   return (
     <div className="rounded-2xl bg-white shadow-card mt-4 p-4">
       <div className="flex gap-3 items-center">
-        <div
-          style={{ boxShadow: '0px 8px 40px rgba(0, 0, 0, 0.10)' }}
-          className="flex items-center justify-center bg-white rounded-full w-[56px] h-[56px]"
-        >
+        <div style={{ boxShadow: '0px 8px 40px rgba(0, 0, 0, 0.10)' }} className="flex-none rounded-full w-[45px] h-[45px]">
           {userProfileData ? (
             <Image
-              width={56}
-              height={56}
+              width={45}
+              height={45}
               objectFit="cover"
-              className="rounded-full"
+              className="object-none rounded-full h-[inherit]"
               src={userProfileData?.profile_dp?.imageUrl || avatar}
               alt="avatar.png"
             />
@@ -178,9 +175,6 @@ function UserPostContainer({ communityID, communityGroupID, type }: props) {
             <input id="postImage" type="file" multiple accept="image/*" className="hidden" onChange={(e) => handleImageChange(e)} />
             <GoFileMedia size={24} className="text-neutral-400" />
           </label>
-          <label htmlFor="postPool">
-            <VscSettings size={24} className="text-neutral-400" />
-          </label>
           <div className="w-28 max-sm:w-20">
             {type == PostInputType.Community ? (
               <SelectDropdown
@@ -208,7 +202,7 @@ function UserPostContainer({ communityID, communityGroupID, type }: props) {
           </div>
         </div>
         <div>
-          <button onClick={handleSubmit} className="bg-primary-500 text-white rounded-lg px-3 py-2 w-[69px]">
+          <button onClick={handleSubmit} className="text-xs bg-primary-500 text-white rounded-lg px-4 py-1">
             Post
           </button>
         </div>

src/services/auth.ts

@@ -3,6 +3,7 @@ import { useMutation } from '@tanstack/react-query'
 import { client } from './api-Client'
 import { useUniStore } from '@/store/store'
 import useCookie from '@/hooks/useCookie'
+import { useRouter } from 'next/navigation'
 
 interface data {
   email: string
@@ -63,7 +64,7 @@ async function universityEmailVerification(data: { universityEmail: string; Univ
 export const useHandleLogin = () => {
   const setUserData = useUniStore((state) => state.setUserData)
   const setUserProfileData = useUniStore((state) => state.setUserProfileData)
-
+  const router = useRouter()
   const [, setCookieValue] = useCookie('uni_user_token')
   const [, setRefreshCookieValue] = useCookie('uni_user_refresh_token')
 
@@ -72,9 +73,9 @@ export const useHandleLogin = () => {
     onSuccess: (response: any) => {
       setUserData(response.user)
       setUserProfileData(response.userProfile)
-      // setToken(response.tokens)
       setCookieValue(response.tokens.access.token, response.tokens.access.expires)
       setRefreshCookieValue(response.tokens.refresh.token, response.tokens.refresh.expires)
+      router.push('/timeline')
     },
   })
 }

src/services/uploadImage.ts

@@ -1,4 +1,5 @@
-import axios from 'axios'
+import { CloudinaryResponse } from '@/types/Cloudinary'
+import axios, { AxiosResponse } from 'axios'
 import CryptoJS from 'crypto-js'
 
 const presetKey: any = process.env.NEXT_PUBLIC_preset_key
@@ -37,7 +38,7 @@ export async function uploadNewImage(img: any) {
   formData.append('upload_preset', presetKey)
 
   try {
-    const res = await axios.post(`https://api.cloudinary.com/v1_1/${cloudName}/image/upload`, formData)
+    const res: AxiosResponse<CloudinaryResponse, any> = await axios.post(`https://api.cloudinary.com/v1_1/${cloudName}/image/upload`, formData)
     if (res?.data?.secure_url) {
       const imageUrl = res.data.secure_url
       const publicId = res.data.public_id