Last active
September 23, 2020 16:41
-
-
Save jinwook-k/1f2dda5932934fbcc0a4c739e2e6743d to your computer and use it in GitHub Desktop.
client/src/Components
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // imports | |
| import {connect} from "react-redux"; | |
| import {saveZipCode, saveWeatherData, saveTemperature, updateHistory} from "../actions"; | |
| class WeatherForm extends Component { | |
| // default state values | |
| // componentDidMount() | |
| refreshSavedWeather = () => { | |
| if (localStorage.getItem("zipCode")) { | |
| // ... | |
| }).then(d => { | |
| this.props.saveWeatherData(d.data); | |
| // ... | |
| }); | |
| } | |
| } | |
| // onChange() | |
| saveFormData = (event) => { | |
| // ... | |
| axios.post("/api/weather", { | |
| // ... | |
| }).then(response => { | |
| let weatherData = response.data; | |
| this.saveToStore(weatherData); | |
| this.saveToLocalStorage(weatherData); | |
| }); | |
| } | |
| saveToLocalStorage = (weatherData) => { | |
| // ... | |
| localStorage.setItem("CurrentWeatherData", JSON.stringify(weatherData)); | |
| localStorage.setItem("WeatherHistory", JSON.stringify(this.props.history)); | |
| } | |
| // saveToMongo() | |
| // Saves data to the Redux store | |
| saveToStore = (weatherData) => { | |
| this.props.saveTemperature(this.state.tempMetric); | |
| this.props.saveZipCode(this.state.zipCodeInput); | |
| this.props.saveWeatherData(weatherData); | |
| this.props.updateHistory({ | |
| timestamp: (new Date()).toLocaleString(), | |
| city: weatherData.name, | |
| zipcode: this.state.zipCodeInput, | |
| temperature: weatherData.main.temp, | |
| description: weatherData.weather[0].description | |
| }); | |
| } | |
| render() { | |
| return ( | |
| <Form className="weather-form" onSubmit={this.saveFormData}> | |
| ... | |
| </Form> | |
| ); | |
| } | |
| } | |
| // Mapping state from the store to props; | |
| // meaning...if we update these props, it'll update the redux store | |
| const mapStateToProps = (state) => { | |
| return { | |
| zipCode: state.zipCode, | |
| weather: state.weather, | |
| tempMetric: state.tempMetric, | |
| history: state.history | |
| } | |
| }; | |
| // These are the actions we can dispatch and just mapping it to props | |
| const mapDispatchToProps = () => { | |
| return { | |
| saveZipCode, | |
| saveWeatherData, | |
| saveTemperature, | |
| updateHistory | |
| } | |
| }; | |
| // This connects our mapping the state & dispatch to props to use in WeatherForm | |
| export default connect(mapStateToProps, mapDispatchToProps())(WeatherForm); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ... | |
| import {connect} from "react-redux"; | |
| class WeatherHistoryPanel extends Component { | |
| // delete the state.history dummy data | |
| createHistoryList = () => { | |
| // ... | |
| let historyList = this.props.history; | |
| // ... | |
| } | |
| getInfoListItem = (info) => { | |
| return ( | |
| <ListGroup.Item key={info.timestamp}><b>{info.timestamp}</b> - | |
| [{info.city}, {info.zipcode}]:[{info.temperature}, {info.description}]</ListGroup.Item> | |
| ); | |
| } | |
| render() { | |
| return ( | |
| <section className="weather-history-panel"> | |
| {!!this.props.history.length ? this.createHistoryList() : "No History!"} | |
| </section> | |
| ); | |
| } | |
| } | |
| const mapStateToProps = (state) => { | |
| return { | |
| history: state.history | |
| } | |
| }; | |
| export default connect(mapStateToProps)(WeatherHistoryPanel); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ... | |
| import {connect} from "react-redux"; | |
| class WeatherInfoPanel extends Component { | |
| // Differentiates whether user chose to use Celsius or Fahrenheit | |
| getMetric = () => { | |
| let metric = localStorage.getItem("tempMetric"); | |
| metric = !!metric ? metric : ""; | |
| return metric.includes("metric") ? "°C" : "°F"; | |
| } | |
| render() { | |
| const {weatherData} = this.props; | |
| let metricSymbol = this.getMetric(); | |
| if (Object.keys(weatherData).length > 0) { | |
| const iconUrl = `http://openweathermap.org/img/wn/${weatherData.weather[0].icon}@2x.png`; | |
| return ( | |
| <section className="weather-info"> | |
| <h3 className="city-name">{weatherData.name}</h3> | |
| <section className="overcast"> | |
| <img src={iconUrl} className="overcast-img" alt=""/> | |
| <span className="overcast-description">{weatherData.weather[0].description}</span> | |
| </section> | |
| <hr/> | |
| <section className="current-weather"> | |
| <span className="humidity">Humidity: {weatherData.main.humidity}%</span> | |
| <span className="curr-temp">Temp: {weatherData.main.temp}{metricSymbol}</span> | |
| <span className="feels-like">Feels like: {weatherData.main.feels_like}{metricSymbol}</span> | |
| </section> | |
| <hr/> | |
| <section className="temps"> | |
| <span className="min-temp">Low: {weatherData.main.temp_min}{metricSymbol}</span> | |
| <span className="max-temp">High: {weatherData.main.temp_max}{metricSymbol}</span> | |
| </section> | |
| </section> | |
| ); | |
| } | |
| return ( | |
| <section> | |
| WeatherInfo! | |
| </section> | |
| ); | |
| } | |
| } | |
| const mapStateToProps = (state) => { | |
| return { | |
| weatherData: state.weather | |
| } | |
| }; | |
| export default connect(mapStateToProps)(WeatherInfoPanel); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment