move to router

2 files changed, 62 insertions, 111 deletions

diff --git a/client/src/App.js b/client/src/App.js
index d130e08..4e08a17 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,9 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import { Typography, Spin, Message, Card, Grid, PageHeader } from '@arco-design/web-react';
+import React from 'react';
+import { Routes, Route, Navigate, Link} from 'react-router-dom';
+import MarketDataPage from './MarketDataPage';
+import BidsPage from './BidsPage';
+import SubmitBidPage from './SubmitBidPage';
+import { Menu } from '@arco-design/web-react';
+import { PageHeader, Typography } from '@arco-design/web-react';
 import '@arco-design/web-react/dist/css/arco.css';
-import { VChart } from '@visactor/react-vchart';
 
-const { Row, Col } = Grid;
 const ghostBgStyle = {
   backgroundImage: 'radial-gradient(var(--color-fill-3) 1px, rgba(0, 0, 0, 0) 1px)',
   backgroundSize: '16px 16px',
@@ -11,111 +14,55 @@ const ghostBgStyle = {
 };
 
 function App() {
-  const [fiveMinData, setFiveMinData] = useState([]);
-  const [dayAheadData, setDayAheadData] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    Promise.all([
-      fetch('http://127.0.0.1:8000/market/real-time'),
-      fetch('http://127.0.0.1:8000/market/day-ahead')
-    ])
-      .then(async ([res1, res2]) => {
-        if (!res1.ok || !res2.ok) throw new Error('Failed to fetch data');
-        const json1 = await res1.json();
-        const json2 = await res2.json();
-        setFiveMinData(json1);
-        setDayAheadData(json2);
-      })
-      .catch((err) => {
-        console.error(err);
-        Message.error('Failed to load market data.');
-      })
-      .finally(() => setLoading(false));
-  }, []);
-
-  const getChartSpec = (data, title) => ({
-    type: 'line',
-    data: {
-      values: data.map(d => ({
-        timestamp: new Date(d.timestamp).toLocaleString(),
-        lmp: d.lmp,
-        energy: d.energy,
-        congestion: d.congestion,
-        loss: d.loss
-      })),
-      transforms: [
-        {
-          type: 'fold',
-          options: {
-            key: 'name',
-            value: 'value',
-            fields: ['lmp', 'energy', 'congestion', 'loss']
-          }
-        }
-      ]
-    },
-    xField: 'timestamp',
-    yField: 'value',
-    seriesField: 'name',
-    smooth: true,
-    legend: {
-      position: 'top'
-    },
-    tooltip: {
-      formatter: (datum) => ({
-        name: datum.name,
-        value: datum.value.toFixed(2)
-      })
-    },
-    dataZoom: [
-      {
-        orient: 'bottom',
-        height: 20,
-        start: title === 'fiveMin' ? 0.9 : 0.05,
-        end: 1
-      }
-    ]
-  });
-
   return (
-  <>
-    <div style={ghostBgStyle}>
-        <PageHeader title={
-          <Typography.Title heading={3}>PolyEnergy</Typography.Title>
-        } subTitle={
-          <Typography.Title type="secondary" heading={4}>Virtual Energy Trading</Typography.Title>
-      } />
-    </div>
-    <div style={{ padding: 20, backgroundColor: 'var(--color-fill-2)' }}>
-      <Typography.Title heading={4}>Market Data Visualization</Typography.Title>
-      {loading ? (
-        <Spin />
-      ) : (
-        <>
-          <div
-                style={{
-                  width: '100%',
-                  backgroundColor: 'var(--color-fill-2)',
-                }}
-              >
-                <Row gutter={24}>
-                  <Col span={12}>
-                  <Card style={{ height: 600}} title='Real-Time Market Data'>
-            <VChart spec={getChartSpec(fiveMinData, 'fiveMin')} />
-          </Card>
-                  </Col>
-                  <Col span={12}>
-          <Card style={{ height: 600}} title='Day-Ahead Market Data'>
-                      <VChart spec={getChartSpec(dayAheadData, 'dayAhead')} />
-                    </Card>
-                  </Col>
-                </Row>
-              </div>
-        </>
-      )}
+    <div>
+      <style>
+              {`
+                @media (max-width: 600px) {
+                  .page-header-title {
+                    font-size: 20px !important;
+                    text-align: center;
+                  }
+                  .page-header-subtitle {
+                    font-size: 14px !important;
+                    text-align: center;
+                  }
+                }
+              `}
+            </style>
+      <div style={ghostBgStyle}>
+        <PageHeader
+                  title={
+                    <Typography.Title heading={3} className="page-header-title">
+                      PolyEnergy
+                    </Typography.Title>
+                  }
+                  subTitle={
+                    <Typography.Title type="secondary" heading={4} className="page-header-subtitle">
+                      Virtual Energy Trading
+                    </Typography.Title>
+                  }
+                />
+        <Menu mode="horizontal" defaultSelectedKeys={['market-data']}>
+                <Menu.Item key="market-data">
+                  <Link to="/market-data">Market Data</Link>
+                </Menu.Item>
+                <Menu.Item key="submit-bid">
+                  <Link to="/submit-bid">Submit Bid</Link>
+                </Menu.Item>
+                <Menu.Item key="bids">
+                  <Link to="/bids">My Bids</Link>
+                </Menu.Item>
+              </Menu>
+      </div>
+
+      <Routes>
+        <Route path="/" element={<Navigate to="/market-data" replace />} />
+        <Route path="/market-data" element={<MarketDataPage />} />
+        <Route path="/submit-bid" element={<SubmitBidPage />} />
+        <Route path="/bids" element={<BidsPage />} />
+      </Routes>
     </div>
-  </>
   );
 }
 
diff --git a/client/src/index.js b/client/src/index.js
index 10d3d73..bebdf88 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -4,6 +4,9 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { initVChartArcoTheme } from '@visactor/vchart-arco-theme';
+import { BrowserRouter } from 'react-router-dom';import { ConfigProvider } from '@arco-design/web-react';
+import enUS from '@arco-design/web-react/es/locale/en-US';
+
 
 initVChartArcoTheme({
   defaultMode: 'light',
@@ -13,11 +16,12 @@ initVChartArcoTheme({
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <ConfigProvider locale={enUS}>
+      <App />
+      </ConfigProvider>
+    </BrowserRouter>
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();