interactive stock buttons, showing breakdown

eethansmith · Dec 4, 2023 · 549def9 · 549def9
1 parent 8851546
commit 549def9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 26 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -7,10 +7,10 @@ import StockGraph from './StockGraphing';
 
 function App() {
   const [activeTab, setActiveTab] = useState('Overall Portfolio'); // default active tab
-  const [selectedTicker, setSelectedTicker] = useState(null);
+  const [selectedStock, setSelectedStock] = useState(null);
 
-  const handleStockSelection = (ticker) => {
-    setSelectedTicker(ticker); // Update the selected stock ticker
+  const handleStockSelection = (stock) => {
+    setSelectedStock(stock);
   };
 
   return (
@@ -36,14 +36,20 @@ function App() {
         </div>
       </nav>
       <header className="App-header">
-      <h1>{selectedTicker ? `${selectedTicker} Holdings` : 'Overall Portfolio'}</h1>
+      <h1>{selectedStock ? `${selectedStock.name}` : 'Overall Portfolio'}</h1>
+        {selectedStock && (
+          <div className="stock-info">
+            <p>Current Value: ${selectedStock.value_held.toFixed(2)} {selectedStock.profit_loss_percentage.toFixed(2)}%</p>
+            <p>Shares Held: {selectedStock.shares_held}</p>
+            {/* Add other details you want to display */}
+            </div>
+        )}
       </header>
 
-      {selectedTicker && <StockGraph ticker={selectedTicker} />}
+      {selectedStock && <StockGraph ticker={selectedStock.ticker} />}
 
       <StockHoldings onStockSelect={handleStockSelection} />
-
-      { /* Add the rest of your components here */}
+      {/* Rest of your components */}
     </div>
   );
 }

diff --git a/frontend/src/StockHoldings.js b/frontend/src/StockHoldings.js
@@ -34,9 +34,10 @@ function StockHoldings({ onStockSelect }) {
     }
   };
 
-  const handleStockClick = (ticker) => {
+  // Updated handleStockClick to pass the entire stock object
+  const handleStockClick = (stock) => {
     if (onStockSelect) {
-      onStockSelect(ticker); // Use the passed onStockSelect function
+      onStockSelect(stock); // Pass the entire stock object
     }
   };
 
@@ -87,24 +88,24 @@ function StockHoldings({ onStockSelect }) {
 
   return (
     <div className="stock-holdings">
-      <h2>Current Stock Holdings</h2>
-      {holdings.map((stock, index) => (
-        <button key={index} className="stock-button" onClick={() => handleStockClick(stock.ticker)}>
-          <img src={getImageUrl(stock.ticker)} alt={stock.name} className="stock-image" />
-          <div className="stock-details">
-            <div className="stock-name">{stock.name}</div>
-            <div>{`${stock.shares_held} shares`}</div>
+    <h2>Current Stock Holdings</h2>
+    {holdings.map((stock, index) => (
+      <button key={index} className="stock-button" onClick={() => handleStockClick(stock)}>
+        <img src={getImageUrl(stock.ticker)} alt={stock.name} className="stock-image" />
+        <div className="stock-details">
+          <div className="stock-name">{stock.name}</div>
+          <div>{`${stock.shares_held} shares`}</div>
+        </div>
+        <div className="stock-value-gain">
+          <div>{`$${stock.value_held.toFixed(2)}`}</div>
+          <div className="gain-loss" style={{ color: stock.profit_loss_percentage < 0 ? 'red' : 'green' }}>
+            {`${stock.profit_loss_percentage.toFixed(2)}%`}
           </div>
-          <div className="stock-value-gain">
-            <div>{`$${stock.value_held.toFixed(2)}`}</div>
-            <div className="gain-loss" style={{ color: stock.profit_loss_percentage < 0 ? 'red' : 'green' }}>
-              {`${stock.profit_loss_percentage.toFixed(2)}%`}
-            </div>
-          </div>
-        </button>
-      ))}
-    </div>
-  );
+        </div>
+      </button>
+    ))}
+  </div>
+);
 }
 
 export default StockHoldings;