tyrel
/
udemy-react-course
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

inputs

This commit is contained in:
Tyrel Souza 2022-09-23 15:48:24 -04:00
parent cc3d72cfc1
commit 0bb2f8f0d0
No known key found for this signature in database
GPG Key ID: F3614B02ACBE438E
10 changed files with 100 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ordering/.eslintcache
View File

@ -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"]
[{"/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"]

65
ordering/src/components/Meals/AvailableMeals.js
View File

@ -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>
)
}

20
ordering/src/components/Meals/MealItem/MealItem.js Normal file
View File

@ -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

0
ordering/src/components/Meals/MealItem.module.css → ordering/src/components/Meals/MealItem/MealItem.module.css
View File

23
ordering/src/components/Meals/MealItem/MealItemForm.js Normal file
View File

@ -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

0
ordering/src/components/Meals/MealItemForm.module.css → ordering/src/components/Meals/MealItem/MealItemForm.module.css
View File

7
ordering/src/components/UI/Card.js Normal file
View File

@ -0,0 +1,7 @@
import classes from "./Card.module.css"
function Card(props) {
return <div className={classes.card}>{props.children}</div>
}
export default Card

0
ordering/src/components/Cart/Card.module.css → ordering/src/components/UI/Card.module.css
View File

11
ordering/src/components/UI/Input.js Normal file
View File

@ -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

0
ordering/src/components/Input.module.css → ordering/src/components/UI/Input.module.css
View File