ConfirmMeals.js

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;