Refactor NewDeliveryPickup and NewDeliveryPrice components to use hooks

coopcycle · Nov 20, 2024 · 9e010bd · 9e010bd
1 parent c1bc5fb
commit 9e010bd
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 64 deletions.
diff --git a/src/navigation/store/NewDeliveryPickup.js b/src/navigation/store/NewDeliveryPickup.js
@@ -4,9 +4,9 @@ import { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js';
 import _ from 'lodash';
 import { Checkbox, Text } from 'native-base';
 import React, { useState } from 'react';
-import { withTranslation } from 'react-i18next';
+import { useTranslation, withTranslation } from 'react-i18next';
 import { Platform, StyleSheet, View } from 'react-native';
-import { connect } from 'react-redux';
+import { connect, useDispatch, useSelector } from 'react-redux';
 import AddressAutocomplete from '../../components/AddressAutocomplete';
 import { assertDelivery } from '../../redux/Store/actions';
 import { selectStore } from '../../redux/Store/selectors';
@@ -19,39 +19,35 @@ import ModalFormWrapper from './ModalFormWrapper';
 import ClientListInput from './components/ClientListInput';
 import FormInput from './components/FormInput';
 
-function NewDeliveryPickup(props) {
+function NewDeliveryPickup({ navigation }) {
   const [validAddress, setValidAddress] = useState(false);
   const [address, setAddress] = useState(null);
+  const [customAddress, setCustomAddress] = useState(false);
+
   const backgroundColor = useBackgroundContainerColor();
   const backgroundHighlightColor = useBackgroundHighlightColor();
   const primaryColor = usePrimaryColor();
-  const [customAddress, setCustomAddress] = useState(false);
 
-  const {
-    store,
-    deliveryError,
-    addresses,
-    assertDelivery,
-    t,
-    navigation,
-    country,
-  } = props;
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const country = useSelector(state =>
+    state.app.settings.country.toUpperCase(),
+  );
+  const store = useSelector(selectStore);
+  const deliveryError = useSelector(state => state.store.assertDeliveryError);
+  const addresses = useSelector(state => state.store.addresses);
 
   const inputStyles = {
     backgroundColor,
     borderColor: backgroundHighlightColor,
   };
 
   function setAddressData(data, setFieldValue) {
-    const contactName = data.contactName || '';
-    const telephone = data.telephone || '';
-    const businessName = data.businessName || '';
-    const description = data.description || '';
-
-    setFieldValue('contactName', contactName);
-    setFieldValue('telephone', telephone);
-    setFieldValue('businessName', businessName);
-    setFieldValue('description', description);
+    setFieldValue('contactName', data.contactName || '');
+    setFieldValue('telephone', data.telephone || '');
+    setFieldValue('businessName', data.businessName || '');
+    setFieldValue('description', data.description || '');
     setAddress({
       streetAddress: data.streetAddress,
       geo: data.geo,
@@ -73,9 +69,7 @@ function NewDeliveryPickup(props) {
       },
     };
 
-    assertDelivery(delivery, () => {
-      setValidAddress(true);
-    });
+    dispatch(assertDelivery(delivery, () => setValidAddress(true)));
   }
 
   let autocompleteProps = {
@@ -99,29 +93,28 @@ function NewDeliveryPickup(props) {
   }
 
   function validate(values) {
-    console.log(customAddress);
-
-    if (!customAddress) return {};
     const errors = {};
 
-    if (_.isEmpty(values.telephone)) {
-      errors.telephone = t('STORE_NEW_DELIVERY_ERROR.EMPTY_PHONE_NUMBER');
-    } else {
-      const phoneNumber = parsePhoneNumberFromString(
-        _.trim(values.telephone),
-        country,
-      );
-      if (!phoneNumber || !phoneNumber.isValid()) {
-        errors.telephone = t('INVALID_PHONE_NUMBER');
+    if (customAddress) {
+      if (_.isEmpty(values.telephone)) {
+        errors.telephone = t('STORE_NEW_DELIVERY_ERROR.EMPTY_PHONE_NUMBER');
+      } else {
+        const phoneNumber = parsePhoneNumberFromString(
+          _.trim(values.telephone),
+          country,
+        );
+        if (!phoneNumber || !phoneNumber.isValid()) {
+          errors.telephone = t('INVALID_PHONE_NUMBER');
+        }
       }
-    }
 
-    if (_.isEmpty(values.contactName)) {
-      errors.contactName = t('STORE_NEW_DELIVERY_ERROR.EMPTY_CONTACT_NAME');
-    }
+      if (_.isEmpty(values.contactName)) {
+        errors.contactName = t('STORE_NEW_DELIVERY_ERROR.EMPTY_CONTACT_NAME');
+      }
 
-    if (!validAddress) {
-      errors.address = t('STORE_NEW_DELIVERY_ADDRESS_HELP');
+      if (!validAddress) {
+        errors.address = t('STORE_NEW_DELIVERY_ADDRESS_HELP');
+      }
     }
 
     return errors;
@@ -156,8 +149,6 @@ function NewDeliveryPickup(props) {
         }
       : undefined;
 
-    console.log(pickup);
-
     navigation.navigate('StoreNewDeliveryAddress', { pickup });
   }
 

diff --git a/src/navigation/store/NewDeliveryPrice.js b/src/navigation/store/NewDeliveryPrice.js
@@ -1,24 +1,28 @@
 import { Formik } from 'formik';
 import { Text, View } from 'native-base';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { StyleSheet } from 'react-native';
-import { connect, useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { createDelivery, getPrice } from '../../redux/Store/actions';
-import ModalFormWrapper from './ModalFormWrapper';
 import FormInput from './components/FormInput';
+import ModalFormWrapper from './ModalFormWrapper';
 
-function NewDeliveryPrice(props) {
+function NewDeliveryPrice({ route, navigation }) {
   const dispatch = useDispatch();
-  const delivery = props.route.params?.delivery;
-  const { t } = props;
+  const { t } = useTranslation();
+  const delivery = route.params?.delivery;
+
+  const price = useSelector(state => state.store.price);
+  const priceExcludingTax = useSelector(state => state.store.priceExcludingTax);
+
+  if (!delivery) return null;
 
-  if (!delivery) return;
   dispatch(getPrice(delivery));
 
   function submit(values) {
     dispatch(
       createDelivery(values, () => {
-        props.navigation.navigate('StoreHome');
+        navigation.navigate('StoreHome');
       }),
     );
   }
@@ -33,11 +37,11 @@ function NewDeliveryPrice(props) {
         <ModalFormWrapper handleSubmit={handleSubmit} t={t} isSubmit>
           <View style={styles.formGroup}>
             <Text style={styles.label}>{t('PRICE_EXCLUDING_TAX')}</Text>
-            <FormInput value={props.priceExcludingTax} editable={false} />
+            <FormInput value={priceExcludingTax} editable={false} />
           </View>
           <View style={styles.formGroup}>
             <Text style={styles.label}>{t('PRICE_TOTAL')}</Text>
-            <FormInput value={props.price} editable={false} />
+            <FormInput value={price} editable={false} />
           </View>
         </ModalFormWrapper>
       )}
@@ -55,12 +59,4 @@ const styles = StyleSheet.create({
   },
 });
 
-function mapStateToProps(state) {
-  const price = state.store.price;
-  const priceExcludingTax = state.store.priceExcludingTax;
-  return {
-    price,
-    priceExcludingTax,
-  };
-}
-export default connect(mapStateToProps)(withTranslation()(NewDeliveryPrice));
+export default NewDeliveryPrice;