client/src/Components

WeatherForm.jsx

// 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);

WeatherHistoryPanel.jsx

// ...
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);

WeatherInfoPanel.jsx

// ...
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);