Merge pull request #439 from ubc-biztech/mentors-list

Mentors list

src/components/inputs/SearchBar.js

@@ -0,0 +1,99 @@
+import React, {
+  useRef
+} from "react";
+import SearchIcon from "@material-ui/icons/Search";
+import {
+  TextField
+} from "@material-ui/core";
+import {
+  makeStyles
+} from "@material-ui/core/styles";
+import {
+  COLORS
+} from "constants/index";
+
+const useStyles = makeStyles({
+  textfield: {
+    border: "solid white 2px",
+    borderRadius: "10px",
+    "& label.Mui-focused": {
+      color: "white"
+    },
+    "& .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
+      }
+    },
+  },
+  searchIcon: {
+    cursor: "pointer"
+  }
+});
+
+function SearchBar ({
+  setSearchQuery, searchQuery
+}) {
+  const classes = useStyles();
+  const searchRef = useRef(null);
+
+  const handleEnterKeyPress = (e) => {
+    if (e.keyCode === 13 && e.target.value !== "") {
+      e.preventDefault();
+      setSearchQuery([...searchQuery, e.target.value]);
+      e.target.value = "";
+    }
+  };
+
+  const handleSearchClick = (e) => {
+    if (searchRef.current.value !== "") {
+      e.preventDefault();
+      setSearchQuery([...searchQuery, searchRef.current.value]);
+      searchRef.current.value = "";
+    }
+  };
+
+  return (
+    <>
+      <div style={{
+        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..."
+          size="small"
+          inputRef={searchRef}
+          InputLabelProps={{
+            shrink: false,
+          }}
+        />
+        <div style={{
+          transform: "translateX(-50px)",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        }}>
+          <SearchIcon onClick={handleSearchClick} className={classes.searchIcon}/>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SearchBar;

src/components/mentor/MentorCard.js

@@ -0,0 +1,110 @@
+import React from "react";
+import {
+  Avatar, Typography, Box, Chip
+} from "@material-ui/core";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+import {
+  makeStyles
+} from "@material-ui/core/styles";
+import {
+  useTheme
+} from "@material-ui/styles";
+import {
+  COLORS
+} from "constants/index";
+
+const useStyles = makeStyles({
+  profileContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    backgroundColor: COLORS.WHITE,
+    borderRadius: "10px",
+    padding: "6%",
+    height: "100%",
+    width: "100%",
+  },
+  name: {
+    marginTop: "2%",
+    color: COLORS.LIGHT_BACKGROUND_COLOR,
+    fontSize: "1.5rem",
+    fontWeight: "bold",
+    textAlign: "center"
+  },
+  position: {
+    marginTop: "2%",
+    color: COLORS.LIGHT_BACKGROUND_COLOR,
+    fontSize: "1.2rem",
+    textAlign: "center"
+  },
+  skill: {
+    marginTop: "2%"
+  },
+  profilePicture: {
+    width: "150px",
+    height: "150px",
+    backgroundColor: COLORS.LIGHT_BACKGROUND_COLOR
+  },
+  container: {
+    height: "100%",
+    flex: "0 3 350px",
+    display: "flex",
+    // border: "solid red 2px"
+  },
+  skillsContainer: {
+    display: "flex",
+    justifyContent: "left",
+    marginTop: "5%",
+    flexWrap: "wrap",
+    gap: "0.3vw 0.3vh"
+  },
+  mobileContainer: {
+    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) {
+  const classes = useStyles();
+  const theme = useTheme();
+  const renderMobileOnly = useMediaQuery(theme.breakpoints.down("sm"));
+  const {
+    fname, lname, role, gender, companyName, profilePhoto, skills
+  } = props.mentor;
+
+  return (
+    <>
+      <Box className={renderMobileOnly ? classes.mobileContainer : classes.container }>
+        <Box className={renderMobileOnly ? classes.mobileProfileContainer : classes.profileContainer}>
+          <Avatar
+            alt={`${fname}-profile-picture`}
+            src={profilePhoto}
+            className={classes.profilePicture} />
+          <Typography className={classes.name}>
+            {fname + ", " + lname + " " + `(${gender})`}
+          </Typography>
+          <Typography className={classes.position}>
+            {role + " at " + companyName}
+          </Typography>
+          <div className={classes.skillsContainer}>
+            {
+              skills.map((skill, idx) => <Chip key={idx} label={skill} variant="outlined"/>)
+            }
+          </div>
+        </Box>
+      </Box>
+    </>
+  );
+}
+
+export default MentorCard;

src/pages/admin/DynamicForm/FormCreate.js

@@ -801,7 +801,8 @@ const FormCreate = (props) => {
     type: Yup.mixed().oneOf(["TEXT", "SELECT", "CHECKBOX", "UPLOAD"]).required(),
     label: Yup.string().required("Question is a required field"),
     choices: Yup.string(),
-    required: Yup.boolean().required()
+    required: Yup.boolean().required(),
+    isSkillsQuestion: Yup.boolean()
   });
 
   const validationSchema = Yup.object({

src/pages/admin/DynamicForm/components/CustomQuestion.js

@@ -57,7 +57,7 @@ const CustomQuestion = (props) => {
   } = props;
 
   const {
-    type, label, choices, questionImageUrl, charLimit, required
+    type, label, choices, questionImageUrl, charLimit, required, isSkillsQuestion
   } = props.data;
   const questionStyles = {
     // -------- QUESTION COMPONENT STYLES ----------
@@ -100,11 +100,16 @@ const CustomQuestion = (props) => {
       flexDirection: "column",
       justifyContent: "center"
     },
-    requiredContainer: {
+    checkboxContainer: {
       display: "flex",
       justifyContent: "flex-end",
       alignItems: "center",
       color: "rgba(255,255,255,0.8)"
+    },
+    checkboxWrapper: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "flex-end"
     }
   };
 
@@ -240,18 +245,31 @@ const CustomQuestion = (props) => {
             value={choices}
           />
         )}
-
-        <div style={questionStyles.requiredContainer}>
+        <div style={questionStyles.checkboxWrapper}>
+          <div style={questionStyles.checkboxContainer}>
+          Skills Question?
+            <Checkbox
+              id={`${id}.isSkillsQuestion`}
+              name={`${name}.isSkillsQuestion`}
+              color="primary"
+              aria-label="Skills question?"
+              checked={isSkillsQuestion}
+              onChange={handleChange}
+              onBlur={handleBlur}
+            />
+          </div>
+          <div style={questionStyles.checkboxContainer}>
           Required?
-          <Checkbox
-            id={`${id}.required`}
-            name={`${name}.required`}
-            color="primary"
-            aria-label="Required question?"
-            checked={required}
-            onChange={handleChange}
-            onBlur={handleBlur}
-          />
+            <Checkbox
+              id={`${id}.required`}
+              name={`${name}.required`}
+              color="primary"
+              aria-label="Required question?"
+              checked={required}
+              onChange={handleChange}
+              onBlur={handleBlur}
+            />
+          </div>
         </div>
       </div>
     </div>