completed some of update

.gitignore

@@ -0,0 +1 @@
+node_modules

client/dist/index.html

@@ -10,6 +10,6 @@
   <div id='app'>
     <h1>Loading</h1>
   </div>
-
+  <script> src="/bundle.js" </script>
 </body>
 </html>

client/src/components/Add.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Axios from 'axios';
 
 
 export default class Add extends React.Component {
@@ -13,22 +14,28 @@ export default class Add extends React.Component {
   }
 
   changeHandler(e){
-
+    let {name, value} = e.target
+    this.setState({
+      [name]: value
+    })
   }
 
   handleSubmit(e){
-
+    e.preventDefault();
+    Axios.post('/api/students', this.state)
+    .then(() => {console.log('success')})
+    .catch((err) => {console.error(err)})
   }
 
   render() {
     return (
       <div>
         <form>
           <label>Student Name: </label>
-          <input type="text" name="name" />
+          <input type="text" name="name" onChange={this.changeHandler}/>
           <label>Image URL: </label>
-          <input type="text" name="imgurl" />
-          <button type="submit" value="Submit">Submit</button>
+          <input type="text" name="imgurl" value={this.state.name} onChange={this.changeHandler}/>
+          <button type="submit" value="Submit" onClick={this.handleSubmit}>Submit</button>
         </form>
       </div>
     )

client/src/components/App.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-
-
-
-
+import Axios from 'axios';
+import Random from './Random.jsx';
+import List from './Add.jsx';
+import Add from './List.jsx';
 
 export default class App extends React.Component {
   constructor(props){
@@ -11,20 +11,33 @@ export default class App extends React.Component {
       'page': 'home',
       'studentlist' : []
     }
-
-
+  this.getStudents = this.getStudents.bind(this);
+  this.changepage = this.changepage.bind(this);
   }
 
-  componentDidMount(){
+  componentDidMount() {
     this.getStudents()
   }
 
   getStudents(){
-
+    Axios.get('/api/students')
+      .then((students) => {
+        this.setState({
+          studentlist: students.data
+        }, () => {console.log(this.state)})
+      })
+      .catch((err) => {
+        console.error(err)
+      })
   }
 
   changepage(e){
-
+    if (e.target.value === 'home') {
+      this.getStudents();
+    }
+    this.setState({
+      page: e.target.value
+    }, () => {console.log(this.state.page)})
   }
 
   render() {
@@ -38,23 +51,23 @@ export default class App extends React.Component {
     } else if (this.state.page === 'list'){
       return (
         <div>
-          <List />
+          <List students={this.state.studentList} getStudents={this.getStudents}/>
           <button value='home' onClick={(e) => this.changepage(e)}>Back</button>
         </div>
       )
     } else if (this.state.page === 'random'){
       return (
         <div>
-          <Random />
+          <Random students={this.state.students}/>
           <button value='home' onClick={(e) => this.changepage(e)}>Back</button>
         </div>
       )
     } else {
       return (
         <div>
-          <button value='add' >Add Student</button>
-          <button value='list' >List Students</button>
-          <button value='random' >Random Student</button>
+          <button value='add' onCLick={this.changepage}>Add Student</button>
+          <button value='list' onCLick={this.changepage}>List Students</button>
+          <button value='random' onCLick={this.changepage}>Random Student</button>
         </div>
       )
     }

client/src/components/List.jsx

@@ -3,28 +3,9 @@ import ListElement from './ListElement.jsx';
 
 const List = (props) =>
   <div>
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
-    <ListElement />
+    {props.getStudents.map((student, index) => (
+      <ListElement student={student} key={index} getStudents={}/>
+    ))}
   </div>
 
 

client/src/components/ListElement.jsx

@@ -1,10 +1,72 @@
 import React from 'react';
+import axios from 'axios';
+import Axios from 'axios';
 
-const ListElement = () =>
-  <span>
-    <div>Evelyn</div>
-    <img src='https://ca.slack-edge.com/T2SV1LBC6-URC6Z49K9-0731cf8087a9-512'></img>
-  </span>
+// const ListElement = (props) =>
+//   <span>
+//     <div>{props.student.name}</div>
+//     <img src={props.student.imgurl}></img>
+//   </span>
 
+export default ListElement extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      updateName: false,
+      studentId: 0,
+      studentName: this.props.student.name
+    }
+    this.updateStudent = this.updateStudent.bind(this);
+    this.clickHandler = this.clickHandler.bind(this);
+    this.changeHandler = this.changeHandler.bind(this);
+    this.submitHandler = this.submitHandler.bind(this);
+  }
 
-export default ListElement
+  updateStudent() {
+    Axios.put(`/api/students/${id}`, {
+      name: this.state.studentName
+    })
+    .then(() => {
+      this.props.getStudent()
+    })
+    .catch((err) => {
+      console.error(err);
+    })
+  }
+
+  clickHandler(id) {
+    this.setState({
+      updateName: true,
+      studentId: id
+    })
+  }
+
+  changeHandler() {
+    this.setState({
+      studentName: e.target.value
+    })
+  }
+
+  submitHandler() {
+    e.preventDefault();
+    this.setState({
+      updateName: false
+    }, () => {
+      this.updateStudent(this.state.students)
+    })
+  }
+
+  render() {
+    return(
+      this.state.updateName ?
+      <span>
+        <input onChange={this.changeHandler} value={this.state.studentName}></input>
+        <button onClick={this.submitHandler}>Change Name</button>
+          <div>src={this.props.student.imgurl}</div>
+      </span> :
+      <span>
+        <div onClick={() => this.clickHandler}>{this.props.student.name}</div>
+        <img src={this.props.student.imgurl}></img>
+      </span>
+  }
+}

client/src/components/Random.jsx

@@ -10,20 +10,25 @@ export default class Random extends React.Component {
     this.getRandomStudent = this.getRandomStudent.bind(this);
   }
 
-
+  componentDidMount() {
+
+  }
 
   getRandomStudent(){
-
+    let index = Math.floor(Math.random() * this.props.students.length)
+    this.setState({
+      student: this.props.students[index]
+    }, () => {console.log(this.state)})
   }
 
   render() {
     return (
       <div>
         <div>
-          <img src='https://ca.slack-edge.com/T2SV1LBC6-UT9N1BX1A-c2a4df2e7442-512'></img>
-          <h1>Lee</h1>
+          <img src={this.state.student.imgurl}></img>
+          <h1>{this.state.student.name}</h1>
         </div>
-        <button >Randomize</button>
+        <button onClick={this.getRandomStudent}>Randomize</button>
       </div>
     )
   }

client/src/index.jsx

@@ -1,5 +1,6 @@
+import React from 'react';
 import ReactDOM from 'react-dom';
-
 import App from './components/App.jsx';
 
 // render your App component to your HTML
+ReactDOM.render(<App />, document.getElementById('app'));

db/dbhelpers.js

@@ -3,10 +3,11 @@ var db = require('./');
 module.exports = {
   students: {
     // fetch all students
-    getStudent: () => {},
+    //find all
+    getStudent: () => db.find({}),
     // add a student
-    postName: (student) => {},
+    postName: (student) => db.create(student),
     // update a student's name
-    updateName: (_id, name) => {},
+    updateName: (_id, name) => db.findOneAndUpdate(_id, name)
   }
 };

db/index.js

@@ -9,7 +9,9 @@ var db = mongoose.connect(mongoURI)
   .then(()=>{console.log('connected to mongoDB')});
 
 // specify your model "Student" here
+//made for mongodb; instance of what the collection would look like 
 var Student = mongoose.model('Students', studentSchema)
 
 // export your model
-module.exports = Student;
+module.exports = Student;
+