From 59f726e805acb434d88448a129a30a1c7247f048 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=81=AB=E7=84=9A=20=E5=AF=8C=E8=89=AF?= Date: Tue, 12 Dec 2023 18:21:09 +0800 Subject: [PATCH] Start refactor of order form --- static/js/shop/Backlog.jsx | 2 +- static/js/shop/Cart.jsx | 4 +- static/js/shop/Crate.jsx | 6 +- static/js/shop/CrateList.jsx | 2 +- static/js/shop/ImportJSON.jsx | 2 +- static/js/shop/OrderForm.jsx | 274 +++++------------- static/js/shop/OrderPanel.jsx | 6 +- static/js/shop/OrderSummary.jsx | 4 +- static/js/shop/ProductCartItem.jsx | 6 +- static/js/shop/Shop.jsx | 6 +- static/js/shop/ShowJSON.jsx | 5 + static/js/shop/json_porter.js | 47 +++ static/js/shop/options/DialogPopup.jsx | 2 +- static/js/shop/options/components/Line.jsx | 2 +- static/js/shop/options/components/Radio.jsx | 2 +- static/js/shop/options/components/Switch.jsx | 2 +- .../js/shop/options/components/SwitchLine.jsx | 2 +- .../js/shop/options/components/components.js | 10 +- static/js/shop/shop_store.js | 46 +++ static/js/shop/validate.js | 34 +++ webpack.config.js | 11 +- 21 files changed, 234 insertions(+), 241 deletions(-) create mode 100644 static/js/shop/ShowJSON.jsx create mode 100644 static/js/shop/json_porter.js create mode 100644 static/js/shop/validate.js diff --git a/static/js/shop/Backlog.jsx b/static/js/shop/Backlog.jsx index 39afc9d..b96e59c 100644 --- a/static/js/shop/Backlog.jsx +++ b/static/js/shop/Backlog.jsx @@ -1,7 +1,7 @@ import React from 'react'; import {v4 as uuidv4} from "uuid"; import {Droppable} from "@hello-pangea/dnd"; -import {ProductItem} from "./ProductItem.jsx"; +import {ProductItem} from "./ProductItem"; import {useShopStore} from "./shop_store"; /** diff --git a/static/js/shop/Cart.jsx b/static/js/shop/Cart.jsx index ecf1641..77c78c3 100644 --- a/static/js/shop/Cart.jsx +++ b/static/js/shop/Cart.jsx @@ -1,8 +1,8 @@ import React from 'react' import {Droppable} from "@hello-pangea/dnd"; import {cartStyle} from "./utils"; -import {ProductCartItem} from "./ProductCartItem.jsx"; -import {FakePlaceholder} from "./FakePlaceholder.jsx"; +import {ProductCartItem} from "./ProductCartItem"; +import {FakePlaceholder} from "./FakePlaceholder"; import {FillExtData} from "./options/utils"; import {hp_to_slots, resource_counters} from "./count_resources"; import {useShopStore} from "./shop_store"; diff --git a/static/js/shop/Crate.jsx b/static/js/shop/Crate.jsx index 9f23ca4..4c74d92 100644 --- a/static/js/shop/Crate.jsx +++ b/static/js/shop/Crate.jsx @@ -1,7 +1,7 @@ import React from 'react'; -import {Cart} from "./Cart.jsx"; -import {CrateMode} from "./CrateMode.jsx"; -import {CrateWarnings} from "./CrateWarnings.jsx"; +import {Cart} from "./Cart"; +import {CrateMode} from "./CrateMode"; +import {CrateWarnings} from "./CrateWarnings"; import {useShopStore} from "./shop_store"; import {TriggerCrateWarnings} from "./warnings"; diff --git a/static/js/shop/CrateList.jsx b/static/js/shop/CrateList.jsx index 5b61788..c4f9a21 100644 --- a/static/js/shop/CrateList.jsx +++ b/static/js/shop/CrateList.jsx @@ -1,6 +1,6 @@ import React from 'react' import {Accordion} from "react-bootstrap"; -import {Crate} from "./Crate.jsx"; +import {Crate} from "./Crate"; import {useShopStore} from "./shop_store"; export function CrateList() { diff --git a/static/js/shop/ImportJSON.jsx b/static/js/shop/ImportJSON.jsx index bad145d..19a01c7 100644 --- a/static/js/shop/ImportJSON.jsx +++ b/static/js/shop/ImportJSON.jsx @@ -1,5 +1,5 @@ export function ImportJSON() { return ( -
Import JSON BAOBAO
+
Import JSON PLACEHOLDER
) } \ No newline at end of file diff --git a/static/js/shop/OrderForm.jsx b/static/js/shop/OrderForm.jsx index 7927619..b101026 100644 --- a/static/js/shop/OrderForm.jsx +++ b/static/js/shop/OrderForm.jsx @@ -1,220 +1,78 @@ -import React, {PureComponent} from 'react' -import PropTypes from "prop-types"; +import React from 'react' +import {validateEmail, Validation} from "./validate.js"; +import {useShopStore} from "./shop_store"; /** * Components that renders the form to request quote. */ -export class OrderForm extends PureComponent { +export function OrderForm() { + const { + email, + note, + isProcessing, + isProcessingComplete, + showDescription, + updateEmail, + updateNote, + submitForm, + } = useShopStore(state => ({ + email: state.email, + note: state.note, + isProcessing: state.isProcessing, + isProcessingComplete: state.isProcessingComplete, + showDescription: state.showDescription, + updateEmail: state.updateEmail, + updateNote: state.updateNote, + submitForm: state.submitForm, + })); - static get propTypes() { - return { - isProcessing: PropTypes.bool, - isProcessingComplete: PropTypes.bool, - onClickSubmit: PropTypes.func, - }; - } - constructor(props) { - super(props); - this.state = { - note: '', - email: '', - error: { - note: null, - email: null, - }, - empty: { - note: null, - email: null, - }, - }; + return ( +
- this.handleEmail = this.handleEmail.bind(this); - this.handleNote = this.handleNote.bind(this); - this.handleSubmit = this.handleSubmit.bind(this); - this.resetEmptyError = this.resetEmptyError.bind(this); - this.checkValidation = this.checkValidation.bind(this); - } +
- checkValidation() { - let isValid = true; - let validationFields = {...this.state}; + 0 ? 'errorField' : ''}`} + type="email" + placeholder="Email" + onChange={(event) => updateEmail(event.target.value)} + onBlur={(event) => updateEmail(event.target.value)} + value={email.value}/> - const { - isEmpty: isEmailEmpty, - isError: isEmailError - } = this.validateEmail(this.state.email); - - validationFields = { - ...validationFields, - error: { - ...this.state.error, - email: isEmailError, - }, - empty: { - ...this.state.empty, - email: isEmailEmpty, - } - } - - this.setState(validationFields); - - isValid = - !isEmailEmpty && - !isEmailError - - return isValid; - } - - validateEmail(value) { - let isEmpty = null; - let isError = null; - - const { t } = this.props; - - if (!value || value.trim() === '') { - isEmpty = true; - } else if (value && !value.match(/^\w+([\+\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) { - isError = { - message: 'Your email is incomplete', - }; - } - - return { isEmpty, isError }; - } - - validateNote(value) { - let isEmpty = null; - - if (!value || value.trim() === '') { - isEmpty = true; - } - - return { isEmpty }; - } - - resetEmptyError(key) { - this.setState({ - ...this.state, - error: { - ...this.state.error, - [key]: null, - }, - empty: { - ...this.state.empty, - [key]: null, - }, - }); - } - - handleEmail(e) { - const value = e.target.value; - const { isEmpty, isError } = this.validateEmail(value); - - this.setState({ - ...this.state, - email: value, - error: { - ...this.state.error, - email: isError, - }, - empty: { - ...this.state.empty, - email: isEmpty, - } - }); - } - - handleNote(e) { - const value = e.target.value; - - this.setState({ - ...this.state, - note: value, - }); - } - - handleSubmit(event) { - event.preventDefault(); - - if (this.props.onClickSubmit) { - // check validation input fields - const isValidated = this.checkValidation(); - if (!isValidated) { - return false; - } - - this.props.onClickSubmit(this.state.note, this.state.email); - } - } - - render() { - const { - handleEmail, - handleNote, - resetEmptyError, - handleSubmit, - } = this; - - const { - onClickShow, - } = this.props; - - const { - email, - note, - error, - empty - } = this.state; - - const { isProcessing, isProcessingComplete } = this.props; - - return ( -
- - - - resetEmptyError('email')} - onChange={handleEmail} - onBlur={handleEmail} - value={email} /> - - { empty && empty.email ? ( -
- Required -
- ) : null} - - { error && error.email ? ( -
- Your email is incomplete -
- ) : null} - -