Add Create Post component

Author: imranhsayed

README.md

@@ -47,7 +47,7 @@ define('JWT_AUTH_CORS_ENABLE', true);
 
 iii. Now you can make a request to `/wp-json/jwt-auth/v1/token` REST API provided by the plugin. You need to pass 
 username and password and it returns a user object and token . You can save the token in localstorage and send it in the headers
-of your protected route requests ( e.g. `/wp-json/wp/v2/posts` )
+of your protected route requests ( e.g. [Create Post](https://developer.wordpress.org/rest-api/reference/posts/#create-a-post) `/wp-json/wp/v2/posts` ) 
 
 iiv. So whenever you send a request to WordPress REST API for your protected routes, you send the token received in the headers of
 your request

src/components/CreatePost.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import axios from 'axios';
+import Loader from '../loader.gif';
+
+class CreatePost extends React.Component {
+
+	constructor( props ) {
+		super( props );
+
+		this.state = {
+			title: '',
+			content: '',
+			userID: '',
+			token: '',
+			postCreated: false,
+			message: '',
+			loading: false
+		}
+	}
+
+	createMarkup = ( data ) => ({
+		__html: data
+	});
+
+	handleInputChange = ( event ) => {
+		this.setState({ [event.target.name]: event.target.value });
+	};
+
+	handleFormSubmit = ( event ) => {
+		event.preventDefault();
+		this.setState( { loading: true } );
+
+		const formData = {
+			author: this.state.userID,
+			title: this.state.title,
+			content: this.state.content,
+			status: 'publish'
+		};
+
+		const wordPressSiteUrl = 'http://localhost:8888/wordpress';
+		const authToken = localStorage.getItem( 'token' );
+
+		/**
+		 * Make a post request to node server route '/create-post',
+		 * to create a new post on WordPress
+		 */
+		axios.post( `${wordPressSiteUrl}/wp-json/wp/v2/posts`, formData, {
+			headers: {
+				'Content-Type': 'application/json',
+				'Authorization': `Bearer ${authToken}`
+			}
+		} )
+			.then( res => {
+				this.setState( {
+					loading: false,
+					postCreated: !! res.data.id,
+					message: res.data.id ? 'New Post Created' : ''
+				} );
+			} )
+			.catch( err => {
+				this.setState( { loading: false, message: err.response.data.message } );
+			} );
+	};
+
+	componentDidMount() {
+		const userID = localStorage.getItem( 'userID' );
+		const token = localStorage.getItem( 'token' );
+		this.setState( { userID, token } );
+	}
+
+	render() {
+
+		const { loading, message, postCreated } = this.state;
+
+		return(
+			<form onSubmit={ this.handleFormSubmit } className="mt-5" style={{maxWidth: '800px'}}>
+				<fieldset>
+					<legend className="mb-4">Create Post</legend>
+
+					{ message && <div className={ `alert ${ postCreated ? 'alert-success' : 'alert-danger' }` } dangerouslySetInnerHTML={ this.createMarkup( message ) }/> }
+
+					<div className="form-group">
+						<label htmlFor="title">Title</label>
+
+						<input type="text" name="title" onChange={ this.handleInputChange } className="form-control" id="title"/>
+
+					</div>
+					<div className="form-group">
+						<label htmlFor="content">Content</label>
+						<textarea name="content" className="form-control" onChange={ this.handleInputChange } id="content" rows="3"/>
+					</div>
+
+					<button type="submit" className="btn btn-secondary">Submit</button>
+				</fieldset>
+				{ loading && <img className="loader" src={Loader} alt="Loader"/> }
+			</form>
+		)
+	}
+}
+export default CreatePost;

src/components/Dashboard.js

@@ -1,33 +1,13 @@
 import React from 'react';
 import Navbar from "./Navbar";
+import CreatePost from "./CreatePost";
 
 class Dashboard extends React.Component {
 
 	constructor( props ) {
 		super( props );
 	}
 
-	componentDidMount() {
-		const siteUrl = 'http://localhost:8888/wordpress';
-		fetch( `${siteUrl}/wp-json/wp/v2/posts`, {
-			method: 'POST',
-			headers: {
-				'Accept': 'application/json',
-				'Content-Type': 'application/json',
-				'Authorization': `Bearer ${localStorage.getItem('token')}`
-			},
-			body: JSON.stringify( { title: 'Hello', content: 'content' } )
-		} )
-			.then( ( res ) => {
-				res.json()
-					.then( ( data ) => {
-						console.warn( 'came', data );
-
-					} )
-			} )
-			.catch( err => console.warn( err ) );
-	};
-
 
 	render() {
 		console.warn( localStorage.getItem( 'token' ) );
@@ -36,6 +16,7 @@ class Dashboard extends React.Component {
 				<Navbar/>
 				<div className="jumbotron">
 					<h4>Welcome {this.props.userName && this.props.userName }!!</h4>
+					<CreatePost/>
 				</div>
 			</React.Fragment>
 		)

src/components/Login.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Navbar from "./Navbar";
 import { Redirect } from "@reach/router";
+import Loader from "../loader.gif";
 
 class Login extends React.Component {
 
@@ -109,7 +110,7 @@ class Login extends React.Component {
 							</label>
 							<br/>
 							<button className="btn btn-primary mb-3" type="submit">Login</button>
-							<p>{ loading && 'Processing...' }</p>
+							{ loading && <img className="loader" src={Loader} alt="Loader"/> }
 						</form>
 					</div>
 				</React.Fragment>

src/loader.gif

@@ -0,0 +1,17 @@
+.loader {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	margin: auto;
+	width: 100px;
+}
+
+.posts-container {
+	margin-left: 16px;
+}
+
+.post-content img{
+	width: 100%;
+}

src/style.css

@@ -22,14 +22,9 @@ module.exports = {
 				use: ['style-loader', 'css-loader'],
 			},
 			{
-				test: /\.(png|jp?g|svg)$/,
+				test: /\.(png|jp?g|svg|gif)$/,
 				use: [{
-					loader: "file-loader",
-					options: {
-						name: '[name].[ext]',
-						outputPath: 'images/',
-						publicPath: 'images/'
-					}
+					loader: "file-loader"
 				}]
 			}
 		]