From 0bb2f8f0d00ea74d8e89ecd8c1b1766c0b4a2433 Mon Sep 17 00:00:00 2001
From: Tyrel Souza <tyrel@tyrelsouza.com>
Date: Fri, 23 Sep 2022 15:48:24 -0400
Subject: [PATCH] inputs

---
 ordering/.eslintcache                         |  2 +-
 .../src/components/Meals/AvailableMeals.js    | 65 +++++++++++--------
 .../src/components/Meals/MealItem/MealItem.js | 20 ++++++
 .../Meals/{ => MealItem}/MealItem.module.css  |  0
 .../components/Meals/MealItem/MealItemForm.js | 23 +++++++
 .../{ => MealItem}/MealItemForm.module.css    |  0
 ordering/src/components/UI/Card.js            |  7 ++
 .../components/{Cart => UI}/Card.module.css   |  0
 ordering/src/components/UI/Input.js           | 11 ++++
 .../src/components/{ => UI}/Input.module.css  |  0
 10 files changed, 100 insertions(+), 28 deletions(-)
 create mode 100644 ordering/src/components/Meals/MealItem/MealItem.js
 rename ordering/src/components/Meals/{ => MealItem}/MealItem.module.css (100%)
 create mode 100644 ordering/src/components/Meals/MealItem/MealItemForm.js
 rename ordering/src/components/Meals/{ => MealItem}/MealItemForm.module.css (100%)
 create mode 100644 ordering/src/components/UI/Card.js
 rename ordering/src/components/{Cart => UI}/Card.module.css (100%)
 create mode 100644 ordering/src/components/UI/Input.js
 rename ordering/src/components/{ => UI}/Input.module.css (100%)

