From 5c6f56df000ff6c7a3723bf88e07c3529fc9483d Mon Sep 17 00:00:00 2001
From: Roosted7 <thomasroos@live.nl>
Date: Sun, 21 Jan 2018 13:15:55 +0100
Subject: [PATCH] Split up views and component
---
.babelrc | 6 +-
client/components/GradersManager.js | 93 +++++++++++++++++++++++++++
client/views/Graders.js | 98 +----------------------------
package.json | 1 +
4 files changed, 98 insertions(+), 100 deletions(-)
create mode 100644 client/components/GradersManager.js
diff --git a/.babelrc b/.babelrc
index 089613628..134423e90 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,12 +1,10 @@
-/*
- ./.babelrc
-*/
{
"presets":[
"react",
"flow"
],
"plugins": [
- "syntax-dynamic-import"
+ "syntax-dynamic-import",
+ "transform-class-properties"
]
}
\ No newline at end of file
diff --git a/client/components/GradersManager.js b/client/components/GradersManager.js
new file mode 100644
index 000000000..5e92ef162
--- /dev/null
+++ b/client/components/GradersManager.js
@@ -0,0 +1,93 @@
+import React from 'react';
+
+class GraderManager extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {graders: [
+ {id: '1', first_name: 'John', last_name: 'Doe'},
+ {id: '2', first_name: 'Jan', last_name: 'Janssen'}
+ ],
+ first_name: '',
+ last_name: '' };
+
+ this.handleInputChange = this.handleInputChange.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
+ }
+
+ handleInputChange(event) {
+ const target = event.target;
+ const name = target.name;
+
+ this.setState({[name]: target.value});
+ }
+
+ fetchData() {
+ fetch('/api/graders', {credentials: 'same-origin'})
+ .then((response) => response.json())
+ .then((graders) =>{
+ this.setState({graders: graders})
+ })
+ }
+
+ handleSubmit(event) {
+ var data = {first_name: this.state.first_name,
+ last_name: this.state.last_name};
+
+ fetch('/api/graders', {
+ method: 'POST', // or 'PUT'
+ body: JSON.stringify(data),
+ headers: new Headers({
+ 'Content-Type': 'application/json'
+ })
+ }).then(res => res.json())
+ .catch(error => console.error('Error:', error))
+ .then(response => this.fetchData());
+
+ event.preventDefault();
+ }
+
+ componentDidMount() {
+ this.fetchData();
+ }
+
+ render() {
+ return (
+ <div>
+ <form onSubmit={this.handleSubmit}>
+ <div className="field has-addons">
+ <div className="control">
+ <input name="first_name" value={this.state.first_name}
+ onChange={this.handleInputChange} className="input" type="text"
+ placeholder="First name" />
+ </div>
+ <div className="control">
+ <input name="last_name" value={this.state.last_name}
+ onChange={this.handleInputChange} className="input" type="text"
+ placeholder="Surname" />
+ </div>
+ <div className="control">
+ <button type="submit" className="button is-info">
+ Add
+ </button>
+ </div>
+ </div>
+ </form>
+
+ <br />
+
+ <aside className="menu">
+ <p className="menu-label">
+ Added graders
+ </p>
+ <ul className="menu-list">
+ {this.state.graders.map((grader) => {
+ return <li key={grader.id.toString()}>{grader.first_name + ' ' + grader.last_name}</li>
+ })}
+ </ul>
+ </aside>
+ </div>
+ );
+ }
+ }
+
+ export default GraderManager;
\ No newline at end of file
diff --git a/client/views/Graders.js b/client/views/Graders.js
index 302b5f84e..165172ce9 100644
--- a/client/views/Graders.js
+++ b/client/views/Graders.js
@@ -3,101 +3,7 @@ import NavBar from '../components/NavBar';
import Hero from '../components/Hero';
import Footer from '../components/Footer';
-
-class GraderList extends React.Component {
- constructor(props) {
- super(props);
- this.state = {graders: [
- {id: '1', first_name: 'John', last_name: 'Doe'},
- {id: '2', first_name: 'Jan', last_name: 'Janssen'}
- ],
- first_name: '',
- last_name: '' };
-
- this.handleInputChange = this.handleInputChange.bind(this);
- this.handleSubmit = this.handleSubmit.bind(this);
- }
-
- handleInputChange(event) {
- const target = event.target;
- const name = target.name;
-
- this.setState({[name]: target.value});
- }
-
- fetchData() {
- fetch('/api/graders', {credentials: 'same-origin'})
- .then((response) => response.json())
- .then((graders) =>{
- this.setState({graders: graders})
- })
- }
-
- handleSubmit(event) {
- var data = {first_name: this.state.first_name,
- last_name: this.state.last_name};
-
- fetch('/api/graders', {
- method: 'POST', // or 'PUT'
- body: JSON.stringify(data),
- headers: new Headers({
- 'Content-Type': 'application/json'
- })
- }).then(res => res.json())
- .catch(error => console.error('Error:', error))
- .then(response => this.fetchData());
-
- event.preventDefault();
- }
-
- componentDidMount() {
-
- this.fetchData();
-
- }
-
- componentWillUnmount() {
-
- }
-
-
- render() {
- return (
- <div>
- <form onSubmit={this.handleSubmit}>
- <div className="field has-addons">
- <div className="control">
- <input name="first_name" value={this.state.first_name}
- onChange={this.handleInputChange} className="input" type="text"
- placeholder="First name" />
- </div>
- <div className="control">
- <input name="last_name" value={this.state.last_name}
- onChange={this.handleInputChange} className="input" type="text"
- placeholder="Surname" />
- </div>
- <div className="control">
- <button type="submit" className="button is-info">
- Add
- </button>
- </div>
- </div>
- </form>
-
- <aside className="menu">
- <p className="menu-label">
- Added graders
- </p>
- <ul className="menu-list">
- {this.state.graders.map(function(grader) {
- return <li key={grader.id.toString()}>{grader.first_name + ' ' + grader.last_name}</li>
- })}
- </ul>
- </aside>
- </div>
- );
- }
-}
+import GraderManager from '../components/GradersManager';
const Graders = () => {
return (
@@ -113,7 +19,7 @@ const Graders = () => {
<h5 className='subtitle'>to add them to the system</h5>
<hr />
- <GraderList />
+ <GraderManager />
</div>
</section>
diff --git a/package.json b/package.json
index 04cd85c31..a885b1cc4 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
},
"dependencies": {
"babel-plugin-syntax-dynamic-import": "^6.18.0",
+ "babel-plugin-transform-class-properties": "^6.24.1",
"bulma": "^0.6.2",
"css-loader": "^0.28.8",
"file-loader": "^1.1.6",
--
GitLab