Allow entry of zero in ingredient amount

.github/workflows/ci.yml

@@ -36,10 +36,10 @@ jobs:
             ${{ runner.os }}-build-
             ${{ runner.os }}-
 
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20.x
 
       - name: Set version
         run: |
@@ -70,10 +70,10 @@ jobs:
     - name: Checkout code
       uses: actions/checkout@v2
 
-    # - name: Use Node.js 16.x
-    #   uses: actions/setup-node@v1
+    # - name: Use Node.js 20.x
+    #   uses: actions/setup-node@v4
     #   with:
-    #     node-version: 16.x
+    #     node-version: 20.x
     # - name: install dependencies
     #   run: |
     #     npm ci
@@ -114,10 +114,10 @@ jobs:
             ${{ runner.os }}-build-
             ${{ runner.os }}-
 
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20.x
 
       - name: install dependencies
         run: |
@@ -230,10 +230,10 @@ jobs:
             ${{ runner.os }}-build-
             ${{ runner.os }}-
 
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20.x
 
       - name: Set version
         run: |

.github/workflows/preview.yml

@@ -29,10 +29,10 @@ jobs:
             ${{ runner.os }}-build-
             ${{ runner.os }}-
 
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20.x
 
       - name: install dependencies and build
         run: |
@@ -140,10 +140,10 @@ jobs:
             ${{ runner.os }}-build-
             ${{ runner.os }}-
 
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20.x
 
       - name: Install dependencies
         run: npm ci

.github/workflows/release.yml

@@ -11,9 +11,9 @@ jobs:
           fetch-depth: 0
 
       - name: 🏗 Setup Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20.x
 
       - name: 🏗 Setup java
         uses: actions/setup-java@v3
@@ -69,7 +69,7 @@ jobs:
       #     path: app-build.apk
 
       # - name: Setup Node.js
-      #   uses: actions/setup-node@v2
+      #   uses: actions/setup-node@v4
       #   with:
       #     node-version: "lts/*"
 

src/dao/RestAPI.ts

