Added WhoPaid picker #33

TravelCostApp/components/ManageExpense/ExpenseForm.js

@@ -9,9 +9,12 @@ import IconButton from "../UI/IconButton";
 import { UserContext } from "../../store/user-context";
 import FlatButton from "../UI/FlatButton";
 import { getCatSymbol } from "../../util/category";
+import DropDownPicker from "react-native-dropdown-picker";
 
 import CurrencyPicker from "react-native-currency-picker";
 import { TripContext } from "../../store/trip-context";
+import { travellerToDropdown } from "../../util/util";
+import { G } from "react-native-svg";
 
 const ExpenseForm = ({
   onCancel,
@@ -22,13 +25,24 @@ const ExpenseForm = ({
   pickedCat,
   navigation,
 }) => {
+  // set context
   const AuthCtx = useContext(AuthContext);
   const UserCtx = useContext(UserContext);
   const TripCtx = useContext(TripContext);
   const [hideAdvanced, sethideAdvanced] = useState(!isEditing);
 
+  // currencypicker reference for open/close
   let currencyPickerRef = undefined;
 
+  // dropdown for whoPaid system
+  const currentTravellers = TripCtx.travellers;
+  const dropdownItems = travellerToDropdown(currentTravellers);
+  const [open, setOpen] = useState(false);
+  const [whoPaid, setWhoPaid] = useState(
+    defaultValues ? defaultValues.whoPaid : null
+  );
+  const [items, setItems] = useState(dropdownItems);
+
   const [inputs, setInputs] = useState({
     amount: {
       value: defaultValues ? defaultValues.amount?.toString() : "",
@@ -86,7 +100,7 @@ const ExpenseForm = ({
       category: inputs.category.value,
       country: inputs.country.value,
       currency: inputs.currency.value,
-      whoPaid: inputs.whoPaid.value, // TODO: convert this to uid
+      whoPaid: whoPaid, // TODO: convert this to uid
       owePerc: +inputs.owePerc.value,
     };
 
@@ -184,7 +198,7 @@ const ExpenseForm = ({
       category: inputs.category.value, // TODO: convert this to category
       country: inputs.country.value, // TODO: convert this to country
       currency: inputs.currency.value, // TODO: convert this to currency
-      whoPaid: inputs.whoPaid.value, // TODO: convert this to uid
+      whoPaid: whoPaid, // TODO: convert this to uid
       owePerc: +inputs.owePerc.value,
     };
     const amountIsValid = !isNaN(expenseData.amount) && expenseData.amount > 0;
@@ -443,15 +457,42 @@ const ExpenseForm = ({
           /> */}
 
           <View style={styles.inputsRowSecond}>
-            <Input
+            <DropDownPicker
+              open={open}
+              value={whoPaid}
+              items={items}
+              setOpen={setOpen}
+              setValue={setWhoPaid}
+              setItems={setItems}
+              listMode="MODAL"
+              modalProps={{
+                animationType: "slide",
+                presentationStyle: "pageSheet",
+              }}
+              searchable={false}
+              modalTitle={"Who paid?"}
+              modalTitleStyle={{
+                color: GlobalStyles.colors.textColor,
+                fontSize: 32,
+                fontWeight: "bold",
+              }}
+              modalContentContainerStyle={{
+                backgroundColor: GlobalStyles.colors.backgroundColor,
+              }}
+              placeholder="Who Paid?"
+              containerStyle={styles.dropdownContainer}
+              style={styles.dropdown}
+              textStyle={styles.dropdownTextStyle}
+            />
+            {/* <Input
               style={styles.rowInput}
               label="Who paid?"
               textInputConfig={{
                 onChangeText: inputChangedHandler.bind(this, "whoPaid"),
                 value: inputs.whoPaid.value,
               }}
               invalid={!inputs.whoPaid.isValid}
-            />
+            /> */}
             <Input
               style={styles.rowInput}
               label="Owe Percent %"
@@ -564,4 +605,21 @@ const styles = StyleSheet.create({
     fontStyle: "italic",
     fontWeight: "300",
   },
+  dropdownContainer: {
+    maxWidth: 160,
+    marginLeft: 16,
+  },
+  dropdown: {
+    backgroundColor: GlobalStyles.colors.gray500,
+    borderWidth: 0,
+    marginTop: 7,
+    marginBottom: 10,
+    borderBottomWidth: 1,
+    borderRadius: 0,
+    borderBottomColor: GlobalStyles.colors.gray700,
+  },
+  dropdownTextStyle: {
+    fontSize: 18,
+    color: GlobalStyles.colors.primary500,
+  },
 });

TravelCostApp/components/ManageProfile/ProfileForm.js

@@ -28,7 +28,7 @@ const ProfileForm = ({ navigation, onCancel }) => {
   let currencyPickerRef = undefined;
 
   function logoutHandler() {
-    return Alert.alert("Are your sure?", "Are you sure you want to logout?", [
+    return Alert.alert("Are you sure?", "Are you sure you want to logout?", [
       // The "No" button
       // Does nothing but dismiss the dialog when tapped
       {

TravelCostApp/screens/ManageExpense.js

@@ -1,5 +1,5 @@
 import { useContext, useLayoutEffect, useState } from "react";
-import { StyleSheet, Text, TextInput, View } from "react-native";
+import { Alert, StyleSheet, Text, TextInput, View } from "react-native";
 import { ScrollView } from "react-native";
 import ExpenseForm from "../components/ManageExpense/ExpenseForm";
 
@@ -42,15 +42,35 @@ const ManageExpense = ({ route, navigation }) => {
   }, [navigation, isEditing]);
 
   async function deleteExpenseHandler() {
-    setIsSubmitting(true);
-    try {
-      await deleteExpense(tripid, uid, editedExpenseId);
-      expenseCtx.deleteExpense(editedExpenseId);
-      navigation.goBack();
-    } catch (error) {
-      setError("Could not delete expense - please try again later!");
-      setIsSubmitting(false);
+    async function deleteExp() {
+      setIsSubmitting(true);
+      try {
+        await deleteExpense(tripid, uid, editedExpenseId);
+        expenseCtx.deleteExpense(editedExpenseId);
+        navigation.goBack();
+      } catch (error) {
+        setError("Could not delete expense - please try again later!");
+        setIsSubmitting(false);
+      }
     }
+    Alert.alert(
+      "Are you sure?",
+      "Are you sure you want to delete this expense?",
+      [
+        // The "No" button
+        // Does nothing but dismiss the dialog when tapped
+        {
+          text: "No",
+        },
+        // The "Yes" button
+        {
+          text: "Yes",
+          onPress: () => {
+            deleteExp();
+          },
+        },
+      ]
+    );
   }
 
   function cancelHandler() {
@@ -105,13 +125,6 @@ const ManageExpense = ({ route, navigation }) => {
           submitButtonLabel={isEditing ? "Update" : "Add"}
           defaultValues={selectedExpense}
         />
-        {/* <View style={{ padding: 40 }}>
-          <Text>
-            {tripCtx.travellers[0]}
-            {tripCtx.travellers[1]}
-            {tripCtx.travellers[2]}
-          </Text>
-        </View> */}
         {isEditing && (
           <View style={styles.deleteContainer}>
             <IconButton

TravelCostApp/util/util.js

@@ -0,0 +1,9 @@
+export function travellerToDropdown(travellers) {
+  const listOfLabelValues = [];
+  travellers.forEach((traveller) => {
+    // TODO: make value uid based and not name based
+    listOfLabelValues.push({ label: traveller, value: traveller });
+  });
+  const response = listOfLabelValues;
+  return response;
+}