From 464ebd92886995a2288713468baf8dbc1ec67e61 Mon Sep 17 00:00:00 2001
From: Aamil13 <aamil.shafi13@gmail.com>
Date: Wed, 10 Jul 2024 11:20:57 +0530
Subject: [PATCH 1/2] added multi-image-upload in image selection and removed
 email from userProfile-edit and added gif in comments/post

---
 src/app/community/[id]/page.tsx               |  2 +-
 src/app/community/page.tsx                    | 60 ++++++++++---------
 src/app/register/page.tsx                     |  2 +-
 .../Timeline/Modals/EditProfileModal.tsx      | 21 -------
 src/components/Timeline/Post.tsx              | 16 +++--
 src/components/Timeline/PostInput.tsx         | 56 +++++++++++++----
 .../universityCommunityCart.tsx               |  4 +-
 src/models/auth.ts                            |  4 +-
 src/services/auth.ts                          |  2 +
 src/types/constants.ts                        |  2 +-
 10 files changed, 95 insertions(+), 74 deletions(-)

diff --git a/src/app/community/[id]/page.tsx b/src/app/community/[id]/page.tsx
index bc6ac0b..5cc0a22 100644
--- a/src/app/community/[id]/page.tsx
+++ b/src/app/community/[id]/page.tsx
@@ -111,7 +111,7 @@ const Page = () => {
                         setIsModalOpen={setIsModalOpen}
                         isUniversity={true}
                         profileDp={userProfileData?.profile_dp?.imageUrl}
-                        media={item?.imageUrl?.imageUrl}
+                        media={item?.imageUrl}
                       />
                     </div>
                   ))}
diff --git a/src/app/community/page.tsx b/src/app/community/page.tsx
index 597627f..66563eb 100644
--- a/src/app/community/page.tsx
+++ b/src/app/community/page.tsx
@@ -4,6 +4,7 @@ import Navbar from '@/components/Timeline/Navbar'
 import Footer from '@/components/Footer/Footer'
 import UniversityCard from '@/components/universityCommunity/universityCommunityCart'
 import { useGetUserSubscribedCommunityGroups } from '@/services/university-community'
+import Loading from '../loading'
 
 // const data = [
 //   {
@@ -28,37 +29,40 @@ import { useGetUserSubscribedCommunityGroups } from '@/services/university-commu
 
 const Page = () => {
   const { data: SubscribedData, isLoading } = useGetUserSubscribedCommunityGroups()
+
   return (
     <>
       <Navbar />
-      <div className="flex flex-col min-h-[62vh] items-center ">
-        <h3 className="py-10 text-xl font-bold text-neutral-700">Joined Communities</h3>
-        {isLoading ? (
-          <div>Loading</div>
-        ) : SubscribedData?.community?.length ? (
-          <div className="flex gap-10 flex-wrap justify-center">
-            {SubscribedData?.community?.map((item: any) => (
-              <UniversityCard
-                key={item?._id}
-                universityLogo={item?.communityLogoUrl?.imageUrl}
-                UniversityName={item?.name}
-                UniversityAddress={item?.collegeID}
-                UniversityLink={item?._id}
-              />
-            ))}
-          </div>
-        ) : (
-          <div className="flex flex-col gap-4 items-center mt-10 max-sm:px-6 ">
-            <h3 className="text-4xl max-sm:text-3xl font-semibold max-w-xl text-center text-neutral-700">
-              You have yet to join university communities!
-            </h3>
-            <p className="text-lg text-neutral-500 max-w-xl text-center">
-              Search your university and start connecting with other applicants, current students, or faculty.
-            </p>
-            <button className="text-primary bg-primary-50 px-4 py-2 rounded-lg mt-5">Discover Page</button>
-          </div>
-        )}
-      </div>
+      {isLoading || !SubscribedData ? (
+        <Loading />
+      ) : (
+        <div className="flex flex-col min-h-[62vh] items-center ">
+          <h3 className="py-10 text-xl font-bold text-neutral-700">Joined Communities</h3>
+          {SubscribedData?.community?.length ? (
+            <div className="flex gap-10 flex-wrap justify-center">
+              {SubscribedData?.community?.map((item: any) => (
+                <UniversityCard
+                  key={item?._id}
+                  universityLogo={item?.communityLogoUrl?.imageUrl}
+                  UniversityName={item?.name}
+                  UniversityAddress={item?.collegeID}
+                  UniversityLink={item?._id}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="flex flex-col gap-4 items-center mt-10 max-sm:px-6">
+              <h3 className="text-4xl max-sm:text-3xl font-semibold max-w-xl text-center text-neutral-700">
+                You have yet to join university communities!
+              </h3>
+              <p className="text-lg text-neutral-500 max-w-xl text-center">
+                Search your university and start connecting with other applicants, current students, or faculty.
+              </p>
+              <button className="text-primary bg-primary-50 px-4 py-2 rounded-lg mt-5">Discover Page</button>
+            </div>
+          )}
+        </div>
+      )}
       <Footer />
     </>
   )
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
index dc40eca..e04f88e 100644
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -26,7 +26,7 @@ const SignUp = () => {
 
   const onSignupSubmit: SubmitHandler<RegisterForm> = (data) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { confirmPassword, tnc, country, city, ...signupData } = data
+    const { confirmPassword, tnc, ...signupData } = data
     mutateRegister(signupData)
   }
 
diff --git a/src/components/Timeline/Modals/EditProfileModal.tsx b/src/components/Timeline/Modals/EditProfileModal.tsx
index c8526b0..6a3a7ff 100644
--- a/src/components/Timeline/Modals/EditProfileModal.tsx
+++ b/src/components/Timeline/Modals/EditProfileModal.tsx
@@ -36,7 +36,6 @@ const EditProfileModal = () => {
   } = useForm<editProfileInputs>({
     defaultValues: {
       fullname: userData.firstName,
-      email: userProfileData?.email[0]?.UniversityEmail || '',
       bio: userProfileData?.bio,
       phone_number: userProfileData?.phone_number,
       dob: userProfileData?.dob ? new Date(userProfileData?.dob).toISOString().split('T')[0] : '',
@@ -132,26 +131,6 @@ const EditProfileModal = () => {
         </label>
         <input {...register('city')} placeholder="City" className=" border pl-3 py-2 text-md rounded-lg border-gray-light font-normal" />
         {errors.city && <span className="text-red-500 font-normal">Please enter your City!</span>}
-        <label htmlFor="email" className="py-1 mt-5">
-          Email
-        </label>
-        <input
-          {...register('email', {
-            required: true,
-            pattern: {
-              value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
-              message: 'Please enter a valid email address',
-            },
-          })}
-          placeholder="Email Address"
-          className=" border pl-3 py-2 text-md rounded-lg border-gray-light font-normal"
-        />
-        {errors.email && (
-          <span className="text-red-500 font-normal">
-            {' '}
-            {typeof errors.email.message === 'string' ? errors.email.message : 'Please enter your email!'}
-          </span>
-        )}
         <label htmlFor="phone_number" className="py-1 mt-5">
           Phone Number
         </label>
diff --git a/src/components/Timeline/Post.tsx b/src/components/Timeline/Post.tsx
index 2f7adbf..176c3f9 100644
--- a/src/components/Timeline/Post.tsx
+++ b/src/components/Timeline/Post.tsx
@@ -6,7 +6,7 @@ import { IoPaperPlaneSharp } from 'react-icons/io5'
 // import Image from 'next/image'
 import { SlOptions } from 'react-icons/sl'
 import { FaBookmark } from 'react-icons/fa6'
-import { MdOutlineImage } from 'react-icons/md'
+// import { MdOutlineImage } from 'react-icons/md'
 import { MdGifBox, MdOutlineBookmarkBorder } from 'react-icons/md'
 import { HiReply, HiOutlineBell, HiOutlineFlag } from 'react-icons/hi'
 import { BiRepost } from 'react-icons/bi'
@@ -52,7 +52,7 @@ interface PostProps {
   setModalContentType: React.Dispatch<React.SetStateAction<ModalContentType>>
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>
   isUserProfile?: boolean
-  media?: string
+  media?: []
   saved?: boolean
   isUniversity?: boolean
   postID?: string
@@ -215,8 +215,10 @@ const Post: React.FC<PostProps> = ({
           </div>
           {/* media div  */}
           {media && (
-            <div className="flex justify-center w-full px-10 mt-2">
-              <img className="rounded-lg h-96  object-cover w-full " src={media} alt="media" />
+            <div className="flex justify-center flex-wrap w-full px-10 mt-2">
+              {media?.map((item: { imageUrl: string }) => (
+                <img key={item.imageUrl} className="rounded-lg h-96  object-cover w-full " src={item.imageUrl} alt="media" />
+              ))}
             </div>
           )}
           {/* Post Content */}
@@ -276,16 +278,17 @@ const Post: React.FC<PostProps> = ({
                   placeholder="Add a comment..."
                   className="flex-grow mx-1 sm:mx-4 p-1 border-none focus:outline-none w-full lg:min-w-[370px] xs:text-xs sm:text-sm"
                 />
-                <MdGifBox size={24} color="#737373" />
+                {/* <MdGifBox size={24} color="#737373" /> */}
                 <div>
                   <input
                     style={{ display: 'none' }}
                     type="file"
                     id={`CommentsImage${postID}`}
                     onChange={(e: any) => setImageValue(e.target.files[0])}
+                    accept="image/gif,image/webp"
                   />
                   <label htmlFor={`CommentsImage${postID}`}>
-                    <MdOutlineImage size={24} color="#737373" />
+                    <MdGifBox size={24} color="#737373" />
                   </label>
                 </div>
 
@@ -331,6 +334,7 @@ const Post: React.FC<PostProps> = ({
                         </div>
                         <SlOptions color="gray" />
                       </div>
+                      {comment?.imageUrl?.imageUrl && <img className="w-full h-80 object-contain" src={comment?.imageUrl?.imageUrl} alt="" />}
                       <p className="text-xs sm:text-sm pt-1 break-words lg:min-w-[450px] max-lg:min-w-[200px]">{comment?.content}</p>
                     </div>
                   </div>
diff --git a/src/components/Timeline/PostInput.tsx b/src/components/Timeline/PostInput.tsx
index abc395c..cacb6b7 100644
--- a/src/components/Timeline/PostInput.tsx
+++ b/src/components/Timeline/PostInput.tsx
@@ -20,27 +20,35 @@ interface PostInputProps {
 
 const PostInput: React.FC<PostInputProps> = ({ setIsModalOpen, setModalContentType, idToPost, profileDp }) => {
   const [inputValue, setInputValue] = useState('')
-  const [ImageValue, setImageValue] = useState<File | null>(null)
+  const [ImageValue, setImageValue] = useState<File[] | []>([])
   const { mutate: CreateGroupPost } = useCreateGroupPost()
 
   const handleEmojiClick = (emojiData: any) => {
     setInputValue((prevValue) => prevValue + emojiData.emoji)
   }
 
+  const processImages = async (images: File[]) => {
+    const promises = images.map((image) => replaceImage(image, ''))
+    const results = await Promise.all(promises)
+    return results.map((result) => ({
+      imageUrl: result?.imageUrl,
+      publicId: result?.publicId,
+    }))
+  }
+
   const handleGroupPost = async () => {
     if (inputValue.length <= 1) {
       return console.log('Please type something to post!')
     }
 
     if (ImageValue) {
-      // setProfileImage(files[0]);
-      const imagedata: any = await replaceImage(ImageValue, '')
-
+      const imagedata = await processImages(ImageValue)
       const data = {
         communityId: idToPost,
         content: inputValue,
-        imageUrl: { imageUrl: imagedata?.imageUrl, publicId: imagedata?.publicId },
+        imageUrl: imagedata,
       }
+
       CreateGroupPost(data)
     } else {
       const data = {
@@ -69,21 +77,45 @@ const PostInput: React.FC<PostInputProps> = ({ setIsModalOpen, setModalContentTy
             </button>
           </div>
           {ImageValue && (
-            <div className="relative w-11/12">
-              <img className="" src={URL.createObjectURL(ImageValue)} alt="" />
-              <p onClick={() => setImageValue(null)} className="absolute right-0 top-0 w-5 h-5 bg-white rounded-full text-center">
-                X
-              </p>
+            <div className=" w-11/12">
+              {ImageValue?.map((item, idx) => (
+                <div key={idx} className="relative w-11/12">
+                  <img className="" src={URL.createObjectURL(item)} alt="" />
+                  <p
+                    onClick={() => setImageValue(ImageValue.filter((img) => img != item))}
+                    className="absolute right-0 top-0 w-5 h-5 bg-white rounded-full text-center"
+                  >
+                    X
+                  </p>
+                </div>
+              ))}
             </div>
           )}
           <div className="flex items-center gap-2">
             <div>
-              <input style={{ display: 'none' }} type="file" id="postImage" onChange={(e: any) => setImageValue(e.target.files[0])} />
+              <input
+                style={{ display: 'none' }}
+                type="file"
+                accept="image/png, image/jpeg"
+                id="postImage"
+                onChange={(e: any) => setImageValue([...ImageValue, e.target.files[0]])}
+              />
               <label htmlFor="postImage">
                 <MdOutlineImage size={24} color="#737373" />
               </label>
             </div>
-            <MdGifBox size={24} color="#737373" />
+            <div>
+              <input
+                style={{ display: 'none' }}
+                type="file"
+                accept="image/gif,image/webp"
+                id="postGif"
+                onChange={(e: any) => setImageValue([...ImageValue, e.target.files[0]])}
+              />
+              <label htmlFor="postGif">
+                <MdGifBox size={24} color="#737373" />
+              </label>
+            </div>
             {/* EMOJI Icon */}
             <Popover>
               <PopoverTrigger>
diff --git a/src/components/universityCommunity/universityCommunityCart.tsx b/src/components/universityCommunity/universityCommunityCart.tsx
index e1853c0..ee95ea9 100644
--- a/src/components/universityCommunity/universityCommunityCart.tsx
+++ b/src/components/universityCommunity/universityCommunityCart.tsx
@@ -24,9 +24,9 @@ const UniversityCommunityCart = ({ UniversityName, UniversityAddress, University
     }
   }
   return (
-    <div className="flex flex-col gap-4 items-center ">
+    <div className="flex flex-col gap-4 items-center w-1/4 max-sm:w-80 h-80 justify-between">
       <img className="w-40 h-40 bg-white shadow-lg rounded-full p-4" src={universityLogo} alt="" />
-      <h3 className="text-sm font-semibold">{UniversityName}</h3>
+      <h3 className="text-sm font-semibold text-center">{UniversityName}</h3>
       <p className="text-xs text-neutral-500 max-w-[90%] text-center">{address}</p>
       <button onClick={() => handleClick()} className="text-primary bg-primary-50 px-4 py-2 rounded-lg">
         University Page
diff --git a/src/models/auth.ts b/src/models/auth.ts
index f84998c..896f4bb 100644
--- a/src/models/auth.ts
+++ b/src/models/auth.ts
@@ -8,8 +8,8 @@ export interface RegisterForm {
   email: string
   gender: string
   dob: any
-  country?: string
-  city?: string
+  country: string
+  city: string
   password: string
   confirmPassword: string // only for client side validation
   tnc: boolean // only for client side validation
diff --git a/src/services/auth.ts b/src/services/auth.ts
index c13e604..ac91b1e 100644
--- a/src/services/auth.ts
+++ b/src/services/auth.ts
@@ -37,6 +37,7 @@ export const useHandleLogin = () => {
 
 export const useHandleRegister = () => {
   const setUserData = useUniStore((state) => state.setUserData)
+  const setUserProfileData = useUniStore((state) => state.setUserProfileData)
   // const setToken = useUniStore((state) => state.setToken)
   const [_, setCookieValue] = useCookie('uni_user_token')
   const [__, setRefreshCookieValue] = useCookie('uni_user_refresh_token')
@@ -48,6 +49,7 @@ export const useHandleRegister = () => {
       console.log(_, __)
 
       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)
diff --git a/src/types/constants.ts b/src/types/constants.ts
index 616b863..3ac42dc 100644
--- a/src/types/constants.ts
+++ b/src/types/constants.ts
@@ -6,6 +6,6 @@ export const CommunityNavbarLinks: NavLink[] = [
   { label: 'Notifications', href: '/notifications' },
   { label: 'Messages', href: '/messages' },
   { label: 'Connections', href: '/community/:id/connections' },
-  { label: 'University Community', href: '/community/:id' },
+  { label: 'University Community', href: '/community' },
   { label: 'Chatbot', href: '/chatbot' },
 ]

From d8e61eb66d853cd8f049003bac68a41b5990a896 Mon Sep 17 00:00:00 2001
From: Aamil13 <aamil.shafi13@gmail.com>
Date: Wed, 10 Jul 2024 11:50:19 +0530
Subject: [PATCH 2/2] resolved build error

---
 src/app/community/page.tsx                    | 21 -------------------
 .../CommunityProfileContainer.tsx             |  2 +-
 2 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/src/app/community/page.tsx b/src/app/community/page.tsx
index d53bf2a..77bcd72 100644
--- a/src/app/community/page.tsx
+++ b/src/app/community/page.tsx
@@ -6,27 +6,6 @@ import UniversityCard from '@/components/universityCommunity/universityCommunity
 import { useGetUserSubscribedCommunityGroups } from '@/services/university-community'
 import Loading from '../loading'
 
-// const data = [
-//   {
-//     UniversityName: 'University of Seoul',
-//     UniversityAddress: '163 Seoulsiripdae-ro, Dongdaemun-gu, Seoul',
-//     UniversityLink: 'asd',
-//     universityLogo: 'https://www.stonybrook.edu/commcms/studyabroad/_images/university-logos/UOS_emblem.png',
-//   },
-//   {
-//     UniversityName: 'University of Seoul',
-//     UniversityAddress: '163 Seoulsiripdae-ro, Dongdaemun-gu, Seoul',
-//     UniversityLink: 'asd',
-//     universityLogo: 'https://www.stonybrook.edu/commcms/studyabroad/_images/university-logos/UOS_emblem.png',
-//   },
-//   {
-//     UniversityName: 'University of Seoul',
-//     UniversityAddress: '163 Seoulsiripdae-ro, Dongdaemun-gu, Seoul',
-//     UniversityLink: 'asd',
-//     universityLogo: 'https://www.stonybrook.edu/commcms/studyabroad/_images/university-logos/UOS_emblem.png',
-//   },
-// ]
-
 const Page = () => {
   const { data: SubscribedData, isLoading } = useGetUserSubscribedCommunityGroups()
 
diff --git a/src/components/communityProfile/CommunityProfileContainer.tsx b/src/components/communityProfile/CommunityProfileContainer.tsx
index c75791b..030f34b 100644
--- a/src/components/communityProfile/CommunityProfileContainer.tsx
+++ b/src/components/communityProfile/CommunityProfileContainer.tsx
@@ -88,7 +88,7 @@ const CommunityProfileContainer = () => {
             setModalContentType={setModalContentType}
             setIsModalOpen={setIsModalOpen}
             isUserProfile={true}
-            media="https://cdn.pixabay.com/photo/2016/04/07/18/36/architecture-1314416_1280.jpg"
+            media={[]}
           />
         ) : selectedOption == valueType.Saved ? (
           <Post