switch markets for market data

1 files changed, 55 insertions, 16 deletions

diff --git a/client/src/App.js b/client/src/App.js
index 4e08a17..a83b628 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { useState, createContext } 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 { Menu, Select, PageHeader, Typography } from '@arco-design/web-react';
 import '@arco-design/web-react/dist/css/arco.css';
 
 const ghostBgStyle = {
@@ -13,13 +12,29 @@ const ghostBgStyle = {
   padding: 20,
 };
 
+export const MarketContext = createContext();
+export const MARKET_FULL_NAMES = {
+  CAISO: 'California ISO',
+  ERCOT: 'Electric Reliability Council of Texas',
+  ISONE: 'ISO New England',
+  MISO: 'Midcontinent ISO',
+  NYISO: 'New York ISO',
+  PJM: 'PJM Interconnection',
+};
+
 function App() {
+  const [selectedMarket, setSelectedMarket] = useState('ISONE');
   return (
+    <MarketContext.Provider value={{ selectedMarket, setSelectedMarket }}>
     <div>
       <style>
               {`
                 @media (max-width: 600px) {
-                  .page-header-title {
+                .page-header-container {
+                                flex-direction: column;
+                                align-items: center;
+                              }
+                .page-header-title {
                     font-size: 20px !important;
                     text-align: center;
                   }
@@ -27,22 +42,45 @@ function App() {
                     font-size: 14px !important;
                     text-align: center;
                   }
+                  .market-select-container {
+                                  width: 100%;
+                                  display: flex;
+                                  justify-content: center;
+                                  margin-top: 10px;
+                                }
+                                .market-select {
+                                  width: 100% !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>
-                  }
-                />
+        <div className="page-header-container" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap' }}>
+                    <div>
+                      <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>
+                        }
+                      />
+                    </div>
+                    <div className="market-select-container">
+                      <Select
+                        className="market-select"
+                        value={selectedMarket}
+                        onChange={setSelectedMarket}
+                        style={{ width: 200 }}
+                        options={['ISONE', 'MISO', 'NYISO'].map(market => ({ label: market, value: market }))}
+                      />
+                    </div>
+                  </div>
         <Menu mode="horizontal" defaultSelectedKeys={['market-data']}>
                 <Menu.Item key="market-data">
                   <Link to="/market-data">Market Data</Link>
@@ -63,6 +101,7 @@ function App() {
         <Route path="/bids" element={<BidsPage />} />
       </Routes>
     </div>
+    </MarketContext.Provider>
   );
 }