handle errors in open food card

jwkaterina · Feb 29, 2024 · cb271dd · cb271dd
1 parent 1215498
commit cb271dd
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 33 deletions.
diff --git a/functions/api-controllers/foodDatabaseAPI-controllers.js b/functions/api-controllers/foodDatabaseAPI-controllers.js
@@ -74,6 +74,9 @@ const findNutrients = async (req, res, next) => {
     try {
         const response = await fetch(url, options);
         const result = await response.json();
+
+        if(result.status == 'error') throw new Error(result.message);
+
         res.status(200).json(result);
     } catch (err) {
         console.error(err);

diff --git a/src/app/components/cards/food-cards/food-card.tsx b/src/app/components/cards/food-cards/food-card.tsx
@@ -4,7 +4,8 @@ import ClosedCard from '../closed-card';
 import OpenFoodCard from './open-foodcard';
 import { CardOpenContext } from '@/app/context/card-context';
 import { CurrentFoodContext } from '@/app/context/food-context';
-import { Food, CardState } from '@/app/types/types';
+import { useHttpClient } from '@/app/hooks/http-hook';
+import { Food, CardState, Nutrients } from '@/app/types/types';
 
 interface FoodCardProps {
     food: Food,
@@ -17,19 +18,37 @@ const FoodCard = ({ food, index, id, open }: FoodCardProps): JSX.Element => {
 
     const { setCardOpen } = useContext(CardOpenContext);
     const { setCurrentFood } = useContext(CurrentFoodContext);
+    const { sendRequest } = useHttpClient();
     const [isOpen, setIsOpen] = useState<boolean>(open);
+    const [nutrients, setNutrients] = useState<Nutrients | null>(null);
 
-    const handleCardClick = () => {
+    const gramUri: string = "http://www.edamam.com/ontologies/edamam.owl#Measure_gram";
+
+    const handleCardClick = async() => {
         if(isOpen) {
             return;
         }
-        setCardOpen(CardState.OPENING);
-        setIsOpen(true); 
-
-        setCurrentFood({
-            food: food,
-            id: id ? id : null
-        });
+        try {
+            const nutrients: Nutrients = await sendRequest(
+                `/api/nutrients`,
+                'POST',
+                JSON.stringify({
+                    foodId: food.food.foodId, 
+                    measure: gramUri, 
+                    quantity: 100
+                }),
+                { 'Content-Type': 'application/json' },
+                true, false
+            );
+            setNutrients(nutrients);
+            setCardOpen(CardState.OPENING);
+            setIsOpen(true); 
+
+            setCurrentFood({
+                food: food,
+                id: id ? id : null
+            });
+        } catch (err) {}
     }
 
     const isImage = () => {
@@ -38,7 +57,7 @@ const FoodCard = ({ food, index, id, open }: FoodCardProps): JSX.Element => {
 
     return (
         <Card index={index} onCardClick={handleCardClick} setIsOpen={setIsOpen} isOpen={isOpen}> 
-            {isOpen ? <OpenFoodCard food={food}/> : 
+            {isOpen ? <OpenFoodCard food={food} initialNutrients={nutrients}/> : 
             <ClosedCard 
                 title={food.food.label}
                 image={isImage() ? food.food.image : ''}

diff --git a/src/app/components/cards/food-cards/header-foodcard.tsx b/src/app/components/cards/food-cards/header-foodcard.tsx
@@ -11,10 +11,11 @@ interface FoodHeaderCardProps {
     setOption: (option: string) => void,
     setMeasure: (measure: string) => void,
     quantity: number,
-    setQuantity: (quantity: number) => void
+    setQuantity: (quantity: number) => void,
+    blockSelect: boolean
 }
 
-const FoodHeaderCard = ({ food, option, setOption, setMeasure, quantity,  setQuantity }: FoodHeaderCardProps): JSX.Element => {
+const FoodHeaderCard = ({ food, option, setOption, setMeasure, quantity,  setQuantity, blockSelect }: FoodHeaderCardProps): JSX.Element => {
 
     const { setMessage} = useContext(StatusContext);
     const { sendRequest } = useHttpClient();
@@ -122,8 +123,16 @@ const FoodHeaderCard = ({ food, option, setOption, setMeasure, quantity,  setQua
                 <h1>{food.food.label}</h1>      
             </div>
             <div className={styles.form}>
-                {customWeight && <input className={styles.short_input} type="number" value={quantity} placeholder='100' onChange={(e) => hangleQuantityChange(e)}/>}
+                {customWeight && <input 
+                    disabled={blockSelect ? true : false}
+                    className={styles.short_input} 
+                    type="number" 
+                    value={quantity} 
+                    placeholder='100' 
+                    onChange={(e) => hangleQuantityChange(e)}
+                />}
                 <select 
+                    disabled={blockSelect ? true : false}
                     name="measure" 
                     id="measure" 
                     className={customWeight ? styles.short_select : ''} 

diff --git a/src/app/components/cards/food-cards/open-foodcard.tsx b/src/app/components/cards/food-cards/open-foodcard.tsx
@@ -6,25 +6,23 @@ import FatsCard from '../../analysis_cards/fats_card';
 import FoodHeaderCard from './header-foodcard';
 import MineralsCard from '../../analysis_cards/minerals_card';
 import VitaminsCard from '../../analysis_cards/vitamins_card';
-import { CardOpenContext } from '@/app/context/card-context';
-import { StatusContext } from '@/app/context/status-context';
 import { useHttpClient } from '@/app/hooks/http-hook';
-import { CardState, Food, Nutrients, StatusType } from '@/app/types/types';
+import { Food, Nutrients } from '@/app/types/types';
 import styles from '../card.module.css';
 
 interface OpenFoodCardProps {
-    food: Food
+    food: Food,
+    initialNutrients: Nutrients | null;
 }
 
-const OpenFoodCard  = ({ food }: OpenFoodCardProps): JSX.Element => {
+const OpenFoodCard  = ({ food, initialNutrients }: OpenFoodCardProps): JSX.Element => {
 
     const { sendRequest } = useHttpClient();
-    const { setStatus, setMessage } = useContext(StatusContext);
-    const { setCardOpen } = useContext(CardOpenContext);
-    const [content, setContent] = useState<Nutrients | null>(null);
+    const [content, setContent] = useState<Nutrients | null>(initialNutrients);
     const [quantity, setQuantity] = useState<number>(1);
     const [selectedOption, setSelectedOption] = useState<string>('Value pre 100g');
     const [measureUri, setMeasureUri] = useState<string>(food.measures[0].uri);
+    const [blockSelect, setBlockSelect] = useState<boolean>(false);
 
     const gramUri: string = "http://www.edamam.com/ontologies/edamam.owl#Measure_gram";
 
@@ -45,7 +43,9 @@ const OpenFoodCard  = ({ food }: OpenFoodCardProps): JSX.Element => {
                     );
                     setContent(nutrients);
                     return;
-                } catch (err) {}
+                } catch (err) {
+                    setBlockSelect(true);
+                }
             } 
             if(selectedOption === 'Value pre 100g') {
                 try {
@@ -62,7 +62,9 @@ const OpenFoodCard  = ({ food }: OpenFoodCardProps): JSX.Element => {
                     );
                     setContent(nutrients);
                     return;
-                } catch (err) {}
+                } catch (err) {
+                    setBlockSelect(true);
+                }
             }
             try {
                 const nutrients: Nutrients = await sendRequest(
@@ -78,20 +80,14 @@ const OpenFoodCard  = ({ food }: OpenFoodCardProps): JSX.Element => {
                 );
                 setContent(nutrients);
                 return;
-            } catch (err) {}
+            } catch (err) {
+                setBlockSelect(true);
+            }
         }
         fetchContent();
 
     }, [quantity, selectedOption]);
 
-    if(!content || content.totalDaily || !content.totalNutrients) {
-        setCardOpen(CardState.CLOSED);
-        console.error('Too many request');
-        setStatus(StatusType.ERROR);
-        setMessage('Could not analyse food, wait 1 minute and try again.');
-        return <></>;
-    }
-
     return (
         <div className={styles.card_grid}>
             <FoodHeaderCard 
@@ -101,6 +97,7 @@ const OpenFoodCard  = ({ food }: OpenFoodCardProps): JSX.Element => {
                 setMeasure={setMeasureUri} 
                 quantity={quantity}
                 setQuantity={setQuantity}
+                blockSelect={blockSelect}
             />
             <DailyValueCard content={content} />
             <CompositionCard 
@@ -113,7 +110,7 @@ const OpenFoodCard  = ({ food }: OpenFoodCardProps): JSX.Element => {
             <MineralsCard content={content} />
             <FatsCard content={content} />
         </div>
-    );
+    ); 
 }
 
 export default OpenFoodCard;