reactjs – Get Handler to Change Value of a Mongodb Variable

I’m working on a project where I have pre order items and normal items. The quantity of my pre-order items are contained within the variable pre_orderQtyand the quantity of my normal items are contained within the variable qty. I have a button with a handler that registers and provides the date for an order that has been shipped. I would like this handler to on click also, change the qty of items that were pre ordered from 0 to the pre_orderQty value. I’m not exactly sure how to do this. This is what I have so far:

 const shipHandler = () => {
      dispatch(shipOrder());
      if (order.orderItem.qty === 0) {
        order.orderItem.qty = order.orderItem.pre_orderQty;
      }
    };

For this project, my data is being stored in mongodb and I am using react in my frontend. I would really appreciate any help or guidance on how to accomplish this.

import Axios from 'axios';
import { PayPalButton } from 'react-paypal-button-v2';
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import {shipOrder, deliverOrder, detailsOrder, payOrder } from '../actions/orderActions';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
import {
    ORDER_DELIVER_RESET,
    ORDER_SHIPPED_RESET,
    ORDER_RETURN_RESET,
    ORDER_PAY_RESET,
  } from '../constants/orderConstants';




export default function OrderScreen(props) {
  const orderId = props.match.params.id;
  const [sdkReady, setSdkReady] = useState(false);
  const orderDetails = useSelector((state) => state.orderDetails);
  const { order, loading, error } = orderDetails;
  const userSignin = useSelector((state) => state.userSignin);
  const { userInfo } = userSignin;

 

  const orderShip = useSelector((state) => state.orderShip);
  const {
    loading: loadingShip,
    error: errorShip,
    success: successShip,
  } = orderShip;
  

  const dispatch = useDispatch();
  useEffect(() => {
    const addPayPalScript = async () => {
        const { data } = await Axios.get('/api/config/paypal');
        const script = document.createElement('script');
        script.type="text/javascript";
        script.src = `https://www.paypal.com/sdk/js?client-id=${data}`;
        script.async = true;
        script.onload = () => {
          setSdkReady(true);
        };
        document.body.appendChild(script);
      };
      if (
        !order ||
        successPay ||
        successShip ||
        successDeliver ||
      
        (order && order._id !== orderId)
      ) {
        dispatch({ type: ORDER_PAY_RESET });
        dispatch({ type: ORDER_SHIPPED_RESET });
        dispatch({ type: ORDER_DELIVER_RESET });
     
        dispatch(detailsOrder(orderId));
      } else {
        if (!order.isPaid) {
          if (!window.paypal) {
            addPayPalScript();
          } else {
            setSdkReady(true);
          }
        }
      }
    }, [dispatch, order, orderId, sdkReady, successPay, successShip, successDeliver,  order]);
  
   
    const shipHandler = () => {
      dispatch(shipOrder());
      if (order.orderItem.qty === 0) {
        order.orderItem.qty = order.orderItem.pre_orderQty;
      }
    };
   

    
  return loading ? (
    <LoadingBox></LoadingBox>
  ) : error ? (
    <MessageBox variant="danger">{error}</MessageBox>
  ) : (
    <div>
      <h1>Order {order._id}</h1>
      <div className="row top">
        <div className="col-2">
          <ul>
            <li>
              <div className="card card-body">
              <h1>Order: {order._id}</h1>
                <h2>Shipping</h2>
                {order.isShipped? (
                  <MessageBox variant="success">
                    Shipped at {order.ShippedAt}
                  </MessageBox>
                ) : (
                  <MessageBox variant="danger">Not Shipped</MessageBox>
                )}
                {order.isDelivered ? (
                  <MessageBox variant="success">
                    Delivered at {order.deliveredAt}
                  </MessageBox>
                ) : (
                  <MessageBox variant="danger">Not Delivered</MessageBox>
                )}
              </div>
            </li>
            <li>
              <div className="card card-body">
                <h2>Payment</h2>
                <p>
                  <strong>Method:</strong> {order.paymentMethod}
                </p>
                {order.isPaid ? (
                  <MessageBox variant="success">
                    Paid at {order.paidAt}
                  </MessageBox>
                ) : (
                  <MessageBox variant="danger">Not Paid</MessageBox>
                )}
              </div>
            </li>
            <li>
              <div className="card card-body">
             
                <h2>Order Items</h2>
                <ul>
                  {order.orderItems.filter((x) => x.qty > 0).map((item) => (
                    <li key={item.product}>
                      <div className="row">
                        <div>
                          <img
                            src={item.image}
                            alt={item.name}
                            className="small"
                          ></img>
                        </div>
                        <div className="min-30">
                          <Link to={`/product/${item.product}`}>
                            {item.name}
                          </Link>
                        </div>

                        <div>
                          {item.qty} x ${item.price} = ${item.qty * item.price}
                        </div>
                      </div>
                    </li>
                  ))}
                </ul>
                <ul>
                  {order.orderItems.filter((x) => x.pre_orderQty > 0).map((item) => (
                    <li key={item.product}>
                    <p>Pre Order Items</p>
                      <div className="row">
                        <div>
                          <img
                            src={item.image}
                            alt={item.name}
                            className="small"
                          ></img>
                        </div>
                        <div className="min-30">
                          <Link to={`/product/${item.product}`}>
                            {item.name}
                          </Link>
                        </div>

                        <div>
                          {item.pre_orderQty} x ${item.price} = ${item.pre_orderQty * item.price}
                        </div>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div className="col-1">
          <div className="card card-body">
            <ul>
               {userInfo.isAdmin && order.isPaid && !order.isShipped && (
                <li>
                  {loadingShip && <LoadingBox></LoadingBox>}
                  {errorShip && (
                    <MessageBox variant="danger">{errorShip}</MessageBox>
                  )}
                  <button
                    type="button"
                    className="primary block"
                    onClick={shipHandler}
                   
                  >
                    Ship Order
                  </button>
                </li>
               )}
              
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}

Leave a Comment