UPDATING THE DASHBOARD COMPONENTS BASED ON USER VERIFICATION
WE WILL START WITH SUMMARY.JS
SUMMARY.JS
import React from "react";
import axios from "axios";
import { useState, useEffect } from "react";
const Summary = () => {
const [username, setUsername] = useState("");
useEffect(() => {
axios
.get("http://localhost:3002/verifyUser", { withCredentials: true })
.then((res) => { MUST
console.log(res.data);
if (res.data.status) {
setUsername(res.data.user);
}
})
.catch((err) => {
console.error(err);
setUsername("");
});
}, []);
return (
<>
{!username? (
<h2>Login to view Dashboard</h2>
) : (
<>
<div className="username">
<h6>Hi,{username}!</h6>
<hr className="divider" />
</div>
<div className="section">
<span>
<p>Equity</p>
</span>
<div className="data">
<div className="first">
<h3>3.74k</h3>
<p>Margin available</p>
</div>
<hr />
<div className="second">
<p>
Margins used <span>0</span>{" "}
</p>
<p>
Opening balance <span>3.74k</span>{" "}
</p>
</div>
</div>
<hr className="divider" />
</div>
<div className="section">
<span>
<p>Holdings (13)</p>
</span>
<div className="data">
<div className="first">
<h3 className="profit">
1.55k <small>+5.20%</small>{" "}
</h3>
<p>P&L</p>
</div>
<hr />
<div className="second">
<p>
Current Value <span>31.43k</span>{" "}
</p>
<p>
Investment <span>29.88k</span>{" "}
</p>
</div>
</div>
<hr className="divider" />
</div>
</>
)}
</>
);
};
export default Summary;
THE BACKEND ROUTE :
app.get("/verifyUser", userVerification, (req, res) => {
try {
if (!req.user || !req.user.username) {
res.json({ status: false, message: "User data missing!" });
}
res.json({ status: true, user: req.user.username });
} catch (err) {
console.log(err);
res.json({ status: false, message: "Error in verification" });
}
});
Comments
Post a Comment