malithmcr · malithmcr · May 23, 2019 · May 21, 2019 · May 22, 2019 · May 23, 2019
diff --git a/.env b/.env
@@ -0,0 +1 @@
+REACT_APP_API = http://localhost:80/react-contact-form/api/contact/index.php
diff --git a/README.md b/README.md
@@ -1,9 +1,16 @@
+## Contact form React Component with PHP mail api.
+
 This is code for tutorial in my blog post [Create Contact form with react and php](https://blog.bitsrc.io/how-to-build-a-contact-form-with-react-js-and-php-d5977c17fec0).
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)
 
-## How to start
+## Usage of complete project.
+
+Please clone this repo and in the project root directory, Please run:
+
+### `npm install`
 
-In the project directory, you can run:
+please go to the root fo the project and run npm install to install all the nessery npm modules.
 
 ### `npm start`
 
@@ -14,14 +21,29 @@ The page will reload if you make edits.<br>
 You will also see any lint errors in the console.
 
 
-![Alt text](/screenshot.png?raw=true "Screenshot")
 
+## Usage only the component
+
+Please download 'src/components/Form/' folder.
+
+You can use the form component like this  `<Form config={config} />`
+
+####props
+
+`config - object`
 
+Example of config prop
 
 <div align="center">
-    <a href="https://www.paypal.me/craftcode"><img alt="Header" src="https://cdn-images-1.medium.com/max/806/1*G95uyokAH4JC5Ppvx4LmoQ.png" width="40%"></a>
+    <a href="https://www.paypal.me/craftcode"><img alt="Header" src="/config-obj.png?raw=true" width="70%"></a>
 </div>
 
+
+<div align="center">
+    <a href="https://www.paypal.me/craftcode"><img alt="Header" src="/screenshot.png?raw=true" width="80%"></a>
+</div>
+
+
 ## Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
@@ -32,4 +54,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+
+
+<div align="center">
+    <a href="https://www.paypal.me/craftcode"><img alt="Header" src="https://cdn-images-1.medium.com/max/806/1*G95uyokAH4JC5Ppvx4LmoQ.png" width="20%"></a>
+</div>
diff --git a/api/contact/index.php b/api/contact/index.php
@@ -29,5 +29,4 @@
         "message" => "Something went wrong"
      ]
  );
-}
-?>
+}
diff --git a/config-obj.png b/config-obj.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "react": "^16.8.6",
+    "react-dom": "^16.6.3"
+  },
+  "devDependencies": {
     "axios": "^0.18.0",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "prop-types": "^15.7.2",
     "react-scripts": "2.1.1"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>React PHP Contact form | Tutorial</title>
   </head>
   <body>
     <noscript>

diff --git a/src/App.js b/src/App.js
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/Form/index.js b/src/components/Form/index.js
@@ -0,0 +1,92 @@
+import React from "react";
+import PropTypes from "prop-types";
+import axios from "axios";
+import "./styles.css";
+
+/**
+ * @component Form
+ * @props
+ */
+class Form extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      fname: "",
+      lname: "",
+      email: "",
+      message: "",
+      mailSent: false,
+      error: null
+    };
+  }
+
+  handleFormSubmit = e => {
+    e.preventDefault();
+    axios({
+      method: "post",
+      url: `${process.env.REACT_APP_API}`,
+      headers: { "content-type": "application/json" },
+      data: this.state
+    })
+      .then(result => {
+        this.setState({
+          mailSent: result.data.sent
+        });
+        console.log(this.state);
+      })
+      .catch(error => this.setState({ error: error.message }));
+  };
+
+  render() {
+    const { title, successMessage, errorMessage, fields } = this.props.config;
+    return (
+      <div className="App">
+        <h2>{title}</h2>
+        <div>
+          <form action="#">
+            {fields &&
+              fields.map(fields => {
+                return (
+                  <React.Fragment>
+                    {fields.type !== "textarea" ? (
+                      <React.Fragment>
+                        <label>{fields.label}</label>
+                        <input
+                          type={fields.type}
+                          className={fields.klassName}
+                          placeholder={fields.placeholder}
+                          value={this.state.fname}
+                          onChange={e => this.setState({ fname: e.target.value })}
+                        />
+                      </React.Fragment>
+                    ) : (
+                      <React.Fragment>
+                        <label>{fields.label}</label>
+                        <textarea
+                          className={fields.klassName}
+                          placeholder={fields.placeholder}
+                          onChange={e => this.setState({ message: e.target.value })}
+                          value={this.state.message}
+                        />
+                      </React.Fragment>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            <input type="submit" onClick={e => this.handleFormSubmit(e)} value="Submit" />
+            <div>
+              {this.state.mailSent && <div className="sucsess">{successMessage}</div>}
+              {this.state.error && <div className="error">{errorMessage}</div>}
+            </div>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Form;
+//propTypes for the component
+Form.propTypes = {
+  config: PropTypes.object.isRequired
+};
diff --git a/src/App.css → src/components/Form/styles.css b/src/App.css → src/components/Form/styles.css
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
@@ -1,12 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import Form from '../src/components/Form';
 
-ReactDOM.render(<App />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+const config = {
+  api: `${process.env.REACT_APP_API}`,
+  title: 'Contact Me',
+  successMessage: 'Thank you for contcting me.',
+  errorMessage: 'Sorry we have some problems.',
+  fields:  [
+   { id: 1, label: 'First Name', type: 'text',placeholder:'Your First Name', isRequired: true , klassName:'first-name-field'},
+   { id: 2, label: 'Last Name', type: 'text', placeholder: 'Your Last Name', isRequired: true , klassName:'last-name-field'},
+   { id: 3, label: 'Email', type: 'email', placeholder: ' Your Email', isRequired: true , klassName:'email-field'},
+   { id: 4, label: 'Message', type: 'textarea',placeholder:'Write something.....', isRequired: true , klassName:'message-field'}
+  ]
+}
+ReactDOM.render(<Form config={config} />, document.getElementById('root'));
diff --git a/src/logo.svg b/src/logo.svg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		REACT_APP_API = http://localhost:80/react-contact-form/api/contact/index.php
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,5 +29,4 @@ @@
             "message" => "Something went wrong"
          ]
      );
-    }
-    ?>
+    }