UPDATING HOLDINGS.JS AND ORDERS.JS
WE UPDATE THE ALL HOLDINGS ROUTE
HOLDINGS SCHEMA AND ORDERSCHEMA IS UPDATED
USER ID IS ADDED
const { mongoose,Schema } = require("mongoose");
const HoldingSchema = new Schema({
userId: {
type: mongoose.Schema.Types.ObjectId,
ref: "User",
required: true,
},
name: String,
qty: Number,
avg: Number,
price: Number,
net: String,
day: String,
});
module.exports = { HoldingSchema };
HOLDINGS.JS
import React, { useState, useEffect } from "react";
import axios, { all } from "axios";
import { holdings } from "../data/data";
import { AreaGraph } from "./AreaGraph";
export default function Holdings() {
const [allHoldings, setAllHoldings] = useState([]);
useEffect(() => {
axios
.get("http://localhost:3002/allHoldings", { withCredentials: true })
.then((res) => { MUST
if (res.data) {
console.log(res.data);
setAllHoldings(res.data);
} else {
setAllHoldings([]);
}
})
.catch((err) => {
console.error(err);
setAllHoldings([]);
});
}, []);
// const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
const labels = allHoldings.map((subArray) => subArray["name"]);
const data = {
labels,
datasets: [
{
fill: true,
label: "Stock Price",
data: allHoldings.map((stock) => stock.price),
borderColor: "rgb(53, 235, 147)",
backgroundColor: "rgba(53, 235,147, 0.5)",
},
],
};
// export const data = {
// labels,
// datasets: [
// {
// fill: true,
// label: 'Dataset 2',
// data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
// borderColor: 'rgb(53, 162, 235)',
// backgroundColor: 'rgba(53, 162, 235, 0.5)',
// },
// ],
// };
return (
<>
{allHoldings.length === 0 ? (
<p style={{ color: "white" }}>No holdings available!!</p>
) : (
<>
<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>
<AreaGraph data={data} />
</>
)}
</>
);
}
BACKEND ROUTE:
app.get("/allHoldings", userVerification, async (req, res) => {
const userId = req.user._id;
// console.log(userId);
const allHoldings = await HoldingModel.find({ userId });
// console.log(allHoldings);
res.json(allHoldings);
});
ORDER SCHEMA
const { mongoose,Schema } = require("mongoose");
const OrderSchema = new Schema({
userId: {
type: mongoose.Schema.Types.ObjectId,
ref: "User",
required: true,
},
name: String,
qty: Number,
price: Number,
mode: String,
});
module.exports = { OrderSchema };
THE BACKEND ROUTE:
app.get("/allOrders", userVerification, async (req, res) => {
const userId = req.user._id;
let allOrders = await OrderModel.find({ userId });
res.json(allOrders);
});
ORDERS.JS
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import "../index.css";
const Orders = () => {
const [allOrders, setAllOrders] = useState([]);
useEffect(() => {
axios
.get("http://localhost:3002/allOrders", { withCredentials: true })
.then((res) => { MUST
if (res.data) {
console.log(res.data);
setAllOrders(res.data);
} else {
setAllOrders([]);
}
})
.catch((err) => {
console.error(err);
setAllOrders([]);
});
});
return (
<>
{allOrders.length === 0 ? (
<h2 style={{color:"white"}}>No Orers Placed!</h2>
) : (
<>
<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;
Comments
Post a Comment