weather redux

package.json

@@ -6,9 +6,14 @@
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "bootstrap": "^5.2.3",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.7.0",
     "react-dom": "^17.0.2",
+    "react-redux": "^8.0.5",
     "react-scripts": "4.0.3",
+    "react-sparklines": "^1.7.0",
+    "redux": "^4.2.1",
     "web-vitals": "^1.1.1"
   },
   "scripts": {

src/App.css

@@ -36,3 +36,10 @@
     transform: rotate(360deg);
   }
 }
+
+.graph-container {
+  display: inline-block;
+  width: 30%;
+  height: 150px;
+  margin: 0 1%;
+}

src/App.js

@@ -1,23 +1,29 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from 'react';
+import { Form, FormControl, Button } from 'react-bootstrap';
+import Weather from './Weather';
+import { useSelector, useDispatch } from "react-redux";
+import { fetchWeatherData } from "./actions/types";
+
+
+const App = () => {
+  const weather = useSelector ((state) => state.weatherReducer)
+  const dispatch = useDispatch() 
+  const [city, setCity] = useState('');
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    dispatch(fetchWeatherData(city))
+    setCity(e.target.elements.city.value);
+  }
 
-function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div style={{textAlign: "center"}}>
+      <h1>Weather Redux</h1>
+      <Form inline onSubmit={handleSearch}>
+        <FormControl type="text" placeholder="Enter city name"  style={{width:'50%'}} name="city"/>
+        <Button variant="primary" type="submit">Search</Button>
+      </Form>
+      <Weather city={city} />
     </div>
   );
 }

src/Weather.js

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import { Sparklines, SparklinesLine, SparklinesReferenceLine } from 'react-sparklines';
+import axios from 'axios';
+import './App.css' 
+
+
+const Weather = (props) => {
+  const [weatherData, setWeatherData] = useState({});
+
+  useEffect(() => {
+    const fetchWeatherData = async () => {
+      const response = await axios.get(`http://api.openweathermap.org/data/2.5/forecast?q=${props.city}&appid=a2ab37744a978e742121e73a47094279`);
+      setWeatherData(response.data);
+    }
+    fetchWeatherData();
+  }, [props.city]);
+
+  return (
+    <div className="weather">
+      {weatherData.list &&
+        <div>
+          <h2>Weather for {props.city}</h2>
+          <div className="graph-container">
+            <h3>Temperature: {((weatherData.list[0].main.temp - 273.15) * 9/5 + 32).toFixed(0)}°F</h3>
+            <Sparklines data={weatherData.list.map(data => (data.main.temp - 273.15) * 9/5 + 32)}>
+              <SparklinesLine color="red" />
+              <SparklinesReferenceLine type="avg" />
+            </Sparklines>
+          </div>
+          <div className="graph-container">
+            <h3>Pressure: {weatherData.list[0].main.pressure} hPa</h3>
+            <Sparklines data={weatherData.list.map(data => data.main.pressure)}>
+              <SparklinesLine color="blue" />
+              <SparklinesReferenceLine type="avg" />
+            </Sparklines>
+          </div>
+          <div className="graph-container">
+            <h3>Humidity: {weatherData.list[0].main.humidity}%</h3>
+            <Sparklines data={weatherData.list.map(data => data.main.humidity)}>
+              <SparklinesLine color="green" />
+              <SparklinesReferenceLine type="avg" />
+            </Sparklines>
+          </div>
+        </div>
+      }
+    </div>
+  );
+}
+
+export default Weather;

src/actions/types.js

@@ -0,0 +1,10 @@
+export const FETCH_WEATHER_DATA = "FETCH_WEATHER_DATA";
+export const FETCH_WEATHER_DATA_SUCCESS = "FETCH_WEATHER_DATA_SUCCESS";
+export const FETCH_WEATHER_DATA_FAILURE = "FETCH_WEATHER_DATA_FAILURE";
+
+export function fetchWeatherData(data) {
+    return {
+        type: FETCH_WEATHER_DATA,
+        data
+    }
+}

src/index.js

@@ -3,15 +3,21 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import {createStore} from 'redux';
+import allReducers from './reducers'
+import { Provider } from "react-redux";
+
+const store = createStore(
+  allReducers,
+);
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>,
   document.getElementById('root')
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();

src/reducers/index.js

@@ -0,0 +1,8 @@
+import weatherReducer from './weatherReducer';
+import { combineReducers } from 'redux';
+
+const allReducers = combineReducers({
+  weather: weatherReducer,
+});
+
+export default allReducers;

src/reducers/weatherReducer.js

@@ -0,0 +1,25 @@
+import {FETCH_WEATHER_DATA_SUCCESS, FETCH_WEATHER_DATA_FAILURE} from '../actions/types';
+
+const initialState = {
+  weatherData: {},
+  error: null
+}
+
+const weatherReducer = (state = initialState, action) => {
+  switch(action.type) {
+    case FETCH_WEATHER_DATA_SUCCESS:
+      return {
+        ...state,
+        weatherData: action.payload
+      }
+    case FETCH_WEATHER_DATA_FAILURE:
+      return {
+        ...state,
+        error: action.payload
+      }
+    default:
+      return state;
+  }
+}
+
+export default weatherReducer;