Merge pull request #445 from ubc-biztech/modularize-mentors

Modularize mentors and add to companion
ubc-biztech · Aug 28, 2023 · e0e6b8c · e0e6b8c
2 parents 5854c18 + 36a883a
commit e0e6b8c
Show file tree

Hide file tree

Showing 8 changed files with 207 additions and 159 deletions.
diff --git a/src/pages/public/Companion/components/CompanionLayout.js b/src/pages/public/Companion/components/CompanionLayout.js
@@ -27,6 +27,7 @@ import {
 import {
   constantStyles
 } from "../../../../constants/_constants/companion";
+import Mentors from "pages/public/Companion/components/mentor/Mentors";
 
 const useStyles = makeStyles((theme) => ({
   textfield: {
@@ -121,7 +122,8 @@ const CompanionLayout = (params) => {
     setEmail,
     isLoading,
     error,
-    regData,
+    userRegistration,
+    registrations,
     event,
     scheduleData,
     ChildComponent,
@@ -285,10 +287,10 @@ const CompanionLayout = (params) => {
   const renderMobileOnly = useMediaQuery(theme.breakpoints.down("sm"));
 
   useEffect(() => {
-    if (regData) {
+    if (userRegistration) {
       setIsModalOpen(false);
     }
-  }, [regData]);
+  }, [userRegistration]);
 
   return (
     <div style={styles.container}>
@@ -322,7 +324,7 @@ const CompanionLayout = (params) => {
       </Modal>
       {isLoading ? <Loading/> : (
         <div>
-          {!email || !regData ? (
+          {!email || !userRegistration ? (
             <motion.div
               initial={{
                 opacity: 0,
@@ -394,6 +396,11 @@ const CompanionLayout = (params) => {
                         fontSize: constantStyles.fontSize
                       }}>{header.text}</a>);
                     })}
+                    {event && <a href="#Mentors" style={{
+                      ...styles.link,
+                      fontSize: constantStyles.fontSize
+                    }}>Mentors</a>
+                    }
                   </nav>
                 </FadeInWhenVisible>
               </div>
@@ -402,7 +409,7 @@ const CompanionLayout = (params) => {
                   <FeedbackForm feedbackLink={event.feedback} renderMobileOnly={renderMobileOnly} styles={styles} />
                 </FadeInWhenVisible> : <></>}
               <FadeInWhenVisible id="welcome" style={styles.column}>
-                <h1 id="Welcome" style={renderMobileOnly ? styles.mobileTitle : styles.title}>Hello, {regData.fname}!</h1>
+                <h1 id="Welcome" style={renderMobileOnly ? styles.mobileTitle : styles.title}>Hello, {userRegistration.fname}!</h1>
                 {welcomeData.map((paragraph, i) => {
                   return <div key={i} style={{
                     ...styles.text,
@@ -416,7 +423,8 @@ const CompanionLayout = (params) => {
                 <FadeInWhenVisible id="Timeline">
                   <Schedule data={scheduleData} renderMobileOnly={renderMobileOnly} date={date} location={location} styles={styles}/>
                 </FadeInWhenVisible>}
-              <ChildComponent regData={regData} email={email} eventID={eventID} year={year} styles={styles} renderMobileOnly={renderMobileOnly} theme={theme} classes={classes} FadeInWhenVisible={FadeInWhenVisible} {...props}/>
+              <ChildComponent userRegistration={userRegistration} email={email} eventID={eventID} year={year} styles={styles} renderMobileOnly={renderMobileOnly} theme={theme} classes={classes} FadeInWhenVisible={FadeInWhenVisible} {...props}/>
+              <Mentors id="Mentors" event={event} registrations={registrations} styles={styles} />
               <div style={{
                 ...styles.text,
                 width: "100%",

diff --git a/src/components/mentor/MentorCard.js → ...Companion/components/mentor/MentorCard.js b/src/components/mentor/MentorCard.js → ...Companion/components/mentor/MentorCard.js
@@ -12,6 +12,9 @@ import {
 import {
   COLORS
 } from "constants/index";
+import {
+  constantStyles
+} from "constants/_constants/companion";
 
 const useStyles = makeStyles({
   profileContainer: {
@@ -24,17 +27,40 @@ const useStyles = makeStyles({
     height: "100%",
     width: "100%",
   },
+  mobileProfileContainer: {
+    // marginBottom: "2%",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    backgroundColor: COLORS.WHITE,
+    borderRadius: "10px",
+    padding: "6%",
+    height: "100%",
+  },
   name: {
     marginTop: "2%",
     color: COLORS.LIGHT_BACKGROUND_COLOR,
     fontSize: "1.5rem",
     fontWeight: "bold",
     textAlign: "center"
   },
+  mobileName: {
+    marginTop: "2%",
+    color: COLORS.LIGHT_BACKGROUND_COLOR,
+    fontSize: "16px",
+    fontWeight: "bold",
+    textAlign: "center"
+  },
   position: {
     marginTop: "2%",
     color: COLORS.LIGHT_BACKGROUND_COLOR,
-    fontSize: "1.2rem",
+    fontSize: constantStyles.fontSize,
+    textAlign: "center"
+  },
+  mobilePosition: {
+    marginTop: "2%",
+    color: COLORS.LIGHT_BACKGROUND_COLOR,
+    fontSize: constantStyles.mobileFontSize,
     textAlign: "center"
   },
   skill: {
@@ -45,6 +71,11 @@ const useStyles = makeStyles({
     height: "150px",
     backgroundColor: COLORS.LIGHT_BACKGROUND_COLOR
   },
+  mobileProfilePicture: {
+    width: "100px",
+    height: "100px",
+    backgroundColor: COLORS.LIGHT_BACKGROUND_COLOR
+  },
   container: {
     height: "100%",
     flex: "0 3 350px",
@@ -62,16 +93,7 @@ const useStyles = makeStyles({
     width: "100%",
     height: "100%",
   },
-  mobileProfileContainer: {
-    // marginBottom: "2%",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    backgroundColor: COLORS.WHITE,
-    borderRadius: "10px",
-    padding: "6%",
-    height: "100%"
-  },
+
 });
 
 function MentorCard(props) {
@@ -89,11 +111,11 @@ function MentorCard(props) {
           <Avatar
             alt={`${fname}-profile-picture`}
             src={profilePhoto}
-            className={classes.profilePicture} />
-          <Typography className={classes.name}>
+            className={renderMobileOnly ?  classes.mobileProfilePicture : classes.profilePicture} />
+          <Typography className={renderMobileOnly ? classes.mobileName : classes.name }>
             {fname + ", " + lname + " " + `(${gender})`}
           </Typography>
-          <Typography className={classes.position}>
+          <Typography className={renderMobileOnly ? classes.mobilePosition : classes.position}>
             {role + " at " + companyName}
           </Typography>
           <div className={classes.skillsContainer}>