{"version":3,"sources":["components/RecipeDetails.js","components/Recipe.js","components/Alert.js","App.js","index.js"],"names":["RecipeDetails","ingredients","map","ingredient","key","uuidv4","className","text","weight","Recipe","recipe","useState","show","setShow","label","image","url","src","alt","href","target","rel","onClick","Alert","warning","App","query","setQuery","recipes","setRecipes","setWarning","getData","a","Axios","get","result","console","log","data","more","hits","action","onSubmit","e","alert","preventDefault","type","placeholder","autoComplete","onChange","value","defaultValue","ReactDOM","render","document","getElementById"],"mappings":"4RAyBeA,G,MAdO,SAAC,GAInB,OAJqC,EAAjBC,YAIDC,KAAI,SAACC,GACpB,OACI,wBAAIC,IAAKC,cAAUC,UAAU,mBACzB,wBAAIA,UAAU,mBAAmBH,EAAWI,MAC5C,wBAAID,UAAU,qBAAd,WAA2CH,EAAWK,cCevDC,EAvBA,SAAC,GAAc,IAAbC,EAAY,EAAZA,OAAY,EAGDC,oBAAS,GAHR,mBAGlBC,EAHkB,KAGZC,EAHY,OAOgBH,EAAOA,OAAzCI,EAPkB,EAOlBA,MAAOC,EAPW,EAOXA,MAAOC,EAPI,EAOJA,IAAKf,EAPD,EAOCA,YAE1B,OACI,yBAAKK,UAAU,UACX,4BAAKQ,GACL,yBAAKG,IAAKF,EAAOG,IAAKJ,IACtB,uBAAGK,KAAMH,EAAKI,OAAO,SAASC,IAAI,uBAAlC,aACA,4BAAQC,QAAS,kBAAMT,GAASD,KAAhC,gBAIU,IAATA,GAAiB,kBAAC,EAAD,CAAeX,YAAaA,MCT3CsB,EAVD,SAAC,GAAe,IAAdC,EAAa,EAAbA,QAGZ,OACI,yBAAKlB,UAAU,SACX,8CAAoBkB,KC4GjBC,EA7GH,WAAM,MAKYd,mBAAS,IALrB,mBAKPe,EALO,KAKAC,EALA,OAUgBhB,mBAAS,IAVzB,mBAUPiB,EAVO,KAUEC,EAVF,OAcgBlB,mBAAS,IAdzB,mBAcPa,EAdO,KAcEM,EAdF,KAuBRd,EAAG,0CAAsCU,EAAtC,mBANM,WAMN,oBAHO,oCAMVK,EAAO,uCAAG,4BAAAC,EAAA,yDAGE,KAAVN,EAHQ,0CAKiBO,IAAMC,IAAIlB,GAL3B,UAKEmB,EALF,OAMJC,QAAQC,IAAI,yBAA0BF,IAIb,IAArBA,EAAOG,KAAKC,KAVZ,yCAWOT,EAAW,uCAXlB,OAgBJD,EAAWM,EAAOG,KAAKE,MAGvBJ,QAAQC,IAAI,8BAA+BF,EAAOG,KAAKE,MAKvDV,EAAW,IAxBP,kDA0BJM,QAAQC,IAAI,UAAZ,MA1BI,gCA8BRP,EAAW,0CA9BH,QAkCZH,EAAS,IAlCG,0DAAH,qDAoDb,OACI,yBAAKrB,UAAU,OAEX,yDAGA,0BAAMA,UAAU,cAAcmC,OAAO,GAAGC,SApB/B,SAACC,GACdC,MAAM,cACND,EAAEE,iBACFd,MAoBqB,KAAZP,GAAkB,kBAAC,EAAD,CAAOA,QAASA,IAEnC,2BAAOsB,KAAK,OAAOC,YAAY,cAAcC,aAAa,MAAMC,SAhB3D,SAACN,GACdP,QAAQC,IAAIM,EAAEvB,OAAO8B,OACrBvB,EAASgB,EAAEvB,OAAO8B,QAc0EA,MAAOxB,IAC3F,2BAAOoB,KAAK,SAASK,aAAa,YAItC,yBAAK7C,UAAU,WACVsB,IAAY,IACTA,EAAQ1B,KAAI,SAACQ,GAKT,OAHA0B,QAAQC,IAAI,qCAAsC3B,EAAOA,QAGjD,kBAAC,EAAD,CAAQN,IAAKC,cAAUK,OAAQA,UC/G/D0C,IAASC,OAAO,kBAAC,EAAD,MAAQC,SAASC,eAAe,W","file":"static/js/main.c1633b4b.chunk.js","sourcesContent":["import React from \"react\";\nimport {v4 as uuidv4} from \"uuid\";\n\n/* \n    Author: Muhammad Hafidz Misrudin\n    Description: Proprietary (no permission for copy or use or redistribution)\n    Date written: 25/05/2020\n    Date last updated: 30/05/2020\n*/\n\n// functional component to display the details of the Recipe data.\nconst RecipeDetails = ({ingredients}) => {\n\n    // pass ingredients object as prop and use destructuring.\n    // loop through the property of the ingredients array and grab the data from it.\n    return ingredients.map((ingredient) => {\n        return (\n            <ul key={uuidv4()} className=\"ingredient-list\">\n                <li className=\"ingredient-text\">{ingredient.text}</li>\n                <li className=\"ingredient-weight\">Weight: {ingredient.weight}</li>\n            </ul>\n        );\n    });\n};\n\nexport default RecipeDetails;","import React, {useState}  from \"react\";\nimport RecipeDetails from \"./RecipeDetails\";\n\n/* \n    Author: Muhammad Hafidz Misrudin\n    Description: Proprietary (no permission for copy or use or redistribution)\n    Date written: 20/05/2020\n    Date last updated: 02/06/2020\n*/\n\n// functional component to display a Recipe data from request.\nconst Recipe = ({recipe}) => {\n\n    // state as a boolean for toggle.\n    const [show, setShow] = useState(false);\n\n    // pass recipe object as prop.\n    // use destructuring to access the properties from recipe object.\n    const {label, image, url, ingredients} = recipe.recipe;\n\n    return (\n        <div className=\"recipe\">\n            <h2>{label}</h2>\n            <img src={image} alt={label} />\n            <a href={url} target=\"_blank\" rel=\"noopener noreferrer\">URL link!</a>\n            <button onClick={() => setShow(!show)}>Ingredients</button>\n\n            {/* invoke Recipe Details component. */}\n            {/* use conditional rendering check if show status is true then display recipe details. */}\n            {show === true && <RecipeDetails ingredients={ingredients} />}\n        </div>\n    );\n};\n\nexport default Recipe;","import React from \"react\";\n\n/* \n    Author: Muhammad Hafidz Misrudin\n    Description: Proprietary (no permission for copy or use or redistribution)\n    Date written: 02/06/2020\n    Date last updated: 10/06/2020\n*/\n\n// functional component to display alert warning for invalid search input.\nconst Alert = ({warning}) => {\n\n    // pass warning object as prop and use destructuring.\n    return (\n        <div className=\"alert\">\n            <h3>Alert Message: {warning}</h3>\n        </div>\n    );\n};\n\nexport default Alert;","import React, {useState} from \"react\";\nimport Axios from \"axios\";\nimport {v4 as uuidv4} from \"uuid\";\nimport \"./App.css\";\nimport Recipe from \"./components/Recipe\";\nimport Alert from \"./components/Alert\";\n\n/* \n    Author: Muhammad Hafidz Misrudin\n    Description: Proprietary (no permission for copy or use or redistribution)\n    Date written: 04/05/2020\n    Date last updated: 09/06/2020\n*/\n\nconst App = () => {\n\n    // initialise a state (query) initially using hook.\n    // a query state to be the data that should be updated.\n    // setQuery should be the method to update the data state.\n    const [query, setQuery] = useState(\"\");\n\n    //  initialise a state (recipes) initially using hook.\n    // a recipes state to be the data that should be updated with array.\n    // setRecipes should be the method to update the data state.\n    const [recipes, setRecipes] = useState([]);\n\n    // initialise a state (warning) initially using hook.\n    // initial state is set to an empty string.\n    const [warning, setWarning] = useState(\"\");\n\n    // application id.\n    const APP_ID = \"ba5830c4\";\n\n    // application keys.\n    const APP_KEY = \"77504f161b323b537d85da25b0e8f9ad\";\n\n    // url search recipe api.\n    const url = `https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`;\n\n    // get data from the request via search api call.\n    const getData = async () => {\n        \n        // check if the value of query state is not an empty string, hence call api.\n        if (query !== \"\") {\n            try {\n                const result = await Axios.get(url);\n                console.log(\"results-from-request: \", result); // debugger.\n\n                // check if the results return false for food.\n                // display warning message says the food doesnt exist.\n                if (result.data.more === false) {\n                    return setWarning(\"No Food With Such Name. Try Again.\");\n                }\n    \n                // get access to recipes array and update the value of recipes in the state.\n                // from json data => data.hits.recipe\n                setRecipes(result.data.hits);\n    \n                // debugger.\n                console.log(\"from-getdata-display-hits: \", result.data.hits);\n\n                // set warning state to an empty string.\n                // if the food recipe is unavailable, display alert warning message.\n                // if search is valid, remove alert message.\n                setWarning(\"\");\n            } catch (error) {\n                console.log(\"error: \", error);\n            }\n        } else {\n            // else, set the value of warning state to an error string.\n            setWarning(\"Please Insert Input In The Seach Form.\");\n        }\n\n        // set it to empty string to clear off input field after successful request.\n        setQuery(\"\"); \n    };\n\n    // function to execute function getData for a request after submit the form.\n    const onSubmit = (e) => {\n        alert(\"Submitted!\");\n        e.preventDefault();\n        getData(); // call api.\n    };\n\n    // an onChange event handler returns a synthetic event object which contains useful meta data \n    // such as the target input’s id, name, and current value.\n    // to access the target input’s value => e.target.value.\n    const onChange = (e) => {\n        console.log(e.target.value);\n        setQuery(e.target.value); // to update the query state dynamically.\n    };\n\n    return (\n        <div className=\"App\">\n            {/* heading. */}\n            <h1>Food Recipe Search Engine</h1>\n\n            {/* input form. */}\n            <form className=\"search-form\" action=\"\" onSubmit={onSubmit}>\n\n                {/* use conditional rendering. check if the warning value is not empty, hence display Alert component. */}\n                {warning !== \"\" && <Alert warning={warning} />}\n\n                <input type=\"text\" placeholder=\"Search Food\" autoComplete=\"off\" onChange={onChange} value={query} />\n                <input type=\"Submit\" defaultValue=\"Search\" />\n            </form>\n\n            {/* display the data results from the request on the page. */}\n            <div className=\"recipes\">\n                {recipes !== [] &&\n                    recipes.map((recipe) => {\n                        // console.log(uuidv4());\n                        console.log(\"from-render-display-recipe-props: \", recipe.recipe); // debugger.\n\n                        // invoke Recipe component.\n                        return (<Recipe key={uuidv4()} recipe={recipe} />);\n                    })\n                }\n            </div>\n        </div>\n    );\n};\n\nexport default App;","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\n\nReactDOM.render(<App/>, document.getElementById(\"root\"));"],"sourceRoot":""}