Support user submitting different stock symbol

bleunguts · Jan 26, 2024 · 5469cbf · 5469cbf
1 parent 182fbda
commit 5469cbf
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/Web/src/TradingStrategyStore.ts b/Web/src/TradingStrategyStore.ts
@@ -1,6 +1,6 @@
 import { RootStore } from "./RootStore";
 import { BackenedApi } from "./api";
-import { makeAutoObservable, runInAction} from "mobx"
+import { reaction, runInAction, makeAutoObservable, observable } from 'mobx';
 import { FakeStrategyChartData } from "./components/layout/DummyData";
 
 export interface ChartData {
@@ -16,25 +16,28 @@ export class TradingStrategyStore
 
     isLoading: boolean = false;
     data: ChartData[] = [];
+    symbol : string;
 
     constructor(root: RootStore, transport: BackenedApi) {
-      makeAutoObservable(this);
-
       this.root = root
       this.transport = transport;
+      makeAutoObservable(this);
 
-      this.loadChartData();
+      this.symbol = 'AAPL';
+      this.loadChartData(this.symbol);
+
+      reaction(
+            () => this.symbol, 
+            newSymbol => { this.loadChartData(newSymbol)}
+      );
     }
 
-    loadChartData() {
+    loadChartData(symbol: string) {
         this.isLoading = true;
         runInAction(() => {
-            console.log(`Data length: ${FakeStrategyChartData.length}`);
+            console.log(`Symbol: ${symbol} loaded, Data length: ${FakeStrategyChartData.length}`);
             this.data = FakeStrategyChartData;
             this.isLoading = false;
         })
     }
 }
-
-
-
diff --git a/Web/src/components/layout/Main.tsx b/Web/src/components/layout/Main.tsx
@@ -58,6 +58,7 @@ export const Main = observer(function Main(props: MainProps) {
                             height: 200,
                         }}
                     >              
+                    <Typography>{tradingStrategyStore.symbol}</Typography>
                     <Chart label='Long & Short Strategy Pnl' data={tradingStrategyStore.data}/>                                   
                     </Paper>
                 </CardContent>

diff --git a/Web/src/components/layout/StockNews.tsx b/Web/src/components/layout/StockNews.tsx
@@ -8,6 +8,7 @@ import IconButton from '@mui/material/IconButton';
 import SyncIcon from '@mui/icons-material/Sync';
 import { AxiosResponse } from 'axios';
 import api from '../../api';
+import { useRootStore } from '../../RootStoreProvider';
 
 export interface StockMarketSymbol {
     ticker: string,
@@ -18,7 +19,8 @@ export interface StockMarketSymbol {
 };
 
 export default function StockNews() {
-    const [stockSymbol, setStockSymbol] = useState<string>("AAPL")
+    const { tradingStrategyStore } = useRootStore();
+    const [stockSymbol, setStockSymbol] = useState<string>(tradingStrategyStore.symbol);
     const [highestGainerStocks, setHighestGainerStocks] = useState<StockMarketSymbol[]>(cannedGainers);
     const [mostActiveStocks, setMostActiveStocks] = useState<StockMarketSymbol[]>(cannedMostActive);
 
@@ -27,7 +29,7 @@ export default function StockNews() {
         getMostActiveStocks(cannedMostActive);
     }, []);
 
-    const getHighestGainerStocks = (defaultsOnFail : any[]) => {
+    const getHighestGainerStocks = (defaultsOnFail : unknown[]) => {
         api        
             .fetchHighestGainerStocks(6)
             .then((res) => setHighestGainerStocks((res as AxiosResponse<any, any>).data))
@@ -64,8 +66,8 @@ export default function StockNews() {
         handleStrategize();
     };
     const handleStrategize = () => {
-        console.log(`Strategizing target: ${stockSymbol} ...`);    
-        // TODO: invoke strategize     
+        console.log(`Strategizing target: ${stockSymbol} ...`);     
+        tradingStrategyStore.symbol = stockSymbol;
     };
 
     function prettify(changesPercentage: string): string {
@@ -79,8 +81,8 @@ export default function StockNews() {
         <>
             <Grid container direction="row" spacing={1.5} alignItems="right" justifyContent="flex-end" alignContent='center'>
                 <Grid item><Typography variant="h6" align="center" gutterBottom>Stock Symbol:</Typography></Grid>
-                <Grid item><input id="stockSymbol" type="text" size={5} disabled={true} value={stockSymbol} onChange={handleStockSymbolChange}/></Grid>
-                <Grid item><Button disabled={true} onClick={handleStrategize}>STRATEGIZE</Button></Grid>
+                <Grid item><input id="stockSymbol" type="text" size={5} disabled={false} value={stockSymbol} onChange={handleStockSymbolChange}/></Grid>
+                <Grid item><Button disabled={false} onClick={handleStrategize}>STRATEGIZE</Button></Grid>
             </Grid>
             <Typography variant="h6" align="center" gutterBottom>
             Stock Market Highest Gainers <IconButton onClick={handleHighestGainersClick}><SyncIcon></SyncIcon></IconButton>