diff --git a/src/components/Accountsummary.js b/src/components/Accountsummary.js index a23d9175..acf7c757 100644 --- a/src/components/Accountsummary.js +++ b/src/components/Accountsummary.js @@ -1,11 +1,54 @@ -import React from "react"; -// import { Link } from "react-router-dom"; +import React, { useState, useEffect } from "react"; import Container from "react-bootstrap/Container"; import Row from "react-bootstrap/Row"; import Col from "react-bootstrap/Col"; +import { ref as databaseRef, get, child, onValue } from "firebase/database"; +import { database } from "../firebase"; +import { off } from "firebase/database"; const Accountsummary = () => { - const data = { amountInvested: 1000, cash: 500, portoflioValue: 50000 }; + const [accountData, setAccountData] = useState({ + amountInvested: 0, + cash: 0, + portfolioValue: 0, + }); + + useEffect(() => { + // Fetch account data from Firebase + const accountDataRef = databaseRef(database, "accountData"); + + const fetchData = async () => { + try { + const snapshot = await get(child(accountDataRef, "latest")); + if (snapshot.exists()) { + setAccountData(snapshot.val()); + } else { + console.log("No data available"); + } + } catch (error) { + console.error("Error getting account data:", error); + } + }; + + fetchData(); + + // Listen for changes and update the state accordingly + const onDataChange = (snapshot) => { + if (snapshot.exists()) { + setAccountData(snapshot.val()); + } else { + console.log("No data available"); + } + }; + + const dataRef = child(accountDataRef, "latest"); + onValue(dataRef, onDataChange); + + return () => { + // Cleanup the event listener when the component unmounts + off(dataRef, onDataChange); + }; + }, []); // Empty dependency array ensures this effect runs once when the component mounts return ( @@ -13,19 +56,19 @@ const Accountsummary = () => {
Amount Invested: - {data.amountInvested} + {accountData.amountInvested}
Cash: - {data.cash} + {accountData.cash}
Portfolio Value: - {data.portoflioValue} + {accountData.portfolioValue}
@@ -33,4 +76,4 @@ const Accountsummary = () => { ); }; -export default Accountsummary; +export default Accountsummary; \ No newline at end of file diff --git a/src/components/LineGraph.js b/src/components/LineGraph.js index 62a3628b..71caf278 100644 --- a/src/components/LineGraph.js +++ b/src/components/LineGraph.js @@ -1,228 +1,3 @@ -// import React, { useEffect, useState } from "react"; -// import ReactApexChart from "react-apexcharts"; -// import axios from "axios"; - -// const LineGraph = ({ companyname }) => { -// const [series1] = useState([ -// { -// name: "Sales", -// data: [-10, 3, 10, 9, 29, 79, 22, 9, 12, 7, 19, 55, 13, 49, 17, 2, 89, 5], -// }, -// ]); -// const [series2] = useState([ -// { -// name: "Sales", -// data: [ -// 34, 43, 50, 69, 79, 85, 82, 70, 82, 71, 39, 5, 43, 66, 37, 32, 47, 55, -// ], -// }, -// ]); -// const [series4] = useState([ -// { -// name: "Sales", -// data: [ -// -10, 13, 17, 19, 29, 49, 22, 9, 12, 27, 19, 55, 43, 49, 17, 12, 80, 51, -// ], -// }, -// ]); -// const [series3] = useState([ -// { -// name: "Sales", -// data: [ -// 43, 34, 16, 79, 39, 29, 32, 19, 42, 37, 59, 53, 13, 39, 17, 2, 7, 5, -// ], -// }, -// ]); -// const [series5] = useState([ -// { -// name: "Sales", -// data: [ -// -10, 3, 10, 19, 29, 79, 22, 9, 12, 70, 19, 55, 13, 49, 17, 12, 59, 15, -// ], -// }, -// ]); -// const [options] = useState({ -// chart: { -// height: 350, -// type: "line", -// }, -// forecastDataPoints: { -// count: 7, -// }, -// stroke: { -// width: 5, -// curve: "smooth", -// }, -// xaxis: { -// type: "datetime", -// categories: [ -// "1/11/2000", -// "2/11/2000", -// "3/11/2000", -// "4/11/2000", -// "5/11/2000", -// "6/11/2000", -// "7/11/2000", -// "8/11/2000", -// "9/11/2000", -// "10/11/2000", -// "11/11/2000", -// "12/11/2000", -// "1/11/2001", -// "2/11/2001", -// "3/11/2001", -// "4/11/2001", -// "5/11/2001", -// "6/11/2001", -// ], -// tickAmount: 10, -// labels: { -// formatter: function (value, timestamp, opts) { -// return opts.dateFormatter(new Date(timestamp), "dd MMM"); -// }, -// }, -// }, -// title: { -// text: "Forecast", -// align: "left", -// style: { -// fontSize: "16px", -// color: "#666", -// }, -// }, -// fill: { -// type: "gradient", -// gradient: { -// shade: "dark", -// gradientToColors: ["#FDD835"], -// shadeIntensity: 1, -// type: "horizontal", -// opacityFrom: 1, -// opacityTo: 1, -// stops: [0, 100, 100, 100], -// }, -// }, -// yaxis: { -// min: -10, -// max: 90, -// }, -// }); - -// // const [companyname, setCompanyName] = useState("apple"); -// const getyahoodata = async () => { -// const optionss = { -// method: "GET", -// url: "https://apidojo-yahoo-finance-v1.p.rapidapi.com/stock/v2/get-summary", -// params: { -// symbol: "AMRN", -// region: "US", -// }, -// headers: { -// "X-RapidAPI-Key": "d6da08cc1fmsh2ffc0e825183be8p1c8245jsn3ba9199a4d47", -// "X-RapidAPI-Host": "apidojo-yahoo-finance-v1.p.rapidapi.com", -// }, -// }; - -// try { -// const response = await axios.request(optionss); -// console.log(response.data.earnings.financialsChart.yearly); -// } catch (error) { -// console.error(error); -// } -// }; -// useEffect(() => { -// getyahoodata() -// }, []) - -// return ( -//
-// { -// switch (companyname) { -// case "apple": -// return series1; -// case "stanchart": -// return series2; -// case "sumsung": -// return series3; -// case "vivo": -// return series4; -// case "realme": -// return series5; -// default: -// return []; -// } -// })()} -// type="line" -// height={350} -// /> -//
-// ); -// }; - -// export default LineGraph; -// import React, { useEffect, useState } from "react"; -// import ReactApexChart from "react-apexcharts"; -// import axios from "axios"; - -// const LineGraph = () => { -// const [options] = useState({ -// // your existing options -// }); - -// const [series, setSeries] = useState([]); - -// const getAlphaVantageData = async () => { -// const symbol = "TSLA"; // Replace with the desired stock symbol -// const apiKey = "S23I1KOF539FHN0W"; // Replace with your Alpha Vantage API key - -// const url = `https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY_ADJUSTED&symbol=${symbol}&apikey=${apiKey}`; - -// try { -// const response = await axios.get(url); -// console.log(response?.data); - -// const monthlyData = response?.data?.["Monthly Adjusted Time Series"]; - -// // Extract relevant data for the graph -// const extractedData = Object.entries(monthlyData) -// .slice(0, 6) // Get only the last six months -// .map(([date, item]) => ({ -// x: new Date(date).toLocaleDateString("en-US", { month: "long" }), // Format month name -// y: parseFloat(item["5. adjusted close"]), // Adjusted close price as a floating-point number -// })); - -// setSeries([ -// { -// name: "Adjusted Close Price", -// data: extractedData, -// }, -// ]); -// } catch (error) { -// console.error(error); -// } -// }; - -// useEffect(() => { -// getAlphaVantageData(); -// }, []); - -// return ( -//
-// -//
-// ); -// }; - -// export default LineGraph; - -// import React, { useEffect, useState } from "react"; import ReactApexChart from "react-apexcharts"; import axios from "axios"; diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 8bee5fc9..6bea2de7 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -44,6 +44,8 @@ const Navbar = ({ toggleDarkMode, darkMode }) => { Settings + + Investment {pathname.includes("/dash") && ( diff --git a/src/components/News.js b/src/components/News.js index bd1891a6..aa58e838 100644 --- a/src/components/News.js +++ b/src/components/News.js @@ -2,39 +2,19 @@ import React, { useEffect, useState } from "react"; import axios from "axios"; const News = () => { - // const [NewsArticles, setNewsArticles] = useState([]); const [polygonNews, setNews] = useState([]); - // async function GetNewsArticles() { - // const response = await fetch( - // "https://newsapi.org/v2/everything?q=finance&from=2024-01-12&sortBy=publishedAt&apiKey=bf56f1217d1e4d048c67722c005ee4be" - // ); - // const data = await response.json(); - // setNewsArticles(data.articles); - // } async function getnews() { - // const options = { - // method: "GET", - // url: "https://apidojo-yahoo-finance-v1.p.rapidapi.com/market/get-popular-watchlists", - // headers: { - // "X-RapidAPI-Key": "d6da08cc1fmsh2ffc0e825183be8p1c8245jsn3ba9199a4d47", - // "X-RapidAPI-Host": "apidojo-yahoo-finance-v1.p.rapidapi.com", - // }, - // }; - try { - const response = await axios.get(`https://www.alphavantage.co/query?function=NEWS_SENTIMENT&tickers=tsla&apikey=HYYWPKPI7YSU0TXJ` + const response = await axios.get( + `https://www.alphavantage.co/query?function=NEWS_SENTIMENT&tickers=tsla&apikey=HYYWPKPI7YSU0TXJ` ); - // console.log(response.data.finance.result[0]); setNews(response?.data?.feed); - // console.log(response?.data?.feed); - // console.log(response.data.finance.result[0].portfolios); } catch (error) { console.error(error); } } useEffect(() => { - // GetNewsArticles(); getnews(); }, []); diff --git a/src/components/PieChart.js b/src/components/PieChart.js index 1845c67a..2fdb5d43 100644 --- a/src/components/PieChart.js +++ b/src/components/PieChart.js @@ -1,73 +1,99 @@ import React, { useEffect, useState } from "react"; import ReactApexChart from "react-apexcharts"; -import axios from "axios"; +import { ref as databaseRef, get, child, onValue } from "firebase/database"; +import { database } from "../firebase"; +import { off } from "firebase/database"; const PieChart = () => { - const [chartData] = useState({ - series1: [33, 27, 40], - options: { - chart: { - width: 380, - type: "pie", - }, - labels: ["invesment", "cash", "Portfolio"], - responsive: [ - { - breakpoint: 480, - options: { - chart: { - width: 400, - }, - legend: { - position: "bottom", - }, - }, - }, - ], - }, + const [accountData, setAccountData] = useState({ + amountInvested: 0, + cash: 0, + portfolioValue: 0, }); - // const [companyname, setCompanyName] = useState("apple"); - async function getyahhochartdata() { - const options = { - method: "GET", - url: "https://apidojo-yahoo-finance-v1.p.rapidapi.com/stock/v3/get-chart", - params: { - interval: "1mo", - symbol: "AMRN", - range: "5y", - region: "US", - includePrePost: "false", - useYfid: "true", - includeAdjustedClose: "true", - events: "capitalGain,div,split", - }, - headers: { - "X-RapidAPI-Key": "d6da08cc1fmsh2ffc0e825183be8p1c8245jsn3ba9199a4d47", - "X-RapidAPI-Host": "apidojo-yahoo-finance-v1.p.rapidapi.com", - }, + + useEffect(() => { + // Fetch account data from Firebase + const accountDataRef = databaseRef(database, "accountData"); + + const fetchData = async () => { + try { + const snapshot = await get(child(accountDataRef, "latest")); + if (snapshot.exists()) { + setAccountData(snapshot.val()); + } else { + console.log("No data available"); + } + } catch (error) { + console.error("Error getting account data:", error); + } + }; + + fetchData(); + + // Listen for changes and update the state accordingly + const onDataChange = (snapshot) => { + if (snapshot.exists()) { + setAccountData(snapshot.val()); + } else { + console.log("No data available"); + } + }; + + const dataRef = child(accountDataRef, "latest"); + onValue(dataRef, onDataChange); + + return () => { + // Cleanup the event listener when the component unmounts + off(dataRef, onDataChange); }; + }, []); // Empty dependency array ensures this effect runs once when the component mounts + + // Initialize chartData inside useEffect + const [chartData, setChartData] = useState({ series1: [], options: {} }); - try { - const response = await axios.request(options); - console.log(response?.data?.chart?.result[0].meta); - console.log(response?.data?.chart?.result[0]?.timestamp); - } catch (error) { - console.error(error); - } - } useEffect(() => { - getyahhochartdata(); - }, []); + // Convert string values to numbers + const amountInvested = parseFloat(accountData?.amountInvested) || 0; + const cash = parseFloat(accountData?.cash) || 0; + const portfolioValue = parseFloat(accountData?.portfolioValue) || 0; + + // Set chart data after fetching account data + setChartData({ + series1: [amountInvested, cash, portfolioValue], + options: { + chart: { + width: 380, + type: "pie", + }, + labels: ["Investment", "Cash", "Portfolio"], + responsive: [ + { + breakpoint: 480, + options: { + chart: { + width: 400, + }, + legend: { + position: "bottom", + }, + }, + }, + ], + }, + }); + }, [accountData]); + + return ( -
- -
+
+ +
); }; diff --git a/src/components/WatchLists.js b/src/components/WatchLists.js index cabd1951..5c50e6c3 100644 --- a/src/components/WatchLists.js +++ b/src/components/WatchLists.js @@ -134,6 +134,7 @@ const WatchLists = () => { return ( <>
+ WatchList {error &&

{error}

} diff --git a/src/index.js b/src/index.js index bc33c022..47ee6047 100644 --- a/src/index.js +++ b/src/index.js @@ -17,6 +17,7 @@ import "./App.css"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; import { ThemeProvider } from "./components/ThemeContext"; import AddStock from "./pages/AddStock.js" +import UpdateAccountData from "./pages/UpdateAccountData.js"; const router = createBrowserRouter([ @@ -32,6 +33,7 @@ const router = createBrowserRouter([ { path: "/addstock", element: }, { path: "/insights", element: }, { path: "/settings", element: }, + { path: "/addaccountdata", element: }, ]); const root = ReactDOM.createRoot(document.getElementById("root")); diff --git a/src/pages/AddStock.js b/src/pages/AddStock.js index 4558b134..3b21b7f9 100644 --- a/src/pages/AddStock.js +++ b/src/pages/AddStock.js @@ -1,63 +1,63 @@ -import React, { useState } from "react"; -import { push, ref as databaseRef, set } from "firebase/database"; -import { database } from "../firebase"; -import StockList from "../components/StockList"; +// import React, { useState } from "react"; +// import { push, ref as databaseRef, set } from "firebase/database"; +// import { database } from "../firebase"; +// import StockList from "../components/StockList"; -const AddStock = ({ loggedInUser }) => { - const [title, setTitle] = useState(""); - const [description, setDescription] = useState(""); +// const AddStock = ({ loggedInUser }) => { +// const [title, setTitle] = useState(""); +// const [description, setDescription] = useState(""); - const handleSubmit = (event) => { - event.preventDefault(); +// const handleSubmit = (event) => { +// event.preventDefault(); - // Save the post in Firebase - const stockListRef = databaseRef(database, "stock"); - const newStockRef = push(stockListRef); +// // Save the post in Firebase +// const stockListRef = databaseRef(database, "stock"); +// const newStockRef = push(stockListRef); - // Set stock data in the database - set(newStockRef, { - title: title, - description: description, - // authorEmail: loggedInUser?.email, - }); +// // Set stock data in the database +// set(newStockRef, { +// title: title, +// description: description, +// // authorEmail: loggedInUser?.email, +// }); - // Reset input fields after submitting - setTitle(""); - setDescription(""); - }; +// // Reset input fields after submitting +// setTitle(""); +// setDescription(""); +// }; - return ( - <> -
-

{loggedInUser ? loggedInUser.email : null}

- -
- -
- - - - - ); -}; +// return ( +// <> +//
+//

{loggedInUser ? loggedInUser.email : null}

+// +//
+// +//
+// +// +// +// +// ); +// }; -export default AddStock; +// export default AddStock; diff --git a/src/pages/UpdateAccountData.js b/src/pages/UpdateAccountData.js new file mode 100644 index 00000000..b9de9da6 --- /dev/null +++ b/src/pages/UpdateAccountData.js @@ -0,0 +1,121 @@ +import React, { useState, useEffect } from "react"; +import { ref as databaseRef, set, get, child } from "firebase/database"; +import { database } from "../firebase"; +import Navbar from "../components/Navbar"; +import { useNavigate } from "react-router-dom"; + +const UpdateAccountData = ({ loggedInUser }) => { + const [existingData, setExistingData] = useState({ + amountInvested: "", + cash: "", + portfolioValue: "", + }); + const navigate=useNavigate() + + useEffect(() => { + // Fetch existing account data from Firebase when the component mounts + const accountDataRef = child(databaseRef(database, "accountData"), "latest"); + + get(accountDataRef) + .then((snapshot) => { + if (snapshot?.exists()) { + const data = snapshot?.val(); + setExistingData({ + amountInvested: data?.amountInvested || "", + cash: data?.cash || "", + portfolioValue: data?.portfolioValue || "", + }); + } else { + console.log("No data available"); + } + }) + .catch((error) => { + console.error("Error getting account data:", error); + }); + }, []); // Empty dependency array ensures this effect runs once when the component mounts + + const handleSubmit = (event) => { + event.preventDefault(); + + const accountDataRef = child(databaseRef(database, "accountData"), "latest"); + + set(accountDataRef, { + amountInvested: existingData?.amountInvested, + cash: existingData?.cash, + portfolioValue: existingData?.portfolioValue, + // authorEmail: loggedInUser?.email, + }); + + navigate("/dash"); + }; + + + const handleInputChange = (e) => { + const { name, value } = e.target; + setExistingData((prevData) => ({ + ...prevData, + [name]: value, + })); + }; + + return ( + <> + +
+
+

{loggedInUser ? loggedInUser.email : null}

+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ + +
+ + ); +}; + +export default UpdateAccountData;