attempt at creating article creation page w/ backend conn

.history/src/App_20191018205013.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import './App.css';
+import { Row, Col } from 'antd'; 
+import Hello from './components/Hello';
+import HomeGrid from './components/HomeGrid';
+import Signup from './components/Signup'
+
+function App() {
+
+
+  return (
+    <div style={{ background: '#ECECEC', padding: '30px' }}>
+
+      <HomeGrid />
+
+    </div>
+  );
+}
+
+export default App;

.history/src/App_20191018212038.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import './App.css';
+import { Row, Col } from 'antd'; 
+import Hello from './components/Hello';
+import HomeGrid from './components/HomeGrid';
+import Signup from './components/Signup'
+
+function App() {
+
+
+  return (
+    <div style={{ background: '#ECECEC', padding: '30px' }}>
+
+      <Signup />
+
+    </div>
+  );
+}
+
+export default App;

.history/src/App_20191018212040.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import './App.css';
+import { Row, Col } from 'antd'; 
+import Hello from './components/Hello';
+import HomeGrid from './components/HomeGrid';
+import Signup from './components/Signup'
+
+function App() {
+
+
+  return (
+    <div style={{ background: '#ECECEC', padding: '30px' }}>
+
+      <Signup />
+
+    </div>
+  );
+}
+
+export default App;

.history/src/App_20191019234305.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import './App.css';
+import { Row, Col } from 'antd'; 
+import Hello from './components/Hello';
+import HomeGrid from './components/HomeGrid';
+import Signup from './components/Signup'
+import ArticleCreate from './components/ArticleCreate';
+
+function App() {
+
+
+  return (
+    <div style={{ background: '#ECECEC', padding: '30px' }}>
+
+      <ArticleCreate />
+
+    </div>
+  );
+}
+
+export default App;

.history/src/App_20191019234307.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import './App.css';
+import { Row, Col } from 'antd'; 
+import Hello from './components/Hello';
+import HomeGrid from './components/HomeGrid';
+import Signup from './components/Signup'
+import ArticleCreate from './components/ArticleCreate';
+
+function App() {
+
+
+  return (
+    <div style={{ background: '#ECECEC', padding: '30px' }}>
+
+      <ArticleCreate />
+
+    </div>
+  );
+}
+
+export default App;

.history/src/App_20191023222356.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import './App.css';
+import { Row, Col } from 'antd'; 
+import Hello from './components/Hello';
+import HomeGrid from './components/HomeGrid';
+import Signup from './components/Signup'
+import ArticleCreate from './components/ArticleCreate';
+
+function App() {
+
+
+  return (
+    <div style={{ background: '#ECECEC', padding: '30px' }}>
+
+      <Signup />
+
+    </div>
+  );
+}
+
+export default App;

.history/src/App_20191024010509.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import './App.css';
+import { Row, Col } from 'antd'; 
+import Hello from './components/Hello';
+import HomeGrid from './components/HomeGrid';
+import Signup from './components/Signup'
+import ArticleCreate from './components/ArticleCreate';
+
+function App() {
+
+
+  return (
+    <div style={{ background: '#ECECEC', padding: '30px' }}>
+
+      <ArticleCreate />
+
+    </div>
+  );
+}
+
+export default App;

.history/src/components/ArticleCreate_20191019234246.js

