redux-weather

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.3.0-alpha3",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.7.4",
+    "react-bootstrap-validation": "^0.1.11",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+    "react-redux": "^8.0.7",
+    "react-scripts": "^5.0.1",
+    "redux": "^4.2.1",
     "web-vitals": "^1.1.1"
   },
   "scripts": {

src/App.js

@@ -1,25 +1,30 @@
-import logo from './logo.svg';
 import './App.css';
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Header from '.components/header';
+import CitySearch from '.components/city-search';
+import CreateDisplay from '.components/weather-display';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 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>
-  );
+
+  <Container className='align-item-center'>
+    <Row className='ms-5'>
+      <Col>
+        <CitySearch />
+        <Header />
+        <CreateDisplay/>
+      </Col>
+    </Row>
+  </Container>
+  )
+
+
 }
+
+
 
 export default App;

src/actions/actions.js

@@ -0,0 +1,23 @@
+import axios from "axios";
+export const FETCH_WEATHER = "FETCH_WEATHER";
+export const FETCH_AVERAGE = "FETCH_AVERAGE";
+
+
+export function fetchWeather (city) {
+
+  const search = axios.get(`api.openweathermap.org/data/2.5/forecast?q=${city}&appid=40a22fcb01995614a7b68804376359eb`)
+
+  return {
+    type:FETCH_WEATHER,
+    payload: search
+  };
+}
+
+export function featherAvg (math) {
+
+  return {
+    type:FETCH_AVERAGE,
+    payload: { math
+    }
+  }
+};

src/components/city-search.js

@@ -0,0 +1,31 @@
+import { fetchWeather } from "../actions/actions";
+import { useState } from "react";
+import { useDispatch } from "react";
+import { Container } from 'react-bootstrap';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+
+const CitySearch = () => {
+  const [city, citySet] = useState('');
+  const dispatch = useDispatch('');
+
+  const handleWeatherDisplay = () => {
+    dispatch(fetchWeather(city))
+  }
+
+  return (
+    <Container>
+      <Row>
+        <Col>
+          <input className="form-control" type="text" placeholder="City" aria-label="City" value={city} onChange={(e) => citySet(e.target.value)}/>
+          <button type="button" onClick={handleWeatherDisplay} class="btn btn-primary">Submit</button>
+        </Col>
+      </Row>
+    </Container>
+  )
+
+  }
+
+
+export default CitySearch;

src/components/header.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Container } from 'react-bootstrap';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+
+
+const Header = () => {
+  return (
+    <Container className='table table-bordered align-items-center'>
+      <Row className='my-5 mx-5 '>
+        <Col><h5 style={{textAlign: "center"}}>City</h5></Col>
+        <Col><h5 style={{textAlign: "center"}}>Temperature(F)</h5></Col>
+        <Col><h5 style={{textAlign: "center"}}>Pressure(hPa)</h5></Col>
+        <Col><h5 style={{textAlign: "center"}}>Humidity(%)</h5></Col>
+      </Row>
+    </Container>
+
+  )
+}
+
+export default Header;

src/components/weather-display.js

@@ -0,0 +1,67 @@
+import { useSelector } from "react-redux";
+import { Sparklines, SparklinesLine, SparklinesReferenceLine } from 'react-sparklines';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col'; 
+
+
+
+const weatherDisplay = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  let weather = useSelector((state) => state.weather);
+
+
+  const handleAvg = (data, measurement) => {
+    const average = array => array.reduce((a, b) => a+b) / array.length
+    let correct = 0;
+
+    if(measurement === 'temperature') {
+      correct = Math.round(average(data))
+      return <h6>{correct}&deg;F</h6>
+    } else if (measurement === 'pressure') {
+      correct = Math.round(average(data))
+      return <h6>{correct} <small>hPa</small></h6>
+    } else if (measurement === 'humidity') {
+      correct = Math.round(average(data))
+      return <h6>{correct}%</h6>
+
+    };
+  }
+
+  const handleWeatherDisplay = () => {
+    console.log(weather[0])
+    let data = [];
+    let cityName = '';
+    if(weather.length >= 1) {
+      weather.map((city, index) => {
+        let cityInfo = [];
+        for (const key in city) {
+          if(key === 'name') {
+            cityName = <Col key={index.toString()} style={{textAlign: 'center'}}>{city[key]}</Col>
+          } else {
+            cityInfo.push(
+              <Col key={city.id}>
+                <Sparklines data={city[key]}>
+                  <SparklinesLine />
+                  <SparklinesReferenceLine type="avg" />
+                </Sparklines>
+                <div key={city.toString()} style={{textAlign: 'center'}}>{handleAvg(city[key], key)}</div>
+              </Col>
+              )
+          }
+        }
+        data.push(<Row className="align-items-center mt-4 ms-4">{cityName}{cityInfo}</Row>)
+      })
+    };
+    return data;
+   }
+
+    return (
+      <Container>
+          {handleWeatherDisplay()}
+      </Container>
+    );
+  }
+
+  export default weatherDisplay;
+

src/index.js

@@ -3,15 +3,28 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import promise from "redux-promise";
+import { configureStore, applyMiddleware } from "redux";
+import { Provider } from 'react-redux';
+
+
+const createStoreWithMiddleware = applyMiddleware(promise)(configureStore);
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
+    <Provider store={createStoreWithMiddleware(rootReducer)}>
+    <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();
+
+export default rootReducer;

src/store/reducers.js

@@ -0,0 +1,32 @@
+import { FETCH_WEATHER} from "../actions/actions";
+
+const cityReducer = function (state = [], action) {
+  // eslint-disable-next-line default-case
+  switch(action.type) {
+    case FETCH_WEATHER:
+      let temperature = [];
+      let humidity = [];
+      let pressure = [];
+      let cityName = '';
+      action.payload.data.list.map((section, index) => {
+        temperature.push(section.main.temp)
+        humidity.pudh(section.main.humidity)
+        pressure.push(section.main.pressure)
+        cityName = action.payload.data.cityName  
+      });
+
+      temperature = temperature.map((day) => Math.round(((day) - 273 * (9/5) + 32)))
+      humidity = humidity.map((day) => Math.round(((day))) )
+      pressure = pressure.map((day) => Math.round(((day))) )
+
+      return [{
+        cityName, temperature, humidity, pressure
+
+      }, state]
+
+      default:
+      return state;
+  };
+};
+
+export default cityReducer;