update roster card view

client/src/components/LessonCard.js

@@ -7,10 +7,9 @@ import moment from 'moment';
 import { handleErrors } from '../utils/helpers';
 import '../stylesheets/LessonCard.css';
 
-// const { TextArea } = Input;
 const LessonCard = props => {
   const { isMentor, lessonDetails, deleteHandler, pool } = props;
-  const { id, title, summary, date } = lessonDetails; // get notes here
+  const { id, title, summary, date } = lessonDetails;
 
   const [showModal, setShowModal] = useState(false);
   const [showEditModal, setShowEditModal] = useState(false);

client/src/components/Roster.js

@@ -7,33 +7,40 @@ import 'antd/dist/antd.css';
 const Roster = props => {
   const { ismentor } = props;
 
-  const [roster, setRoster] = useState([]);
+  const [mentorRoster, setMentorRoster] = useState([]);
+  const [studentRoster, setStudentRoster] = useState([]);
 
   useEffect(() => {
     const tok = localStorage.getItem('anovaToken');
     const dTok = decode(tok);
 
-    let rosterFetchCall = `/api/v1/roster?uid=${dTok.id}`;
-    if (ismentor) {
-      rosterFetchCall += '&roleToRetrieve=student';
-    } else {
-      rosterFetchCall += '&roleToRetrieve=mentor';
-    }
+    fetch(`/api/v1/roster?uid=${dTok.id}&roleToRetrieve=mentor`)
+      .then(res => res.json())
+      .then(roster => {
+        setMentorRoster(roster);
+      });
 
-    fetch(rosterFetchCall)
+    fetch(`/api/v1/roster?uid=${dTok.id}&roleToRetrieve=student`)
       .then(res => res.json())
       .then(roster => {
-        setRoster(roster);
+        setStudentRoster(roster);
       });
   }, [ismentor]);
 
-  const rosterCards = roster.map(person => (
+  const mentorRosterCards = mentorRoster.map(person => (
+    <RosterCard key={person.id} person={person} mentor={ismentor} />
+  ));
+
+  const studentRosterCards = studentRoster.map(person => (
     <RosterCard key={person.id} person={person} mentor={ismentor} />
   ));
 
   return (
     <div className="container">
-      <div className="containerGrid">{rosterCards}</div>
+      <h1 style={{ height: 'inherit' }}>Mentors</h1>
+      <div className="containerGrid">{mentorRosterCards}</div>
+      <h1 style={{ marginTop: '30px', height: 'inherit' }}>Students</h1>
+      <div className="containerGrid">{studentRosterCards}</div>
     </div>
   );
 };

client/src/components/SignUp.js

@@ -16,18 +16,6 @@ import { useHistory, withRouter } from 'react-router-dom';
 const { Option } = Select;
 
 const SignUp = () => {
-  // constructor(props) {
-  //   super(props);
-  //   this.state = {
-  //     redirect: false,
-  //     sites: [],
-  //     role: '',
-  //     siteId: '',
-  //     siteCode: '',
-  //   };
-  //   this._submit = this._submit.bind(this);
-  // }
-
   const [redirect, setRedirect] = useState(false);
   const [sites, setSites] = useState([]);
   const [role, setRole] = useState('');
@@ -52,39 +40,29 @@ const SignUp = () => {
 
   useEffect(() => {
     if (getAnovaToken() !== null) {
-      // this.setState({ redirect: true });
       setRedirect(true);
     }
     fetch('/api/v1/site/allSites')
       .then(res => res.json())
       .then(
         sites => {
-          // this.setState({
-          //   sites,
-          // });
           setSites(sites);
         },
         error => {
-          // this.setState({
-          //   error,
-          // });
           setError(error);
         },
       );
   }, []);
 
   const onSelectSiteChange = siteId => {
-    // this.setState({ siteId });
     setSiteId(siteId);
   };
 
   const onSelectRoleChange = role => {
-    // this.setState({ role });
     setRole(role);
   };
 
   const _checkAccess = event => {
-    // this.setState({ siteCode: event.target.value });
     setSiteCode(event.target.value);
   };
 
@@ -123,8 +101,6 @@ const SignUp = () => {
   const _submit = event => {
     const googleToken = getGoogleToken();
 
-    // const { role, siteId, siteCode, sites } = this.state;
-
     if (!googleToken) {
       Modal.error({
         title: 'Please register with Google.',

client/src/stylesheets/Roster.css

@@ -3,14 +3,14 @@
 .container {
   background-color: #e6f4fc;
   margin: 0;
-  padding: 100px 10px;
+  padding: 100px 100px;
   width: 100vw;
   height: 100%;
   min-height: 100vh;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-bottom: 200px;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
 }
 
 .containerGrid {