Untitled
unknown
plain_text
a year ago
3.4 kB
4
Indexable
import React from "react"; import { LOADSTATE } from "../common/constants/constants"; import ActionBar from "./action-bar"; import "./confirm-meals.css"; import NoItems from "./no-items"; const ConfirmMeals = ({ meals, loadStates, onMealsConfirm, onRestaurantChange, }) => { const [totalMeals, setTotalMeals] = React.useState(); const [totalAmount, setTotalAmount] = React.useState(); const onMealQuantityChange = React.useCallback(() => { let totalMeals = 0; let totalAmount = 0; meals.forEach((meal) => { if (meal.quantity) { totalMeals += parseInt(meal.quantity); totalAmount += parseFloat(meal.price) * parseInt(meal.quantity); } }); setTotalAmount(totalAmount); setTotalMeals(totalMeals); }, [meals]); const onConfirmOrder = () => { const confirmedMeals = meals.filter((meal) => meal.quantity); onMealsConfirm(confirmedMeals); }; React.useEffect(() => { onMealQuantityChange(); }, [meals, onMealQuantityChange]); return ( <div className="meals d-flex flex-column"> <div> <h4>Select Meals</h4> </div> <div className="scroll-content"> {loadStates && loadStates.meals === LOADSTATE.SUCCESS && ( <> {meals.length === 0 && ( <NoItems heading="No meals found." subheading="Select another restaurant." /> )} {meals.length > 0 && meals.map((meal, index) => ( <Meal key={index} meal={meal} onMealQuantityChange={onMealQuantityChange} /> ))} </> )} </div> <ActionBar leftLabel={ totalMeals > 0 ? `${totalMeals} meals - ₹ ${totalAmount.toFixed(2)}` : "No meals selected" } links={[ { title: "Change Restaurant", action: onRestaurantChange, class: "btn-warning", }, { title: "Confirm Order", action: onConfirmOrder, class: "btn-primary", disabled: !totalMeals, }, ]} /> </div> ); }; const Meal = ({ meal, onMealQuantityChange }) => { const onQuantityChange = (e) => { meal.quantity = parseInt(e.target.value); onMealQuantityChange(); }; return ( <div className="d-flex p-2 mb-2 border rounded justify-content-between"> <div className="d-flex w-75"> <div className="mr-2"> <img className="border rounded" src={require("../assets/images/meal.jpg").default} alt={meal.name} width="80" /> </div> <div className="d-flex flex-column mr-2"> <h4>{meal.name}</h4> <h6 className="text-secondary">{meal.description}</h6> </div> </div> <div className="d-flex flex-column align-items-end justify-content-between"> <h4>₹ {meal.price.toFixed(2)}</h4> <input type="number" className="number" step="1" min="0" max="100" defaultValue={meal.quantity || "0"} onChange={onQuantityChange} ></input> </div> </div> ); }; export default ConfirmMeals;
Editor is loading...
Leave a Comment