Bm searched city list

src/App.js

@@ -1,14 +1,18 @@
 import React, { Component } from 'react';
 import './App.css';
-import { getCityWeather, getForecast } from './utils/axios';
+import { getCityWeather, getForecast, getCityForecast } from './utils/axios';
 import City from './City';
 import CityForecast from './CityForecast';
+import SearchedCities from './SearchedCities';
 
 class App extends Component {
 
   constructor(props){
     super(props)
-    this.state = {inputValue: 'New York, New York'};
+    this.state = {
+      inputValue: 'New York, New York',
+      searched: []
+    };
   }
 
   async handleSearch (event) {
@@ -25,8 +29,20 @@ class App extends Component {
       ...cityWeather,
       ...cityForecast
     })
+
     const previousSearched = JSON.parse(localStorage.getItem('airLiteSearch')) || [];
     previousSearched.push(inputValue);
+    const previousSearchedForecast = previousSearched.map((value) => {
+      const inputValue = value;
+      const inputArray = inputValue.split(',');
+      const city = inputArray[0];
+      const state = inputArray[1];
+      const searchedCityForecast = await getCityForecast(city, state);
+      return searchedCityForecast;
+    })
+    this.setState({
+      searched: previousSearchedForecast
+    })
     localStorage.setItem('airLiteSearch', JSON.stringify(previousSearched));
   }
 
@@ -81,6 +97,9 @@ class App extends Component {
               tomorrowsForecast={tomorrowsForecast}
               dayAftersForecast={dayAftersForecast}
             />}
+            <SearchedCities
+              searched={this.state.searched}
+            />
         </div>
       </div>
     );

src/CityForecast/CityDayForecast/CityHourForecast/index.js

@@ -19,15 +19,3 @@ CityHourForecast.propTypes = {
 }
 
 export default CityHourForecast;
-
-/*
-
-<div className={panel('city-hour-forecast')()}>
-  <div>{todaysForecast.forecast[0].temperature}</div>
-  <div>Weather</div>
-  <div>Temperature</div>
-  <div>WindDirection</div>
-  <div>WindSpeed</div>
-</div>
-
-*/

src/CityForecast/CityDayForecast/CityHourForecast/styles.css

@@ -1,4 +1,3 @@
 .air-pollution__city-hour-forecast {
   display: flex;
-  flex-direction: column;
-  color: red; }
+  flex-direction: column; }

src/CityForecast/CityDayForecast/CityHourForecast/styles.scss

@@ -1,5 +1,4 @@
 .air-pollution__city-hour-forecast {
   display: flex;
   flex-direction: column;
-  color: red;
 }

src/CityForecast/index.js

@@ -35,16 +35,3 @@ const CityForecast = ({todaysForecast, tomorrowsForecast, dayAftersForecast}) =>
   }
 
 export default CityForecast;
-
-/*
-
-<TabList>
-  <Tab>{todaysForecast.day}</Tab>
-  <Tab>{tomorrowsForecast.day}</Tab>
-  <Tab>{dayAftersForecast.day}</Tab>
-</TabList>
-
-potential issues:
- - the formatting for the day is different. could we use moment to format the day here?
- - it seems to skip over sunday, but we can look at this later
-*/

src/SearchedCities/SearchCityAirQuality/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const SearchedCityAirQuality = ({}) => {
+
+
+  return (  
+    <div>
+      SearchedCities
+    </div>
+  )
+}
+
+export default SearchedCityAirQuality;

src/SearchedCities/SearchCityForecast/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const SearchedCityForecast = ({}) =>
+  <div>
+    SearchedCities
+  </div>
+
+export default SearchedCityForecast;
+
+/*
+City Name
+State, Country
+
+Mean temp
+
+
+
+*/

src/SearchedCities/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const SearchedCities = ({}) =>
+  <div>
+    SearchedCities
+    {searched.map((city) => {
+      <div>
+        <SearchedCityAirQuality city={city} />
+        <SearchedCityForecast city={city} />
+      </div>
+    })}
+  </div>
+
+export default SearchedCities;

src/utils/axios.js

@@ -84,3 +84,46 @@ export async function getForecast (city) {
     dayAftersForecast: {day: moment().day(1).format('dddd'), forecast: dayAfter}
   }
 }
+
+export async function getCityForecast (city, state) {
+  const axiosResponse = await axios.get(`http://api.apixu.com/v1/forecast.json?key=5601e348c2eb4b03b89204103181103&q=${city}&days=3
+`)
+  const response = axiosResponse.data;
+
+  const todayResponse = response.forecast.forecastday[0];
+  const tomorrowResponse = response.forecast.forecastday[1];
+  const dayAfterResponse = response.forecast.forecastday[2];
+
+  const today = {
+    day: moment().format('ddd'),
+    averageTemperature: todayResponse.day.avgtemp_f,
+    weatherIcon: todayResponse.day.condition.icon
+  }
+
+  const tomorrow = {
+    day: moment().day(0).format('ddd'),
+    averageTemperature: tomorrowResponse.day.avgtemp_f,
+    weatherIcon: tomorrowResponse.day.condition.icon
+  }
+
+  const dayAfter = {
+    day: moment().day(1).format('ddd'),
+    averageTemperature: dayAfterResponse.day.avgtemp_f,
+    weatherIcon: dayAfterResponse.day.condition.icon,
+  }
+
+  const cityWeather = await getCityWeather(city, state)
+
+  return {
+    weather: {
+      ...cityWeather
+    },
+    forecast: {
+      today,
+      tomorrow,
+      dayAfter,
+    },
+    localTime: moment(response.location.localtime, 'YYYY-MM-DD HH:mm').format('h:mma')
+  }
+
+}