fix: communitygroup UI

src/components/atoms/Buttons/index.tsx

@@ -20,7 +20,7 @@ const Buttons: React.FC<ButtonProps> = ({ className = '', variant = 'primary', s
     medium: 'text-md py-2 px-4 ',
     large: 'text-lg py-2 px-4 ',
     extra_small: 'text-2xs py-1 px-2',
-    extra_small_paddind_2: 'text-2xs py-2 px-2',
+    extra_small_paddind_2: 'text-3xs py-2 px-2',
   }
 
   const variantClass = variantClasses[variant]

src/components/atoms/CustomToasts/CustomToasts.tsx

@@ -1,3 +1,4 @@
+import { MESSAGES } from '@/content/constant'
 import React from 'react'
 import toast from 'react-hot-toast'
 
@@ -88,7 +89,7 @@ export function showCustomDangerToast(message: string) {
             textAlign: 'center',
           },
         },
-        React.createElement('p', { className: 'text-white' }, message),
+        React.createElement('p', { className: 'text-white' }, message || MESSAGES.SOMETHING_WENT_WRONG),
         React.createElement(
           'button',
           {

src/components/atoms/PostImageSlider/index.tsx

@@ -22,7 +22,7 @@ type prop = {
 
 export default function PostImageSlider({ images, initialSlide, messageImage }: prop) {
   return (
-    <div className={` w-1/2 h-1/2 max-sm:w-11/12 max-sm:h-5/6  relative`}>
+    <div className={` w-3/4 h-1/2 max-sm:w-11/12 relative`}>
       <p className="bg-white rounded-full self-end w-max absolute z-50 right-2 top-2 text2xs p-1" onClick={() => closeImageModal()}>
         <RxCross2 />
       </p>

src/components/atoms/SelectUsers/index.tsx

@@ -1,4 +1,6 @@
 import React from 'react'
+import avatar from '@assets/avatar.svg'
+import Image from 'next/image'
 
 type user = {
   id: string
@@ -31,7 +33,7 @@ const SelectUsers = ({ selectedUsers, setSelectedUsers, user }: Props) => {
     <div className="flex justify-start items-center gap-4 w-full ">
       <input onChange={() => handleClick(user)} className="w-4" type="checkbox" checked={isSelected} />
       <div className="flex items-center gap-2">
-        <img className="w-10 h-10 rounded-full object-cover" src={user?.profileImageUrl} alt="" />
+        <Image width={40} height={40} className="w-10 h-10 rounded-full object-cover" src={user?.profileImageUrl || avatar} alt="" />
         <div>
           <p className="text-sm font-semibold">{user?.firstName}</p>
           {/*<p className="text-2xs text-neutral-500">{data?.profile?.university_name ? data?.profile?.university_name : 'Not Availaible'}</p>*/}

src/components/molecules/CommunityGroupBanner/index.tsx

@@ -146,47 +146,19 @@ export default function CommunityGroupBanner({ communityID, communityGroupID, is
         </div>
         <div className="p-4">
           <div className="card-title flex justify-between items-center">
-            <div className="flex gap-3 items-center">
+            <div className="flex gap-2  flex-wrap items-center">
               <div
                 style={{ boxShadow: '0px 8px 40px rgba(0, 0, 0, 0.10)' }}
-                className="relative flex items-center justify-center bg-white rounded-full w-[40px] h-[40px] overflow-hidden"
+                className="relative flex items-center justify-center bg-white rounded-full w-11 h-11 lg:w-14 lg:h-14 overflow-hidden"
               >
-                {!communityGroupID ? (
-                  <div
-                    className={`${
-                      dataToDisplay?.adminId == userData?.id ? 'absolute  ' : 'hidden'
-                    }  w-8 h-8 rounded-full bg-white shadow-2xl z-[2] top-1 right-1 flex items-center justify-center `}
-                  >
-                    <input style={{ display: 'none' }} type="file" id="communitylogoImagefile" onChange={(e) => handleLogoImageUpload(e)} />
-                    <label htmlFor="communitylogoImagefile">
-                      <MdAddAPhoto />
-                    </label>
-                  </div>
-                ) : (
-                  <div
-                    className={`${
-                      dataToDisplay?.adminId == userData?.id ? 'absolute  ' : 'hidden'
-                    }  w-8 h-8 rounded-full bg-white shadow-2xl z-[2] top-1 right-1 flex items-center justify-center `}
-                  >
-                    <input
-                      style={{ display: 'none' }}
-                      type="file"
-                      id="communityGrouplogoImagefile"
-                      //  onChange={(e) => handleGroupLogoImageUpload(e)}
-                    />
-                    <label htmlFor="communityGrouplogoImagefile">
-                      <MdAddAPhoto />
-                    </label>
-                  </div>
-                )}
-
                 <Image
-                  layout="fill"
+                  width={40}
+                  height={40}
                   objectFit="cover"
                   objectPosition="center"
                   alt="logo"
+                  className="w-11 h-11 lg:w-14 lg:h-14"
                   src={communityGroups?.communityGroupLogoUrl?.imageUrl || universityPlaceholder}
-                  className="object-cover object-top"
                 />
               </div>
               <p className="text-sm font-bold">{communityGroups?.title}</p>
@@ -198,8 +170,11 @@ export default function CommunityGroupBanner({ communityID, communityGroupID, is
               } flex  items-center`}
             >
               {isGroupAdmin ? (
-                <div className="flex gap-2 items-center text-2xs lg:text-xs text-primary-500">
-                  <button onClick={() => handleEditCommunityGroupModal()}>Edit Group</button>
+                <div
+                  onClick={() => handleEditCommunityGroupModal()}
+                  className="flex gap-2 items-center text-2xs lg:text-xs text-primary-500 whitespace-nowrap cursor-pointer"
+                >
+                  <button>Edit Group</button>
                   <HiPencilAlt size={16} />
                 </div>
               ) : (
@@ -210,8 +185,8 @@ export default function CommunityGroupBanner({ communityID, communityGroupID, is
             </div>
           </div>
           <div>
-            <p className="text-2xs text-neutral-500 pt-4">{communityGroups?.description}</p>
-            <p className="text-2xs text-neutral-500 pt-2">
+            <p className="text-xs text-neutral-500 pt-4">{communityGroups?.description}</p>
+            <p className="text-xs text-neutral-500 pt-2">
               <span>{communityGroups?.users?.length}</span> members
             </p>
           </div>

src/components/molecules/CreateNewGroupBox/index.tsx

@@ -51,7 +51,7 @@ const CreateNewGroup = ({ setNewGroup, communityId = '' }: Props) => {
   const handleSelectAll = useCallback(() => {
     const getAlluser: any = communityData?.users?.filter((user) => user?.id !== userData?.id).map((user) => user)
     setSelectedUsers(getAlluser)
-  }, [])
+  }, [communityData])
 
   const handleCategoryChange = (category: Category) => {
     setSelectedGroupCategory(category)
@@ -318,7 +318,7 @@ const CreateNewGroup = ({ setNewGroup, communityId = '' }: Props) => {
             </div>
           </div>
           <button disabled={isPending} type="submit" className="bg-[#6647FF] py-2 rounded-lg text-white w-3/4 mx-auto">
-            {isLoading || isPending ? <Spinner /> : <p>Create Group</p>}
+            {isLoading || isPending ? <Spinner /> : <p>Create Groups</p>}
           </button>
           {/* <button
               type="reset"

src/components/molecules/EditCommunityGroupModal/index.tsx

@@ -33,7 +33,6 @@ type User = {
 }
 
 const EditCommunityGroupModal = ({ setNewGroup, communityGroups }: Props) => {
-  const { userProfileData } = useUniStore()
   const [logoImage, setLogoImage] = useState(communityGroups?.communityGroupLogoUrl?.imageUrl)
   const [coverImage, setCoverImage] = useState(communityGroups?.communityGroupLogoCoverUrl?.imageUrl)
 
@@ -44,15 +43,12 @@ const EditCommunityGroupModal = ({ setNewGroup, communityGroups }: Props) => {
   const [selectedGroupCategory, setSelectedGroupCategory] = useState<Category | null>(null)
   const [groupSubCategory, setGroupSubCategory] = useState<string[]>([])
 
-  const [searchInput, setSearchInput] = useState('')
   const { mutate: mutateEditGroup, isPending } = useUpdateCommunityGroup()
   const { data: allCommunityUsers } = useGetCommunity(communityGroups?.communityId)
   const {
     register: GroupRegister,
     handleSubmit: handleGroupCreate,
     formState: { errors: GroupErrors },
-    getValues,
-    watch,
     setValue,
     setError,
   } = useForm({
@@ -69,7 +65,7 @@ const EditCommunityGroupModal = ({ setNewGroup, communityGroups }: Props) => {
   const handleSelectAll = useCallback(() => {
     const getAlluser: any = allCommunityUsers?.users?.filter((user) => user?.id !== communityGroups.adminUserId).map((user) => user)
     setSelectedUsers(getAlluser)
-  }, [])
+  }, [allCommunityUsers])
 
   const handleCategoryChange = (category: Category) => {
     setSelectedGroupCategory(category)
@@ -164,18 +160,20 @@ const EditCommunityGroupModal = ({ setNewGroup, communityGroups }: Props) => {
 
           {/* Forms  */}
           <form onSubmit={handleGroupCreate(onGroupSubmit)} className="w-full flex flex-col gap-4">
-            <div className="flex gap-4 items-center justify-between">
-              <div className={` border-2 relative border-neutral-200 bg-white flex  items-center justify-center w-24 h-24 rounded-full`}>
+            <div className="flex gap-3 items-center justify-between">
+              <div
+                className={` border-2 relative border-neutral-200 bg-white flex  items-center justify-center w-14 h-14 lg:w-24 lg:h-24 rounded-full`}
+              >
                 {logoImage && (
                   <img
-                    className="w-24 h-24 rounded-full absolute  object-cover"
+                    className="w-14 h-14 lg:w-24 lg:h-24 rounded-full absolute  object-cover"
                     src={typeof logoImage === 'object' ? URL.createObjectURL(logoImage) : logoImage}
                     alt=""
                   />
                 )}
                 <input style={{ display: 'none' }} type="file" id="CreateGroupLogoImage" onChange={(e: any) => setLogoImage(e.target.files[0])} />
                 <label htmlFor="CreateGroupLogoImage" className="flex flex-col items-center gap-2">
-                  <FiCamera size={40} className="text-slate-400 z-30" />
+                  <FiCamera size={30} className="text-slate-400 z-30" />
                 </label>
               </div>
               <div className="relative w-9/12 flex flex-col gap-2">
@@ -359,8 +357,8 @@ const EditCommunityGroupModal = ({ setNewGroup, communityGroups }: Props) => {
               </div>
             </div>
 
-            <button type="submit" className="bg-[#6647FF] py-2 rounded-lg text-white w-3/4 mx-auto">
-              {isLoading || isPending ? <Spinner /> : <p>Update Changes</p>}
+            <button disabled={isLoading} type="submit" className="bg-[#6647FF] py-2 rounded-lg text-white w-3/4 mx-auto">
+              {isLoading ? <Spinner /> : <p>Update Changes</p>}
             </button>
           </form>
         </div>

src/components/molecules/UniversityCard/index.tsx

@@ -11,6 +11,7 @@ import { Skeleton } from '@/components/ui/Skeleton'
 
 import { openModal } from '../Modal/ModalManager'
 import CommunityLeaveModal from '../CommunityLeaveModal'
+import Spinner from '@/components/atoms/spinner'
 
 interface Props {
   communityID: string
@@ -73,7 +74,7 @@ export default function UniversityCard({ communityID, isGroupAdmin, setIsGroupAd
 
   return (
     <div className="rounded-2xl bg-white shadow-card">
-      <div className=" relative h-[164px] w-full overflow-hidden rounded-t-2xl mt-4">
+      <div className=" relative h-[100px] md:h-[164px] w-full overflow-hidden rounded-t-2xl mt-4">
         <Image
           src={communityData?.communityCoverUrl?.imageUrl || universityPlaceholder}
           layout="fill"
@@ -84,8 +85,8 @@ export default function UniversityCard({ communityID, isGroupAdmin, setIsGroupAd
         />
       </div>
       <div className="p-4">
-        <div className="card-title flex justify-between items-center">
-          <div className="flex gap-3 items-center">
+        <div className="card-title flex flex-wrap justify-between items-center gap-2">
+          <div className="flex flex-wrap  gap-2 items-center">
             <div
               style={{ boxShadow: '0px 8px 40px rgba(0, 0, 0, 0.10)' }}
               className="relative flex items-center justify-center bg-white rounded-full w-[40px] h-[40px] overflow-hidden"
@@ -100,11 +101,11 @@ export default function UniversityCard({ communityID, isGroupAdmin, setIsGroupAd
               />
             </div>
             <p className="text-sm font-bold">{communityData?.name}</p>
-            <p className="ai-power text-xs font-extrabold">AI POWERED </p>
+            <p className="ai-power text-3xs font-extrabold">AI POWERED </p>
           </div>
           <div>
             <Button onClick={() => handleToggleJoinCommunity(communityID)} size="extra_small_paddind_2" variant="primary">
-              {isJoinLoading || isLeaveLoading ? 'Loading...' : !isUserJoinedCommunity ? 'Join Community' : 'Leave Community'}
+              {isJoinLoading || isLeaveLoading ? <Spinner /> : !isUserJoinedCommunity ? 'Join Community' : 'Leave Community'}
             </Button>
           </div>
         </div>

src/components/organisms/ProfileCard/index.tsx

@@ -123,7 +123,7 @@ export function UserProfileCard({
             {isSelfProfile ? (
               <div
                 onClick={() => openModal(<EditProfileModal />)}
-                className="flex gap-2 items-center text-2xs lg:text-xs text-primary-500 cursor-pointer"
+                className="flex gap-2 items-center text-2xs lg:text-xs text-primary-500 whitespace-nowrap cursor-pointer"
               >
                 <button>Edit Profile</button>
                 <HiPencilAlt size={16} />

src/services/community-university.ts

@@ -176,9 +176,11 @@ export const useUpdateCommunity = () => {
     mutationFn: ({ id, data }: any) => UpdateCommunity(id, data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['community'] })
+      showCustomSuccessToast('Community updated successfully')
     },
     onError: (res: any) => {
       console.log(res.response.data.message, 'res')
+      showCustomDangerToast(res.response.data.message)
     },
   })
 }
@@ -240,11 +242,13 @@ export const useCreateCommunityGroup = () => {
   const queryClient = useQueryClient()
   return useMutation({
     mutationFn: ({ communityId, data }: any) => CreateCommunityGroup(communityId, cookieValue, data),
-    onSuccess: (response: any) => {
+    onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['communityGroups'] })
+      showCustomSuccessToast('Community successfully created ')
     },
-    onError: (res: any) => {
-      console.log(res.response.data.message, 'res')
+    onError: (error: any) => {
+      console.log(error.response.data.message, 'res')
+      showCustomDangerToast(error.response.data.message)
     },
   })
 }