diff --git a/app.js b/app.js
index 08bb645..f7c58e5 100644
--- a/app.js
+++ b/app.js
@@ -16,16 +16,17 @@ app.use(morgan('dev'));
app.use('/student', Student);
app.use('/test', Test);
+// for any static files, refer to the public folder
app.use(express.static(path.join(__dirname, 'public')));
-app.use(function(err, req, res, next) {
+app.use(function (err, req, res, next) {
console.error(err.stack);
res.status(500).send('Something broke!');
});
db.sync()
.then(() =>
- app.listen(3000, function() {
+ app.listen(3000, function () {
console.log('Server is listening on port 3000!');
})
)
diff --git a/browser/components/Main.js b/browser/components/Main.js
index 8ad6f82..7e57158 100644
--- a/browser/components/Main.js
+++ b/browser/components/Main.js
@@ -1,55 +1,69 @@
-import React, {Component} from 'react';
-import axios from 'axios';
-
-import StudentList from './StudentList.js'
-import SingleStudent from './SingleStudent.js'
-
-export default class Main extends Component {
- constructor(props){
- super(props)
- this.state = {
- students: [],
- selectedStudent : {}
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import StudentList from './StudentList.js'
+import SingleStudent from './SingleStudent.js'
+import NewStudentForm from './NewStudentForm.js';
+import { toggleFormThunk, getStudentsThunk } from '../store';
+
+class Main extends Component {
+ constructor() {
+ super(); // state is outside of component unless it's
+ // the local state; props (properties of component)
+ // need to be passed down.
+ // both state and props can be passed down,
+ // but you can pass state down as props
+ // avoid passing state down as 'state' because
+ // it's confusing; we'd have props.state.
+ // you should pass the information on state down as props
+ this.handleClick = this.handleClick.bind(this);
+ }
+
+ componentDidMount() {
+ this.props.getStudentsOnMount();
+ }
+
+ handleClick(e) {
+ this.props.toggleAddStudentForm();
+ }
+
+ render() { // only for class components
+ // variable declaration, object destructuring
+
+ return ( // always has return
+
+
Students
+
+ {/* bootstrap for passing down CSS as props */}
+ {this.props.showForm ? (
+
+ ) : null}
+ {/* conditionally rendered based on Redux's state.showForm */}
+