Added TradingStrategyStore using RootStore pattern in preparation to …

…handle user click events

Web/package.json

@@ -17,6 +17,7 @@
     "@mui/icons-material": "^5.14.12",
     "@mui/material": "^5.14.12",
     "axios": "^1.6.2",
+    "mobx-react-lite": "^4.0.5",
     "plotly.js": "^2.27.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

Web/src/RootStore.ts

@@ -0,0 +1,11 @@
+import { TradingStrategyStore } from "./TradingStrategyStore"
+import api from "./api"
+
+export class RootStore {
+    tradingStrategyStore: TradingStrategyStore
+
+    constructor() {
+      this.tradingStrategyStore = new TradingStrategyStore(this, api);
+    }
+}
+

Web/src/RootStoreProvider.tsx

@@ -0,0 +1,26 @@
+import { ReactNode, createContext, useContext } from "react";
+import {RootStore} from "./RootStore"
+
+// holds a reference to the store (singleton)
+let store: RootStore
+
+// create the context
+const StoreContext = createContext<RootStore | undefined>(undefined);
+
+// create the provider component
+export function RootStoreProvider({ children }: { children: ReactNode }) {
+  //only create the store once ( store is a singleton)
+  const root = store ?? new RootStore()
+
+  return <StoreContext.Provider value={root}>{children}</StoreContext.Provider>
+}
+
+// create the hook
+export function useRootStore() {
+  const context = useContext(StoreContext)
+  if (context === undefined) {
+    throw new Error("useRootStore must be used within RootStoreProvider")
+  }
+
+  return context
+}

Web/src/TradingStrategyStore.ts

@@ -0,0 +1,40 @@
+import { RootStore } from "./RootStore";
+import { BackenedApi } from "./api";
+import { makeAutoObservable, runInAction} from "mobx"
+import { FakeStrategyChartData } from "./components/layout/DummyData";
+
+export interface ChartData {
+    time: string,
+    amount: number,
+    amountHold: number
+}
+
+export class TradingStrategyStore
+{
+    root: RootStore;
+    transport: BackenedApi;
+
+    isLoading: boolean = false;
+    data: ChartData[] = [];
+
+    constructor(root: RootStore, transport: BackenedApi) {
+      makeAutoObservable(this);
+
+      this.root = root
+      this.transport = transport;
+
+      this.loadChartData();
+    }
+
+    loadChartData() {
+        this.isLoading = true;
+        runInAction(() => {
+            console.log(`Data length: ${FakeStrategyChartData.length}`);
+            this.data = FakeStrategyChartData;
+            this.isLoading = false;
+        })
+    }
+}
+
+
+

Web/src/components/layout/api.ts → Web/src/api.ts

@@ -1,6 +1,6 @@
 import * as signalR from "@microsoft/signalr";
 import { HubConnectionState } from "@microsoft/signalr";
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import { v1 as uuidv1 } from 'uuid';
 
 const backendServer =  `https://projectxgatewayapi-app-20231130.icybay-6c4fad7d.westus2.azurecontainerapps.io`;
@@ -32,7 +32,17 @@ connection.onclose(async () => {
     await startHubConnection();
 });
 
-const api = {    
+export interface BackenedApi {
+    fetchHealthCheck(): Promise<string | AxiosResponse<unknown,unknown>>,
+    fetchHighestGainerStocks(limitRows: number): Promise<AxiosResponse<unknown,unknown>>,
+    fetchMostActiveStocks(limitRows: number): Promise<AxiosResponse<unknown,unknown>>,
+    submitFxRateSubscribeRequest(ccyName: string): Promise<AxiosResponse<unknown,unknown>>,
+    submitFxRateUnsubscribeRequest(ccyName: string): Promise<AxiosResponse<unknown,unknown>>,
+    startHub(): void,
+    connection(): signalR.HubConnection
+}
+
+const api: BackenedApi = {    
     fetchHealthCheck: async () => {
         return await axios.get(backendServer)
             .then((response) => response)

Web/src/components/layout/Blog.tsx

@@ -6,10 +6,10 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Header from './Header';
 import MainFeaturedPost from './MainFeaturedPost';
 import FeaturedPost from './FeaturedPost';
-import Main from './Main';
 import Sidebar from './Sidebar';
 import Footer from './Footer';
 import { featuredPosts }  from './Posts'
+import { Main } from './Main';
 
 const sections = [
   { title: 'Home', url: '#' },

Web/src/components/layout/DummyData.ts

@@ -1,15 +1,7 @@
 import { Datum } from "plotly.js";
+import { ChartData } from "../../TradingStrategyStore";
 
-export interface ChartData {
-  time: string,
-  amount: number
-}
-
-export function createData(time: string, amount: number) : ChartData {
-  return { time, amount };
-}
-
-export const FakeStrategyChartData = [
+export const FakeStrategyChartData: ChartData[] = [
     {
       "time": "230921",
       "amount": 0.0,

Web/src/components/layout/Footer.tsx

@@ -6,7 +6,7 @@ import Link from '@mui/material/Link';
 import axios, { AxiosResponse } from 'axios';
 import * as signalR from "@microsoft/signalr";
 import { HubConnectionState } from '@microsoft/signalr';
-import api from './api';
+import api from '../../api';
 
 function Copyright() {
   return (

Web/src/components/layout/FxRate.tsx

@@ -3,7 +3,7 @@ import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import * as React from 'react';
 import { SyntheticEvent } from 'react';
-import api from './api';
+import api from '../../api';
 
 export interface CurrencyPairFormatted {
     bid: string

Web/src/components/layout/FxTicker.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import api from './api';
+import api from '../../api';
 import FxRate, { CurrencyPair, CurrencyPairFormatted } from './FxRate';
 import { useState } from 'react';
 

Web/src/components/layout/Main.tsx

@@ -6,16 +6,19 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Paper from '@mui/material/Paper';
 import Chart from './Chart';
-import { FakeStrategyChartData, FakeVolatilityData } from './DummyData';
+import { FakeVolatilityData } from './DummyData';
 import Chart3D from './Chart3D';
+import { observer } from 'mobx-react-lite';
+import { useRootStore } from '../../RootStoreProvider';
 
 interface MainProps {
     posts: ReadonlyArray<string>;
     title: string;
 }
 
-export default function Main(props: MainProps) {
+export const Main = observer(function Main(props: MainProps) {
     const { posts, title } = props;
+    const { tradingStrategyStore } = useRootStore();
 
     return (
         <Grid
@@ -55,7 +58,7 @@ export default function Main(props: MainProps) {
                             height: 200,
                         }}
                     >              
-                    <Chart label='Long & Short Strategy Pnl' data={FakeStrategyChartData}/>                                   
+                    <Chart label='Long & Short Strategy Pnl' data={tradingStrategyStore.data}/>                                   
                     </Paper>
                 </CardContent>
             </Card>
@@ -82,4 +85,4 @@ export default function Main(props: MainProps) {
             </Card>          
         </Grid>
     );
-}
+});

Web/src/components/layout/StockNews.tsx

@@ -7,7 +7,7 @@ import { SyntheticEvent, useEffect, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import SyncIcon from '@mui/icons-material/Sync';
 import { AxiosResponse } from 'axios';
-import api from './api';
+import api from '../../api';
 
 export interface StockMarketSymbol {
     ticker: string,

Web/src/main.tsx

@@ -2,9 +2,12 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import { RootStoreProvider } from './RootStoreProvider.tsx'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RootStoreProvider>
+      <App />
+    </RootStoreProvider>
   </React.StrictMode>,
 )