From a5eb1f2edf8bf7463fed711681d2682f9b958c21 Mon Sep 17 00:00:00 2001 From: chief-bube Date: Fri, 13 Jan 2023 09:07:03 -0800 Subject: [PATCH 1/7] Worked on the form validation --- src/assets/css/style.css | 22 +++++ src/component/Contact/Main.js | 149 ++++++++++++++++++++++------- src/vendors/service/siteService.js | 8 +- 3 files changed, 142 insertions(+), 37 deletions(-) diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 6025ce5..bab1b11 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -3521,6 +3521,28 @@ header.fix_style.white_header { margin-bottom: 20px; } +/* For the err msg */ +.contact_page_section .contact_inner .contact_form form .form-group span{ + font-size: 12px; + color: tomato; + padding: 3px; + display: none; +} + +.contact_page_section .contact_inner .contact_form form .form-group input:invalid ~ span{ + display: block; +} + +/* +input:invalid[focused="true"]{ + border: 1px solid red; +} + +input:invalid[focused="true"] ~ span{ + display: block; +} +*/ + .contact_page_section .contact_inner .contact_form diff --git a/src/component/Contact/Main.js b/src/component/Contact/Main.js index 7b65228..b9ec1d1 100644 --- a/src/component/Contact/Main.js +++ b/src/component/Contact/Main.js @@ -7,18 +7,71 @@ import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"; import SiteService from "../../vendors/service/siteService"; -const Main = ({ brdcum }) => { - let [countries, setCountries] = useState([]) // initial state for country dropdown - let countryClass = new SiteService() // instantiating the class +// Form Inputs +const FormInput = (props) => { + let { + name, + type, + placeholder, + required, + maxLenght, + errorMessage, + value, + onChange, + } = props; + return ( +
+ + {errorMessage} +
+ ); +}; + +const Main = ({ brdcum }) => { + // Form Validation + const [values, setValues] = useState({ + name: "", + email: "", + phone: "", + msg: "", + }); //initial state values + const [countries, setCountries] = useState([]); // initial state for country dropdown + + // Gave a generic name for multiple calls + const API_CALL = new SiteService(); // instantiating the class + const allCountry = () => { - return countryClass.countryData(); - } + return API_CALL.countryData(); + }; + + const contactForm = () => { + return API_CALL.contactData(); + }; + + // Submitting form + const handleSubmit = (e) => { + e.preventDefault(); + }; + + const onChange = (e) => { + setValues({ ...values, [e.target.name]: e.target.value }); + }; //CALLS THE API AFTER COMPONENT LOADS - useEffect(()=>{ - allCountry().then((data)=> setCountries(Object.values(data.data))) - },[]) + useEffect(() => { + allCountry().then((data) => setCountries(Object.values(data.data))); + console.log(values); + }, []); return ( <> @@ -77,44 +130,64 @@ const Main = ({ brdcum }) => {

- Leave a message + Leave a message

Fill up form below, our team will get back soon

-
-
- -
-
- -
+ + {/* Contact Form */} + + + +
-
- -
+ +
@@ -130,6 +203,8 @@ const Main = ({ brdcum }) => {
+ + {/* Contact Info */}
image @@ -153,7 +228,9 @@ const Main = ({ brdcum }) => {
Email Us - example@gmail.com + + {process.env.REACT_APP_SUPPORT_EMAIL} +
  • @@ -162,7 +239,9 @@ const Main = ({ brdcum }) => {
    • Call Us - +1 (888) 553-46-11 + + {process.env.REACT_APP_US_PHONE} +
  • @@ -171,7 +250,7 @@ const Main = ({ brdcum }) => {
    Visit Us -

    5687, Business Avenue, New York, USA 5687

    +

    {process.env.REACT_APP_US_ADDRESS}

    • diff --git a/src/vendors/service/siteService.js b/src/vendors/service/siteService.js index dbea9f4..7cf0e67 100644 --- a/src/vendors/service/siteService.js +++ b/src/vendors/service/siteService.js @@ -13,11 +13,15 @@ class SiteService { return this.getAuxEnd("/country", null); } + contactData() { + return this.postAuxEnd("/contact", null) + } + faqData() {} - + //---------------------------------------- ----- //---------------------------------------- ----- - // Unified call below + // Unified call below //---------------------------------------- ----- //---------------------------------------- ----- getAuxEnd(uri, reqData) { From ada920382432fdac23930ddaa6656f089fcec9b4 Mon Sep 17 00:00:00 2001 From: chief-bube Date: Fri, 13 Jan 2023 09:55:01 -0800 Subject: [PATCH 2/7] Form Validation for Contact Form --- src/assets/css/style.css | 22 ----- src/component/Contact/Main.js | 149 +++++++---------------------- src/vendors/service/siteService.js | 8 +- 3 files changed, 37 insertions(+), 142 deletions(-) diff --git a/src/assets/css/style.css b/src/assets/css/style.css index bab1b11..6025ce5 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -3521,28 +3521,6 @@ header.fix_style.white_header { margin-bottom: 20px; } -/* For the err msg */ -.contact_page_section .contact_inner .contact_form form .form-group span{ - font-size: 12px; - color: tomato; - padding: 3px; - display: none; -} - -.contact_page_section .contact_inner .contact_form form .form-group input:invalid ~ span{ - display: block; -} - -/* -input:invalid[focused="true"]{ - border: 1px solid red; -} - -input:invalid[focused="true"] ~ span{ - display: block; -} -*/ - .contact_page_section .contact_inner .contact_form diff --git a/src/component/Contact/Main.js b/src/component/Contact/Main.js index b9ec1d1..7b65228 100644 --- a/src/component/Contact/Main.js +++ b/src/component/Contact/Main.js @@ -7,71 +7,18 @@ import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"; import SiteService from "../../vendors/service/siteService"; -// Form Inputs -const FormInput = (props) => { - let { - name, - type, - placeholder, - required, - maxLenght, - errorMessage, - value, - onChange, - } = props; - - return ( -
    - - {errorMessage} -
    - ); -}; - const Main = ({ brdcum }) => { - // Form Validation - const [values, setValues] = useState({ - name: "", - email: "", - phone: "", - msg: "", - }); //initial state values - const [countries, setCountries] = useState([]); // initial state for country dropdown - - // Gave a generic name for multiple calls - const API_CALL = new SiteService(); // instantiating the class - + let [countries, setCountries] = useState([]) // initial state for country dropdown + let countryClass = new SiteService() // instantiating the class + const allCountry = () => { - return API_CALL.countryData(); - }; - - const contactForm = () => { - return API_CALL.contactData(); - }; - - // Submitting form - const handleSubmit = (e) => { - e.preventDefault(); - }; - - const onChange = (e) => { - setValues({ ...values, [e.target.name]: e.target.value }); - }; + return countryClass.countryData(); + } //CALLS THE API AFTER COMPONENT LOADS - useEffect(() => { - allCountry().then((data) => setCountries(Object.values(data.data))); - console.log(values); - }, []); + useEffect(()=>{ + allCountry().then((data)=> setCountries(Object.values(data.data))) + },[]) return ( <> @@ -130,64 +77,44 @@ const Main = ({ brdcum }) => {

    - Leave a message + Leave a message

    Fill up form below, our team will get back soon

    - - {/* Contact Form */} -
    - - - + +
    + +
    +
    + +
    - - +
    + +
    @@ -203,8 +130,6 @@ const Main = ({ brdcum }) => {
    - - {/* Contact Info */}
    image @@ -228,9 +153,7 @@ const Main = ({ brdcum }) => {
    Email Us - - {process.env.REACT_APP_SUPPORT_EMAIL} - + example@gmail.com
  • @@ -239,9 +162,7 @@ const Main = ({ brdcum }) => {
    • Call Us - - {process.env.REACT_APP_US_PHONE} - + +1 (888) 553-46-11
  • @@ -250,7 +171,7 @@ const Main = ({ brdcum }) => {
    Visit Us -

    {process.env.REACT_APP_US_ADDRESS}

    +

    5687, Business Avenue, New York, USA 5687

    • diff --git a/src/vendors/service/siteService.js b/src/vendors/service/siteService.js index 7cf0e67..dbea9f4 100644 --- a/src/vendors/service/siteService.js +++ b/src/vendors/service/siteService.js @@ -13,15 +13,11 @@ class SiteService { return this.getAuxEnd("/country", null); } - contactData() { - return this.postAuxEnd("/contact", null) - } - faqData() {} - + //---------------------------------------- ----- //---------------------------------------- ----- - // Unified call below + // Unified call below //---------------------------------------- ----- //---------------------------------------- ----- getAuxEnd(uri, reqData) { From 1834077952cfc47673b75e901004ae7396185b93 Mon Sep 17 00:00:00 2001 From: Chukwumdiebube Date: Fri, 13 Jan 2023 21:16:31 +0100 Subject: [PATCH 3/7] form validations part --- src/assets/css/style.css | 22 +++++ src/component/Contact/Main.js | 154 ++++++++++++++++++++++------- src/vendors/service/siteService.js | 7 ++ 3 files changed, 146 insertions(+), 37 deletions(-) diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 6025ce5..bab1b11 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -3521,6 +3521,28 @@ header.fix_style.white_header { margin-bottom: 20px; } +/* For the err msg */ +.contact_page_section .contact_inner .contact_form form .form-group span{ + font-size: 12px; + color: tomato; + padding: 3px; + display: none; +} + +.contact_page_section .contact_inner .contact_form form .form-group input:invalid ~ span{ + display: block; +} + +/* +input:invalid[focused="true"]{ + border: 1px solid red; +} + +input:invalid[focused="true"] ~ span{ + display: block; +} +*/ + .contact_page_section .contact_inner .contact_form diff --git a/src/component/Contact/Main.js b/src/component/Contact/Main.js index 7b65228..1ea58d3 100644 --- a/src/component/Contact/Main.js +++ b/src/component/Contact/Main.js @@ -7,18 +7,72 @@ import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"; import SiteService from "../../vendors/service/siteService"; -const Main = ({ brdcum }) => { - let [countries, setCountries] = useState([]) // initial state for country dropdown - let countryClass = new SiteService() // instantiating the class +// Form Inputs +const FormInput = (props) => { + let { + name, + type, + placeholder, + required, + maxLenght, + errorMessage, + value, + onChange, + } = props; + return ( +
    + + {errorMessage} +
    + ); +}; + +const Main = ({ brdcum }) => { + // Form Validation + const [values, setValues] = useState({ + name: "", + email: "", + phone: "", + msg: "", + country: '' + }); //initial state values + const [countries, setCountries] = useState([]); // initial state for country dropdown + + // Gave a generic name for multiple calls + const API_CALL = new SiteService(); // instantiating the class + const allCountry = () => { - return countryClass.countryData(); - } + return API_CALL.countryData(); + }; + + const contactForm = () => { + return API_CALL.contactData(); + }; + + // Submitting form + const handleSubmit = (e) => { + e.preventDefault(); + }; + + const onChange = (e) => { + setValues({ ...values, [e.target.name]: e.target.value }); + }; //CALLS THE API AFTER COMPONENT LOADS - useEffect(()=>{ - allCountry().then((data)=> setCountries(Object.values(data.data))) - },[]) + useEffect(() => { + allCountry().then((data) => setCountries(Object.values(data.data))); + console.log(values); + }, []); return ( <> @@ -77,44 +131,64 @@ const Main = ({ brdcum }) => {

    - Leave a message + Leave a message

    Fill up form below, our team will get back soon

    -
    -
    - -
    -
    - -
    + + {/* Contact Form */} + + + +
    -
    - -
    + +
    @@ -130,6 +204,8 @@ const Main = ({ brdcum }) => {
    + + {/* Contact Info */}
    image @@ -153,7 +229,9 @@ const Main = ({ brdcum }) => {
    Email Us - example@gmail.com + + {process.env.REACT_APP_SUPPORT_EMAIL} +
  • @@ -162,7 +240,9 @@ const Main = ({ brdcum }) => {
    • Call Us - +1 (888) 553-46-11 + + {process.env.REACT_APP_US_PHONE} +
  • @@ -171,7 +251,7 @@ const Main = ({ brdcum }) => {
    Visit Us -

    5687, Business Avenue, New York, USA 5687

    +

    {process.env.REACT_APP_US_ADDRESS}

    • @@ -186,4 +266,4 @@ const Main = ({ brdcum }) => { ); }; -export default Main; +export default Main; \ No newline at end of file diff --git a/src/vendors/service/siteService.js b/src/vendors/service/siteService.js index dbea9f4..5a17884 100644 --- a/src/vendors/service/siteService.js +++ b/src/vendors/service/siteService.js @@ -5,14 +5,21 @@ class SiteService { constructor() { console.log("Er are here anyway"); } + // Blog Data {Get} blogData() { return this.getAuxEnd("blogdata", null); } + // Country Data {GET} countryData() { return this.getAuxEnd("/country", null); } + // Contact Data{POST} + contactData() { + return this.postAuxEnd("/contact", null) + } + faqData() {} //---------------------------------------- ----- From f452bb90ffd125fce53f900f9f9c44ac0e08633d Mon Sep 17 00:00:00 2001 From: Chukwumdiebube Date: Sat, 14 Jan 2023 01:22:37 +0100 Subject: [PATCH 4/7] form validation complete --- .env | 3 +- src/assets/css/style.css | 24 +++++----- src/component/Contact/Main.js | 86 +++++++++++++++++++++++++++-------- 3 files changed, 82 insertions(+), 31 deletions(-) diff --git a/.env b/.env index 7cf7357..fae5d1c 100644 --- a/.env +++ b/.env @@ -8,6 +8,7 @@ REACT_APP_IOS_URL="https://play.google.com/store/apps/details?id=com.mermsemr.my REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246" REACT_APP_TWITTER="https://twitter.com/fluxtra" -REACT_APP_APPSITE="https://myfitapp.mermsemr.com" +# Changed href to this url +REACT_APP_APPSITE=" http://www.dev.floatev.chiefsoft.us" REACT_APP_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit" diff --git a/src/assets/css/style.css b/src/assets/css/style.css index bab1b11..9c06d9e 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -3521,6 +3521,10 @@ header.fix_style.white_header { margin-bottom: 20px; } +.contact_page_section .contact_inner .contact_form form .form-group textarea { + resize: none; +} + /* For the err msg */ .contact_page_section .contact_inner .contact_form form .form-group span{ font-size: 12px; @@ -3529,20 +3533,18 @@ header.fix_style.white_header { display: none; } -.contact_page_section .contact_inner .contact_form form .form-group input:invalid ~ span{ +.contact_page_section .contact_inner .contact_form form .form-group input:valid[focused="true"]{ + border: 1px solid var(--dark-purple); +} + +.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"]{ + border: 1px solid tomato; +} + +.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"] ~ span{ display: block; } -/* -input:invalid[focused="true"]{ - border: 1px solid red; -} - -input:invalid[focused="true"] ~ span{ - display: block; -} -*/ - .contact_page_section .contact_inner .contact_form diff --git a/src/component/Contact/Main.js b/src/component/Contact/Main.js index 1ea58d3..eb4d922 100644 --- a/src/component/Contact/Main.js +++ b/src/component/Contact/Main.js @@ -1,9 +1,12 @@ +/** @format */ + import React, { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import Bredcrumb from "../Bredcrumb/Main"; import BGImg from "../../assets/images/bread_crumb_bg.png"; import BGImg1 from "../../assets/images/bread_crumb_bg_one.png"; import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"; +import axios from "axios" import SiteService from "../../vendors/service/siteService"; @@ -18,8 +21,14 @@ const FormInput = (props) => { errorMessage, value, onChange, + pattern, } = props; - + + const [focused, setFocused] = useState(false); + const handleFocus = () => { + return setFocused(true); + }; + return (
    { required={required} value={value} onChange={onChange} + onBlur={handleFocus} + pattern={pattern} + focused={focused.toString()} /> {errorMessage}
    @@ -44,7 +56,8 @@ const Main = ({ brdcum }) => { email: "", phone: "", msg: "", - country: '' + country: "", + checkBox: false }); //initial state values const [countries, setCountries] = useState([]); // initial state for country dropdown @@ -58,14 +71,16 @@ const Main = ({ brdcum }) => { const contactForm = () => { return API_CALL.contactData(); }; + + const onChange = (e) => { + setValues((prev) => ({ ...prev, [e.target.name]: e.target.value })); + }; + console.log(values) // Submitting form const handleSubmit = (e) => { e.preventDefault(); - }; - const onChange = (e) => { - setValues({ ...values, [e.target.name]: e.target.value }); }; //CALLS THE API AFTER COMPONENT LOADS @@ -125,7 +140,9 @@ const Main = ({ brdcum }) => { /> )} -
    +
    @@ -147,13 +164,14 @@ const Main = ({ brdcum }) => { maxLenght={35} value={values.name} onChange={onChange} + pattern="^[A-Za-z]{1,35}$" /> { />
    - + {countries.length > 0 && countries.map((country, index) => ( - ))} @@ -189,16 +214,25 @@ const Main = ({ brdcum }) => { placeholder="Your message" value={values.msg} onChange={onChange} - > + maxLength={350} + />
    - +
    -
    @@ -208,7 +242,10 @@ const Main = ({ brdcum }) => { {/* Contact Info */}
    - image + image

    @@ -219,13 +256,18 @@ const Main = ({ brdcum }) => { or company, Visit our FAQs page.

    - + READ FAQ
    • - image + image
      Email Us @@ -236,7 +278,10 @@ const Main = ({ brdcum }) => {
    • - image + image
      Call Us @@ -247,7 +292,10 @@ const Main = ({ brdcum }) => {
    • - image + image
      Visit Us @@ -266,4 +314,4 @@ const Main = ({ brdcum }) => { ); }; -export default Main; \ No newline at end of file +export default Main; From 0f34385f133025bc8dc2835ac4efc2ef048501c1 Mon Sep 17 00:00:00 2001 From: Chukwumdiebube Date: Sat, 14 Jan 2023 15:57:02 +0100 Subject: [PATCH 5/7] Success in the api call --- src/component/Contact/Main.js | 30 ++++++++++++++++++++---------- src/vendors/service/siteService.js | 2 +- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/component/Contact/Main.js b/src/component/Contact/Main.js index eb4d922..e93dd6c 100644 --- a/src/component/Contact/Main.js +++ b/src/component/Contact/Main.js @@ -6,7 +6,7 @@ import Bredcrumb from "../Bredcrumb/Main"; import BGImg from "../../assets/images/bread_crumb_bg.png"; import BGImg1 from "../../assets/images/bread_crumb_bg_one.png"; import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"; -import axios from "axios" +import axios from "axios"; import SiteService from "../../vendors/service/siteService"; @@ -57,7 +57,7 @@ const Main = ({ brdcum }) => { phone: "", msg: "", country: "", - checkBox: false + checkBox: false, }); //initial state values const [countries, setCountries] = useState([]); // initial state for country dropdown @@ -68,25 +68,30 @@ const Main = ({ brdcum }) => { return API_CALL.countryData(); }; - const contactForm = () => { - return API_CALL.contactData(); + const contactForm = async (value) => { + return await API_CALL.contactData(value); }; - + const onChange = (e) => { setValues((prev) => ({ ...prev, [e.target.name]: e.target.value })); }; - console.log(values) + console.log(values); // Submitting form - const handleSubmit = (e) => { + const handleSubmit = async (e) => { e.preventDefault(); + let formReg; + + contactForm(JSON.stringify(values)).then((contact) => { + formReg = contact; + console.log("FormReg:", formReg); + }); }; //CALLS THE API AFTER COMPONENT LOADS useEffect(() => { allCountry().then((data) => setCountries(Object.values(data.data))); - console.log(values); }, []); return ( @@ -185,7 +190,11 @@ const Main = ({ brdcum }) => { value={values.country} onChange={onChange} required> - + {countries.length > 0 && countries.map((country, index) => (
    -
    +
    );