Update mentor profile UI

.github/workflows/e2e.yml

@@ -16,7 +16,7 @@ jobs:
     - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 18
     - name: Install dependencies
       run: npm ci
     - name: Install Playwright Browsers

src/pages/MentorProfile/MentorProfile.component.tsx

@@ -12,20 +12,15 @@ import Tooltip from '../../components/Tooltip';
 import Loading from '../../assets/svg/Loading';
 import MenteeCard from '../../components/MenteeCard';
 import ProfilePic from '../../components/ProfilePic';
-import InformationModal from '../../components/InformationModal';
-import useModal from '../../hooks/useModal';
-import useMentee from '../../hooks/useMentee';
 
 const MentorProfile: React.FC = () => {
   const { mentorId } = useParams();
   const navigate = useNavigate();
-
   const { handleLoginModalOpen } = useLoginModalContext();
-  const { user, isUserMentor, isMenteeApplicationsDisabled, isUserMentee } =
-    useContext(UserContext) as UserContextType;
+  const { user, isUserMentor, isMenteeApplicationsDisabled } = useContext(
+    UserContext
+  ) as UserContextType;
   const [isURLCopied, setIsURLCopied] = useState(false);
-  const { isOpen, openModal, closeModal } = useModal();
-
   const shareUrl = `${window.location.origin}${location.pathname}`;
 
   const onApply = () => {
@@ -35,9 +30,9 @@ const MentorProfile: React.FC = () => {
       handleLoginModalOpen();
     }
   };
+
 
   const { data: mentor, isLoading } = useMentor(mentorId as string);
-  const { revokeApplication } = useMentee();
 
   if (isLoading) {
     return (
@@ -56,6 +51,17 @@ const MentorProfile: React.FC = () => {
       .catch(() => {});
   };
 
+
+    const approvedMenteesCount = mentor?.mentees
+    ? mentor.mentees.filter(
+        (mentee) => mentee.state === ApplicationStatus.APPROVED
+      ).length
+    : 0;
+
+  const availableSlots = mentor?.application.noOfMentees
+    ? Math.max(0, mentor.application.noOfMentees - approvedMenteesCount)
+    : 0;
+
   return (
     <>
       <nav aria-label="Breadcrumb">
@@ -101,33 +107,56 @@ const MentorProfile: React.FC = () => {
                 <ShareIcon />
               </span>
             </div>
-            <p className="text-sm">
+            <p className="text-sm mb-0 md:mb-2 lg:mb-2">
               {mentor?.application.position},{' '}
               <span className="text-gray-500">
                 {mentor?.application.institution}
               </span>
             </p>
+            <p className="text-md flex flex-wrap items-center justify-center sm:justify-start">
+            {mentor?.application.noOfMentees && mentor.mentees ? (
+                <span
+                  className={`inline-block text-sm font-medium px-3 py-1 rounded-full mt-2 sm:mt-0 mr-2 ${
+                    availableSlots === 0
+                      ? 'bg-gray-100 text-gray-800'
+                      : 'bg-green-100 text-green-800'
+                  }`}
+                >
+                  {availableSlots} {availableSlots <= 1 ? 'Slot' : 'Slots'}{' '}
+                  Available
+                </span>
+              ) : (
+                'Not mentioned'
+              )}
+              {mentor?.mentees &&
+                mentor?.mentees.some(
+                  (mentee) => mentee.state === ApplicationStatus.APPROVED
+                ) && (
+                  <span className="inline-block bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full mt-2 sm:mt-0">
+                    {mentor.mentees.length} Applied
+                  </span>
+                )}
+            </p>
           </div>
         </div>
 
-        <div className="flex-shrink-0 md:mt-4">
+        <div className="flex-shrink-0 md:mt-4 md:mt-0">
           {!isUserMentor && mentor?.availability && (
             <Tooltip
-              isVisible={isUserMentee}
+              isVisible={isMenteeApplicationsDisabled}
               content="You can apply only for one mentor at a time"
             >
               <button
                 className={`text-white font-medium rounded-lg text-sm px-20 md:px-5 py-2.5
                             ${
-                              isUserMentee
+                              isMenteeApplicationsDisabled
                                 ? 'bg-gray-400'
                                 : 'bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300'
                             }`}
-                onClick={isMenteeApplicationsDisabled ? openModal : onApply}
+                onClick={onApply}
+                disabled={isMenteeApplicationsDisabled}
               >
-                {isMenteeApplicationsDisabled
-                  ? 'Withdraw application'
-                  : 'Apply'}
+                Apply
               </button>
             </Tooltip>
           )}
@@ -189,30 +218,13 @@ const MentorProfile: React.FC = () => {
         <h2 className="text-lg font-medium ">Bio</h2>
         <p className="font-light">{mentor?.application.bio}</p>
       </div>
-      <div className="pb-4">
-        <h2 className="text-lg font-medium ">Available mentee slots</h2>
-        <p className="font-light">
-          {mentor?.application.noOfMentees && mentor.mentees
-            ? Math.max(
-                0,
-                mentor.application.noOfMentees -
-                  mentor.mentees.filter(
-                    (mentee) => mentee.state === ApplicationStatus.APPROVED
-                  ).length
-              )
-            : 'Not mentioned'}
-        </p>
-      </div>
       {mentor?.mentees &&
         mentor?.mentees.some(
           (mentee) => mentee.state === ApplicationStatus.APPROVED
         ) && (
           <div className="pb-4">
             <div className="flex flex-wrap gap-2 items-baseline">
               <h2 className="text-lg font-medium mb-2 ">Mentees</h2>
-              <p className="text-slate-400 mb-2">
-                &#40; {mentor.mentees.length} total applications &#41;
-              </p>
             </div>
             <div className="flex flex-wrap gap-2">
               {mentor.mentees
@@ -229,15 +241,6 @@ const MentorProfile: React.FC = () => {
             </div>
           </div>
         )}
-      <InformationModal
-        isOpen={isOpen}
-        headline="Withdraw your current application"
-        body={`Are you sure you want to withdraw your current application and apply for ${
-          mentor?.application.firstName ?? ''
-        } ${mentor?.application.lastName ?? ''}?`}
-        onConfirm={revokeApplication}
-        onClose={closeModal}
-      />
     </>
   );
 };