Restructure front end for new course/assignment/signup flow.

client/app/actions/types.js

@@ -3,3 +3,7 @@ export const SET_DETAILS = 'SET_DETAILS';
 export const GET_ERRORS = 'GET_ERRORS';
 export const CLEAR_ERRORS = 'CLEAR_ERRORS';
 export const LOGOUT_USER = 'LOGOUT_USER';
+export const FETCHED_PROFS = 'FETCHED_PROFS';
+export const FETCHED_STUDENTS = 'FETCHED_STUDENTS';
+export const CLEARED_PROFS = 'CLEARED_PROFS';
+export const CLEARED_STUDENTS = 'CLEARED_STUDENTS';

client/app/components/Layout/Navbar.js

@@ -27,15 +27,15 @@ class NavbarClass extends Component {
   constructor() {
     super();
     this.state = {
-      signInUsn: "",
+      signInEmail: "",
       signInpassword: "",
       loginShow: true,
       navbarIsOpen: false
     };
 
     this.toggle = this.toggle.bind(this);
     this.onSignIn = this.onSignIn.bind(this);
-    this.onTextboxChangeSignInUsn = this.onTextboxChangeSignInUsn.bind(this);
+    this.onTextboxChangeSignInEmail = this.onTextboxChangeSignInEmail.bind(this);
     this.onTextboxChangeSignInPassword = this.onTextboxChangeSignInPassword.bind(this);
   };
 
@@ -52,18 +52,18 @@ class NavbarClass extends Component {
 
   }
 
-  onTextboxChangeSignInUsn(event) {
+  onTextboxChangeSignInEmail(event) {
     event.preventDefault();
     this.setState({
-      signInUsn: event.target.value,
+      signInEmail: event.target.value,
     });
 
   }
 
   onSignIn(event) {
     event.preventDefault();
     const user = {
-      usn: this.state.signInUsn,
+      email: this.state.signInEmail,
       password: this.state.signInPassword
     };
 
@@ -137,8 +137,8 @@ class NavbarClass extends Component {
         <Nav className="ml-auto" navbar>
           <Form inline onSubmit={this.onSignIn}>
             <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
-              <Label for="usn" hidden>USN</Label>
-              <Input type="text" name="usn" id="usn" placeholder="USN" required onChange={this.onTextboxChangeSignInUsn} />
+              <Label for="email" hidden>Email</Label>
+              <Input type="text" name="email" id="email" placeholder="Email" required onChange={this.onTextboxChangeSignInEmail} />
             </FormGroup>
             {' '}
             <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
@@ -160,6 +160,10 @@ class NavbarClass extends Component {
             <DropdownItem tag={Link} to="/forgotPassword">
                 Forgot Password
             </DropdownItem>
+            <DropdownItem divider />
+            <DropdownItem tag={Link} to="/signup">
+                Signup
+            </DropdownItem>
             </DropdownMenu>
           </UncontrolledDropdown>
         </Nav>

client/app/components/Pages/Assignments/AssignmentCard.js

@@ -89,9 +89,9 @@ class AssignmentCard extends Component {
     let content;
     const profContent = (
       <div id="AssignmentCard">
-        <div className="card bg-light mx-auto">
-          <div className="card-title"><h3><i>{this.props.uniqueID}</i>: <strong>{this.props.name}</strong></h3></div>
+        <div className="card bg-light mx-auto">          
           <div className="card-body text-left">
+            <div className="card-title"><h3><i>{this.props.uniqueID}</i>: <strong>{this.props.name}</strong></h3></div>
             Description: {this.props.details}<br />
             Type: {this.props.type}<br />
             Due Date: {this.props.dueDate}<br />

client/app/components/Pages/Assignments/Assignments.js

@@ -5,133 +5,135 @@ import AssignmentCard from './AssignmentCard';
 import ReactLoading from './../../common/Loading';
 
 class Assignments extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isLoading: true,
-      courses: [],
-      role: "student",
-      assignments: []
-    };
-  }
-  componentDidMount() {
-    var self = this;
-    var token = localStorage.getItem('token');
-    var userID = localStorage.getItem('user_id');
+  	constructor(props) {
+    	super(props);
+    	this.state = {
+      	isLoading: true,
+      	courses: [],
+      	role: "student",
+      	assignments: []
+    	};
+  	}
+  	componentDidMount() {
+    	var self = this;
+    	var token = localStorage.getItem('token');
+    	var userID = localStorage.getItem('user_id');
 
-    var apiPath = '/api/account/' + userID + '/details'
-    axios.get(apiPath, {
-      headers: {
-        'x-access-token': token,
-        'Content-Type': 'application/json'
-      }
-    })
-      .then(function (response) {
-        if (!response.data.success) {
-          // TODO: throw appropriate error and redirect
-          console.log("Error1: " + response.data);
-          return;
-        }
-        var data = response.data;
-        self.setState({
-          role: data.user.role
-        });
-      })
-      .catch(function (error) {
-        console.log(error);
-        if (error.response) {
-          if (error.response.status) {
-            alert("Session timed out.");
-            window.location.href = '/';
-          }
-        }
-      });
-    var apiPath = '/api/assignments/' + userID + '/courses'
-    axios.get(apiPath, {
-      headers: {
-        'x-access-token': token,
-        'Content-Type': 'application/json'
-      }
-    })
-      .then(function (response) {
-        if (!response.data.success) {
-          // TODO: throw appropriate error and redirect
-          console.log("Error1: " + response.data);
-          <Redirect to="/" />
-        }
-        var data = response.data;
-        // console.log(data);
-        self.setState({ isLoading: false });
-        self.setState({
-          courses: data.courses
-        });
-        var courses = data.courses;
-        for (var i = 0; i < courses.length; i++) {
-          var apiPath = '/api/assignments/' + courses[i]._id + '/' + userID + '/new';
-          axios.get(apiPath, {
-            headers: {
-              'x-access-token': token,
-              'Content-Type': 'application/json'
-            }
-          })
-            .then(function (response) {
-              if (!response.data.success) {
-                console.log("Error1: " + response.data);
-              }
-              var data = response.data;
-              self.setState({
-                assignments: self.state.assignments.concat(data.assignments.assignments)
-              });
-              console.log(response.data);
-            })
-            .catch(function (error) {
-              console.log('Error2: ', error);
-            });
-        }// End of for loop
-      })
-  }
-  render() {
-    let content;
-    const profContent = (
-      <div>
-        {
-          this.state.assignments.length < 1 &&
-          <div className="lead text-center mb-2">Sorry, no assignments found.</div>
-        }
-        {
-          this.state.assignments.map(function (each) {
-            return <AssignmentCard key={each.uniqueID} uniqueID={each.uniqueID} name={each.name} details={each.details} type={each.type.toUpperCase()} maxMarks={each.maxMarks} resourceUrl={each.resourceUrl} assignmentID={each._id} submissions={each.submissions} role='prof' />
-          })
-        }
-        <div className="text-center"><a href="/" className="btn btn-dark" role="button">Home</a></div>
-      </div>
-    );
-    const studContent = (
-      <div>
-        {
-          this.state.assignments.length < 1 &&
-          <div className="lead text-center mb-2" style={{ color: "white" }}>Sorry, no new assignments found.</div>
-        }
-        {
-          this.state.assignments.map(function (each) {
-            return <AssignmentCard key={each.uniqueID} uniqueID={each.uniqueID} name={each.name} details={each.details} type={each.type.toUpperCase()} maxMarks={each.maxMarks} resourceUrl={each.resourceUrl} assignmentID={each._id} submissions={each.submissions} role='student' />
-          })
-        }
-        <div className="text-center"><a href="/" className="btn btn-dark" role="button">Home</a></div>
-      </div>
-    );
-    if (this.state.role == "prof") {
-      content = profContent;
-    }
-    else {
-      content = studContent;
-    }
-    if (this.state.isLoading)
-      return <ReactLoading/>;
-    else
-      return (
-        <div>{content}</div>
-      );
-  }
+    	var apiPath = '/api/account/' + userID + '/details'
+    	axios.get(apiPath, {
+      		headers: {
+        		'x-access-token': token,
+        		'Content-Type': 'application/json'
+      		}
+    	})
+      	.then(function (response) {
+			if (!response.data.success) {
+				// TODO: throw appropriate error and redirect
+				console.log("Error1: " + response.data);
+				return;
+        	}
+        	var data = response.data;
+        	self.setState({
+          		role: data.user.role
+        	});
+    	})
+      	.catch(function (error) {
+        	console.log(error);
+        	if (error.response) {
+          		if (error.response.status) {
+            		alert("Session timed out.");
+            		window.location.href = '/';
+          		}
+        	}
+      	});
+    	var apiPath = '/api/assignments/' + userID + '/courses';
+    	axios.get(apiPath, {
+      		headers: {
+        		'x-access-token': token,
+        		'Content-Type': 'application/json'
+      		}
+    	})
+      	.then(function (response) {
+        	if (!response.data.success) {
+          	// TODO: throw appropriate error and redirect
+				console.log("Error1: " + response.data);
+				<Redirect to="/" />
+        	}
+        	var data = response.data;
+        	// console.log(data);
+        	self.setState({ isLoading: false });
+        	self.setState({
+          		courses: data.courses
+        	});
+        	var courses = data.courses;
+        	for (var i = 0; i < courses.length; i++) {
+          		var apiPath = '/api/assignments/' + courses[i]._id + '/' + userID + '/new';
+          		axios.get(apiPath, {
+            		headers: {
+						'x-access-token': token,
+						'Content-Type': 'application/json'
+            		}
+          		})
+            	.then(function (response) {
+              		if (!response.data.success) {
+                		console.log("Error1: " + response.data);
+              		}
+              		var data = response.data;
+              		self.setState({
+                		assignments: self.state.assignments.concat(data.assignments.assignments)
+              		});
+              		console.log(response.data);
+            	})
+            	.catch(function (error) {
+              		console.log('Error2: ', error);
+            	});
+        	}// End of for loop
+      	})
+  	}
+
+	render() {
+    	let content;
+    	const profContent = (
+      		<div>
+				{
+					this.state.assignments.length < 1 &&
+					<div className="lead text-center mb-2">Sorry, no assignments found.</div>
+				}
+				{
+					this.state.assignments.map(function (each) {
+						return <AssignmentCard key={each.uniqueID} uniqueID={each.uniqueID} name={each.name} details={each.details} type={each.type.toUpperCase()} maxMarks={each.maxMarks} resourceUrl={each.resourceUrl} assignmentID={each._id} submissions={each.submissions} role='prof' />
+					})
+				}
+				<div className="text-center"><a href="/" className="btn btn-dark" role="button">Home</a></div>
+			</div>
+	    );
+    	const studContent = (
+      		<div>
+				{
+					this.state.assignments.length < 1 &&
+					<div className="lead text-center mb-2" style={{ color: "white" }}>Sorry, no new assignments found.</div>
+				}
+				{
+					this.state.assignments.map(function (each) {
+						return <AssignmentCard key={each.uniqueID} uniqueID={each.uniqueID} name={each.name} details={each.details} type={each.type.toUpperCase()} maxMarks={each.maxMarks} resourceUrl={each.resourceUrl} assignmentID={each._id} submissions={each.submissions} role='student' />
+					})
+				}
+				<div className="text-center"><a href="/" className="btn btn-dark" role="button">Home</a></div>
+      		</div>
+    	);
+    	if (this.state.role == "prof") {
+      		content = profContent;
+    	}
+    	else {
+      		content = studContent;
+    	}
+    	if (this.state.isLoading)
+      		return <ReactLoading/>;
+    	else
+      		return (
+        		<div>{content}</div>
+      		);
+  	}
 }
+
 export default Assignments;