perf(shipping): CHECKOUT-4272 Stop passing arrow functions into compo…

…nents in shipping components
bigcommerce · Aug 27, 2019 · 4d163d9 · 4d163d9
1 parent 9446fa6
commit 4d163d9
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 76 deletions.
diff --git a/src/app/common/error/ErrorModal.tsx b/src/app/common/error/ErrorModal.tsx
@@ -1,5 +1,5 @@
 import { noop } from 'lodash';
-import React, { Fragment, PureComponent, ReactNode } from 'react';
+import React, { Fragment, PureComponent, ReactNode, SyntheticEvent } from 'react';
 
 import { TranslatedString } from '../../locale';
 import { Button, ButtonSize } from '../../ui/button';
@@ -22,15 +22,15 @@ export interface ErrorModalOnCloseProps {
     error: Error;
 }
 
-class ErrorModal extends PureComponent<ErrorModalProps> {
+export default class ErrorModal extends PureComponent<ErrorModalProps> {
     render(): ReactNode {
         const { error } = this.props;
 
         return (
             <Modal
                 isOpen={ !!error }
                 additionalModalClassName="modal--error"
-                onRequestClose={ event => this.handleOnRequestClose(event.nativeEvent) }
+                onRequestClose={ this.handleOnRequestClose }
                 header={ this.renderHeader() }
                 footer={ this.renderFooter() }
             >
@@ -73,7 +73,7 @@ class ErrorModal extends PureComponent<ErrorModalProps> {
     private renderFooter(): ReactNode {
         return (
             <Button
-                onClick={ event => this.handleOnRequestClose(event.nativeEvent) }
+                onClick={ this.handleOnRequestClose }
                 size={ ButtonSize.Small }
             >
                 <TranslatedString id="common.ok_action" />
@@ -100,16 +100,14 @@ class ErrorModal extends PureComponent<ErrorModalProps> {
         return <ErrorCode code={ errorCode } />;
     }
 
-    private handleOnRequestClose: (event: Event) => void = event => {
+    private handleOnRequestClose: (event: SyntheticEvent) => void = event => {
         const {
             error,
             onClose = noop,
         } = this.props;
 
         if (error) {
-            onClose(event, { error });
+            onClose(event.nativeEvent, { error });
         }
     };
 }
-
-export default ErrorModal;
diff --git a/src/app/orderComments/OrderComments.tsx b/src/app/orderComments/OrderComments.tsx
@@ -1,32 +1,37 @@
-import React, { FunctionComponent } from 'react';
+import { FieldProps } from 'formik';
+import React, { useCallback, useMemo, FunctionComponent } from 'react';
 
 import { TranslatedString } from '../locale';
 import { Fieldset, FormField, Label, Legend, TextInput } from '../ui/form';
 
-const OrderComments: FunctionComponent = () => (
-    <Fieldset testId="checkout-shipping-comments"
-        legend={
-            <Legend>
-                <TranslatedString id="shipping.order_comment_label" />
-            </Legend>
-        }
-    >
+const OrderComments: FunctionComponent = () => {
+    const renderLabel = useCallback(name => (
+        <Label hidden htmlFor={ name }>
+            <TranslatedString id="shipping.order_comment_label" />
+        </Label>
+    ), []);
+
+    const renderInput = useCallback(({ field }: FieldProps) => (
+        <TextInput
+            { ...field }
+            maxLength={ 2000 }
+            autoComplete={ 'off' }
+        />
+    ), []);
+
+    const legend = useMemo(() => (
+        <Legend>
+            <TranslatedString id="shipping.order_comment_label" />
+        </Legend>
+    ), []);
+
+    return <Fieldset testId="checkout-shipping-comments" legend={ legend }>
         <FormField
             name="orderComment"
-            label={ name => (
-                <Label hidden htmlFor={ name }>
-                    <TranslatedString id="shipping.order_comment_label" />
-                </Label>
-            ) }
-            input={ ({ field }) => (
-                <TextInput
-                    { ...field }
-                    maxLength={ 2000 }
-                    autoComplete={'off'}
-                />
-            )}
+            label={ renderLabel }
+            input={ renderInput }
         />
-    </Fieldset>
-);
+    </Fieldset>;
+};
 
 export default OrderComments;
diff --git a/src/app/shipping/ItemAddressSelect.tsx b/src/app/shipping/ItemAddressSelect.tsx
@@ -1,5 +1,5 @@
 import { Address, CustomerAddress } from '@bigcommerce/checkout-sdk';
-import React, { FunctionComponent } from 'react';
+import React, { useCallback, FunctionComponent } from 'react';
 
 import { AddressSelect } from '../address';
 
@@ -8,13 +8,14 @@ import ShippableItem from './ShippableItem';
 export interface ItemAddressSelectProps {
     item: ShippableItem;
     addresses: CustomerAddress[];
-    onSelectAddress(address: Address, itemId: string): void;
+    onSelectAddress(address: Address, itemId: string, itemKey: string): void;
     onUseNewAddress(address: Address | undefined, itemId: string): void;
 }
 
 const ItemAddressSelect: FunctionComponent<ItemAddressSelectProps> = ({
     item: {
         id,
+        key,
         imageUrl,
         quantity,
         name,
@@ -24,8 +25,23 @@ const ItemAddressSelect: FunctionComponent<ItemAddressSelectProps> = ({
     addresses,
     onSelectAddress,
     onUseNewAddress,
-}) => (
-    <div className="consignment">
+}) => {
+    const handleUseNewAddress = useCallback((address: Address) => {
+        onUseNewAddress(address, id as string);
+    }, [
+        id,
+        onUseNewAddress,
+    ]);
+
+    const handleSelectAddress = useCallback((address: Address) => {
+        onSelectAddress(address, id as string, key);
+    }, [
+        id,
+        key,
+        onSelectAddress,
+    ]);
+
+    return <div className="consignment">
         <figure className="consignment-product-figure">
             { imageUrl &&
                 <img src={ imageUrl } alt={ name } />
@@ -52,11 +68,11 @@ const ItemAddressSelect: FunctionComponent<ItemAddressSelectProps> = ({
             <AddressSelect
                 addresses={ addresses }
                 selectedAddress={ consignment && consignment.shippingAddress }
-                onUseNewAddress={ address => onUseNewAddress(address, id as string) }
-                onSelectAddress={ address => onSelectAddress(address, id as string) }
+                onUseNewAddress={ handleUseNewAddress }
+                onSelectAddress={ handleSelectAddress }
             />
         </div>
-    </div>
-);
+    </div>;
+};
 
 export default ItemAddressSelect;
diff --git a/src/app/shipping/MultiShippingForm.tsx b/src/app/shipping/MultiShippingForm.tsx
@@ -94,7 +94,7 @@ class MultiShippingForm extends Component<MultiShippingFormProps & WithLanguageP
                             <ItemAddressSelect
                                 item={ item }
                                 addresses={ addresses }
-                                onSelectAddress={ (address, itemId) => this.handleSelectAddress(address, itemId, item.key)}
+                                onSelectAddress={ this.handleSelectAddress }
                                 onUseNewAddress={ onUseNewAddress }
                             />
                         </li>

diff --git a/src/app/shipping/ShippingAddress.tsx b/src/app/shipping/ShippingAddress.tsx
@@ -1,6 +1,8 @@
 import { Address, CheckoutSelectors, Consignment, Country, CustomerAddress, CustomerRequestOptions, FormField, ShippingInitializeOptions, ShippingRequestOptions } from '@bigcommerce/checkout-sdk';
 import { noop } from 'lodash';
-import React, { FunctionComponent } from 'react';
+import React, { useCallback, FunctionComponent } from 'react';
+
+import { memoize } from '../common/utility';
 
 import RemoteShippingAddress from './RemoteShippingAddress';
 import ShippingAddressForm from './ShippingAddressForm';
@@ -44,9 +46,29 @@ const ShippingAddress: FunctionComponent<ShippingAddressProps> = props => {
         onUnhandledError = noop,
     } = props;
 
+    const handleSignOutRequest = useCallback(async () => {
+        try {
+            await signOut({ methodId });
+            window.location.reload();
+        } catch (error) {
+            onUnhandledError(error);
+        }
+    }, [
+        methodId,
+        onUnhandledError,
+        signOut,
+    ]);
+
+    const initializeShipping = useCallback(memoize((defaultOptions: ShippingInitializeOptions) => (
+        (options?: ShippingInitializeOptions) => initialize({
+            ...defaultOptions,
+            ...options,
+        })
+    )), []);
+
     if (methodId) {
         const containerId = 'addressWidget';
-        let options: ShippingInitializeOptions;
+        let options: ShippingInitializeOptions = {};
 
         if (methodId === 'amazon') {
             options = {
@@ -61,19 +83,9 @@ const ShippingAddress: FunctionComponent<ShippingAddressProps> = props => {
             <RemoteShippingAddress
                 containerId={ containerId }
                 methodId={ methodId }
-                onSignOut={ async () => {
-                    try {
-                        await signOut({ methodId });
-                        window.location.reload();
-                    } catch (error) {
-                        onUnhandledError(error);
-                    }
-                } }
+                onSignOut={ handleSignOutRequest }
                 deinitialize={ deinitialize }
-                initialize={ defaultOptions => initialize({
-                    ...defaultOptions,
-                    ...options,
-                }) }
+                initialize={ initializeShipping(options) }
             />
         );
     }

diff --git a/src/app/shipping/ShippingAddressForm.tsx b/src/app/shipping/ShippingAddressForm.tsx
@@ -36,7 +36,6 @@ class ShippingAddressForm extends Component<ShippingAddressFormProps & ConnectFo
             formFields,
             isLoading,
             googleMapsApiKey,
-            onFieldChange,
             formik: {
                 values: {
                     shippingAddress: formAddress,
@@ -56,7 +55,7 @@ class ShippingAddressForm extends Component<ShippingAddressFormProps & ConnectFo
                                 addresses={ addresses }
                                 onUseNewAddress={ onUseNewAddress }
                                 selectedAddress={ hasValidCustomerAddress ? shippingAddress : undefined }
-                                onSelectAddress={ address => onAddressSelect(address) }
+                                onSelectAddress={ onAddressSelect }
                             />
                         </LoadingOverlay>
                     </Fieldset>
@@ -70,12 +69,8 @@ class ShippingAddressForm extends Component<ShippingAddressFormProps & ConnectFo
                             setFieldValue={ this.setFieldValue }
                             googleMapsApiKey={ googleMapsApiKey }
                             countryCode={ formAddress && formAddress.countryCode }
-                            onChange={ this.onChange }
-                            onAutocompleteToggle={ ({ isOpen, inputValue }) => {
-                                if (!isOpen) {
-                                    onFieldChange('address1', inputValue);
-                                }
-                            } }
+                            onChange={ this.handleChange }
+                            onAutocompleteToggle={ this.handleAutocompleteToggle }
                             fieldName={ addressFieldName }
                             formFields={ formFields }
                         />
@@ -102,13 +97,21 @@ class ShippingAddressForm extends Component<ShippingAddressFormProps & ConnectFo
         setFieldValue(`${addressFieldName}.${formFieldName}`, fieldValue);
     };
 
-    private onChange: (fieldName: string, value: string) => void = (fieldName, value) => {
+    private handleChange: (fieldName: string, value: string) => void = (fieldName, value) => {
         const {
             onFieldChange,
         } = this.props;
 
         onFieldChange(fieldName, value);
     };
+
+    private handleAutocompleteToggle: (state: { inputValue: string; isOpen: boolean }) => void = ({ isOpen, inputValue }) => {
+        const { onFieldChange } = this.props;
+
+        if (!isOpen) {
+            onFieldChange('address1', inputValue);
+        }
+    };
 }
 
 export default connectFormik(ShippingAddressForm);
diff --git a/src/app/shipping/SingleShippingForm.spec.tsx b/src/app/shipping/SingleShippingForm.spec.tsx
@@ -8,6 +8,7 @@ import { createLocaleContext, LocaleContext, LocaleContextType } from '../locale
 import { getShippingAddress } from './shipping-addresses.mock';
 import SingleShippingForm, { SingleShippingFormProps, SHIPPING_AUTOSAVE_DELAY } from './SingleShippingForm';
 
+/* eslint-disable react/jsx-no-bind */
 describe('SingleShippingForm', () => {
     const addressFormFields = getAddressFormFields().filter(({ custom }) => !custom );
     let localeContext: LocaleContextType;

diff --git a/src/app/shipping/shippingOption/ShippingOptionsForm.spec.tsx b/src/app/shipping/shippingOption/ShippingOptionsForm.spec.tsx
@@ -11,6 +11,7 @@ import StaticConsignmentItemList from '../StaticConsignmentItemList';
 import ShippingOptionsForm, { ShippingOptionsFormProps } from './ShippingOptionsForm';
 import ShippingOptionsList from './ShippingOptionsList';
 
+/* eslint-disable react/jsx-no-bind */
 describe('ShippingOptions Component', () => {
     const consignments = [
         {