{"size": 3122, "ext": "js", "max_stars_repo_path": "src/App.js", "max_stars_repo_name": "abu-al3ees/resty", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/App.js", "max_issues_repo_name": "abu-al3ees/resty", "max_issues_repo_issues_event_min_datetime": "2021-06-24T19:55:33.000Z", "max_issues_repo_issues_event_max_datetime": "2021-06-24T20:25:01.000Z", "max_forks_repo_path": "src/App.js", "max_forks_repo_name": "abu-al3ees/resty", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 21.8321678322, "max_line_length": 83, "alphanum_fraction": 0.4820627803}

import React from 'react';
import Form from './Form';
import Header from './Header';
import { If, Then, Else } from 'react-if';
import History from './components/history';
import Result from './components/Result';
import {BrowserRouter, Switch} from 'react-router-dom';
import Help from './components/help';
import {Route } from 'react-router-dom' ;


class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          data : {}, 
          body: [],
          headers: {},
          history: [],
          count: 0,
          isLoading: false,
         
        };
    }
    updateResults = async (userInput) => {
        this.setState({
          isLoading: true,
          urls: [this.state.urls, userInput.urls],
          methods: [this.state.methods, userInput.methods],
        })
    
        const request = await fetch(userInput.urls, {methods: userInput.methods });
        const data = await request.json();
       
    
        let dataInstance = {
          url: userInput.urls,
          method: userInput.methods,
          body: data,
        }
    
        let updateHistory = [...this.state.history, dataInstance];
        localStorage.setItem('queryHistory', JSON.stringify(updateHistory));
    
        await this.setState({
          body: data,
          isLoading: false,
          history: updateHistory,
        })
      
      }
    
      componentDidMount() {
        let history = JSON.parse(localStorage.getItem('queryHistory')) || [];
        this.setState({ history });
      }
    
      render() {
        return (
          <div className="App">
            <Header />
            <div>
            </div>
            <Form updateResults={this.updateResults}/>
            <History history={this.state.history} />
            <If condition={this.state.isLoading}>
              <Then>
                <p>Loading...</p>
              </Then>
              <Else>
                <Result data={this.state}/>
              </Else>
            </If>
            <BrowserRouter>
            <Switch>
            
             <Route path="/help" component={Help} />
             <Route path="/history" component={History} />
       </Switch>
            </BrowserRouter>
           
          </div>
        )
      }
}

export default App;














// import React from 'react';
// import Header from './Header';
// import Form from './Form';
// //import Footer from './Footer';
// import Result from './Result';

// class App extends React.Component {
//   constructor(props) {
//       super(props);
//       this.state = {
//         data : [],
//         headers: {},
//           count: 0
//       };
//   }

//   handleForm = (data, headers) => {
//       this.setState({
//         data: data.results,
//          count:data.count,
//          headers:headers
//         });
//   }

//   render() {
//       return (
//           <>
//            <Header/>
  
 
//               <Form handler={this.handleForm}/>
//               <Result results={this.state}/> 
//           </>
//       )
//   }
// }




// export default App;