From bd77bf66967743ad954212f1366368f10b1425e1 Mon Sep 17 00:00:00 2001 From: Dominic Masters Date: Wed, 4 Jul 2018 21:40:19 +1000 Subject: [PATCH] Built out form ajax requesting, needs some more testing --- public/App.jsx | 20 +++-- public/input/form/Form.jsx | 130 +++++++++++++++++++++++++--- public/language/en-AU.jsx | 6 ++ public/loading/Loader.jsx | 15 +++- public/page/contact/ContactPage.jsx | 9 +- public/styles/objects/_form.scss | 4 +- public/styles/objects/_loader.scss | 9 ++ webpack.config.js | 7 +- 8 files changed, 169 insertions(+), 31 deletions(-) diff --git a/public/App.jsx b/public/App.jsx index 64e590d..789d5a1 100644 --- a/public/App.jsx +++ b/public/App.jsx @@ -47,16 +47,20 @@ class App extends React.Component { render() { let clazz = "c-app"; - if(this.props.menuOpen) clazz += " is-menu-open " + if(this.props.menuOpen) clazz += " is-menu-open "; - return ( - -
-
- -
- + let children = ( +
+
+ +
); + + if(true) { + return {children}; + } else { + return {children}; + } } } diff --git a/public/input/form/Form.jsx b/public/input/form/Form.jsx index 9724e0f..b202b45 100644 --- a/public/input/form/Form.jsx +++ b/public/input/form/Form.jsx @@ -22,21 +22,123 @@ // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; +import Loader, { LoaderBackdrop } from './../../loading/Loader'; -export default function(props) { - let clazzes = "o-form"; +export default class Form extends React.Component { + constructor(props) { + super(props); - if(props.className) clazzes += " " + props.className; + //Prepare our initial state + let s = { + ajax: props.ajax || false, + loader: props.loader || false, + loading: false, + onSubmit: props.onSubmit, + contentType: props.contentType || props.encType || "application/x-www-form-urlencoded" + }; - return ( -
- { props.children } -
- ); + //Determine action and method based off the internals + if(props.action) s.action = props.action; + if(props.method) s.method = props.method; + + if(props.get) { + s.action = props.get; + s.method = "GET"; + } + + if(props.post) { + s.action = props.post; + s.method = "POST"; + } + + //Write our state to the component + this.state = s; + } + + onSubmit(e) { + //Is Ajax? + if(!this.state.ajax) { + return this.state.onSubmit ? this.state.onSubmit(e) : true; + } + + e.preventDefault(); + if(!this.state.action) return console.warning("This form has no action."); + if(this.state.submitting) return false;//Already submitting? + + //Start submitting! + this.setState({ + loading: true, + submitting: true + }); + + //Prepare our request. + fetch(this.state.action, { + method: this.state.method, + mode: this.state.mode, + headers: { + "Content-Type": this.state.contentType + } + }) + .then(this.onSubmitted.bind(this)) + .catch(this.onError.bind(this)) + ; + + return false; + } + + onSubmitted(response) { + if(!response.ok) { + throw Error(response.statusText); + } + + if(this.props.onData) return this.props.onData(response); + + //Handle the old fashioned way (expect json) + response.json().then(this.onJSON.bind(this)).catch(this.onError.bind(this)); + } + + onJSON(response) { + if(this.props.onJSON) return this.props.onJSON(response); + console.log(response); + } + + onError(e, a, b) { + this.setState({ + loading: false, + submitting: false + }); + if(this.props.onError) return this.props.onError(e, a, b); + + if(e) console.error(e); + if(a) console.error(a); + if(b) console.error(b); + } + + render() { + let clazz = "o-form"; + if(this.props.className) clazz += " " + this.props.className; + + //Do I need a loader? + let loader; + if(this.state.loader && this.state.loading) { + loader = ( + + + + ); + } + + return ( +
+ { this.props.children } + { loader } +
+ ); + } } diff --git a/public/language/en-AU.jsx b/public/language/en-AU.jsx index 7235da5..4ffc818 100644 --- a/public/language/en-AU.jsx +++ b/public/language/en-AU.jsx @@ -125,6 +125,12 @@ module.exports = { "contact": { "title": "Contact Me", + "heading": "Contact Me", + "paragraph": "\ + Want to get in touch with me? Fill out this easy form and I should be \ + in touch shortly to chat! More of a phone person? Leave a number \ + and we can chat.\ + ", "name": { "label": "Name", "placeholder": "Enter your name." diff --git a/public/loading/Loader.jsx b/public/loading/Loader.jsx index 9a83846..507fc86 100644 --- a/public/loading/Loader.jsx +++ b/public/loading/Loader.jsx @@ -23,7 +23,7 @@ import React from 'react'; -export default function(props) { +const Loader = function(props) { return ( @@ -38,3 +38,16 @@ export default function(props) { ); } + +const LoaderBackdrop = function(props) { + return ( +
+ { props.children } +
+ ); +} + +export default Loader; +export { + LoaderBackdrop +}; diff --git a/public/page/contact/ContactPage.jsx b/public/page/contact/ContactPage.jsx index ffdb745..aec3058 100644 --- a/public/page/contact/ContactPage.jsx +++ b/public/page/contact/ContactPage.jsx @@ -52,11 +52,9 @@ class ContactPage extends React.Component { - Contact Me + { Language.get("pages.contact.heading") } - Want to get in touch with me? Fill out this easy form and I should be - in touch shortly to chat! More of a phone person? Leave a number - and we can chat. + { Language.get("pages.contact.paragraph") } @@ -66,7 +64,7 @@ class ContactPage extends React.Component { -
+ diff --git a/public/styles/objects/_form.scss b/public/styles/objects/_form.scss index efa01aa..ad98ad0 100644 --- a/public/styles/objects/_form.scss +++ b/public/styles/objects/_form.scss @@ -8,7 +8,9 @@ * Version: * 1.0.0 - 2018/05/13 */ -.o-form { } +.o-form { + position: relative; +} .o-form__group { + .o-btn-group, diff --git a/public/styles/objects/_loader.scss b/public/styles/objects/_loader.scss index 2baf879..7d607f9 100644 --- a/public/styles/objects/_loader.scss +++ b/public/styles/objects/_loader.scss @@ -46,4 +46,13 @@ stroke: $s-color--loader; } } + + &__backdrop { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.5); + } } diff --git a/webpack.config.js b/webpack.config.js index f221567..f55d703 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -20,6 +20,8 @@ module.exports = { path: '/dist', filename: "app.js" }, + + mode: 'development', resolve: { modules: ['node_modules', './public'], @@ -55,6 +57,9 @@ module.exports = { // initialize the added webpack plugins plugins: [ HTMLWebpackPluginConfig, - new webpack.HotModuleReplacementPlugin() + new webpack.HotModuleReplacementPlugin(), + new webpack.DefinePlugin({ + DEVELOPMENT: JSON.stringify(true) + }) ] };