Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Fragment } from 'react';
- import WeatherAppContainer from './WeatherAppContainer';
- import Typography from '@material-ui/core/Typography';
- import Grid from '@material-ui/core/Grid';
- import Box from '@material-ui/core/Box';
- const App = () => {
- return (
- <Fragment>
- <Box pb={5} pt={3} color='primary.main'>
- <Grid container justify='center'>
- <Typography variant='h4'>React Weather</Typography>
- </Grid>
- </Box>
- <Box color='text.secondary'>
- <WeatherAppContainer />
- </Box>
- </Fragment>
- );
- };
- export default App;
- /////////////////////////////
- import React, { useState } from 'react';
- import Button from '@material-ui/core/Button';
- import TextField from '@material-ui/core/TextField';
- import SearchIcon from '@material-ui/icons/Search';
- import Grid from '@material-ui/core/Grid';
- import Box from '@material-ui/core/Box';
- const Search = ({ onSubmit }) => {
- const [userQuery, setUserQuery] = useState('');
- const handleChange = event => {
- setUserQuery(event.target.value);
- };
- const handleSubmit = event => {
- event.preventDefault();
- onSubmit(userQuery);
- };
- return (
- <Box pb={5}>
- <Grid container justify='center'>
- <form onSubmit={handleSubmit}>
- <TextField
- type='text'
- onChange={handleChange}
- value={userQuery}
- label='Enter a City'
- />
- <Button
- type='submit'
- variant='contained'
- color='primary'
- startIcon={<SearchIcon />}
- >
- Search
- </Button>
- </form>
- </Grid>
- </Box>
- );
- };
- export default Search;
- /////
- import React from 'react';
- import CircularProgress from '@material-ui/core/CircularProgress';
- import Grid from '@material-ui/core/Grid';
- import Typography from '@material-ui/core/Typography';
- import Box from '@material-ui/core/Box';
- const Form = ({ weatherData, fetchState }) => {
- const showText = () => {
- if (fetchState === 'ERROR') {
- return 'City not found!';
- } else if (fetchState === 'LOADING') {
- return <CircularProgress />;
- } else {
- return null;
- }
- };
- const showIcon = () => {
- return (
- weatherData.icon && (
- <img
- src={`http://openweathermap.org/img/wn/${weatherData.icon}@2x.png`}
- alt='Weather Icon'
- />
- )
- );
- };
- return (
- <Grid
- textAlign='center'
- container
- direction='column'
- justify='center'
- alignItems='center'
- >
- <Box bgcolor='secondary.main'>
- <Grid>
- <Typography variant='h6'>{showText()}</Typography>
- </Grid>
- </Box>
- <Grid>
- <Typography variant='h1'>
- {weatherData.temperature &&
- `${Math.floor(weatherData.temperature)}°C`}
- </Typography>
- </Grid>
- <Grid>
- <Typography variant='h6'>
- {weatherData.city && `${weatherData.city}, ${weatherData.country}`}
- </Typography>
- </Grid>
- <Grid>{showIcon()}</Grid>
- <Grid>
- <Typography variant='h5'>
- {weatherData.description.charAt(0).toUpperCase() +
- weatherData.description.slice(1)}
- </Typography>
- </Grid>
- </Grid>
- );
- };
- export default Form;
- ////
- import React, { useState, Fragment } from 'react';
- import SearchResults from './SearchResults';
- import SearchForm from './SearchForm';
- const WeatherAppContainer = () => {
- const [fetchState, setFetchState] = useState(null);
- const [weatherData, setWeatherData] = useState({
- country: '',
- city: '',
- temperature: '',
- description: '',
- icon: ''
- });
- const fetchWeatherData = userQuery => {
- const API_KEY = process.env.REACT_APP_API_KEY;
- setFetchState('LOADING');
- fetch(
- `https://api.openweathermap.org/data/2.5/weather?q=${userQuery}&units=metric&appid=${API_KEY}`
- )
- .then(response => response.json())
- .then(data => {
- setWeatherData({
- country: data.sys.country,
- city: data.name,
- temperature: data.main.temp,
- description: data.weather[0].description,
- icon: data.weather[0].icon
- });
- setFetchState(null);
- })
- .catch(() => {
- setFetchState('ERROR');
- });
- };
- return (
- <Fragment>
- <SearchForm onSubmit={fetchWeatherData} />
- <SearchResults weatherData={weatherData} fetchState={fetchState} />
- </Fragment>
- );
- };
- export default WeatherAppContainer;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement