From 21de80a0e8f60a98a94e1a61c5f9af4a54c87a1e Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 19 Jan 2024 17:15:38 -0600 Subject: [PATCH] refactor --- src/.DS_Store | Bin 6148 -> 6148 bytes src/Components/SignupPage/SignupPage.js | 193 ++++++------------------ src/Constants/Fields/PaymentFields.js | 16 -- src/Utils/Form.js | 1 - src/styles/signup.scss | 54 +------ 5 files changed, 51 insertions(+), 213 deletions(-) delete mode 100644 src/Constants/Fields/PaymentFields.js diff --git a/src/.DS_Store b/src/.DS_Store index 14f8fed8bcc2cd3357d316857320387138355f06..fc1de4de276a8fb178f52c5922bb591e28271c30 100644 GIT binary patch delta 28 kcmZoMXfc@J&&abeU^g=(&t@K$_e>khco;XcbNuB80D>+E*8l(j delta 56 zcmZoMXfc@J&&azmU^g=(?`9sB_e|2P4517q44Di$48@)~`N>H+`AG~63<3-cjIxv8 MuzlRj&heKY0JV}2pa1{> diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index b4002ab..8990db0 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState } from "react"; import Col from "react-bootstrap/Col"; import Form from "react-bootstrap/Form"; import Row from "react-bootstrap/Row"; @@ -10,7 +10,6 @@ import TextInput from "../../pageElements/TextInput"; import { v4 as uuidv4 } from "uuid"; import { collection, setDoc, doc } from "firebase/firestore"; import { splitEvery } from "../../Utils/Array"; -import PaymentModal from "../Modals/PaymentModal"; import { getFormDataDefaults, getValidatedFormData, @@ -19,26 +18,17 @@ import { } from "../../Utils/Form"; import { objectMap } from "../../Utils/Object"; import { signupfields } from "../../Constants/Fields/Signupfields"; -import { paymentfields } from "../../Constants/Fields/PaymentFields"; import "../../styles/signup.scss"; const SignupPage = () => { const navigate = useNavigate(); const [notice, setNotice] = useState(""); - const [isMobile, setIsMobile] = useState(window.innerWidth < 440); - useEffect(() => { - setIsMobile(window.innerWidth < 440); - }); + const fieldsChunkSize = 2; + const [isBusy, setIsBusy] = useState(false); const [data, setData] = useState(getFormDataDefaults(signupfields)); - const [paymentdata, setPaymentdata] = useState( - getFormDataDefaults(paymentfields) - ); - - const [showPaymentModal, setShowPaymentModal] = useState(false); - const handleChangeInput = (e, name) => { const newData = handleFormDataChange(e, name, data, signupfields); if (newData !== null) { @@ -46,13 +36,6 @@ const SignupPage = () => { } }; - const handleChangePaymentInput = (e, name) => { - const newData = handleFormDataChange(e, name, data, paymentfields); - if (newData !== null) { - setPaymentdata(newData); - } - }; - const validateData = () => { const newData = getValidatedFormData(data, signupfields); const hasErrors = isFormDataHasErrors(newData); @@ -60,13 +43,6 @@ const SignupPage = () => { return hasErrors ? null : objectMap(({ value }) => value, newData); }; - const validatePaymentData = () => { - const newData = getValidatedFormData(data, signupfields); - const hasErrors = isFormDataHasErrors(newData); - setPaymentdata(newData); - return hasErrors ? null : objectMap(({ value }) => value, newData); - }; - async function saveUserData(authId, dataValues) { const appUserId = uuidv4(); const firmId = uuidv4(); @@ -110,115 +86,31 @@ const SignupPage = () => { } } - async function handleStripePaymentAuthorization(paymentDataValues) { - console.log(paymentDataValues); - // Stripe API calls, etc - } - const handleSignup = async (e) => { e.preventDefault(); - const paymentDataValues = validatePaymentData(); - if (paymentDataValues === null) { + if (isBusy) { return; } - /* - const paymentSuccess = handleStripePaymentAuthorization(paymentDataValues); - - if (paymentSuccess) { - if (isBusy) { - return; - } - - setIsBusy(true); - try { - const userCredential = await createUserWithEmailAndPassword( - auth, - dataValues.email, - dataValues.password - ); - const user = userCredential.user; - await saveUserData(user.uid, dataValues); - navigate("/"); - } catch (error) { - setIsBusy(false); - setNotice( - error.message || "Sorry, something went wrong. Please try again." - ); - } - } - */ - }; - - const handleProceedToPayment = () => { - /* const dataValues = validateData(); if (dataValues === null) { return; } -*/ - setShowPaymentModal(true); - }; - - const handleCancel = () => { - setShowPaymentModal(false); - }; - - const MobileForm = () => { - return splitEvery( - Object.keys(signupfields).slice(0, -2), - fieldsChunkSize - ).map((names, j) => ( - - {names.map((name, i) => ( - - handleChangeInput(e, name)} - error={data[name].error} - message={data[name].message} - label={ - data[name].value.length === 0 ? signupfields[name].label : "" - } - type={signupfields[name].type} - values={signupfields[name].values} - disabled={isBusy} - /> - - ))} - - )); - }; - - const DesktopForm = () => { - return splitEvery( - Object.keys(signupfields).slice(0, -2), - fieldsChunkSize - ).map((names, j) => ( - - {names.map((name, i) => ( - - {console.log("data", data)} - handleChangeInput(e, name)} - error={data[name].error} - message={data[name].message} - label={ - data[name].value.length === 0 ? signupfields[name].label : "" - } - type={signupfields[name].type} - values={signupfields[name].values} - disabled={isBusy} - /> - - ))} - - )); + setIsBusy(true); + try { + const userCredential = await createUserWithEmailAndPassword( + auth, + dataValues.email, + dataValues.password + ); + const user = userCredential.user; + await saveUserData(user.uid, dataValues); + navigate("/"); + } catch (error) { + setIsBusy(false); + setNotice( + error.message || "Sorry, something went wrong. Please try again." + ); + } }; return ( @@ -228,7 +120,32 @@ const SignupPage = () => {

Create a Novodraft account

- {isMobile ? : } + {splitEvery( + Object.keys(signupfields).slice(0, -2), + fieldsChunkSize + ).map((names, j) => ( + + {names.map((name, i) => ( + + handleChangeInput(e, name)} + error={data[name].error} + message={data[name].message} + label={ + data[name].value.length === 0 + ? signupfields[name].label + : "" + } + type={signupfields[name].type} + values={signupfields[name].values} + disabled={isBusy} + /> + + ))} + + ))} {
); }; diff --git a/src/Constants/Fields/PaymentFields.js b/src/Constants/Fields/PaymentFields.js deleted file mode 100644 index 24cd328..0000000 --- a/src/Constants/Fields/PaymentFields.js +++ /dev/null @@ -1,16 +0,0 @@ -export const paymentfields = { - cardFirstName: { required: true, label: "Card - First Name", maxLength: 45 }, - cardLastName: { required: true, label: "Card - Last Name", maxLength: 45 }, - cardNumber: { - required: true, - label: "Card Number", - minLength: 16, - maxLength: 16, - }, - cardSecNumber: { - required: true, - label: "Card CVV Number", - minLength: 3, - maxLength: 6, - }, -}; diff --git a/src/Utils/Form.js b/src/Utils/Form.js index 01c9f3f..3e44f77 100644 --- a/src/Utils/Form.js +++ b/src/Utils/Form.js @@ -84,7 +84,6 @@ export const getValidatedFormData = (data, fields) => }, data); export const handleFormDataChange = (e, name, data, fields) => { - console.log("e", e); const value = (typeof e?.target?.value === "undefined" ? e.value : e.target.value) || ""; const field = fields[name]; diff --git a/src/styles/signup.scss b/src/styles/signup.scss index d257aad..cf3ac59 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -42,56 +42,6 @@ flex-direction: column; align-items: flex-end; } - -.signup-proceed-button { - width: 160px; -} - -.signup-passw-inputs { - width: 100%; -} -span { - margin-right: 6px; -} -@media only screen and (max-width: 430px) { - .signup-sub-container { - display: flex; - flex-direction: column; - align-items: center; - margin-top: 25px; - width: 420px; - border-radius: 10px; - background-color: rgb(240, 247, 250); - border: 1px solid #e9e9e9; - } - .signup-header-text { - font-size: 1.5rem; - } - - .signup-form { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-right: auto; - margin-left: auto; - width: 390px; - } - - .signup-mobile-column { - width: 340px; - } - - .signup-button-box { - width: 320px; - align-items: center; - } - - .signup-passw-inputs { - width: 370px; - } - - span { - margin-right: 6px; - } +.signup-btn { + width: 150px; }