BACKEND OF BUY BUTTON

IN BUYACTIONWINDOW.JS

import React, { useState, useContext } from "react";

import { Link } from "react-router-dom";

import GeneralContext from "./GeneralContext";

import "./BuyActionWindow.css";

import axios from "axios";

export default function BuyActionWindow({ uid, price }) {

  const [stockQty, setStockQty] = useState(1);

  const [stockPrice, setStockPrice] = useState(price);

  const generalContext = useContext(GeneralContext);

  const handleBuyClick = () => {

    axios.post("http://localhost:3002/newOrder", {

      name: uid,

      qty: stockQty,

      price: stockPrice,

      mode: "BUY",

    });

    console.log(uid);

    generalContext.closeBuyWindow();

  };

  const handleCancelClick = () => {

    generalContext.closeBuyWindow();

  };

  return (

    <div className="container" id="buy-window" draggable="true">

      <div className="regular-order">

        <div className="inputs">

          <fieldset>

            <legend>Qty.</legend>

            <input

              type="number"

              name="qty"

              id="qty"

              onChange={(e) => {

                setStockQty(e.target.value);

              }}

              value={stockQty}

            />

          </fieldset>

          <fieldset>

            <legend>Price</legend>

            <input

              type="number"

              name="price"

              id="price"

              step="0.05"

              onChange={(e) => {

                setStockPrice(e.target.value);

              }}

              value={stockPrice}

            />

          </fieldset>

        </div>

      </div>

      <div className="buttons">

      {uid}<br/>

        <span>Price:{stockPrice}</span>

        <div>

          <Link className="btn btn-blue" onClick={handleBuyClick}>

            Buy

          </Link>

          <Link to="" className="btn btn-grey" onClick={handleCancelClick}>

            Cancel

          </Link>

        </div>

      </div>

    </div>

  );

}

 IN INDEX.JS

app.post("/newOrder", async (req, res) => {

  console.log(req.body);

  let newOrder = new OrderModel({

    name: req.body.name,

    qty: req.body.qty,

    price: req.body.price,

    mode: req.body.mode,

  });

  await newOrder.save();

  res.send("order Saved!!");

NOW THIS HAS TO BE DISPLAYED IN BOTH HOLDINGS AND ORDERS

IN INDEX.JS

  const newHolding = new HoldingModel({

    name: newOrder.name,

    qty: newOrder.qty,

    avg: newOrder.price,

    price: newOrder.price, FOR

    net: "+0.55", TIME BEING

    day: "-0.09",

  });

  await newHolding.save();

  console.log("saved!");

IT SHOLUD BE DISPLAYED IN ORDERS SECTION,

IN DASHBOARD, ORDER.JS

import React, { useEffect, useState } from "react";

import { Link } from "react-router-dom";

import axios from "axios";

const Orders = () => {

  const [allOrders, setAllOrders] = useState([]);

  useEffect(() => {

    axios.get("http://localhost:3002/allOrders").then((res) => {

      console.log(res.data);

      setAllOrders(res.data);

    });

  });

  return (

    <>

      <h3 className="title">Your Orders:({allOrders.length})</h3>

      {allOrders.length === 0 ? (

        <div className="orders">

          <div className="no-orders">

            <p>You haven't placed any orders today</p>

            <Link to={"/"} className="btn">

              Get started

            </Link>

          </div>

        </div>

      ) : (

        <div className="order-table">

          <table>

            <tr>

              <th>Name</th>

              <th>Qty.</th>

              <th>Price</th>

              <th>Mode</th>

            </tr>

            {allOrders.map((stock, index) => {

              return (

                <>

                  <tr key={index}>

                    <td>{stock.name}</td>

                    <td>{stock.qty}</td>

                    <td>{stock.price}</td>

                    <td>{stock.mode}</td>

                  </tr>

                </>

              );

            })}

          </table>

        </div>

      )}

    </>

  );

};

export default Orders;