Create Process Finish

Author: Hwang-Kyu-Cheol

public/pure.html

@@ -16,7 +16,12 @@ <h1>WEB</h1>
                 <li><a href="3.html">JavaScript</a></li>
             </ul>
         </nav>
-
+        <div>
+            <a href="/create">create</a><br>
+            <a href="/update">update</a><br>
+            <button>delete</button>
+        </div>
+        <hr>
         <article>
             <h2>HTML</h2>
             <p>Its HTML</p>

src/App.js

@@ -1,12 +1,15 @@
 import React, { Component } from 'react';
 import Header from './components/Header';
 import Navigation from './components/Navigation';
-import Article from './components/Article';
+import ReadArticle from './components/ReadArticle';
+import CreateArticle from './components/CreateArticle';
+import Control from './components/Control';
 import './App.css';
 
 class App extends React.Component {
   constructor(props){
     super(props);
+    this.max_index = 3;
     this.state = {
       mode: 'Welcome',
       subject: {
@@ -41,18 +44,35 @@ class App extends React.Component {
   }
 
   render() {
-    let _title, _desc;
+    let _title, _desc, _article;
     if(this.state.mode === 'Welcome'){
       _title = this.state.Welcome.title;
       _desc = this.state.Welcome.description;
-    } else {
+      _article = <ReadArticle title={_title} description={_desc}></ReadArticle>;
+    } else if(this.state.mode === 'Read'){
       for(let i = 0; i<this.state.contents.length; i++){
         if(this.state.contents[i].id === this.state.selected_contents){
           _title = this.state.contents[i].title;
           _desc = this.state.contents[i].description;
           break;
         }
       }
+      _article = <ReadArticle title={_title} description={_desc}></ReadArticle>;
+    } else if(this.state.mode === 'Create'){
+      _article = <CreateArticle onCreate={function(_title, _desc){
+        this.max_index = this.max_index + 1;
+        const newArticle = {
+          id: this.max_index,
+          title: _title,
+          description: _desc
+        };
+        const grpArticle = this.state.contents.concat(newArticle);
+        this.setState(
+          {
+            contents: grpArticle
+          }
+        );
+      }.bind(this)}></CreateArticle>
     }
     return (
       <div className="App">
@@ -78,8 +98,18 @@ class App extends React.Component {
             );
           }.bind(this)}
         ></Navigation>
+        <Control
+          mode={this.state.mode}
+          onChangePage={function(_mode){
+            this.setState(
+              {
+                mode: _mode
+              }
+            )
+          }.bind(this)}
+        ></Control>
         <hr></hr>
-        <Article title={_title} description={_desc}></Article>
+        {_article}
       </div>
     );
   }  

src/components/Control.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import CreateControl from './CreateControl';
+import UpdateControl from './UpdateControl';
+import DeleteControl from './DeleteControl';
+
+class Control extends Component {
+    render() {
+      let _createControl, _updateControl, _deleteControl;
+      if(this.props.mode === 'Welcome'){
+        _createControl = <CreateControl onChangePage={this.props.onChangePage}></CreateControl>;
+        _updateControl = '';
+        _deleteControl = '';
+      } else if(this.props.mode === 'Read'){
+        _createControl = '';
+        _updateControl = <UpdateControl onChangePage={this.props.onChangePage}></UpdateControl>;
+        _deleteControl = <DeleteControl onChangePage={this.props.onChangePage}></DeleteControl>;
+      } else {
+        _createControl = '';
+        _updateControl = '';
+        _deleteControl = '';
+      }
+
+      return (
+        <div>
+            {_createControl}       
+            {_updateControl}
+            {_deleteControl}
+        </div>
+      );
+    }
+  }
+
+export default Control;

src/components/CreateArticle.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+
+class CreateArticle extends Component {
+    render() {
+      return (
+        <article>
+          <h2>Create</h2>
+          <div>
+            <form
+              action="/process_create"
+              onSubmit={function(event){
+                event.preventDefault();
+                const _title = event.target.title.value;
+                const _desc = event.target.description.value;
+                this.props.onCreate(_title, _desc);
+              }.bind(this)}>
+                <input type="text" name="title" placeholder="title"></input><br></br>
+                <textarea name="description" placeholder="description"></textarea><br></br>
+                <input type="submit" value="OK"></input>
+            </form>            
+          </div>
+        </article>
+      );
+    }
+  }
+
+export default CreateArticle;

src/components/CreateControl.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+class CreateControl extends Component {
+    render() {
+      return (
+        <a
+          href="/create"
+          onClick={function(event){
+            event.preventDefault();
+            this.props.onChangePage('Create');
+          }.bind(this)}
+        >create</a>            
+      );
+    }
+  }
+
+export default CreateControl;

src/components/DeleteControl.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+
+class DeleteControl extends Component {
+    render() {
+      return (
+        <button
+          onClick={function(event){
+            event.preventDefault();
+            this.props.onChangePage('Delete');
+          }.bind(this)}
+        >delete</button>           
+      );
+    }
+  }
+
+export default DeleteControl;

src/components/Article.js renamed to src/components/ReadArticle.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-class Article extends Component {
+class ReadArticle extends Component {
     render() {
       return (
         <article>
@@ -11,4 +11,4 @@ class Article extends Component {
     }
   }
 
-export default Article;
+export default ReadArticle;

src/components/UpdateControl.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+class UpdateControl extends Component {
+    render() {
+      return (
+        <a
+          href="/update"
+          onClick={function(event){
+            event.preventDefault();
+            this.props.onChangePage('Update');
+          }.bind(this)}
+        >update</a>           
+      );
+    }
+  }
+
+export default UpdateControl;