From e5606d543b708cd112576d951878f6467851bf12 Mon Sep 17 00:00:00 2001
From: Jerry Xu <jerryxu@Jerrys-MacBook-Pro.local>
Date: Sat, 19 Aug 2023 23:42:10 -0400
Subject: [PATCH 1/3] make mentors modular component

---
 src/pages/admin/Mentors/Mentors.js            | 60 +++++--------------
 .../Companion/components/CompanionLayout.js   | 15 +++--
 .../Companion/events/DataAndBeyond2023.js     |  6 +-
 src/pages/public/Companion/index.js           | 12 ++--
 4 files changed, 33 insertions(+), 60 deletions(-)

diff --git a/src/pages/admin/Mentors/Mentors.js b/src/pages/admin/Mentors/Mentors.js
index d21141a9..a3e0540f 100644
--- a/src/pages/admin/Mentors/Mentors.js
+++ b/src/pages/admin/Mentors/Mentors.js
@@ -1,9 +1,6 @@
 import React, {
   useEffect, useState
 } from "react";
-import {
-  fetchBackend
-} from "../../../utils";
 import {
   Helmet
 } from "react-helmet";
@@ -18,15 +15,10 @@ import {
 import {
   makeStyles
 } from "@material-ui/core/styles";
-import events from "pages/public/Companion/events";
 import SearchBar from "components/inputs/SearchBar";
-import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import {
   COLORS
 } from "constants/index";
-import {
-  Link
-} from "react-router-dom";
 
 const useStyles = makeStyles({
   mainContainer: {
@@ -107,51 +99,36 @@ const useStyles = makeStyles({
   }
 });
 
-function Mentors() {
+function Mentors(props) {
+  const {
+    event, regData
+  } = props;
   const theme = useTheme();
   const classes = useStyles();
   const renderMobileOnly = useMediaQuery(theme.breakpoints.down("sm"));
 
-  const sortedEvents = events.sort((a, b) => {
-    return  a.activeUntil - b.activeUntil;
-  });
-  // find the event that is most revent, or just return the first event
-  const {
-    eventID: eventName, year: eventYear
-  } = sortedEvents.find(event => {
-    const today = new Date();
-    return event.activeUntil > today;
-  }) || sortedEvents[0];
-
   const [searchQuery, setSearchQuery] = useState([]);
   const [mentors, setMentors] = useState([]);
   const [filteredMentors, setFilteredMentors] = useState([]);
   const [skillsQuestionId, setSkillsQuestionId] = useState("");
 
   useEffect(() => {
-    const fetchEventData = async () => {
-      const res = await fetchBackend(`/events/${eventName}/${eventYear}}`, "GET", undefined, false);
-      res.partnerRegistrationQuestions.forEach(question => {
+    if (event) {
+      event.partnerRegistrationQuestions.forEach(question => {
         if (question?.isSkillsQuestion) {
           setSkillsQuestionId(question.questionId);
         }
       });
-      return res;
-    };
-    if (eventName && eventYear) {
-      fetchEventData();
     }
-  }, [eventName]);
+  }, [event]);
 
   useEffect(() => {
     const fetchMentors = async () => {
-      const params = new URLSearchParams({
-        eventID: eventName,
-        year: eventYear,
-        isPartner: true
+      const mentorsList = regData.filter(response => {
+        return response.isPartner === true;
       });
-      const res = await fetchBackend(`/registrations?${params}`, "GET", undefined, false);
-      const mentorsList = res.data.map(mentor => {
+
+      const mentorsParsed = mentorsList.map(mentor => {
         return {
           ...mentor.basicInformation,
           profilePhoto: mentor.profilePhoto,
@@ -162,8 +139,8 @@ function Mentors() {
               .map((skill) => skill.replace(",", ""))
         };
       });
-      setFilteredMentors(mentorsList);
-      setMentors(mentorsList);
+      setFilteredMentors(mentorsParsed);
+      setMentors(mentorsParsed);
     };
     fetchMentors();
   }, [skillsQuestionId]);
@@ -196,18 +173,11 @@ function Mentors() {
 
   return (
     <>
-      {eventName && eventYear ?
+      { event ?
         <>
           <Helmet>
-            <title>{eventName} Mentors</title>
+            <title>{event.ename} Mentors</title>
           </Helmet>
-          <div className={ renderMobileOnly ? classes.mobileBackButton : classes.backButton}>
-            <Link to="/companion">
-              <ArrowBackIcon onClick={() => console.log("hi")} style={{
-                cursor: "pointer"
-              }}></ArrowBackIcon>
-            </Link>
-          </div>
           <div className={classes.mainContainer}>
             <div className={renderMobileOnly ? classes.mobileMentorsContainer : classes.mentorsContainer}>
               <Grid container spacing={6}>
diff --git a/src/pages/public/Companion/components/CompanionLayout.js b/src/pages/public/Companion/components/CompanionLayout.js
index ff54f822..d8052ebe 100644
--- 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/admin/Mentors/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,
@@ -402,7 +404,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 +418,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 event={event} registrations={registrations} />
               <div style={{
                 ...styles.text,
                 width: "100%",
diff --git a/src/pages/public/Companion/events/DataAndBeyond2023.js b/src/pages/public/Companion/events/DataAndBeyond2023.js
index 0a7fe17c..59290d0a 100644
--- a/src/pages/public/Companion/events/DataAndBeyond2023.js
+++ b/src/pages/public/Companion/events/DataAndBeyond2023.js
@@ -22,7 +22,7 @@ import {
 
 const DataAndBeyond2023 = (params) => {
   const {
-    regData, email, styles, renderMobileOnly, FadeInWhenVisible
+    userRegistration, email, styles, renderMobileOnly, FadeInWhenVisible
   } = params;
   const [teamData, setTeamData] = useState(null);
   const [teamPoints, setTeamPoints] = useState({
@@ -117,10 +117,10 @@ const DataAndBeyond2023 = (params) => {
   };
 
   useEffect(() => {
-    if (email && regData) {
+    if (email && userRegistration) {
       fetchTeamData();
     }
-  }, [email, regData]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [email, userRegistration]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     if (teamData) {
diff --git a/src/pages/public/Companion/index.js b/src/pages/public/Companion/index.js
index c4fe0b0e..cb62d165 100644
--- a/src/pages/public/Companion/index.js
+++ b/src/pages/public/Companion/index.js
@@ -29,7 +29,7 @@ const Companion = () => {
   const [error, setError] = useState("");
   const [registrations, setRegistrations] = useState([]);
   const [event, setEvent] = useState(null);
-  const [regData, setRegData] = useState(null);
+  const [userRegistration, setUserRegistration] = useState(null);
   const [scheduleData, setScheduleData] = useState([]);
 
   const [isLoading, setIsLoading] = useState(false);
@@ -49,7 +49,7 @@ const Companion = () => {
     const reg = registrations.find((entry) => entry.id === email);
     if (reg) {
       setError("");
-      setRegData(reg);
+      setUserRegistration(reg);
       localStorage.setItem("companionEmail", email);
     } else {
       setError("This email does not match an existing entry our records. Please check that your input is valid and is the same email you used to register for the event. Note that emails are case-sensitive.");
@@ -100,10 +100,10 @@ const Companion = () => {
   }, [email, registrations]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    if (regData) {
-      setScheduleData(options.getScheduleData(regData));
+    if (userRegistration) {
+      setScheduleData(options.getScheduleData(userRegistration));
     }
-  },[regData]);
+  },[userRegistration]);
 
   if (pageError) {
     return (
@@ -114,7 +114,7 @@ const Companion = () => {
   }
 
   return (
-    <CompanionLayout options={options} email={email} setEmail={setEmail} regData={regData} event={event} isLoading={isLoading} error={error}
+    <CompanionLayout options={options} email={email} setEmail={setEmail} registrations={registrations} userRegistration={userRegistration} event={event} isLoading={isLoading} error={error}
       scheduleData={scheduleData}
       ChildComponent={ChildComponent}
     />

From b97c37527c7281722c97ed936be58397687e7dd5 Mon Sep 17 00:00:00 2001
From: Jerry Xu <jerryxu@Jerrys-MacBook-Pro.local>
Date: Thu, 24 Aug 2023 18:22:23 -0700
Subject: [PATCH 2/3] modularized mentors and added it to companion page

---
 .../Companion/components/CompanionLayout.js   |  9 +-
 .../components/mentor/MentorCard.js           | 50 +++++++---
 .../Companion/components/mentor}/Mentors.js   | 91 +++++++++----------
 .../Companion/components/mentor}/SearchBar.js | 61 ++++++-------
 src/pages/public/Companion/events/index.js    | 68 +++++++++++++-
 src/pages/public/Companion/index.js           |  2 +-
 src/router.js                                 |  2 +-
 7 files changed, 180 insertions(+), 103 deletions(-)
 rename src/{ => pages/public/Companion}/components/mentor/MentorCard.js (74%)
 rename src/pages/{admin/Mentors => public/Companion/components/mentor}/Mentors.js (73%)
 rename src/{components/inputs => pages/public/Companion/components/mentor}/SearchBar.js (57%)

diff --git a/src/pages/public/Companion/components/CompanionLayout.js b/src/pages/public/Companion/components/CompanionLayout.js
index d8052ebe..65850767 100644
--- a/src/pages/public/Companion/components/CompanionLayout.js
+++ b/src/pages/public/Companion/components/CompanionLayout.js
@@ -27,7 +27,7 @@ import {
 import {
   constantStyles
 } from "../../../../constants/_constants/companion";
-import Mentors from "pages/admin/Mentors/Mentors";
+import Mentors from "pages/public/Companion/components/mentor/Mentors";
 
 const useStyles = makeStyles((theme) => ({
   textfield: {
@@ -396,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>
@@ -419,7 +424,7 @@ const CompanionLayout = (params) => {
                   <Schedule data={scheduleData} renderMobileOnly={renderMobileOnly} date={date} location={location} styles={styles}/>
                 </FadeInWhenVisible>}
               <ChildComponent userRegistration={userRegistration} email={email} eventID={eventID} year={year} styles={styles} renderMobileOnly={renderMobileOnly} theme={theme} classes={classes} FadeInWhenVisible={FadeInWhenVisible} {...props}/>
-              <Mentors event={event} registrations={registrations} />
+              <Mentors id="Mentors" event={event} registrations={registrations} styles={styles} />
               <div style={{
                 ...styles.text,
                 width: "100%",
diff --git a/src/components/mentor/MentorCard.js b/src/pages/public/Companion/components/mentor/MentorCard.js
similarity index 74%
rename from src/components/mentor/MentorCard.js
rename to src/pages/public/Companion/components/mentor/MentorCard.js
index 28604c9d..eb24150d 100644
--- a/src/components/mentor/MentorCard.js
+++ b/src/pages/public/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,6 +27,16 @@ 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,
@@ -31,10 +44,23 @@ const useStyles = makeStyles({
     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}>
diff --git a/src/pages/admin/Mentors/Mentors.js b/src/pages/public/Companion/components/mentor/Mentors.js
similarity index 73%
rename from src/pages/admin/Mentors/Mentors.js
rename to src/pages/public/Companion/components/mentor/Mentors.js
index a3e0540f..bc17802f 100644
--- a/src/pages/admin/Mentors/Mentors.js
+++ b/src/pages/public/Companion/components/mentor/Mentors.js
@@ -1,12 +1,9 @@
 import React, {
   useEffect, useState
 } from "react";
+import MentorCard from "pages/public/Companion/components/mentor/MentorCard";
 import {
-  Helmet
-} from "react-helmet";
-import MentorCard from "components/mentor/MentorCard";
-import {
-  Box, Chip, Grid, CircularProgress
+  Box, Chip, Grid, CircularProgress, Typography
 } from "@material-ui/core";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import {
@@ -15,10 +12,7 @@ import {
 import {
   makeStyles
 } from "@material-ui/core/styles";
-import SearchBar from "components/inputs/SearchBar";
-import {
-  COLORS
-} from "constants/index";
+import SearchBar from "pages/public/Companion/components/mentor/SearchBar";
 
 const useStyles = makeStyles({
   mainContainer: {
@@ -36,7 +30,7 @@ const useStyles = makeStyles({
     width: "90%",
     "&:after": {
       content: "",
-      flex: "auto"
+      flex: "auto",
     }
   },
   mobileMentorsContainer: {
@@ -47,26 +41,24 @@ const useStyles = makeStyles({
     alignItems: "center",
     width: "90%",
   },
+  mentorsGridItem: {
+    flex: "0 0 calc(33.33% - 15px)",
+    marginBottom: "15px",
+  },
   filterContainer: {
     margin: "0% 2% 0% 2%",
-    border: "solid white 2px",
-    borderRadius: "10px",
-    background: COLORS.WHITE,
     padding: "1%",
   },
   mobileFilterContainer: {
-    margin: "0% 2% 0% 2%",
-    border: "solid white 2px",
-    borderRadius: "10px",
-    background: COLORS.WHITE,
     padding: "1%",
   },
   chip: {
-    borderRadius: "10px"
+    borderRadius: "10px",
+    backgroundColor:"transparent",
   },
   skillChip: {
     marginTop: "10px",
-    marginLeft: "10px"
+    marginLeft: "10px",
   },
   skillContainer: {
     display: "flex",
@@ -74,34 +66,21 @@ const useStyles = makeStyles({
     flexWrap: "wrap",
     minHeight: "50px",
     marginTop: "1%",
-    marginBottom: "1%"
+    marginBottom: "1%",
   },
   gridContainer: {
     alignItems: "center",
     justifyContent: "center",
-    overflow: "hidden"
+    overflow: "hidden",
   },
   gridItem: {
-    // border: "solid yellow 2px",
-    overflow: "hidden"
+    overflow: "hidden",
   },
-  backButton: {
-    display: "flex",
-    fontSize: "1.1rem",
-    padding: "1% 0 1% 2%",
-    color: "white"
-  },
-  mobileBackButton: {
-    display: "flex",
-    fontSize: "1.1rem",
-    padding: "1% 0 2% 2%",
-    color: "white"
-  }
 });
 
 function Mentors(props) {
   const {
-    event, regData
+    event, registrations, styles
   } = props;
   const theme = useTheme();
   const classes = useStyles();
@@ -124,7 +103,7 @@ function Mentors(props) {
 
   useEffect(() => {
     const fetchMentors = async () => {
-      const mentorsList = regData.filter(response => {
+      const mentorsList = registrations.filter(response => {
         return response.isPartner === true;
       });
 
@@ -154,12 +133,11 @@ function Mentors(props) {
     };
   }, [searchQuery]);
 
-  // TODO: Add data cleaning to ensure taht all partner skills are lowercase
   const filterMentors = () => {
     const newFilteredMentors = mentors.filter(mentor => {
       let skillMatch = false;
       searchQuery.forEach((skill) => {
-        if (mentor.skills.includes(skill.toLowerCase())) skillMatch = true;
+        if (mentor.skills.map(mentorSkill => mentorSkill.toLowerCase()).includes(skill.toLowerCase())) skillMatch = true;
       });
       return skillMatch;
     });
@@ -175,15 +153,14 @@ function Mentors(props) {
     <>
       { event ?
         <>
-          <Helmet>
-            <title>{event.ename} Mentors</title>
-          </Helmet>
-          <div className={classes.mainContainer}>
+          <div id="Mentors" className={classes.mainContainer}>
+            <h1 style={renderMobileOnly ? styles.mobileTitle : styles.title}>Mentors</h1>
             <div className={renderMobileOnly ? classes.mobileMentorsContainer : classes.mentorsContainer}>
-              <Grid container spacing={6}>
+              <Grid container spacing={1}>
                 <Grid item xs={12} sm={12} md={12} className={classes.gridItem}>
                   <Box className={renderMobileOnly ? classes.mobileFilterContainer : classes.filterContainer}>
-                    <SearchBar setSearchQuery={setSearchQuery} searchQuery={searchQuery}/>
+                    <SearchBar setSearchQuery={setSearchQuery} searchQuery={searchQuery} />
+                    {searchQuery.length !== 0 &&
                     <Box className={classes.skillContainer}>
                       {
                         searchQuery.map((skill, idx) => {
@@ -191,6 +168,7 @@ function Mentors(props) {
                             <Chip
                               key={idx}
                               label={skill}
+                              variant="outlined"
                               classes={{
                                 root: classes.chip
                               }}
@@ -201,11 +179,25 @@ function Mentors(props) {
                           );
                         })
                       }
-                    </Box>
+                    </Box>}
                   </Box>
                 </Grid>
-                {filteredMentors.map((mentor, idx) => (
-                  <Grid key={idx} item xs={12} sm={6} md={4} className={classes.gridItem}>
+                {filteredMentors.length === 0 ? (
+                  <Grid item xs={12} className={classes.gridItem}>
+                    <Box
+                      height="100%"
+                      width="100%"
+                      display="flex"
+                      justifyContent="center"
+                      alignItems="center"
+                    >
+                      <Typography variant="body1" color="textSecondary">
+                        No mentors found. Please try another filter.
+                      </Typography>
+                    </Box>
+                  </Grid>
+                ) : (filteredMentors.map((mentor, idx) => (
+                  <Grid key={idx} item xs={6} sm={6} md={3} className={classes.gridItem}>
                     <Box
                       height="100%"
                       width="100%"
@@ -216,7 +208,8 @@ function Mentors(props) {
                       <MentorCard key={idx} mentor={mentor} />
                     </Box>
                   </Grid>
-                ))}
+                ))
+                )}
               </Grid>
             </div>
           </div> </>: <CircularProgress />}
diff --git a/src/components/inputs/SearchBar.js b/src/pages/public/Companion/components/mentor/SearchBar.js
similarity index 57%
rename from src/components/inputs/SearchBar.js
rename to src/pages/public/Companion/components/mentor/SearchBar.js
index bd3c5e7d..bc644d54 100644
--- a/src/components/inputs/SearchBar.js
+++ b/src/pages/public/Companion/components/mentor/SearchBar.js
@@ -3,39 +3,30 @@ import React, {
 } from "react";
 import SearchIcon from "@material-ui/icons/Search";
 import {
+  InputAdornment,
   TextField
 } from "@material-ui/core";
 import {
   makeStyles
 } from "@material-ui/core/styles";
 import {
-  COLORS
-} from "constants/index";
+  constantStyles
+} from "../../../../../constants/_constants/companion";
 
 const useStyles = makeStyles({
   textfield: {
-    border: "solid white 2px",
-    borderRadius: "10px",
-    "& label.Mui-focused": {
-      color: "white"
+    flexGrow: "1",
+    "& .MuiInput-underline:before": {
+      borderBottom: "none",
     },
-    "& .MuiOutlinedInput-root": {
-      backgroundColor: COLORS.LIGHT_BACKGROUND_COLOR,
-      borderRadius: "10px",
-      "& fieldset": {
-        borderColor: COLORS.LIGHT_BACKGROUND_COLOR
-      },
-      "&:hover fieldset": {
-        borderColor: COLORS.LIGHT_BACKGROUND_COLOR
-      },
-      "&.Mui-focused fieldset": {
-        borderColor: COLORS.LIGHT_BACKGROUND_COLOR
-      }
+    "& .MuiInput-underline:after": {
+      borderBottom: "none",
     },
   },
   searchIcon: {
-    cursor: "pointer"
-  }
+    cursor: "pointer",
+    flex: "none",
+  },
 });
 
 function SearchBar ({
@@ -63,34 +54,36 @@ function SearchBar ({
   return (
     <>
       <div style={{
+        width: "100%",
         display: "flex",
         alignItems: "center",
-        gap: "1%"
       }}>
         <TextField
           id="search-bar"
           className={classes.textfield}
           onKeyDown={handleEnterKeyPress}
-          style={{
-            backgroundColor: COLORS.LIGHT_BACKGROUND_COLOR,
-            color: "black"
-          }}
           variant="outlined"
-          placeholder="Enter a skill..."
+          placeholder="Filter by skills..."
           size="small"
+          color="primary"
+          fullWidth
+          flex="1"
           inputRef={searchRef}
+          InputProps={{
+            style: {
+              color: constantStyles.textColor,
+            },
+            endAdornment:
+            <InputAdornment position="end">
+              <SearchIcon style={{
+                color:constantStyles.textColor,
+              }} onClick={handleSearchClick} className={classes.searchIcon}/>
+            </InputAdornment>
+          }}
           InputLabelProps={{
             shrink: false,
           }}
         />
-        <div style={{
-          transform: "translateX(-50px)",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center"
-        }}>
-          <SearchIcon onClick={handleSearchClick} className={classes.searchIcon}/>
-        </div>
       </div>
     </>
   );
diff --git a/src/pages/public/Companion/events/index.js b/src/pages/public/Companion/events/index.js
index 1684c997..51ecf96a 100644
--- a/src/pages/public/Companion/events/index.js
+++ b/src/pages/public/Companion/events/index.js
@@ -3,8 +3,72 @@ import BizTechDBLogo from "../../../../assets/2023/data&beyond/BizTechD&BLogo.pn
 import DBLogo from "../../../../assets/2023/data&beyond/D&BLogo.png";
 
 export default [
+  { /* TODO: This hello hacks component is incomplete and exists only for the sake of testing out how mentors list looks */
+  /* Date indicating when event ends, this also indicates which app the companion app will render, to be safe, but a couple days after event ends */
+    activeUntil: new Date(new Date("10-01-2023").getTime() + (7 * 24 * 60 * 60 * 1000)),
+    /* id of event in dynamodb, used for queries */
+    eventID: "hello-hacks",
+    /* year of event in dynamodb, used for queries */
+    year: 2023,
+    /* component for event body */
+    ChildComponent: DataAndBeyond2023,
+    /* options defining params for the companionLayout */
+    options: {
+    /* Biztech logo for event */
+      BiztechLogo: BizTechDBLogo,
+      /* Logo for event */
+      Logo: DBLogo,
+      /* Displayed title of event */
+      title: "Hello Hacks",
+      /* Displayed date of event */
+      date: "Saturday, September 30th",
+      /* Displayed location of event */
+      location: "TBD",
+      /* color theme of event */
+      colors: {
+        primary: "linear-gradient(180deg, #614AD7, #719DF8)",
+        background: "linear-gradient(180deg, #e3edf7, #e3edf7)",
+      },
+      /* function to return schedule of event, schedule is an array of date and title, regData is the responses of a registration */
+      getScheduleData: (regData) => [
+        {
+          date: "5:30 pm - 6:00 pm",
+          title: "Registration & Check in",
+        },
+        {
+          date: "6:00 pm - 6:15 pm",
+          title: "Opening (BizTech and BOLT Introduction)",
+        },
+        {
+          date: "6:15 pm - 6:30 pm",
+          title: "Keynote Speech",
+        },
+        {
+          date: "6:30 pm - 7:00 pm",
+          title: `Workshop: ${regData.dynamicResponses["a3f58578-219c-4e8f-b4be-8af8f6b9e1fb"]}`,
+        },
+        {
+          date: "7:30 pm - 8:00 pm",
+          title: "Data Challenge",
+        },
+        {
+          date: "8:00 pm - 9:00 pm",
+          title: "Boothing and Networking Session",
+        }
+      ],
+      /* Array of welcome paragraphs for event, each new index is a new paragraph */
+      welcomeData: [
+        "placeholder"
+      ],
+      /* Array of header tabs to navigate for event, id is the id of the div in app, and text is the heaidng text */
+      headers: [{
+        text: "Partners",
+        id: "Partners"
+      }]
+    }
+  },
   {
-    /* Date indicating when event ends, this also indicates which app the companion app will render, to be safe, but a couple days after event ends */
+  /* Date indicating when event ends, this also indicates which app the companion app will render, to be safe, but a couple days after event ends */
     activeUntil: new Date(new Date("2023-03-17").getTime() + (7 * 24 * 60 * 60 * 1000)),
     /* id of event in dynamodb, used for queries */
     eventID: "data-and-beyond",
@@ -14,7 +78,7 @@ export default [
     ChildComponent: DataAndBeyond2023,
     /* options defining params for the companionLayout */
     options: {
-      /* Biztech logo for event */
+    /* Biztech logo for event */
       BiztechLogo: BizTechDBLogo,
       /* Logo for event */
       Logo: DBLogo,
diff --git a/src/pages/public/Companion/index.js b/src/pages/public/Companion/index.js
index cb62d165..70b9a31f 100644
--- a/src/pages/public/Companion/index.js
+++ b/src/pages/public/Companion/index.js
@@ -32,7 +32,7 @@ const Companion = () => {
   const [userRegistration, setUserRegistration] = useState(null);
   const [scheduleData, setScheduleData] = useState([]);
 
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   const events = Events.sort((a, b) => {
     return  a.activeUntil - b.activeUntil;
diff --git a/src/router.js b/src/router.js
index 9b1b215e..51b1f095 100644
--- a/src/router.js
+++ b/src/router.js
@@ -40,7 +40,7 @@ import PublicEventRoutes from "pages/public/Event";
 
 import Redeem from "pages/public/Gamification/Redeem";
 import Redemption from "pages/public/Gamification/Redemption";
-import Mentors from "pages/admin/Mentors/Mentors.js";
+import Mentors from "pages/public/Companion/components/mentor/Mentors.js";
 
 import {
   setUser,

From 36a883aa4a881b3518989bc48aa0db96b41f339b Mon Sep 17 00:00:00 2001
From: Jerry Xu <jerryxu@Jerrys-MacBook-Pro.local>
Date: Thu, 24 Aug 2023 18:23:39 -0700
Subject: [PATCH 3/3] removed mentors path on router

---
 src/router.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/router.js b/src/router.js
index 51b1f095..29749acf 100644
--- a/src/router.js
+++ b/src/router.js
@@ -40,7 +40,6 @@ import PublicEventRoutes from "pages/public/Event";
 
 import Redeem from "pages/public/Gamification/Redeem";
 import Redemption from "pages/public/Gamification/Redemption";
-import Mentors from "pages/public/Companion/components/mentor/Mentors.js";
 
 import {
   setUser,
@@ -160,7 +159,6 @@ class Router extends Component {
           path="/companion/reset"
           render={() => <CompanionReset />}
         />
-        <Route path="/companion/mentors" render={() => <Mentors />} />
         <Route path="/companion" render={() => <Companion />} />
         <Route path="/leaderboard" render={() => <Leaderboard />} />
         {/* ADMIN ROUTES */}