CONNECTING ALL OF THEM USING RENDER LINKS
CORS
app.use(
cors({
origin: [
"http://localhost:3000",
"https://tradeeasy-2.onrender.com", DASHBOARD LINK
"https://tradeeasy-frontend.onrender.com", FRONTEND LINK
],
methods: ["GET", "POST", "PUT", "DELETE"],
credentials: true,
})
);
LOGIN.JS
const handleSubmit = async (e) => {
e.preventDefault();
try {
const { data } = await axios.post(
"https://tradeeasy.onrender.com/login", BACKEND ROUTE
{
...inputValue,
},
{ withCredentials: true }
);
console.log(data);
const { success, message } = data;
if (success) {
handleSuccess(message);
setTimeout(() => {
window.location.href = "https://tradeeasy-2.onrender.com"; DASHBOARD LINK
}, 1000);
} else {
console.log(data.message);
handleError(message);
}
} catch (error) {
console.log(error);
}
SIMILARLY WITH SIGNUP
const handleSubmit = async (e) => {
e.preventDefault();
try {
const { data } = await axios.post(
"https://tradeeasy.onrender.com/signup",
{
...inputValue,
},
{ withCredentials: true }
);
console.log(data);
const { success, message } = data;
if (success) {
handleSuccess(message);
setTimeout(() => {
window.location.href = "https://tradeeasy-2.onrender.com";
}, 1000);
} else {
console.log(data.message);
handleError(message);
}
} catch (error) {
console.log(error);
}
IN DASHBOARD, LOGOUT OPTION IS ALSO CREATED.
IN MENU.JS
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { useCookies } from "react-cookie";
import axios from "axios";
export default function Menu() {
const [selectedMenu, setSelectedMenu] = useState(0);
const [isProfileDropdownOpen, setIsProfileDropdownOpen] = useState(false);
const navigate = useNavigate();
const [cookies, removeCookie] = useCookies([]);
const [username, setUsername] = useState("");
useEffect(() => {
const verifyCookie = async () => {
const { data } = await axios.get(
"https://tradeeasy.onrender.com/verifyUser",
{ withCredentials: true }
);
const { status, user } = data;
console.log(user);
setUsername(user);
if (!status) {
removeCookie("token");
window.location.href = "https://tradeeasy-frontend.onrender.com/login";
}
};
verifyCookie();
}, [cookies, navigate, removeCookie]);
const Logout = () => {
removeCookie("token");
window.location.href = "https://tradeeasy-frontend.onrender.com";;
};
const handleMenuClick = (index) => {
setSelectedMenu(index);
};
const handleDropdownOpen = () => {
setIsProfileDropdownOpen(!isProfileDropdownOpen);
};
const menuClass = "menu";
const activeMenuClass = "menu selected";
return (
<>
<div className="menu-container">
<img src="logo3.png" style={{ width: "5%" }} />
<div className="menus">
<ul>
<li>
<Link
style={{ textDecoration: "none" }}
to="/"
onClick={() => handleMenuClick(0)}
>
<p className={selectedMenu === 0 ? activeMenuClass : menuClass}>
Dashboard
</p>
</Link>
</li>
<li>
<Link
style={{ textDecoration: "none" }}
to="/orders"
onClick={() => handleMenuClick(1)}
>
<p className={selectedMenu === 1 ? activeMenuClass : menuClass}>
Orders
</p>
</Link>
</li>
<li>
<Link
style={{ textDecoration: "none" }}
to="/holdings"
onClick={() => handleMenuClick(2)}
>
<p className={selectedMenu === 2 ? activeMenuClass : menuClass}>
Holdings
</p>
</Link>
</li>
<li>
<Link
style={{ textDecoration: "none" }}
to="/positions"
onClick={() => handleMenuClick(3)}
>
<p className={selectedMenu === 3 ? activeMenuClass : menuClass}>
Positions
</p>
</Link>
</li>
<li>
<Link
style={{ textDecoration: "none" }}
to="/funds"
onClick={() => handleMenuClick(4)}
>
<p className={selectedMenu === 4 ? activeMenuClass : menuClass}>
Funds
</p>
</Link>
</li>
<li>
<Link
style={{ textDecoration: "none" }}
onClick={Logout}
>
<p className={selectedMenu === 4 ? activeMenuClass : menuClass}>
Logout
</p>
</Link>
</li>
</ul>
<hr />
<div className="profile">
<div className="avatar">ZU</div>
<div className="usename">
<p style={{color:"white"}}>{username}</p>
</div>
</div>
</div>
</div>
</>
);
}
HOLDINGS.JS
export default function Holdings() {
const [allHoldings, setAllHoldings] = useState([]);
useEffect(() => {
axios
.get("https://tradeeasy.onrender.com/allHoldings", { withCredentials: true })
.then((res) => {
if (res.data) {
console.log(res.data);
setAllHoldings(res.data);
} else {
setAllHoldings([]);
}
})
.catch((error) => {
setAllHoldings([]);
console.error(error);
});
}, []);
ORDERS.JS
const Orders = () => {
const [allOrders, setAllOrders] = useState([]);
useEffect(() => {
axios
.get("https://tradeeasy.onrender.com/allOrders", { withCredentials: true })
.then((res) => {
if (res.data) {
setAllOrders(res.data);
} else {
setAllOrders([]);
}
})
.catch((err) => {
console.error(err);
setAllOrders([]);
});
});
return (
POSITIONS.JS
axios
.get("https://tradeeasy.onrender.com/allPositions", { withCredentials: true })
.then((res) => {
Comments
Post a Comment