From fceb739b3ab5f8efb75e5b081257a39ad60c7f60 Mon Sep 17 00:00:00 2001 From: Arctichawk1 Date: Sun, 4 Apr 2021 21:46:59 -0400 Subject: [PATCH] Finished the contact-form. --- package-lock.json | 85 +++++++++++++++++++ package.json | 3 + .../contact-us/contact-us.js | 36 ++++++-- 3 files changed, 119 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3963f53..d64396a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1305,6 +1305,15 @@ "@hapi/hoek": "^8.3.0" } }, + "@hypnosphi/create-react-context": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz", + "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==", + "requires": { + "gud": "^1.0.0", + "warning": "^4.0.3" + } + }, "@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -7335,6 +7344,11 @@ "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=", "optional": true }, + "gud": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" + }, "gzip-size": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz", @@ -11539,6 +11553,11 @@ "ts-pnp": "^1.1.6" } }, + "popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==" + }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -12856,6 +12875,20 @@ "object-assign": "^4.1.1" } }, + "react-alert": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/react-alert/-/react-alert-7.0.2.tgz", + "integrity": "sha512-oUxPk9DMaEm93Y33mdAmy4vDPZauMj30di4p4+QuZ3JOyoFSFteLSsjlhTkDjkyvJuVxToi3bbnsxehRHEPpeg==", + "requires": { + "prop-types": "^15.7.2", + "react-transition-group": "^4.4.1" + } + }, + "react-alert-template-basic": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-alert-template-basic/-/react-alert-template-basic-1.0.0.tgz", + "integrity": "sha512-6x5Us0oc+jj8BDNkvSWfQMESk5SdyGKitXdLb7CwIlIlecyATjCTKSWpLABg8tpKAPOSJu4Dv/fYUqxXEio/XA==" + }, "react-app-polyfill": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz", @@ -13108,6 +13141,20 @@ "warning": "^4.0.3" } }, + "react-popper": { + "version": "1.3.11", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz", + "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==", + "requires": { + "@babel/runtime": "^7.1.2", + "@hypnosphi/create-react-context": "^0.3.1", + "deep-equal": "^1.1.1", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.7", + "warning": "^4.0.2" + } + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -13258,6 +13305,39 @@ "prop-types": "^15.6.2" } }, + "reactstrap": { + "version": "8.9.0", + "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.9.0.tgz", + "integrity": "sha512-pmf33YjpNZk1IfrjqpWCUMq9hk6GzSnMWBAofTBNIRJQB1zQ0Au2kzv3lPUAFsBYgWEuI9iYa/xKXHaboSiMkQ==", + "requires": { + "@babel/runtime": "^7.12.5", + "classnames": "^2.2.3", + "prop-types": "^15.5.8", + "react-popper": "^1.3.6", + "react-transition-group": "^2.3.1" + }, + "dependencies": { + "dom-helpers": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", + "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "requires": { + "@babel/runtime": "^7.1.2" + } + }, + "react-transition-group": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", + "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", + "requires": { + "dom-helpers": "^3.4.0", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2", + "react-lifecycles-compat": "^3.0.4" + } + } + } + }, "read-pkg": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", @@ -15508,6 +15588,11 @@ "mime-types": "~2.1.24" } }, + "typed-styles": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", + "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" + }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", diff --git a/package.json b/package.json index e067f84..601f001 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "joi-browser": "^13.4.0", "nodemailer": "^6.5.0", "react": "^17.0.2", + "react-alert": "^7.0.2", + "react-alert-template-basic": "^1.0.0", "react-bootstrap": "^1.5.2", "react-bootstrap-carousel": "^4.1.1", "react-dom": "^17.0.2", @@ -24,6 +26,7 @@ "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "react-select": "^4.3.0", + "reactstrap": "^8.9.0", "spectre.css": "^0.5.9", "web-vitals": "^1.1.1" }, diff --git a/src/shared-components/contact-us/contact-us.js b/src/shared-components/contact-us/contact-us.js index af222af..7030362 100644 --- a/src/shared-components/contact-us/contact-us.js +++ b/src/shared-components/contact-us/contact-us.js @@ -6,6 +6,9 @@ import { FieldFeedbacks, FormWithConstraints } from 'react-form-with-constraints'; +import Alert from 'react-bootstrap/Alert'; + + class ContactUs extends Component { constructor(props) { @@ -16,7 +19,10 @@ class ContactUs extends Component { email: "", message: "", agent: "", - house: "" + house: "", + alertBad: false, + alertSucess: false, + time: false }; } @@ -24,6 +30,18 @@ class ContactUs extends Component { render() { return (
+ this.setState({ alertBad: false })} dismissible> + Message could not send. +

+ There are some errors in your contact form. +

+ + this.setState({ alertSucess: false })} dismissible> + The message is successfully sent. +

+ You contact form will be delivered to our support team. +

+
@@ -166,27 +184,35 @@ class ContactUs extends Component { this.form.validateFields(); if (!this.form.isValid()) { + this.alertBad(); return; } else { + this.alertSuccess(); axios({ method: "POST", url: "http://localhost:3002/send", data: this.state }).then((response) => { if (response.data.status === 'success') { - alert("Message Sent."); this.resetForm(); } else if (response.data.status === 'fail') { - alert("Message failed to send."); + return; } }) } - + } + + alertSuccess(){ + this.setState({ alertBad: false, alertSucess: true }) + } + + alertBad(){ + this.setState({ alertSucess: false, alertBad: true }) } resetForm() { - this.setState({ firstname: '', lastname: '', email: '', message: '', agent: '', house: '' }) + this.setState({ firstname: '', lastname: '', email: '', message: '', agent: '', house: '' }) } }