diff --git a/ordering/.eslintcache b/ordering/.eslintcache
index 4f93031..f63745e 100644
--- a/ordering/.eslintcache
+++ b/ordering/.eslintcache
@@ -1 +1 @@
-[{"/code/gitea/udemy-react-course/ordering/src/index.js":"1","/code/gitea/udemy-react-course/ordering/src/App.js":"2","/code/gitea/udemy-react-course/ordering/src/components/Layout/Header.js":"3","/code/gitea/udemy-react-course/ordering/src/components/Layout/HeaderCartButton.js":"4","/code/gitea/udemy-react-course/ordering/src/components/Cart/CartIcon.js":"5","/code/gitea/udemy-react-course/ordering/src/components/Meals/Meals.js":"6","/code/gitea/udemy-react-course/ordering/src/components/Meals/MealsSummary.js":"7","/code/gitea/udemy-react-course/ordering/src/components/Meals/AvailableMeals.js":"8","/code/gitea/udemy-react-course/ordering/src/components/Meals/dummy-meals.js":"9"},{"size":179,"mtime":1648642748000,"results":"10","hashOfConfig":"11"},{"size":262,"mtime":1663957809239,"results":"12","hashOfConfig":"11"},{"size":550,"mtime":1663957504588,"results":"13","hashOfConfig":"11"},{"size":453,"mtime":1663957524740,"results":"14","hashOfConfig":"11"},{"size":488,"mtime":1663956419417,"results":"15","hashOfConfig":"11"},{"size":233,"mtime":1663957780583,"results":"16","hashOfConfig":"11"},{"size":529,"mtime":1663957501324,"results":"17","hashOfConfig":"11"},{"size":749,"mtime":1663957905318,"results":"18","hashOfConfig":"11"},{"size":0,"mtime":1663957879313,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"gx63om",{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"27","messages":"28","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"29","messages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/code/gitea/udemy-react-course/ordering/src/index.js",[],"/code/gitea/udemy-react-course/ordering/src/App.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Layout/Header.js",[],["39","40"],"/code/gitea/udemy-react-course/ordering/src/components/Layout/HeaderCartButton.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Cart/CartIcon.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/Meals.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/MealsSummary.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/AvailableMeals.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/dummy-meals.js",[],{"ruleId":"41","replacedBy":"42"},{"ruleId":"43","replacedBy":"44"},"no-native-reassign",["45"],"no-negated-in-lhs",["46"],"no-global-assign","no-unsafe-negation"]
\ No newline at end of file
+[{"/code/gitea/udemy-react-course/ordering/src/index.js":"1","/code/gitea/udemy-react-course/ordering/src/App.js":"2","/code/gitea/udemy-react-course/ordering/src/components/Layout/Header.js":"3","/code/gitea/udemy-react-course/ordering/src/components/Layout/HeaderCartButton.js":"4","/code/gitea/udemy-react-course/ordering/src/components/Cart/CartIcon.js":"5","/code/gitea/udemy-react-course/ordering/src/components/Meals/Meals.js":"6","/code/gitea/udemy-react-course/ordering/src/components/Meals/MealsSummary.js":"7","/code/gitea/udemy-react-course/ordering/src/components/Meals/AvailableMeals.js":"8","/code/gitea/udemy-react-course/ordering/src/components/Meals/dummy-meals.js":"9","/code/gitea/udemy-react-course/ordering/src/components/UI/Card.js":"10","/code/gitea/udemy-react-course/ordering/src/components/Meals/MealItem/MealItem.js":"11","/code/gitea/udemy-react-course/ordering/src/components/Meals/MealItem/MealItemForm.js":"12","/code/gitea/udemy-react-course/ordering/src/components/UI/Input.js":"13"},{"size":179,"mtime":1648642748000,"results":"14","hashOfConfig":"15"},{"size":262,"mtime":1663957809239,"results":"16","hashOfConfig":"15"},{"size":550,"mtime":1663957504588,"results":"17","hashOfConfig":"15"},{"size":453,"mtime":1663957524740,"results":"18","hashOfConfig":"15"},{"size":488,"mtime":1663956419417,"results":"19","hashOfConfig":"15"},{"size":233,"mtime":1663957780583,"results":"20","hashOfConfig":"15"},{"size":529,"mtime":1663957501324,"results":"21","hashOfConfig":"15"},{"size":1090,"mtime":1663962009951,"results":"22","hashOfConfig":"15"},{"size":0,"mtime":1663957879313,"results":"23","hashOfConfig":"15"},{"size":151,"mtime":1663961477366,"results":"24","hashOfConfig":"15"},{"size":540,"mtime":1663962187735,"results":"25","hashOfConfig":"15"},{"size":565,"mtime":1663962483138,"results":"26","hashOfConfig":"15"},{"size":268,"mtime":1663962378512,"results":"27","hashOfConfig":"15"},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"gx63om",{"filePath":"30","messages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"47","messages":"48","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"51","messages":"52","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"53","messages":"54","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/code/gitea/udemy-react-course/ordering/src/index.js",[],"/code/gitea/udemy-react-course/ordering/src/App.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Layout/Header.js",[],["55","56"],"/code/gitea/udemy-react-course/ordering/src/components/Layout/HeaderCartButton.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Cart/CartIcon.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/Meals.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/MealsSummary.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/AvailableMeals.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/dummy-meals.js",[],"/code/gitea/udemy-react-course/ordering/src/components/UI/Card.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/MealItem/MealItem.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/MealItem/MealItemForm.js",[],"/code/gitea/udemy-react-course/ordering/src/components/UI/Input.js",[],{"ruleId":"57","replacedBy":"58"},{"ruleId":"59","replacedBy":"60"},"no-native-reassign",["61"],"no-negated-in-lhs",["62"],"no-global-assign","no-unsafe-negation"]
\ No newline at end of file
diff --git a/ordering/src/components/Meals/AvailableMeals.js b/ordering/src/components/Meals/AvailableMeals.js
index d1c9421..87d1f74 100644
--- a/ordering/src/components/Meals/AvailableMeals.js
+++ b/ordering/src/components/Meals/AvailableMeals.js
@@ -1,38 +1,49 @@
 import classes from "./AvailableMeals.module.css"
+import Card from "../UI/Card"
+import MealItem from "./MealItem/MealItem"
 
 const DUMMY_MEALS = [
-  {
-    id: 'm1',
-    name: 'Sushi',
-    description: 'Finest fish and veggies',
-    price: 22.99,
-  },
-  {
-    id: 'm2',
-    name: 'Schnitzel',
-    description: 'A german specialty!',
-    price: 16.5,
-  },
-  {
-    id: 'm3',
-    name: 'Barbecue Burger',
-    description: 'American, raw, meaty',
-    price: 12.99,
-  },
-  {
-    id: 'm4',
-    name: 'Green Bowl',
-    description: 'Healthy...and green...',
-    price: 18.99,
-  },
-];
+    {
+        id: "m1",
+        name: "Sushi",
+        description: "Finest fish and veggies",
+        price: 22.99,
+    },
+    {
+        id: "m2",
+        name: "Schnitzel",
+        description: "A german specialty!",
+        price: 16.5,
+    },
+    {
+        id: "m3",
+        name: "Barbecue Burger",
+        description: "American, raw, meaty",
+        price: 12.99,
+    },
+    {
+        id: "m4",
+        name: "Green Bowl",
+        description: "Healthy...and green...",
+        price: 18.99,
+    },
+]
 
 function AvailableMeals() {
-    const mealsList = DUMMY_MEALS.map(meal =>  <li>{meal.name}</li>)
+    const mealsList = DUMMY_MEALS.map((meal) => (
+        <MealItem
+            key={meal.id}
+            name={meal.name}
+            description={meal.description}
+            price={meal.price}
+        />
+    ))
 
     return (
         <section className={classes.meals}>
-            <ul>{mealsList}</ul>
+            <Card>
+                <ul>{mealsList}</ul>
+            </Card>
         </section>
     )
 }
diff --git a/ordering/src/components/Meals/MealItem/MealItem.js b/ordering/src/components/Meals/MealItem/MealItem.js
new file mode 100644
index 0000000..333c4e2
--- /dev/null
+++ b/ordering/src/components/Meals/MealItem/MealItem.js
@@ -0,0 +1,20 @@
+import classes from "./MealItem.module.css"
+import MealItemForm from "./MealItemForm"
+
+function MealItem(props) {
+  const price = `$${props.price.toFixed(2)}`
+    return (
+        <li className={classes.meal}>
+            <div>
+                <h3>{props.name}</h3>
+                <div className={classes.description}>{props.description}</div>
+                <div className={classes.price}>{price}</div>
+            </div>
+            <div>
+              <MealItemForm />
+            </div>
+        </li>
+    )
+}
+
+export default MealItem
diff --git a/ordering/src/components/Meals/MealItem.module.css b/ordering/src/components/Meals/MealItem/MealItem.module.css
similarity index 100%
rename from ordering/src/components/Meals/MealItem.module.css
rename to ordering/src/components/Meals/MealItem/MealItem.module.css
diff --git a/ordering/src/components/Meals/MealItem/MealItemForm.js b/ordering/src/components/Meals/MealItem/MealItemForm.js
new file mode 100644
index 0000000..f26bc37
--- /dev/null
+++ b/ordering/src/components/Meals/MealItem/MealItemForm.js
@@ -0,0 +1,23 @@
+import classes from "./MealItemForm.module.css"
+import Input from "../../UI/Input"
+
+function MealItemForm(props) {
+    return (
+        <form className={classes.form}>
+            <Input
+                label="Amount"
+                input={{
+                    id: "amount",
+                    type: "number",
+                    min: "1",
+                    max: "5",
+                    step: "1",
+                    defaultValue: "1",
+                }}
+            />
+            <button>+ Add</button>
+        </form>
+    )
+}
+
+export default MealItemForm
diff --git a/ordering/src/components/Meals/MealItemForm.module.css b/ordering/src/components/Meals/MealItem/MealItemForm.module.css
similarity index 100%
rename from ordering/src/components/Meals/MealItemForm.module.css
rename to ordering/src/components/Meals/MealItem/MealItemForm.module.css
diff --git a/ordering/src/components/UI/Card.js b/ordering/src/components/UI/Card.js
new file mode 100644
index 0000000..ee3d331
--- /dev/null
+++ b/ordering/src/components/UI/Card.js
@@ -0,0 +1,7 @@
+import classes from "./Card.module.css"
+
+function Card(props) {
+    return <div className={classes.card}>{props.children}</div>
+}
+
+export default Card
diff --git a/ordering/src/components/Cart/Card.module.css b/ordering/src/components/UI/Card.module.css
similarity index 100%
rename from ordering/src/components/Cart/Card.module.css
rename to ordering/src/components/UI/Card.module.css
diff --git a/ordering/src/components/UI/Input.js b/ordering/src/components/UI/Input.js
new file mode 100644
index 0000000..3447561
--- /dev/null
+++ b/ordering/src/components/UI/Input.js
@@ -0,0 +1,11 @@
+import classes from "./Input.module.css"
+function Input(props) {
+    return (
+        <div className={classes.input}>
+            <label htmlFor={props.input.id}>{props.label}</label>
+            <input {...props.input} />
+        </div>
+    )
+}
+
+export default Input
diff --git a/ordering/src/components/Input.module.css b/ordering/src/components/UI/Input.module.css
similarity index 100%
rename from ordering/src/components/Input.module.css
rename to ordering/src/components/UI/Input.module.css