{"size": 3104, "ext": "js", "max_stars_repo_path": "src/App.js", "max_stars_repo_name": "fakham/react_weather_app", "max_stars_repo_stars_event_min_datetime": "2018-11-24T08:00:42.000Z", "max_stars_repo_stars_event_max_datetime": "2021-10-12T14:29:31.000Z", "max_issues_repo_path": "src/App.js", "max_issues_repo_name": "fakham/react_weather_app", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/App.js", "max_forks_repo_name": "fakham/react_weather_app", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 5, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 31.3535353535, "max_line_length": 280, "alphanum_fraction": 0.5760309278}
import React, { Component } from 'react';
import './App.css';
import WeatherForm from './components/WeatherForm';
import WeatherList from './components/WeatherList';
import axios from 'axios';
import { AppBar, Toolbar, Typography, Paper, IconButton, Badge } from '@material-ui/core';
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import { AccountCircle } from '@material-ui/icons';


class App extends Component {

  state = {
    data: {
      location: '',
      temperature: '',
      humidity: '',
      conditions: '',
      image: ''
    }
  }

  theme = createMuiTheme({
    palette: {
      primary: {
          main: '#448AFF'
        }
      },
      typography: {
        useNextVariants: true,
      }
    },
  )

  updateList = (country, city) => {
    axios.get('https://query.yahooapis.com/v1/public/yql?u=c&q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%27'+ city +',%20'+ country +'%27)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys')
    .then( res => {
      let data = {};
      if (res.data.query.results === null || res.data.query.results === '') {
        data = {
          location: 'NO DATA!',
          temperature: 'NO DATA',
          humidity: 'NO DATA!',
          conditions: 'NO DATA!',
          image: 'https://via.placeholder.com/150?text=NO%20DATA!'
        }
      } else {
        let description = res.data.query.results.channel.item.description;
        let img = description.substring(description.search('http'), description.search('gif')) + 'gif';
        data = {
          location: res.data.query.results.channel.location.city + ', ' + res.data.query.results.channel.location.country,
          temperature: Math.round((res.data.query.results.channel.item.condition.temp - 32) * 5/9) + ' °C',
          humidity: res.data.query.results.channel.atmosphere.humidity + ' %',
          conditions: res.data.query.results.channel.item.condition.text,
          image: img
        }
      }

      this.setState({data});

      // console.log(this.state.data);
    })
  }

  handleAccount = () => {
    const url = 'https://github.com/fakham';
    const win = window.open(url, '_blank');
    win.focus();
  }

  render() {
    return (
      <div className="App">
        <MuiThemeProvider theme={this.theme}>
          <AppBar position="static">
            <Toolbar className="toolbar">
              <Typography variant="h6" color="inherit">
                Weather App
              </Typography>
              <IconButton color="inherit" className="icon" onClick={this.handleAccount}>
                <Badge badgeContent={1} color="secondary">
                  <AccountCircle />
                </Badge>
              </IconButton>
            </Toolbar>
          </AppBar>
          <Paper elevation={1} className="paper">
            <WeatherForm updateList={this.updateList} />
            <WeatherList data={this.state.data} />
          </Paper>
        </MuiThemeProvider>
        
      </div>
    );
  }
}

export default App;
