CRUD FROM THE DASHBOARD

 PREVIOUSLY WHEN HOVERED OVER THE STOCKS, TWO OPTIONS APPEAR BUY AND SELL.

HERE, WE CREATE A WINDOW SUCH THAT WHENEVER WE CLICK ON BUY BUTTON A WINDOW IS GENERATED.

THE WINDOW ALLOWS US TO BUY THAT PARTICULAR STOCK. IT CONSISTS OF TWO INPUT FIELDS AND TWO BUTTONS (BUY AND CANCEL).

WE USE CONTEXT TO CREATE THE WINDOW. CONTEXT IS A PIECE OF ITEM THAT IS SHARED BY MULTIPLE COMPONENTS.

IN THIS CASE AS WE ARE WORKING WITH TWO DIFFERENT COMPONENTS, DASHBOARD AND WATCHLIST, WE USE CONTEXT.

TO CREATE A CONTEXT , IN REACT  React.createContext()  IT IS CREATED IN THE GENERALCONTEXT.JS

THE STRUCTURE  OF THE WINDOW AND A CANCEL FUNCTION IS CREATED IN THE BuyActionWindow.js 

import React from "react";

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

import GeneralContext from "./GeneralContext";

import "./BuyActionWindow.css";

export default function BuyActionWindow({ uid }) {

  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"

             

            />

          </fieldset>

          <fieldset>

            <legend>Price</legend>

            <input

              type="number"

              name="price"

              id="price"

              step="0.05"

             

            />

          </fieldset>

        </div>

      </div>

      <div className="buttons">

        <span>Margin required ₹140.65</span>

        <div>

          <Link className="btn btn-blue" >

            Buy

          </Link>

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

            Cancel

          </Link>

        </div>

      </div>

    </div>

  );

}

GENERALCONTEXT.JS

 IN THE CONTEXT TWO FUNCTIONS ARE CREATED, openBuyWindow AND closeBuyWindow.

TWO STATE VARIABLES ARE CREATED , ONE IS A BOOLEAN FUNCTION THAT TELLS IF THE WINDOW IS OPEN OR CLOSED.

TWO FUNCTIONS ARE CREATED TO OPEN AND CLOSE THE WINDOW.

WE RETURN 

<GeneralContext.Provider

.Provider WRAPS AROUND THE COMPONENTS THAT NEEDS ACCESS TO CONTEXT AND PROVIDES THEM WITH DATA.

HERE, WE USED {props.children}

IF NOT USED NONE OF THE WRAPPED COMPONENTS WOULD RENDER INSIDE THE PROVIDER.

THE CONDITION : {isBuyWindowOpen && <BuyActionWindow uid={selectedStockUID} />}

WHENEVER THE WINDOW IS OPENED IT'S STOCK ID IS SENT AS A PARAMETER.

import React, { useState } from "react";

import BuyActionWindow from "./BuyActionWindow";

const GeneralContext = React.createContext({

  openBuyWindow: (uid) => {},

  closeBuyWindow: () => {},

});

export const GeneralContextProvider = (props) => {

  const [isBuyWindowOpen, setIsBuyWindowOpen] = useState(false);

  const [selectedStockUID, setSelectedStockUID] = useState("");

  const handleOpenBuyWindow = (uid) => {

    setIsBuyWindowOpen(true);

    setSelectedStockUID(uid);

  };

  const handleCloseBuyWindow = () => {

    setIsBuyWindowOpen(false);

    selectedStockUID("");

  };

  return (

    <>

      <GeneralContext.Provider

        value={{

          openBuyWindow: handleOpenBuyWindow,

          closeBuyWindow: handleCloseBuyWindow,

        }}

      >

        {props.children}

        {isBuyWindowOpen && <BuyActionWindow uid={selectedStockUID} />}

      </GeneralContext.Provider>

    </>

  );

};

export default GeneralContext;

IN DASHBOARD.JS

const Dashboard = () => {

  return (

    <div className="dashboard-container">

      <GeneralContextProvider>

        <WatchList />

      </GeneralContextProvider>

      <div className="content">

        <Routes>

AS IT OPERATES WHEN THE BUY BUTTON IS CLICKED, IN WATCHLIST.JS

THE CONTEXT IS USED.

WATCHLIST.JS

import GeneralContext from "./GeneralContext";

const WatchlistActions = ({ uid }) => {

  const generalContext = useContext(GeneralContext);

  const handleBuyClick = (uid) => {

    generalContext.openBuyWindow(uid);

  };

  <button className="buy" onClick={handleBuyClick}>

              Buy

            </button>