text: import React from 'react';
  
  import './App.css';
  import ParamInput from './Components/ParamInput'
  
  import fetchData from './Scripts/fetchData'
  import SurfaceGraph from './Components/SurfaceGraph';
  
  function App() {
  
    const [graphData, setGraphData] = React.useState(null);
  
    const updateGraphData = async () => {
      let query = getParamsQuery();
      let [newData, expirationDates, strikePrices] = await fetchData(query);
      setGraphData(newData);
      // TODO - update graph axes with title, bounds, etc.
      // TODO - look for interesting graph config options
    }
    
    const getParamsQuery = () => {
      const searchParams = document.getElementsByClassName("paramInput");
      const query = {};
      for (const param of searchParams) {
        query[param.id] = param.value;
      }
      return preprocessQuery(query);
    }
  
    const preprocessQuery = (query) => {
  
      // resulting query should have the fields listed in the fetchData strategies:
      //    tickerSymbol  (string)
      //    dateMin       (date)
      //    dateMax       (date)
      //    strikeMin     (number)
      //    strikeMax     (number)
  
      query.tickerSymbol = "SPY";
      query.dateMin = new Date(query.dateMin);
      query.dateMax = new Date(query.dateMax);
      query.strikeMin = Number.parseFloat(query.strikeMin);
      query.strikeMax = Number.parseFloat(query.strikeMax);
      // TODO - make this behavior realistic (do some date parsing)
  
      console.log("preprocessed query", query);
      return query;
    }
  
    return (
      <div className="App">
        <div className="container">
          <div className="row">
            <div className="col" id="logoDiv">
              <img src="favicon.ico" alt="Logo"/>
            </div>
            <div className="col-9">
              <h2>Parameters</h2>
              <br/>
              <ParamInput
                id="dateMin"
                display="Start Date"
                inputType="date"
              />
              <ParamInput
                id="dateMax"
                display="End Date"
                inputType="date"
              />
              <ParamInput
                id="strikeMin"
                display="Strike Min"
                inputType="number" />
              <ParamInput
                id="strikeMax"
                display="Strike Max"
                inputType="number"
              />
              <br/>
              <button onClick={updateGraphData} id="submit">Submit</button>
            </div>
          </div>
          <div className="row">
            <div className="col">
              <h2>Math</h2>
            </div>
            <div className="col-9">
              <h2>Graph</h2>
              <SurfaceGraph data={graphData} />
            </div>
          </div>
        </div>
      </div>
    );
  }
  
  export default App;
  