@@ -12,7 +12,7 @@ export interface Ingredient {
 
 export interface IngredientUse {
     ingredient: Ingredient
-    amount: number
+    amount: number | null
     unit: string
 }
 

src/screens/wizard/IngredientFromField.tsx

@@ -17,12 +17,12 @@ interface Props {
 export const IngredientFormField = React.memo(function IngredientFormField(props: Props) {
   const [ingredientQuery, setIngredientQuery] = useState<string>(props.ingredient.ingredient.name);
   const [unit, setUnit] = useState<string>(props.ingredient.unit);
-  const [amount, setAmount] = useState<string>(props.ingredient.amount === 0 ? '': String(props.ingredient.amount));
+  const [amount, setAmount] = useState<string>(props.ingredient.amount === undefined || props.ingredient.amount === null ? '' : String(props.ingredient.amount));
 
   useEffect(() => {
     setIngredientQuery(props.ingredient.ingredient.name);
     setUnit(props.ingredient.unit);
-    setAmount(props.ingredient.amount === 0 ? '': String(props.ingredient.amount));
+    setAmount(props.ingredient.amount === undefined || props.ingredient.amount === null ? '' : String(props.ingredient.amount));
   }, [props.ingredient]);
 
   const [availableUnits, setAvailableUnits] = useState<string[]>([]);
@@ -38,10 +38,17 @@ export const IngredientFormField = React.memo(function IngredientFormField(props
 
   const invokeIngredientUpdate = (ingredientName: string, newAmount: string, newUnit: string) => {
     const existingIngredient = availableIngredients.find((ingredient) => ingredient.name.toLowerCase() === ingredientName.toLowerCase());
+
+    let prasedAmount: number | null = parseFloat(newAmount);
+    // Check if its a number
+    if (prasedAmount.toString() !== newAmount || newAmount === '') {
+      prasedAmount = null;
+    }
+
     if (existingIngredient) {
-      props.onIngredientChange({ingredient: existingIngredient, amount: newAmount === '' ? 0 : parseFloat(newAmount), unit: newUnit}, props.ingredientIndex);
+      props.onIngredientChange({ingredient: existingIngredient, amount: prasedAmount, unit: newUnit}, props.ingredientIndex);
     } else {
-      props.onIngredientChange({ingredient: {name: ingredientName}, amount: newAmount === '' ? 0 : parseFloat(newAmount), unit: newUnit}, props.ingredientIndex);
+      props.onIngredientChange({ingredient: {name: ingredientName}, amount: prasedAmount, unit: newUnit}, props.ingredientIndex);
     }
   };
 
@@ -61,7 +68,8 @@ export const IngredientFormField = React.memo(function IngredientFormField(props
     setAmount(text);
 
     const prasedAmount = parseFloat(text);
-    if (prasedAmount.toString() === text) {
+    // Check if its a number
+    if (prasedAmount.toString() === text || text === '') {
       invokeIngredientUpdate(ingredientQuery, text, unit);
     }
   };
@@ -75,43 +83,41 @@ export const IngredientFormField = React.memo(function IngredientFormField(props
   }, []);
 
   return (
-    <>
-      <View style={{borderWidth: 1, borderColor: Colors.grey50, padding: 10, borderRadius: 16}}>
-        <View style={{flexDirection: 'row', alignItems: 'center'}}>
-          <View style={{flex: 1, flexDirection: 'column'}}>
-            <View style={{flex: 1, flexDirection: 'row'}}>
-              <TextInput
-                mode="outlined"
-                style={{width: 100}}
-                keyboardType="numeric"
-                value={(amount ? amount.toString() : '')}
-                label={t('screens.editRecipe.amount')}
-                onChangeText={onAmountChange} />
-              <Spacer width={5} />
-              <SelectionPopup
-                style={{flex: 1}}
-                label={t('screens.editRecipe.unit')}
-                value={unit}
-                options={availableUnits.map((availableUnit, index) => ({key: index.toString(), value: availableUnit}))}
-                onValueChanged={(selectedOption) => setUnit(selectedOption.value)}
-              />
-            </View>
-            <Spacer height={5} />
-            <View style={{justifyContent: 'center', flex: 1}}>
-              <SelectionPopup
-                label={t('screens.editRecipe.ingredient')}
-                value={ingredientQuery}
-                options={availableIngredients.map((ingredient) => ({key: ingredient.id ? ingredient.id.toString() : '', value: ingredient.name}))}
-                onValueChanged={(selectedOption) => setIngredient(selectedOption.value)}
-                allowAdditionalValues={true}
-              />
-            </View>
+    <View style={{borderWidth: 1, borderColor: Colors.grey50, padding: 10, borderRadius: 16}}>
+      <View style={{flexDirection: 'row', alignItems: 'center'}}>
+        <View style={{flex: 1, flexDirection: 'column'}}>
+          <View style={{flex: 1, flexDirection: 'row'}}>
+            <TextInput
+              mode="outlined"
+              style={{width: 100}}
+              keyboardType="numeric"
+              value={(amount !== undefined ? amount.toString() : '')}
+              label={t('screens.editRecipe.amount')}
+              onChangeText={onAmountChange} />
+            <Spacer width={5} />
+            <SelectionPopup
+              style={{flex: 1}}
+              label={t('screens.editRecipe.unit')}
+              value={unit}
+              options={availableUnits.map((availableUnit, index) => ({key: index.toString(), value: availableUnit}))}
+              onValueChanged={(selectedOption) => setUnit(selectedOption.value)}
+            />
+          </View>
+          <Spacer height={5} />
+          <View style={{justifyContent: 'center', flex: 1}}>
+            <SelectionPopup
+              label={t('screens.editRecipe.ingredient')}
+              value={ingredientQuery}
+              options={availableIngredients.map((ingredient) => ({key: ingredient.id ? ingredient.id.toString() : '', value: ingredient.name}))}
+              onValueChanged={(selectedOption) => setIngredient(selectedOption.value)}
+              allowAdditionalValues={true}
+            />
           </View>
-          <IconButton
-            icon="delete-outline"
-            onPress={() => props.onRemovePress(props.ingredientIndex)} />
         </View>
+        <IconButton
+          icon="delete-outline"
+          onPress={() => props.onRemovePress(props.ingredientIndex)} />
       </View>
-    </>
+    </View>
   );
 });