FETCH DATA FROM DASHBOARD

 WE BEGIN WITH

app.get("/allHoldings", async (req, res) => {

  let allHoldings = await HoldingModel.find({});

  res.json(allHoldings);

});

app.get("/allPositions", async (req, res) => {

  let allPositions = await PositionModel.find({});

  res.json(allPositions);

});

NOW,WE NEED TO ADD THIS DATA TO OUR HOLDINGS IN DASHBOARD

IN HOLDINGS.JS WE WILL USE useState AND useEffect  TO APPLY CHANGES.

TO GET THE DATA FROM MONGO WE WILL USE AXIOS,

WE WILL INSTALL IT IN BOTH BACKEND AND DASHBOARD FOLDERS, BY THE COMMAND: npm i axios

HOLDINGS.JS

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

import axios from "axios";

// import { holdings } from "../data/data";

export default function Holdings() {

  const [allHoldings, setAllHoldings] = useState([]);

  useEffect(() => {

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

      console.log(res.data);

      setAllHoldings(res.data);

    });

  }, []);

  return (

    <>

      <h3 className="title">Holdings({allHoldings.length})</h3>

      <div className="order-table">

        <table>

          <tr>

            <th>Instrument</th>

            <th>Qty.</th>

            <th>Avg.cost</th>

            <th>LTP</th>

            <th>Cur.val</th>

            <th>P&L</th>

            <th>Net chg.</th>

            <th>Day chg.</th>

          </tr>

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

            const currValue = stock.qty * stock.price;

            const isProfit = currValue - stock.avg * stock.qty >= 0.0;

            const profitClass = isProfit ? "profit" : "loss";

            const dayClass = stock.isLoss ? "loss" : "true";

            return (

              <>

                <tr key={index}>

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

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

                  <td>{stock.avg.toFixed(2)}</td>

                  <td>{stock.price.toFixed(2)}</td>

                  <td>{currValue.toFixed(2)}</td>

                  <td className={profitClass}>

                    {(currValue - stock.avg * stock.qty).toFixed(2)}

                  </td>

                  <td className={profitClass}>{stock.net}</td>

                  <td className={dayClass}>{stock.day}</td>

                </tr>

              </>

            );

          })}

        </table>

      </div>

    </>

  );

}

 AFTER RUNNING,WE WOULD GET AN ERROR, THIS IS BECAUSE BOTH THE FRONTEND AND BACKEND ARE RUNNING ON DIFFERENT SERVERS. TO SOLVE THIS ISSUE WE USE CORS AND BODY PARSER.

WE HAVE PREVIOUSLY INSTALLED THEM IN BACKEND FOLDER.

NOW, IN THE BACKEND INDEX.JS

const cors = require("cors");

const bodyParser = require("body-parser");

app.use(cors());

app.use(bodyParser.json());

app.get("/allHoldings", async (req, res) => {

  let allHoldings = await HoldingModel.find({});

  res.json(allHoldings);

});

 NOW, THE DATA IN THE HOLDINGS IS SENT FROM MONGO.

TO VERIFY WHEN AN ELEMENT IS MODIFIED IN THE DB , IT CAN BE SEEN IN THE HOLDINGS.

MODIFIED

IN A SIMILAR WAY , POSITIONS ARE UPDATED.

import React, { useState } from "react";

// import { positions } from "../data/data";

import axios from "axios";

const Positions = () => {

  const [allPositions, setAllPositions] = useState([]);

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

    console.log(res.data);

    setAllPositions(res.data);

  });

  return (

    <>

      <h3 className="title">Positions({allPositions.length})</h3>

      <div className="order-table">

        <table>

          <tr>

            <th>Product</th>

            <th>Instrument</th>

            <th>Qty</th>

            <th>Avg</th>

            <th>LTP</th>

            <th>P&L</th>

            <th>Chg</th>

          </tr>

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

            const currValue = stock.qty * stock.price;

            const isProfit = currValue - stock.avg * stock.qty >= 0.0;

            const profitClass = isProfit ? "profit" : "loss";

            const dayClass = stock.isLoss ? "loss" : "true";

            return (

              <>

                <tr key={index}>

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

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

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

                  <td>{stock.avg.toFixed(2)}</td>

                  <td>{stock.price.toFixed(2)}</td>

                  <td className={profitClass}>

                    {(currValue - stock.avg * stock.qty).toFixed(2)}

                  </td>

                  <td className={dayClass}>{stock.day}</td>

                </tr>

              </>

            );

          })}

        </table>

      </div>

    </>

  );

};

export default Positions;