@@ -0,0 +1,110 @@
+
+import React from 'react';
+
+import {
+  Form,
+  Input,
+  Alert,
+  Checkbox,
+  Button
+} from 'antd';
+import renderEmpty from 'antd/lib/config-provider/renderEmpty';
+
+class ArticleCreationForm extends React.Component {
+
+    state =  {
+        confirmDirty: false,
+        addedSucessfully: false, //if the user is added successfully
+        showSuccess: false, //if should we show a successful feedback message after adding a user
+        showError: false, //if should we show an error feedback message after adding a user
+        errorCode: 400,  //to save the errorCode we recieved from the api server
+        responseStatus: "nothing",  //the validation status of the article
+        errorMessage: "" 
+    }
+
+    render() {
+        const { getFieldDecorator } = this.props.form;
+
+        //this code will handle form responsivness on small devices
+        const formItemLayout = {
+          labelCol: {
+            xs: { span: 24 },
+            sm: { span: 8 },
+          },
+          wrapperCol: {
+            xs: { span: 24 },
+            sm: { span: 16 },
+          },
+        };
+        const tailFormItemLayout = {
+          wrapperCol: {
+            xs: {
+              span: 24,
+              offset: 0,
+            },
+            sm: {
+              span: 16,
+              offset: 8,
+            },
+          },
+        };
+
+        //prefix the email input with some decoration 
+        const prefixTitle = getFieldDecorator('title')(
+          <h4>@</h4>,
+        );
+
+        return (
+      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
+        <Form.Item label="Title" hasFeedback validateStatus={this.state.responseStatus} help={this.state.errorMessage}>
+          {getFieldDecorator('title', {
+            rules: [
+              {
+                type: 'title',
+                message: 'The input is not valid title',
+              },
+              {
+                required: true,
+                message: 'Please input your title',
+              },
+            ],
+          })(<Input addonBefore={prefixTitle} onChange={this.handleEmail} />)}
+        </Form.Item>
+        <Form.Item label="allText" hasFeedback>
+          {getFieldDecorator('allText', {
+            rules: [
+              {
+                required: true,
+                message: 'Please input your allText!',
+              },
+              {
+                min: 20,
+                message: 'Article content should be at least 20 characters long!',
+              },
+            ],
+          })(<Input.Password />)}
+        </Form.Item>
+         <Form.Item {...tailFormItemLayout}>
+          {getFieldDecorator('agreement', {
+            valuePropName: 'checked',
+          })(
+            <Checkbox>
+              I have read the <a href="">agreement</a>
+            </Checkbox>,
+          )}
+        </Form.Item>
+        <Form.Item {...tailFormItemLayout}>
+          <Button type="primary" htmlType="submit">
+            Register
+          </Button>
+        </Form.Item>
+        {this.state.showSuccess ? <Alert message="acricle created successfully" type="success" /> :null}
+        {this.state.showError ? <Alert message={this.state.errorMessage} type="error" /> :null}
+      </Form>
+    );
+    }
+}
+
+const ArticleCreate = Form.create({ name: 'add article'})(ArticleCreationForm)
+
+export default ArticleCreate

.history/src/components/ArticleCreate_20191019234552.js

@@ -0,0 +1,110 @@
+
+import React from 'react';
+
+import {
+  Form,
+  Input,
+  Alert,
+  Checkbox,
+  Button
+} from 'antd';
+import renderEmpty from 'antd/lib/config-provider/renderEmpty';
+
+class ArticleCreationForm extends React.Component {
+
+    state =  {
+        confirmDirty: false,
+        addedSucessfully: false, //if the user is added successfully
+        showSuccess: false, //if should we show a successful feedback message after adding a user
+        showError: false, //if should we show an error feedback message after adding a user
+        errorCode: 400,  //to save the errorCode we recieved from the api server
+        responseStatus: "nothing",  //the validation status of the article
+        errorMessage: "" 
+    }
+
+    render() {
+        const { getFieldDecorator } = this.props.form;
+
+        //this code will handle form responsivness on small devices
+        const formItemLayout = {
+          labelCol: {
+            xs: { span: 24 },
+            sm: { span: 8 },
+          },
+          wrapperCol: {
+            xs: { span: 24 },
+            sm: { span: 16 },
+          },
+        };
+        const tailFormItemLayout = {
+          wrapperCol: {
+            xs: {
+              span: 24,
+              offset: 0,
+            },
+            sm: {
+              span: 16,
+              offset: 8,
+            },
+          },
+        };
+
+        //prefix the email input with some decoration 
+        const prefixTitle = getFieldDecorator('title')(
+          <h4>@</h4>,
+        );
+
+        return (
+      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
+        <Form.Item label="Title" hasFeedback validateStatus={this.state.responseStatus} help={this.state.errorMessage}>
+          {getFieldDecorator('title', {
+            rules: [
+              {
+                type: 'title',
+                message: 'The input is not valid title',
+              },
+              {
+                required: true,
+                message: 'Please input your title',
+              },
+            ],
+          })(<Input addonBefore={prefixTitle} onChange={this.handleEmail} />)}
+        </Form.Item>
+        <Form.Item label="allText" hasFeedback>
+          {getFieldDecorator('allText', {
+            rules: [
+              {
+                required: true,
+                message: 'Please input your allText!',
+              },
+              {
+                min: 20,
+                message: 'Article content should be at least 20 characters long!',
+              },
+            ],
+          })(<Input addonBefore={prefixTitle} onChange={this.handleAllText} />)} />)}
+        </Form.Item>
+         <Form.Item {...tailFormItemLayout}>
+          {getFieldDecorator('agreement', {
+            valuePropName: 'checked',
+          })(
+            <Checkbox>
+              I have read the <a href="">agreement</a>
+            </Checkbox>,
+          )}
+        </Form.Item>
+        <Form.Item {...tailFormItemLayout}>
+          <Button type="primary" htmlType="submit">
+            Register
+          </Button>
+        </Form.Item>
+        {this.state.showSuccess ? <Alert message="acricle created successfully" type="success" /> :null}
+        {this.state.showError ? <Alert message={this.state.errorMessage} type="error" /> :null}
+      </Form>
+    );
+    }
+}
+
+const ArticleCreate = Form.create({ name: 'add article'})(ArticleCreationForm)
+
+export default ArticleCreate