fixed .env issues

.env.development

@@ -1,4 +1,3 @@
-REACT_APP_BASE_URL=http://127.0.0.1:8000
-axios.defaults.baseURL = process.env.REACT_APP_BASE_URL;
+REACT_APP_BASE_URL=http://127.0.0.1:8000/
 
 

declarations.d.ts

@@ -0,0 +1,2 @@
+declare module 'black-scholes';
+declare module '*';

package.json

@@ -33,12 +33,13 @@
     "grommet": "^2.32.2",
     "grommet-icons": "^4.10.0",
     "install": "^0.13.0",
+    "lightweight-charts": "^4.1.0",
     "luxon": "^3.3.0",
     "micro-cors": "^0.1.1",
     "mobx": "^6.9.0",
     "mobx-react": "^7.6.0",
     "mobx-react-lite": "^3.4.3",
-    "mongodb": "^5.7.0",
+    "mongodb": "^5.9.0",
     "mongoose": "^7.4.1",
     "next": "^13.4.9",
     "npm": "^9.7.1",

src/app/components/WebSocketComponent.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+
+interface MessageData {
+    message: string;
+}
+
+function WebSocketComponent() {
+    const [socket, setSocket] = useState<WebSocket | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const socketInstance = new WebSocket('ws://localhost:8000/ws/tradepodapi/');
+
+        socketInstance.onopen = function(e) {
+            console.log('Connection established successfully');
+        };
+
+        socketInstance.onerror = function(e) {
+            console.error('Error connecting to WebSocket');
+            setError('Error connecting to WebSocket');
+        };
+
+        socketInstance.onmessage = function(e) {
+            const data: MessageData = JSON.parse(e.data);
+            console.log(data.message);
+        };
+
+        socketInstance.onclose = function(e) {
+            console.error('Chat socket closed unexpectedly');
+        };
+
+        setSocket(socketInstance);
+
+        return () => {
+            if (socket) {
+                socket.close();
+            }
+        };
+    }, [socket]);
+
+    const sendMessage = () => {
+        if (socket && !error) {
+            socket.send(JSON.stringify({
+                'message': 'Hello, world!'
+            }));
+        }
+    };
+
+    if (error) {
+        return <div>Error: {error}</div>;
+    }
+
+    return (
+        <div>
+            <button onClick={sendMessage}>Send Message</button>
+        </div>
+    );
+}
+
+export default WebSocketComponent;

src/pages/breeze/index.tsx

@@ -3,13 +3,13 @@ import { useEffect, useState, useRef } from 'react';
 import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
 import styles from './syncoptions.module.css';
 import { BreezeOptionData } from '../../types';
-import { DataManager, UrlAdaptor,  } from '@syncfusion/ej2-data';
+import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
 import { initializeBreezeFetchStore, BreezeFetchStore } from '../../stores/BreezeStore';
-import { DropDownListComponent, MultiSelectComponent} from '@syncfusion/ej2-react-dropdowns';
+import { DropDownListComponent, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
 import { initializeExpiryDateStore, ExpiryDateStore } from '../../stores/ExpiryDateStore';
-
+import { initializeSymbolStore, SymbolStore } from '../../stores/SymbolsStore';
 import { DefaultStore } from '../../stores/DefaultStore';
-import symbols from './symbols.json';
+
 
 
 const BreezeFlatDataOptions = observer(({ initialData, initialStock }: { initialData: BreezeOptionData[], initialStock: string }) => {
@@ -20,25 +20,48 @@ const BreezeFlatDataOptions = observer(({ initialData, initialStock }: { initial
   const [expiryDateStore, setExpiryDateStore] = useState<ExpiryDateStore | null>(null);
   const [expiryDate, setExpiryDate] = useState('');
   const [userSelectedStock, setUserSelectedStock] = useState(initialStock || '');
-  // Add a new state to store the selected expiry dates
   const [selectedExpiryDates, setSelectedExpiryDates] = useState<string[]>([]);
   const [prevInstrumentValue, setPrevInstrumentValue] = useState<number | null>(null);
-
-  const dataManager = new DataManager({
+  const [isFetchingExpiryDates, setIsFetchingExpiryDates] = useState(false);
+    const dataManager = new DataManager({
     json: initialData,
     adaptor: new UrlAdaptor(), 
   });
-
+
+  const [symbolStore, setSymbolStore] = useState<{ symbolStore: SymbolStore } | null>(null);
+  const symbols = symbolStore?.symbolStore.symbols || [];
   const onUserSelectDate = (newDate: string) => {
-    console.log(`Expiry date changed to: ${newDate}`); // Log the new expiry date
-    // Update expiryDate in the store
+    console.log(`Expiry date changed to: ${newDate}`);
     store?.breezeFetchStore.setExpiryDate(newDate);
-
-    // Fetch new data based on the updated expiryDate and the currently selected stock
     store?.breezeFetchStore.fetchData(userSelectedStock, newDate);
   };
+
+  useEffect(() => {
+    const symbolStoreInstance = initializeSymbolStore();
+    symbolStoreInstance.symbolStore.fetchSymbols().then(() => {
+      setSymbolStore({ symbolStore: symbolStoreInstance.symbolStore });
+    });
+  }, []);
 
+  const fetchExpiryDatesAndData = async (symbol: string, expiryDateStore: ExpiryDateStore, breezeFetchStore: BreezeFetchStore) => {
+    await expiryDateStore.fetchExpiryDatesForSymbol(symbol);
+    const firstExpiryDate = expiryDateStore.expiryDates[0] || '';
+    setExpiryDate(firstExpiryDate);
+    breezeFetchStore.setExpiryDate(firstExpiryDate);
+    if (firstExpiryDate) {
+      await breezeFetchStore.fetchData(symbol, firstExpiryDate);
+      dataManager.dataSource.json = breezeFetchStore.data;
+      setIsLoading(false);
+    }
+  };
 
+  useEffect(() => {
+    const breezeFetchStore = initializeBreezeFetchStore(new DefaultStore(), new ExpiryDateStore());
+    const expiryDateStore = initializeExpiryDateStore();
+    setStore({ breezeFetchStore });
+    setExpiryDateStore(expiryDateStore);
+    fetchExpiryDatesAndData(userSelectedStock, expiryDateStore, breezeFetchStore);
+  }, [userSelectedStock]);
 
 
   useEffect(() => {