@stickyboard/stickyboard-yahoo-weather/src/YahooWeatherWidget.js

Yahoo weather components for StickyBoard

// src/components/ui/YahooWeatherWidget.js

import React from 'react';
import PropTypes from 'prop-types';

import ApiManager from '../../network/ApiManager';
import StatusCode from '../../network/StatusCode';

import { withStyles } from '@material-ui/core/styles';
import { red, lightBlue, blueGrey, grey } from '@material-ui/core/colors';

import LocationOn from '@material-ui/icons/LocationOn';

import Moment from 'moment-timezone';

import { Textfit } from 'react-textfit';

import Grid from '@material-ui/core/Grid';

import DateUtil from '../../utils/DateUtil';

import Const from '../../constants/Const';
import YahooWeatherIconConst from '../../constants/YahooWeatherIconConst';

const styles = theme => ({
    root: {
        height: '100%',
        background: '#FFFFFF',
        // paddingLeft: theme.spacing.unit * 3,
        // paddingTop: theme.spacing.unit * 2,
        // paddingRight: theme.spacing.unit * 3,
        // paddingBottom: theme.spacing.unit,
    },
    weather: {
        height: '100%',
        // background: grey[800],
        color: grey[800],
        textAlign: 'center',
        margin: 'auto',
        // padding: theme.spacing.unit * 2,
        fontWeight: 700,
    },
    weatherIcon: {
        width: '40%',
        height: '70%',
        position: 'absolute',
        left: theme.spacing.unit * 2,
        top: 0,
        color: grey[800],
        textShadow: '2px 2px 30px ' + grey[600],
    },
    date: {
        width: '60%',
        height: '30%',
        position: 'absolute',
        right: theme.spacing.unit * 2,
        top: theme.spacing.unit * 2,
        textAlign: 'right',
    },
    location: {
        width: '10%',
        height: '10%',
        position: 'absolute',
        left: theme.spacing.unit * 2,
        bottom: theme.spacing.unit * 1,
        color: grey[800],
    },
    temperature: {
        width: '60%',
        height: '40%',
        position: 'absolute',
        right: theme.spacing.unit * 2,
        bottom: theme.spacing.unit * 1,
        textAlign: 'right',
        color: grey[800],
        textShadow: '2px 2px 30px ' + grey[600],
        fontWeight: 700,
    },
    yahooAttribution: {
        position: 'absolute',
        right: theme.spacing.unit * 2,
        bottom: theme.spacing.unit * 1,
    },
});

class YahooWeatherWidget extends React.Component {
    constructor (props) {
        super(props)

        this.state = {
            weather: undefined,
        }
    }

    componentDidMount () {
        this.getWeatherData(37.504296, 127.024792);
    }

    getWeatherData = (latitude, longitude) => {
        ApiManager.getYahooWeather(latitude, longitude, this.getYahooWeatherCallback);
    }

    getYahooWeatherCallback = (statusCode, response) => {
        console.log(response);
        switch (statusCode) {
            case StatusCode.OK:
                // console.log(response);

                let weather = response.current_observation.condition;
                weather.date = new Date(response.current_observation.pubDate * 1000);
                weather.location = response.location.city + ', ' + response.location.country;

                this.setState({
                    weather: weather,
                });
                break;
            default:
                break;
        }
    }

    render () {
        const { classes, theme } = this.props;
        const { weather } = this.state;

        console.log(weather)

        return (
            <div className={classes.root}>
                <div className={classes.weather}>
                    {/* Icon */}
                    <Textfit
                        mode="single"
                        min={14}
                        max={200}
                        forceSingleModeWidth={false}
                        className={classes.weatherIcon}>
                        <p>
                            <i className={weather !== undefined ? YahooWeatherIconConst[weather.code] : ''}/>
                        </p>
                    </Textfit>

                    {/* Date */}
                    <Textfit
                        mode="multi"
                        min={14}
                        max={28}
                        className={classes.date}>
                        <p style={{marginBottom: 2}}>
                            {weather !== undefined ? DateUtil.convertDayToString(Moment(weather.date).day()): ''}
                        </p>
                        <p>
                            {weather !== undefined ? Moment(weather.date).format('YYYY/MM/DD') : '( - )'}
                        </p>
                    </Textfit>

                    {/* Location */}
                    <Textfit
                        mode="single"
                        min={14}
                        max={56}
                        forceSingleModeWidth={false}
                        className={classes.location}>
                        <LocationOn
                            height={'100%'}
                            color={'inherit'}
                            hovercolor={'#fffc00'} />
                        {weather !== undefined ? weather.location : '-'}
                    </Textfit>

                    {/* Temperature */}
                    <Textfit
                        mode="single"
                        min={28}
                        max={200}
                        forceSingleModeWidth={false}
                        className={classes.temperature}>
                        <p>
                            {weather !== undefined ? weather.temperature + '°C' : '-°C'}
                        </p>
                    </Textfit>

                    <a href="https://www.yahoo.com/?ilc=401" target="_blank"
                        className={classes.yahooAttribution}>
                        <img src="https://poweredby.yahoo.com/purple.png" width="134" height="29"/>
                    </a>
                </div>
            </div>
        )
    }
}

YahooWeatherWidget.propTypes = {
    classes: PropTypes.object.isRequired,
    theme: PropTypes.object.isRequired,
};

export default withStyles(styles, { withTheme: true })(YahooWeatherWidget);