diff --git a/.eslintcache b/.eslintcache index b284ebb..f914d08 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js":"1","/Users/gabrielrussell/code/world-weather-app/src/App.js":"2","/Users/gabrielrussell/code/world-weather-app/src/index.js":"3"},{"size":362,"mtime":1606235130117,"results":"4","hashOfConfig":"5"},{"size":6891,"mtime":1606688186814,"results":"6","hashOfConfig":"5"},{"size":500,"mtime":1606235130116,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"139zll3",{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js",[],"/Users/gabrielrussell/code/world-weather-app/src/App.js",[],"/Users/gabrielrussell/code/world-weather-app/src/index.js",[]] \ No newline at end of file +[{"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js":"1","/Users/gabrielrussell/code/world-weather-app/src/App.js":"2","/Users/gabrielrussell/code/world-weather-app/src/index.js":"3","/Users/gabrielrussell/code/world-weather-app/src/timezones.js":"4"},{"size":362,"mtime":1606235130117,"results":"5","hashOfConfig":"6"},{"size":7717,"mtime":1606705032729,"results":"7","hashOfConfig":"6"},{"size":500,"mtime":1606235130116,"results":"8","hashOfConfig":"6"},{"size":650,"mtime":1606693764967,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"139zll3",{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js",[],"/Users/gabrielrussell/code/world-weather-app/src/App.js",[],"/Users/gabrielrussell/code/world-weather-app/src/index.js",[],"/Users/gabrielrussell/code/world-weather-app/src/timezones.js",[]] \ No newline at end of file diff --git a/src/App.js b/src/App.js index a31cbe2..dd5a6dd 100644 --- a/src/App.js +++ b/src/App.js @@ -1,53 +1,12 @@ import React, { Component } from 'react'; import TextTransition, { presets } from 'react-text-transition'; +import { timezones } from './timezones'; const api = { key: '6ef9a57a6186cdb062cac9bdef08165c', base: 'https://api.openweathermap.org/data/2.5/', }; -const timezones = { - '-43200': -12.0, - '-39600': -11.0, - '-36000': -10.0, - '-34200': -9.3, - '-32400': -9.0, - '-28800': -8.0, - '-25200': -7.0, - '-21600': -6.0, - '-18000': -5.0, - '-16200': -4.3, - '-14400': -4.0, - '-12600': -3.3, - '-10800': -3.0, - '-7200': -2.0, - '-3600': -1.0, - // '0': '0', - // '3600': 1.0, - // '7200': 2.0, - // '10800': 3.0, - // '12600': 3.3, - // '14400': 4.0, - // '16200': 4.3, - // '18000': 5.0, - // '19800': 5.3, - // '20700': 5.45, - // '21600': 6.0, - // '23400': 6.3, - // '25200': 7.0, - // '28800': 8.0, - // '32400': 9.0, - // '34200': 9.3, - // '36000': 10.0, - // '37800': 10.3, - // '39600': 11.0, - // '41400': 11.3, - // '43200': 12.0, - // '45900': 12.45, - // '46800': 13.0, - // '50400': 14.0, -}; - export default class App extends Component { constructor() { super(); @@ -58,12 +17,18 @@ export default class App extends Component { home: false, isImp: true, climate: '', + favoriteLoc: localStorage.getItem('favLoc'), + favorited: false, }; } componentDidMount() { try { - this.getUserLocation(); + if (this.state.favoriteLoc === null) { + this.getUserLocation(); + } else { + this.goFavorite(); + } } catch (err) { console.log(err); } @@ -73,7 +38,6 @@ export default class App extends Component { navigator.geolocation.getCurrentPosition((location) => { let lat = location.coords.latitude; let lon = location.coords.longitude; - console.log(location); fetch( `${api.base}weather?lat=${lat}&lon=${lon}&units=imperial&APPID=${api.key}` ) @@ -91,6 +55,54 @@ export default class App extends Component { }); }; + favoriteLocation = (evt) => { + if ( + this.state.favoriteLoc !== + this.state.weather.name + ', ' + this.state.weather.sys.country + ) { + localStorage.setItem( + 'favLoc', + this.state.weather.name + ', ' + this.state.weather.sys.country + ); + this.setState({ + favoriteLoc: + this.state.weather.name + ', ' + this.state.weather.sys.country, + }); + } else { + localStorage.removeItem('favLoc'); + this.setState({ + favoriteLoc: null, + }); + } + }; + + goFavorite = () => { + fetch( + `${api.base}weather?q=${this.state.favoriteLoc}&units=imperial&APPID=${api.key}` + ) + .then((res) => res.json()) + .then((result) => { + let d = this.locationDateCalc(result); + this.setState({ + query: '', + weather: result, + climate: result.weather[0].main.toLowerCase(), + date: d, + }); + }); + }; + + checkIfFav = () => { + if ( + this.state.favoriteLoc === + this.state.weather.name + ', ' + this.state.weather.sys.country + ) { + return 'star'; + } else { + return 'star_border'; + } + }; + search = (evt) => { if (evt.key === 'Enter') { this.setState({ home: false }); @@ -187,12 +199,12 @@ export default class App extends Component { let metrics = context.measureText(text); - console.log(metrics.width); return metrics.width; }; sizeCheck = () => { let impTemp = String(Math.round(this.state.weather.main.temp)) + '°F'; + let metTemp = String(Math.round((this.state.weather.main.temp - 32) * (5 / 9))) + '°C'; @@ -220,7 +232,10 @@ export default class App extends Component { value={this.state.query} onKeyPress={this.search} /> - + {this.state.home === false ? 'location_searching' : 'gps_fixed'} @@ -228,7 +243,15 @@ export default class App extends Component {
- {this.state.weather.name}, {this.state.weather.sys.country} + {this.state.weather.name},{' '} + {this.state.weather.sys.country + ' '} + + {this.checkIfFav()} + {/* {this.state.favorited === false ? 'star_border' : 'star'} */} +
{this.state.date.slice(0, 15)}
diff --git a/src/index.css b/src/index.css index 0c57ee0..30a7aa8 100644 --- a/src/index.css +++ b/src/index.css @@ -90,7 +90,7 @@ main { background-color: rgba(255, 255, 255, 0.75); } -.search-box i { +.search-box .current-loc { position: absolute; top: 12.5px; @@ -109,6 +109,13 @@ main { text-shadow: 3px 3px rgba(50, 50, 70, 0.5); } +.location-box .location .favorited-loc { + color: yellow; + text-shadow: none; + + cursor: pointer; +} + .location-box .date { color: #fff; font-size: 18px; @@ -130,7 +137,7 @@ main { margin: 15px auto; background-color: rgba(255, 255, 255, 0.2); border-radius: 16px; - + padding: 15px 25px; color: #fff; diff --git a/src/timezones.js b/src/timezones.js new file mode 100644 index 0000000..d789cac --- /dev/null +++ b/src/timezones.js @@ -0,0 +1,41 @@ +export const timezones = { + '-43200': -12.0, + '-39600': -11.0, + '-36000': -10.0, + '-34200': -9.3, + '-32400': -9.0, + '-28800': -8.0, + '-25200': -7.0, + '-21600': -6.0, + '-18000': -5.0, + '-16200': -4.3, + '-14400': -4.0, + '-12600': -3.3, + '-10800': -3.0, + '-7200': -2.0, + '-3600': -1.0, + '0': '0', + '3600': 1.0, + '7200': 2.0, + '10800': 3.0, + '12600': 3.3, + '14400': 4.0, + '16200': 4.3, + '18000': 5.0, + '19800': 5.3, + '20700': 5.45, + '21600': 6.0, + '23400': 6.3, + '25200': 7.0, + '28800': 8.0, + '32400': 9.0, + '34200': 9.3, + '36000': 10.0, + '37800': 10.3, + '39600': 11.0, + '41400': 11.3, + '43200': 12.0, + '45900': 12.45, + '46800': 13.0, + '50400': 14.0, +};