From 1ec51a5672a00615f17a59d2ac0b61f86d743b48 Mon Sep 17 00:00:00 2001
From: Rui Shan <ruishan.teo03@gmail.com>
Date: Sun, 8 Oct 2023 09:38:56 +0800
Subject: [PATCH] Add no ingredients found

---
 pages/Recipe.js | 155 +++++++++++++++++++++++++++++++++---------------
 1 file changed, 108 insertions(+), 47 deletions(-)

diff --git a/pages/Recipe.js b/pages/Recipe.js
index 89bde12..2af2c67 100644
--- a/pages/Recipe.js
+++ b/pages/Recipe.js
@@ -7,6 +7,7 @@ import { Formik, FieldArray } from "formik";
 import { useAxios, useNotification } from "../providers/hooks";
 import { IngredientInput } from "../components/IngredientInput";
 import Layout from "../components/Layout";
+import { SPOON_API_URL } from "../config/config";
 
 function getIngredients(src) {
   return src?.params?.ingredients ? src?.params?.ingredients : [];
@@ -16,40 +17,57 @@ export function Recipe({ navigation, route }) {
   const theme = useTheme();
   const { publicAxios } = useAxios();
   const { showNotification } = useNotification();
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  React.useEffect(() => {
+    if (route?.params?.ingredients && route?.params?.ingredients.length === 0) {
+      showNotification({
+        title: "No ingredients found",
+        description: "Please try again.",
+        type: "warn",
+      });
+    }
+  }, [route]);
 
   return (
     <SafeAreaView>
-      <Layout
-        title="Add Ingredient"
-        onAction={() => navigation.navigate("Camera")}
-        iconName="camera"
+      <Formik
+        enableReinitialize
+        initialValues={{ ingredients: getIngredients(route) }}
+        onSubmit={async (values) => {
+          const filtered = values.ingredients.filter((i) => i);
+          if (filtered.length === 0) {
+            return showNotification({
+              title: "",
+              description: "Please add at least 1 ingredient.",
+              type: "error",
+            });
+          }
+          const queryString = filtered.toString();
+          setIsLoading(true);
+          await publicAxios
+            .get(
+              `${SPOON_API_URL}/recipes/complexSearch?includeIngredients=${queryString}&instructionsRequired=true&fillIngredients=true&addRecipeInformation=true&addRecipeNutrition=false&number=30`
+            )
+            .then((res) =>
+              navigation.navigate("RecipeList", { listings: res.results })
+            )
+            .catch((error) => {})
+            .finally(() => setIsLoading(false));
+        }}
       >
-        <Formik
-          enableReinitialize
-          initialValues={{ ingredients: getIngredients(route) }}
-          onSubmit={async (values) => {
-            const queryString = values.ingredients.filter((i) => i).toString();
-            await publicAxios
-              .get(
-                `/recipes/complexSearch?includeIngredients=${queryString}&instructionsRequired=true&fillIngredients=true&addRecipeInformation=true&addRecipeNutrition=false&number=30`
-              )
-              .then((res) =>
-                navigation.navigate("RecipeList", { listings: res.results })
-              )
-              .catch((error) => {});
-          }}
-        >
-          {({
-            handleSubmit,
-            handleChange,
-            resetForm,
-            handleBlur,
-            values,
-            touched,
-            errors,
-            isSubmitting,
-          }) => {
-            return (
+        {({ handleSubmit, values, isSubmitting, resetForm, setFieldValue }) => {
+          return (
+            <Layout
+              title="Add Ingredient"
+              onAction={() =>
+                navigation.navigate("Camera", {
+                  currIngredients: values.ingredients,
+                })
+              }
+              actionDisabled={isLoading}
+              iconName="camera"
+            >
               <FieldArray
                 name="ingredients"
                 render={(arrayHelpers) => (
@@ -83,6 +101,7 @@ export function Recipe({ navigation, route }) {
                           <IconButton
                             icon="close"
                             onPress={() => arrayHelpers.remove(index)}
+                            disabled={isSubmitting}
                           />
                         </View>
                       ))
@@ -94,40 +113,82 @@ export function Recipe({ navigation, route }) {
                           height: "80%",
                         }}
                       >
-                        <Icon
-                          name="stove"
-                          type="material-community"
-                          size={100}
-                          color={theme.colors.primary}
-                        />
+                        <View style={{ flexDirection: "row" }}>
+                          <Icon
+                            name="stove"
+                            type="material-community"
+                            size={100}
+                            color={theme.colors.primary}
+                          />
+                          <Icon
+                            name="blender"
+                            type="material-community"
+                            size={100}
+                            color={theme.colors.primary}
+                          />
+                          <Icon
+                            name="pasta"
+                            type="material-community"
+                            size={100}
+                            color={theme.colors.primary}
+                          />
+                        </View>
                         <Text variant="labelLarge">Get started!</Text>
                       </View>
                     )}
-                    <Button
-                      icon="plus"
-                      onPress={() => arrayHelpers.push("")}
-                      style={{ alignSelf: "flex-start" }}
+
+                    <View
+                      style={{
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        width: "100%",
+                      }}
                     >
-                      Add Ingredient
-                    </Button>
+                      <Button
+                        icon="plus"
+                        onPress={() => arrayHelpers.push("")}
+                        disabled={isSubmitting}
+                        style={{ alignSelf: "flex-start", margin: 10 }}
+                      >
+                        Add Ingredient
+                      </Button>
+                      <Button
+                        onPress={() => setFieldValue("ingredients", [])}
+                        disabled={isSubmitting}
+                        buttonColor={theme.colors.tertiary}
+                        textColor="white"
+                        style={{
+                          width: 100,
+                          alignSelf: "flex-end",
+                          margin: 10,
+                        }}
+                        contentStyle={{ flexDirection: "row-reverse" }}
+                        icon="kettle-outline"
+                      >
+                        Clear
+                      </Button>
+                    </View>
                     <Button
                       onPress={handleSubmit}
+                      loading={isSubmitting}
+                      disabled={isSubmitting}
                       buttonColor={theme.colors.secondary}
                       textColor="white"
                       mode="contained"
                       style={{ width: 200 }}
                       contentStyle={{ flexDirection: "row-reverse" }}
-                      icon="arrow-right"
+                      icon="food-fork-drink"
                     >
                       Find recipes
                     </Button>
                   </ScrollView>
                 )}
               />
-            );
-          }}
-        </Formik>
-      </Layout>
+            </Layout>
+          );
+        }}
+      </Formik>
     </SafeAreaView>
   );
 }