Weather app

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css">
<div id="root"></div>

CSS

.icon-left{
  position: absolute;
  top: 10px;
  left: 10px;
}

.icon-right{
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.season-display{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.winter{
  background-color: aliceblue;
}

.summer{
  background-color: orange;
}

Babel + JSX

class App extends React.Component{
/* 	constructor(props){
	    super(props);
	    this.state = {lat:null, errorMessage:''}
	  } */
  state = {lat:null, errorMessage:''};
  
  componentDidMount(){
   window.navigator.geolocation.getCurrentPosition(
    	position => this.setState({lat: position.coords.latitude}),
      err => this.setState({errorMessage: err.message })
    )
  }
  
  render(){
		if(this.state.errorMessage && !this.state.lat){
    	return <div>Error: {this.state.errorMessage}</div>
    }
    
    if(!this.state.errorMessage && this.state.lat){
    	//return <div>Lat: {this.state.lat}</div>
      return <SeasonDisplay lat={this.state.lat}/>
    }
    
    return <Spinner message='Please accept location request'/>
  }
}

const Spinner = (props) =>{
	return (
  	<div className='ui active dimmer'>
  	  <div className='ui big text loader'>
  	    {props.message}
  	  </div>
  	</div>
  )
}
Spinner.defaultProps ={
	message : 'Loading...'
}


//0-Jan 1-Feb 2-Mar ... 11-Dec
//3-8 Northern Hemisphere -- summer .  Southern Hemisphere -- Winter 
const getSeason = (lat, month) =>{
	if(month > 2 && month <9){
  	return lat > 0 ? 'summer' : 'winter'; //north : south
  } else{
  	return lat > 0 ? 'winter' : 'summer';
  }
}

const seasonConfig ={
	summer: {
  	text: 'Go beach',
    iconName: 'sun'
  },
  winter:{
  	text: 'Chilly',
    iconName:'snowflake'
  },
}

const SeasonDisplay = props =>{
	const season = getSeason(props.lat, new Date().getMonth());
  //const text = season === 'winter' ? 'Chilly' : 'Go beach';
  //const icon = season === 'winter' ? 'snowflake' : 'sun';
  const { text, iconName } = seasonConfig[season];
	return (
  	<div className={`season-display ${season}`}>
      <i className={`icon-left massive ${iconName} icon`} />
      <h1>{text}</h1>
      <i className={`icon-right massive ${iconName} icon`} />
    </div>
 	)
}

ReactDOM.render(
	<App/>,
  document.getElementById('root')
)