Wire up strategize button to backend

Web/src/TradingStrategyStore.ts

@@ -1,7 +1,8 @@
 import { RootStore } from "./RootStore";
 import { BackenedApi } from "./api";
 import { reaction, runInAction, makeAutoObservable } from 'mobx';
-import { FakeStrategyBTCUSD as FakeStrategyBTCUSDData, FakeStrategyChartData, FakeStrategyIBMData, FakeStrategyPlaceholder } from "./components/layout/DummyData";
+import { FakeStrategyPlaceholder } from "./components/layout/DummyData";
+import { AxiosResponse } from "axios";
 
 export interface ChartData {
     time: string,
@@ -35,10 +36,12 @@ export class TradingStrategyStore
     loadChartData(symbol: string) {
         try {
             this.isLoading = true;
-            const data = fetchData(symbol);
             runInAction(() => {
-                console.log(`Symbol: ${symbol} loaded, data length: ${data.length}`);
-                this.data = data;
+                this.transport        
+                    .fetchLongShortStrategy(symbol)
+                    .then((res) => this.data = ((res as AxiosResponse<never, never>).data as ChartData[]));
+
+                console.log(`Symbol: ${symbol} loaded, data length: ${this.data.length}`);
             })
          }
          catch(e) {
@@ -52,13 +55,13 @@ export class TradingStrategyStore
     }
 }
 
-function fetchData(symbol: string): ChartData[] {
-    switch(symbol)
-    {
-        case 'AAPL': return FakeStrategyChartData;
-        case 'IBM' : return FakeStrategyIBMData;
-        case 'BTCUSD' : return FakeStrategyBTCUSDData;
-        default: throw new Error(`Cannot load data for symbol ${symbol}`);
-    }
-}
+// function fetchData(symbol: string): ChartData[] {
+//     switch(symbol)
+//     {
+//         case 'AAPL': return FakeStrategyChartData;
+//         case 'IBM' : return FakeStrategyIBMData;
+//         case 'BTCUSD' : return FakeStrategyBTCUSDData;
+//         default: throw new Error(`Cannot load data for symbol ${symbol}`);
+//     }
+// }
 

Web/src/api.ts

@@ -36,6 +36,7 @@ export interface BackenedApi {
     fetchHealthCheck(): Promise<string | AxiosResponse<unknown,unknown>>,
     fetchHighestGainerStocks(limitRows: number): Promise<AxiosResponse<unknown,unknown>>,
     fetchMostActiveStocks(limitRows: number): Promise<AxiosResponse<unknown,unknown>>,
+    fetchLongShortStrategy(ticker: string): Promise<AxiosResponse<unknown,unknown>>,
     submitFxRateSubscribeRequest(ccyName: string): Promise<AxiosResponse<unknown,unknown>>,
     submitFxRateUnsubscribeRequest(ccyName: string): Promise<AxiosResponse<unknown,unknown>>,
     startHub(): void,
@@ -58,6 +59,11 @@ const api: BackenedApi = {
         console.log(`Fetching from ${endpoint}`);
         return await axios.get(endpoint);
     },
+    fetchLongShortStrategy: async (ticker: string) => {
+        const endpoint = `${backendServer}/BacktestService/LongShortStrategy?ticker=${ticker}&fromDate=2023-05-01&toDate=2023-09-25&notional=10000`;
+        console.log(`Fetching from ${endpoint}`);
+        return await axios.get(endpoint);
+    },
     submitFxRateSubscribeRequest: async (ccyName: string) => {
         const requestId = uuidv1();
         const body = {

Web/src/components/layout/Header.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Toolbar from '@mui/material/Toolbar';
-import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
 import SearchIcon from '@mui/icons-material/Search';
 import Typography from '@mui/material/Typography';

Web/src/components/layout/Sidebar.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import Grid from '@mui/material/Grid';
-import Stack from '@mui/material/Stack';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import Link from '@mui/material/Link';
 import FxTicker from './FxTicker';
 import StockNews from './StockNews';
 

Web/src/components/layout/StockNews.tsx

@@ -62,8 +62,9 @@ export default function StockNews() {
         getMostActiveStocks([]);
     };
     const handleStrategizeFrom = (symbol: string) => {
+        console.log(`Button clicked for ${symbol}.`);
         setStockSymbol(symbol);   
-        handleStrategize();
+        tradingStrategyStore.symbol = symbol;
     };
     const handleStrategize = () => {
         console.log(`Strategizing target: ${stockSymbol} ...`);