live fetch api to refresh data every couple second

frontend/src/StockHoldings.js

@@ -4,6 +4,17 @@ import VAUG from './resources/VAUG.png';
 import AAPL from './resources/AAPL.png';
 import PLTR from './resources/PLTR.png';
 import MSFT from './resources/MSFT.png';
+import AMZN from './resources/AMZN.png';
+import META from './resources/META.png';
+import BLK from './resources/BLK.png';
+import GOOG from './resources/GOOG.png';
+import CRWD from './resources/CRWD.png';
+import INTC from './resources/INTC.png';
+import DELL from './resources/DELL.png';
+import NVDA from './resources/NVDA.png';
+import ORCL from './resources/ORCL.png';
+import ZS from './resources/ZS.png';
+import IBM from './resources/IBM.png';
 
 function StockHoldings() {
   const [holdings, setHoldings] = useState([]);
@@ -17,7 +28,6 @@ function StockHoldings() {
       }
       const data = await response.json();
       console.log(data); // Check the structure of the fetched data
-      setHoldings(Object.values(data));
       setHoldings(Object.values(data)); // Convert the object to an array and update state
     } catch (error) {
       console.error('Fetching data failed:', error);
@@ -27,6 +37,11 @@ function StockHoldings() {
   // useEffect to call the fetch function when the component mounts
   useEffect(() => {
     fetchStockHoldings();
+
+    // Set up an interval to fetch data every few seconds
+    const interval = setInterval(fetchStockHoldings, 20000);
+
+    return () => clearInterval(interval);
   }, []);
 
   // Function to get the corresponding image based on the stock name
@@ -40,6 +55,28 @@ function StockHoldings() {
         return PLTR;
       case 'MSFT':
         return MSFT;
+      case 'AMZN':
+        return AMZN;
+      case 'META':
+        return META;
+      case 'BLK':
+        return BLK;
+      case 'GOOG':
+        return GOOG;
+      case 'CRWD':
+        return CRWD;
+      case 'INTC':
+        return INTC;
+      case 'DELL':
+        return DELL;
+      case 'NVDA':
+        return NVDA;
+      case 'ORCL':
+        return ORCL;
+      case 'ZS':
+        return ZS;
+      case 'IBM':
+        return IBM;
       // Add cases for other tickers and their corresponding images
       default:
         return ''; // Default image or a placeholder
@@ -48,7 +85,7 @@ function StockHoldings() {
 
   return (
     <div className="stock-holdings">
-      <h2>My Stock Holdings</h2>
+      <h2>My Current Stock Holdings</h2>
       {holdings.map((stock, index) => (
         <button key={index} className="stock-button">
           <img src={getImageUrl(stock.ticker)} alt={stock.name} className="stock-image" />