From 11bf46d8ddd014bfcc1167ed47ebea211f74801d Mon Sep 17 00:00:00 2001
From: Daniel Gardner <daniel.marc.gardner@gmail.com>
Date: Mon, 10 Apr 2017 09:45:55 -0700
Subject: [PATCH 1/4] initial commit for monday

---
 src/actions/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/actions/index.js b/src/actions/index.js
index f0e753c..903c35a 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -57,7 +57,7 @@ export const uppercaseFirstLetter = (string) => {
   return string.charAt(0).toUpperCase()+string.slice(1)
 }
 
-const fetchMonthRecipes(date) {
+const fetchMonthRecipes = (date) => {
   const url = `http://supseasonal.herokuapp.com/api/months/${date}/recipes`;
   return axios.get(url).then(response => response.data);
 }
@@ -68,4 +68,3 @@ export const monthRecipes = date => {
     payload: fetchMonthRecipes(date)
   }
 }
-

From 45fb2db0a0dee387c0cd6c6c5ae4c6e708aece09 Mon Sep 17 00:00:00 2001
From: Daniel Gardner <daniel.marc.gardner@gmail.com>
Date: Mon, 10 Apr 2017 15:06:18 -0700
Subject: [PATCH 2/4] finishing up availability and adding routing

---
 src/actions/index.js                          | 35 ++++++-
 src/components/app-maybe.js                   | 19 +++-
 src/components/availability/availability.css  | 15 +++
 src/components/availability/availability.js   | 11 ++-
 src/components/availability/seasonal_box.js   | 94 +++++++++++++++++--
 src/components/home/home.js                   |  1 -
 src/components/home/ingredients_dropdown.js   |  8 +-
 src/components/home/month_dropdown.js         |  5 +-
 .../ingredient_availability_table.js          |  6 +-
 src/components/ingredients/ingredients.css    |  4 +
 src/components/navbar.js                      |  5 +-
 src/constants/constants.js                    |  1 +
 src/reducers/dateReducer.js                   |  4 +-
 src/reducers/index.js                         |  8 +-
 src/reducers/ingredientsReducer.js            |  9 ++
 src/reducers/monthRecipeReducer.js            |  4 +-
 16 files changed, 189 insertions(+), 40 deletions(-)
 create mode 100644 src/components/availability/availability.css
 create mode 100644 src/components/ingredients/ingredients.css

diff --git a/src/actions/index.js b/src/actions/index.js
index 903c35a..bd77675 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -4,7 +4,6 @@ import * as CONST from '../constants/constants';
 
 const fetchMonth = (date) => {
   const url = `http://supseasonal.herokuapp.com/api/months/${date}`
-
   return axios.get(url).then(response => response.data);
 }
 
@@ -68,3 +67,37 @@ export const monthRecipes = date => {
     payload: fetchMonthRecipes(date)
   }
 }
+
+export const monthNamer = (month) => {
+  switch (month) {
+    case 'jan':
+      return 'January'
+    case 'feb':
+      return 'February'
+    case 'feb':
+      return 'February'
+    case 'mar':
+      return 'March'
+    case 'apr':
+      return 'April'
+    case 'may':
+      return 'May'
+    case 'jun':
+      return 'June'
+    case 'jul':
+      return 'July'
+    case 'aug':
+      return 'August'
+    case 'sep':
+      return 'September'
+    case 'oct':
+      return 'October'
+    case 'nov':
+      return 'November'
+    case 'dec':
+      return 'December'
+    default:
+      return month
+
+  }
+}
diff --git a/src/components/app-maybe.js b/src/components/app-maybe.js
index 9773fd7..ea3cff6 100644
--- a/src/components/app-maybe.js
+++ b/src/components/app-maybe.js
@@ -1,11 +1,24 @@
 import React, { Component } from 'react';
-import IndexPage from './home/home'
-import IngredientAvail from './ingredients/ingredient_availability_table'
+import IndexPage from './home/home';
+import IngredientAvail from './ingredients/ingredient_availability_table';
+import Availability from './availability/availability';
+import {
+  BrowserRouter as Router,
+  Route,
+  Link
+} from 'react-router-dom';
 
 export default class App extends Component {
   render() {
     return (
-        <IndexPage />
+        <Router>
+          <div>
+            <Route exact path="/" component={IndexPage} />
+            <Route path="/month/:month" component={Availability} />
+            {/* <Route path="/recipes/:recipes" component={IndexPage} /> */}
+            <Route path="/ingredient/:ingredient" component={IngredientAvail} />
+          </div>
+        </Router>
       );
   }
 }
diff --git a/src/components/availability/availability.css b/src/components/availability/availability.css
new file mode 100644
index 0000000..354171d
--- /dev/null
+++ b/src/components/availability/availability.css
@@ -0,0 +1,15 @@
+.seasonal_box {
+  margin-left: 10%;
+  width: 80%;
+  border: 1px solid black
+}
+
+.header {
+  text-align: center;
+  font-family: "Times New Roman";
+}
+
+.foodAvailable {
+  text-align: center;
+  font-family: "Times New Roman";
+}
diff --git a/src/components/availability/availability.js b/src/components/availability/availability.js
index 3bee2b1..a755a6a 100644
--- a/src/components/availability/availability.js
+++ b/src/components/availability/availability.js
@@ -2,7 +2,9 @@ import React , { Component } from 'react';
 import SeasonalBox from './seasonal_box';
 import NavBar from '../navbar';
 import {Link} from 'react-router-dom';
-import { connect } from 'react-redux'
+import { connect } from 'react-redux';
+import {monthNamer} from '../../actions/index';
+import './availability.css'
 
 
 const mapStateToProps = (state, ownProps) => {
@@ -13,11 +15,14 @@ const mapStateToProps = (state, ownProps) => {
 
 class Availability extends Component {
   render(){
+    if (!this.props.date) {
+      return (<div>LOADING</div>)
+    }
     return (
       <div>
         <NavBar />
-        <h2>Seasonal Ingredients for {this.props.date}</h2>
-        <div><Link to='/recipes'>Get the recipes for {this.props.date}</Link></div>
+        <h2 className="header">Seasonal Ingredients for {monthNamer(this.props.match.params.month)}</h2>
+        {/* <div><Link to='/recipes'>Get the recipes for {this.props.date}</Link></div> */}
         <SeasonalBox />
       </div>
     )
diff --git a/src/components/availability/seasonal_box.js b/src/components/availability/seasonal_box.js
index 9a3852f..536a7e1 100644
--- a/src/components/availability/seasonal_box.js
+++ b/src/components/availability/seasonal_box.js
@@ -1,19 +1,97 @@
 import React , { Component } from 'react';
-import { Row, Col } from 'react-materialize';
+import { Grid } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import {monthRecipes, uppercaseFirstLetter} from '../../actions/index';
+import { monthlyIngredients } from '../../actions/index';
+import { bindActionCreators } from 'redux';
+import './availability.css'
+
+const mapStateToProps = (state) => {
+  return {
+    monthlyIngredientsArr: state.monthlyIngredientsArr,
+    date: state.date
+  }
+}
+
+const mapDispatchToProps = ( dispatch ) => {
+  return bindActionCreators( {monthlyIngredients}, dispatch)
+}
+
+const ingredientBoxMaker = (ingredients) => {
+  ingredients.sort((a,b) => {
+    if (a.food_name < b.food_name) return -1
+    if (a.food_name > b.food_name) return 1
+    return 0
+  })
+  let foodGrid = []
+  let end = ingredients.length % 3 + 1
+  let newStart = ingredients.length-end
+  for (var i = 0; i < ingredients.length; i++) {
+    if ((i+1) % 3 === 0 && i < ingredients.length - end) {
+    let foodRow =
+      <Grid.Row columns={3}>
+        <Grid.Column className="foodAvailable">
+          {uppercaseFirstLetter(ingredients[i].food_name)}
+        </Grid.Column>
+        <Grid.Column className="foodAvailable">
+          {uppercaseFirstLetter(ingredients[i+1].food_name)}
+        </Grid.Column>
+        <Grid.Column className="foodAvailable">
+          {uppercaseFirstLetter(ingredients[i+2].food_name)}
+        </Grid.Column>
+      </Grid.Row>
+      foodGrid.push(foodRow)
+    }
+  }
+  for (var x = newStart; x < ingredients.length -1; x++) {
+    if ((x+1) === undefined) {
+      let additional =
+      <Grid.Row columns={3}>
+        <Grid.Column className="foodAvailable">
+          {uppercaseFirstLetter(ingredients[x].food_name)}
+        </Grid.Column>
+      </Grid.Row>
+      foodGrid.push(additional)
+    }
+    else {
+      let additional =
+      <Grid.Row columns={3}>
+        <Grid.Column className="foodAvailable">
+          {uppercaseFirstLetter(ingredients[x].food_name)}
+        </Grid.Column>
+        <Grid.Column className="foodAvailable">
+          {uppercaseFirstLetter(ingredients[x+1].food_name)}
+        </Grid.Column>
+      </Grid.Row>
+      foodGrid.push(additional)
+    }
+  }
+  return foodGrid
+}
 
 class SeasonalBox extends Component {
+  componentWillMount(){
+    this.props.monthlyIngredients(this.props.date)
+  }
   render(){
+    if (this.props.monthlyIngredientsArr.length === 0) {
+      return (<div>LOADING</div>)
+    }
     return (
-      <Row>
-        <Col s={8}>
-          <div>
-            Seasonal Ingredients Go Here!
+      <Grid divided='vertically'>
+        <Grid.Row columns={1}>
+          <Grid.Column>
+          <div className="seasonal_box">
+            <Grid divided='vertically'>
+              {ingredientBoxMaker(this.props.monthlyIngredientsArr)}
+            </Grid>
           </div>
-        </Col>
-      </Row>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
     )
 
   }
 }
 
-export default SeasonalBox
+export default connect(mapStateToProps, mapDispatchToProps)(SeasonalBox)
diff --git a/src/components/home/home.js b/src/components/home/home.js
index b3aedea..f07635c 100644
--- a/src/components/home/home.js
+++ b/src/components/home/home.js
@@ -9,7 +9,6 @@ import InfoText from './description'
 
 class IndexPage extends Component {
   render(){
-      console.log(this.props)
     return (
     <div>
        <NavBar />
diff --git a/src/components/home/ingredients_dropdown.js b/src/components/home/ingredients_dropdown.js
index a8e8129..05fa3cb 100644
--- a/src/components/home/ingredients_dropdown.js
+++ b/src/components/home/ingredients_dropdown.js
@@ -26,11 +26,6 @@ const dropDownMaker = (ingredients) => {
 }
 
 
-
-const IngredientSearch = () => (
-  <Button color='orange' content="Search By Ingredient"/>
-)
-
 class IngredientsDropdown extends Component {
   componentWillMount(){
     this.props.allIngredients()
@@ -54,7 +49,8 @@ class IngredientsDropdown extends Component {
                 } />
             </div>
           <div className="SearchButton">
-            <IngredientSearch type="submit"><Link to={`/${this.props.ingredient}`}>Search By Ingredients</Link></IngredientSearch>
+            <Button color='orange' content="Search By Ingredient"><Link to={`/ingredient/${this.props.ingredient}`}>Search By Ingredients</Link></Button>
+
           </div>
       </form>
     )
diff --git a/src/components/home/month_dropdown.js b/src/components/home/month_dropdown.js
index ab45267..a02d03d 100644
--- a/src/components/home/month_dropdown.js
+++ b/src/components/home/month_dropdown.js
@@ -1,7 +1,7 @@
 import React , { Component } from 'react';
 import { Dropdown, Button } from 'semantic-ui-react'
 import months from '../data/months';
-// import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { setMonth } from '../../actions/index';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -29,8 +29,7 @@ class MonthDropdown extends Component {
         } />
       </div>
     <div className="SearchButton">
-      {/* <Link to={`/${this.props.date}`}> Search By Month </Link> */}
-      <Button color='orange'> Search By Month</Button>
+      <Button color='orange'> <Link to={`/month/${this.props.date}`}> Search By Month </Link></Button>
     </div>
   </form>
     )
diff --git a/src/components/ingredients/ingredient_availability_table.js b/src/components/ingredients/ingredient_availability_table.js
index e071406..07b68c6 100644
--- a/src/components/ingredients/ingredient_availability_table.js
+++ b/src/components/ingredients/ingredient_availability_table.js
@@ -4,6 +4,7 @@ import { ingredientAvailability, uppercaseFirstLetter } from '../../actions/inde
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import NavBar from '../navbar';
+import './ingredients.css'
 
 
 const mapStateToProps = (state) => {
@@ -26,12 +27,11 @@ class IngredientAvail extends Component {
     if (!this.props.singleIngredient[0]) {
       return (<div>LOADING</div>)
     }
-      console.log('here', this.props.singleIngredient[0].jan)
     return (
       <div>
         <NavBar />
-      <h3>{uppercaseFirstLetter(this.props.singleIngredient[0].food_name)} Availability</h3>
-      <Table>
+      <h3 className="header">{uppercaseFirstLetter(this.props.singleIngredient[0].food_name)} Availability</h3>
+      <Table className="ingTable">
         <thead>
           <tr>
             <th data-field="id">Month</th>
diff --git a/src/components/ingredients/ingredients.css b/src/components/ingredients/ingredients.css
new file mode 100644
index 0000000..cd7b59b
--- /dev/null
+++ b/src/components/ingredients/ingredients.css
@@ -0,0 +1,4 @@
+.ingTable {
+  width: 80%;
+  margin-left: 10%;
+}
diff --git a/src/components/navbar.js b/src/components/navbar.js
index ad3f880..32dd3ae 100644
--- a/src/components/navbar.js
+++ b/src/components/navbar.js
@@ -1,14 +1,13 @@
 import React , { Component } from 'react';
 import { Menu } from 'semantic-ui-react';
-// import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 class NavBar extends Component {
   render(){
     return (
       <Menu size='massive' color='orange'>
         <Menu.Item  className='left' header>Sup Seasonal</Menu.Item>
-        <Menu.Item className='right medium'>Home</Menu.Item>
-        {/* ADD THIS ABOVE ONCE ROUTER IS WORKING<Link to={'/'}>Home</Link> */}
+        <Menu.Item className='right medium'><Link to={'/'}>Home</Link></Menu.Item>
       </Menu>
     )
   }
diff --git a/src/constants/constants.js b/src/constants/constants.js
index d8524d5..d05bd8b 100644
--- a/src/constants/constants.js
+++ b/src/constants/constants.js
@@ -1,4 +1,5 @@
 export const MONTH_INGREDIENTS = 'MONTH_INGREDIENTS';
+export const MONTH_INGREDIENTS_FULFILLED = 'MONTH_INGREDIENTS_FULFILLED';
 export const DATE_CHANGE = 'DATE_CHANGE';
 export const GET_RECIPE = 'GET_RECIPE';
 export const ENTER_INGREDIENTS = 'ENTER_INGREDIENTS';
diff --git a/src/reducers/dateReducer.js b/src/reducers/dateReducer.js
index 574cf9b..46c6efb 100644
--- a/src/reducers/dateReducer.js
+++ b/src/reducers/dateReducer.js
@@ -1,6 +1,6 @@
 import * as CONST from '../constants/constants';
 
-const date = (state = 'apr', action) => {
+export const date = (state = 'apr', action) => {
   switch (action.type) {
     case CONST.DATE_CHANGE:
       return action.date
@@ -10,5 +10,3 @@ const date = (state = 'apr', action) => {
     return state
   }
 }
-
-export default date
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 901eb8a..facabfe 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,6 +1,7 @@
 import { combineReducers } from 'redux'
-import {ingredients, ingredient, singleIngredient}  from './ingredientsReducer'
-import {date, recipe} from './dateReducer'
+import {ingredients, ingredient, singleIngredient, monthlyIngredientsArr}  from './ingredientsReducer'
+import {date} from './dateReducer'
+import {recipe} from './monthRecipeReducer'
 
 const ssApp = combineReducers({
   //import reducers and put them here
@@ -8,7 +9,8 @@ const ssApp = combineReducers({
   ingredient,
   date,
   singleIngredient,
-  recipe
+  recipe,
+  monthlyIngredientsArr
 })
 
 export default ssApp
diff --git a/src/reducers/ingredientsReducer.js b/src/reducers/ingredientsReducer.js
index d6febbe..ec88a65 100644
--- a/src/reducers/ingredientsReducer.js
+++ b/src/reducers/ingredientsReducer.js
@@ -26,3 +26,12 @@ export const singleIngredient = (state = [], action) => {
       return state
   }
 }
+
+export const monthlyIngredientsArr = (state = [], action) => {
+  switch (action.type) {
+    case CONST.MONTH_INGREDIENTS_FULFILLED:
+      return action.payload
+    default:
+      return state
+  }
+}
diff --git a/src/reducers/monthRecipeReducer.js b/src/reducers/monthRecipeReducer.js
index 4c347db..cd0123d 100644
--- a/src/reducers/monthRecipeReducer.js
+++ b/src/reducers/monthRecipeReducer.js
@@ -1,6 +1,6 @@
 import * as CONST from '../constants/constants';
 
-const recipe = (state = {}, action) => {
+export const recipe = (state = {}, action) => {
   switch(action.type) {
     case CONST.MONTH_RECIPES:
     // {...state, }
@@ -9,5 +9,3 @@ const recipe = (state = {}, action) => {
       return state;
   }
 }
-
-export default recipe;

From 72b01026ad40ed7e87886a7ef863841c42c9a2ec Mon Sep 17 00:00:00 2001
From: Daniel Gardner <daniel.marc.gardner@gmail.com>
Date: Mon, 10 Apr 2017 16:01:41 -0700
Subject: [PATCH 3/4] fixing up issues with state and urls in state

---
 src/actions/index.js                          |  2 --
 src/components/app-maybe.js                   |  3 +--
 src/components/availability/availability.css  |  4 ++++
 src/components/availability/availability.js   |  4 ++--
 src/components/availability/seasonal_box.js   | 22 +++++++++----------
 src/components/home/home.js                   |  1 -
 src/components/home/ingredients_dropdown.js   |  2 +-
 .../ingredient_availability_table.js          |  2 +-
 src/components/ingredients/ingredients.js     |  0
 9 files changed, 20 insertions(+), 20 deletions(-)
 delete mode 100644 src/components/ingredients/ingredients.js

diff --git a/src/actions/index.js b/src/actions/index.js
index bd77675..87bed33 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -74,8 +74,6 @@ export const monthNamer = (month) => {
       return 'January'
     case 'feb':
       return 'February'
-    case 'feb':
-      return 'February'
     case 'mar':
       return 'March'
     case 'apr':
diff --git a/src/components/app-maybe.js b/src/components/app-maybe.js
index ea3cff6..5340d3a 100644
--- a/src/components/app-maybe.js
+++ b/src/components/app-maybe.js
@@ -4,8 +4,7 @@ import IngredientAvail from './ingredients/ingredient_availability_table';
 import Availability from './availability/availability';
 import {
   BrowserRouter as Router,
-  Route,
-  Link
+  Route
 } from 'react-router-dom';
 
 export default class App extends Component {
diff --git a/src/components/availability/availability.css b/src/components/availability/availability.css
index 354171d..1a307ee 100644
--- a/src/components/availability/availability.css
+++ b/src/components/availability/availability.css
@@ -13,3 +13,7 @@
   text-align: center;
   font-family: "Times New Roman";
 }
+
+.linkTag {
+  text-align: center;
+}
diff --git a/src/components/availability/availability.js b/src/components/availability/availability.js
index a755a6a..d449b24 100644
--- a/src/components/availability/availability.js
+++ b/src/components/availability/availability.js
@@ -22,8 +22,8 @@ class Availability extends Component {
       <div>
         <NavBar />
         <h2 className="header">Seasonal Ingredients for {monthNamer(this.props.match.params.month)}</h2>
-        {/* <div><Link to='/recipes'>Get the recipes for {this.props.date}</Link></div> */}
-        <SeasonalBox />
+        <h4 className="linkTag"><Link to='/recipes'>Get the recipes for {monthNamer(this.props.date)}</Link></h4>
+        <SeasonalBox params={this.props.match.params}/>
       </div>
     )
   }
diff --git a/src/components/availability/seasonal_box.js b/src/components/availability/seasonal_box.js
index 536a7e1..0359a7c 100644
--- a/src/components/availability/seasonal_box.js
+++ b/src/components/availability/seasonal_box.js
@@ -1,7 +1,7 @@
 import React , { Component } from 'react';
 import { Grid } from 'semantic-ui-react';
 import { connect } from 'react-redux';
-import {monthRecipes, uppercaseFirstLetter} from '../../actions/index';
+import {uppercaseFirstLetter} from '../../actions/index';
 import { monthlyIngredients } from '../../actions/index';
 import { bindActionCreators } from 'redux';
 import './availability.css'
@@ -29,14 +29,14 @@ const ingredientBoxMaker = (ingredients) => {
   for (var i = 0; i < ingredients.length; i++) {
     if ((i+1) % 3 === 0 && i < ingredients.length - end) {
     let foodRow =
-      <Grid.Row columns={3}>
-        <Grid.Column className="foodAvailable">
+      <Grid.Row key={i} columns={3}>
+        <Grid.Column key={ingredients[i].id} className="foodAvailable">
           {uppercaseFirstLetter(ingredients[i].food_name)}
         </Grid.Column>
-        <Grid.Column className="foodAvailable">
+        <Grid.Column key={ingredients[i+1].id} className="foodAvailable">
           {uppercaseFirstLetter(ingredients[i+1].food_name)}
         </Grid.Column>
-        <Grid.Column className="foodAvailable">
+        <Grid.Column key={ingredients[i+2].id} className="foodAvailable">
           {uppercaseFirstLetter(ingredients[i+2].food_name)}
         </Grid.Column>
       </Grid.Row>
@@ -46,8 +46,8 @@ const ingredientBoxMaker = (ingredients) => {
   for (var x = newStart; x < ingredients.length -1; x++) {
     if ((x+1) === undefined) {
       let additional =
-      <Grid.Row columns={3}>
-        <Grid.Column className="foodAvailable">
+      <Grid.Row key={x} columns={3}>
+        <Grid.Column key={ingredients[x].id} className="foodAvailable">
           {uppercaseFirstLetter(ingredients[x].food_name)}
         </Grid.Column>
       </Grid.Row>
@@ -55,11 +55,11 @@ const ingredientBoxMaker = (ingredients) => {
     }
     else {
       let additional =
-      <Grid.Row columns={3}>
-        <Grid.Column className="foodAvailable">
+      <Grid.Row key={x} columns={3}>
+        <Grid.Column key={ingredients[x].id} className="foodAvailable">
           {uppercaseFirstLetter(ingredients[x].food_name)}
         </Grid.Column>
-        <Grid.Column className="foodAvailable">
+        <Grid.Column key={ingredients[x+1].id} className="foodAvailable">
           {uppercaseFirstLetter(ingredients[x+1].food_name)}
         </Grid.Column>
       </Grid.Row>
@@ -71,7 +71,7 @@ const ingredientBoxMaker = (ingredients) => {
 
 class SeasonalBox extends Component {
   componentWillMount(){
-    this.props.monthlyIngredients(this.props.date)
+    this.props.monthlyIngredients(this.props.params.month)
   }
   render(){
     if (this.props.monthlyIngredientsArr.length === 0) {
diff --git a/src/components/home/home.js b/src/components/home/home.js
index f07635c..f34f77c 100644
--- a/src/components/home/home.js
+++ b/src/components/home/home.js
@@ -4,7 +4,6 @@ import IngredientsDropdown from './ingredients_dropdown';
 import NavBar from '../navbar';
 import './home.css'
 import { Grid } from 'semantic-ui-react';
-import months from '../data/months';
 import InfoText from './description'
 
 class IndexPage extends Component {
diff --git a/src/components/home/ingredients_dropdown.js b/src/components/home/ingredients_dropdown.js
index 05fa3cb..df4ac50 100644
--- a/src/components/home/ingredients_dropdown.js
+++ b/src/components/home/ingredients_dropdown.js
@@ -49,7 +49,7 @@ class IngredientsDropdown extends Component {
                 } />
             </div>
           <div className="SearchButton">
-            <Button color='orange' content="Search By Ingredient"><Link to={`/ingredient/${this.props.ingredient}`}>Search By Ingredients</Link></Button>
+            <Button color='orange'><Link to={`/ingredient/${this.props.ingredient}`}>Search By Ingredients</Link></Button>
 
           </div>
       </form>
diff --git a/src/components/ingredients/ingredient_availability_table.js b/src/components/ingredients/ingredient_availability_table.js
index 07b68c6..21c2d24 100644
--- a/src/components/ingredients/ingredient_availability_table.js
+++ b/src/components/ingredients/ingredient_availability_table.js
@@ -21,7 +21,7 @@ const mapDispatchToProps = (dispatch) => {
 
 class IngredientAvail extends Component {
   componentWillMount(){
-    this.props.ingredientAvailability(this.props.ingredient)
+    this.props.ingredientAvailability(this.props.match.params.ingredient)
   }
   render() {
     if (!this.props.singleIngredient[0]) {
diff --git a/src/components/ingredients/ingredients.js b/src/components/ingredients/ingredients.js
deleted file mode 100644
index e69de29..0000000

From 8f9af27deb50a33bd16d7b9ae87b5f32e6371b3a Mon Sep 17 00:00:00 2001
From: Daniel Gardner <daniel.marc.gardner@gmail.com>
Date: Mon, 10 Apr 2017 19:40:45 -0700
Subject: [PATCH 4/4] adding styling and individual links to ingredient pages

---
 src/components/availability/availability.css |  21 +++-
 src/components/availability/availability.js  |   2 +-
 src/components/availability/seasonal_box.js  | 105 +++++++++++++------
 src/components/home/home.css                 |  12 +++
 src/components/home/home.js                  |   1 +
 5 files changed, 109 insertions(+), 32 deletions(-)

diff --git a/src/components/availability/availability.css b/src/components/availability/availability.css
index 1a307ee..27a9656 100644
--- a/src/components/availability/availability.css
+++ b/src/components/availability/availability.css
@@ -1,7 +1,8 @@
 .seasonal_box {
   margin-left: 10%;
   width: 80%;
-  border: 1px solid black
+  border: 1px solid black;
+  padding-top: 15px;
 }
 
 .header {
@@ -12,8 +13,26 @@
 .foodAvailable {
   text-align: center;
   font-family: "Times New Roman";
+  margin-top: 15px !important;
+}
+
+.foodAvailableLast {
+  text-align: center;
+  font-family: "Times New Roman";
 }
 
 .linkTag {
   text-align: center;
 }
+
+.navLink {
+  color: orange;
+}
+
+.seasonalItem{
+  color: orange;
+}
+
+.tableRow {
+  padding: 0px !important;
+}
diff --git a/src/components/availability/availability.js b/src/components/availability/availability.js
index d449b24..087ced6 100644
--- a/src/components/availability/availability.js
+++ b/src/components/availability/availability.js
@@ -22,7 +22,7 @@ class Availability extends Component {
       <div>
         <NavBar />
         <h2 className="header">Seasonal Ingredients for {monthNamer(this.props.match.params.month)}</h2>
-        <h4 className="linkTag"><Link to='/recipes'>Get the recipes for {monthNamer(this.props.date)}</Link></h4>
+        <h4 className="linkTag"><Link className="navLink" to='/recipes'>Get the recipes for {monthNamer(this.props.match.params.month)}</Link></h4>
         <SeasonalBox params={this.props.match.params}/>
       </div>
     )
diff --git a/src/components/availability/seasonal_box.js b/src/components/availability/seasonal_box.js
index 0359a7c..f0b3c3d 100644
--- a/src/components/availability/seasonal_box.js
+++ b/src/components/availability/seasonal_box.js
@@ -4,7 +4,8 @@ import { connect } from 'react-redux';
 import {uppercaseFirstLetter} from '../../actions/index';
 import { monthlyIngredients } from '../../actions/index';
 import { bindActionCreators } from 'redux';
-import './availability.css'
+import './availability.css';
+import { Link } from 'react-router-dom';
 
 const mapStateToProps = (state) => {
   return {
@@ -24,51 +25,95 @@ const ingredientBoxMaker = (ingredients) => {
     return 0
   })
   let foodGrid = []
-  let end = ingredients.length % 3 + 1
+  let end = ingredients.length % 5 + 1
   let newStart = ingredients.length-end
   for (var i = 0; i < ingredients.length; i++) {
-    if ((i+1) % 3 === 0 && i < ingredients.length - end) {
+    if ((i+1) % 5 === 0 && i < ingredients.length - end) {
     let foodRow =
-      <Grid.Row key={i} columns={3}>
-        <Grid.Column key={ingredients[i].id} className="foodAvailable">
-          {uppercaseFirstLetter(ingredients[i].food_name)}
+      <Grid.Row columns={5} key={i} className="tableRow">
+        <Grid.Column className="foodAvailable">
+          {<Link to={`/ingredient/${ingredients[i].id}`} className="seasonalItem">{uppercaseFirstLetter(ingredients[i].food_name)}</Link>}
         </Grid.Column>
-        <Grid.Column key={ingredients[i+1].id} className="foodAvailable">
-          {uppercaseFirstLetter(ingredients[i+1].food_name)}
+        <Grid.Column className="foodAvailable">
+          {<Link to={`/ingredient/${ingredients[i+1].id}`} className="seasonalItem">{uppercaseFirstLetter(ingredients[i+1].food_name)}</Link>}
         </Grid.Column>
-        <Grid.Column key={ingredients[i+2].id} className="foodAvailable">
-          {uppercaseFirstLetter(ingredients[i+2].food_name)}
+        <Grid.Column className="foodAvailable">
+          {<Link to={`/ingredient/${ingredients[i+2].id}`} className="seasonalItem">{uppercaseFirstLetter(ingredients[i+2].food_name)}</Link>}
+        </Grid.Column>
+        <Grid.Column className="foodAvailable">
+          {<Link to={`/ingredient/${ingredients[i+3].id}`} className="seasonalItem">{uppercaseFirstLetter(ingredients[i+3].food_name)}</Link>}
+        </Grid.Column>
+        <Grid.Column className="foodAvailable">
+          {<Link to={`/ingredient/${ingredients[i+4].id}`} className="seasonalItem">{uppercaseFirstLetter(ingredients[i+4].food_name)}</Link>}
         </Grid.Column>
       </Grid.Row>
       foodGrid.push(foodRow)
     }
   }
-  for (var x = newStart; x < ingredients.length -1; x++) {
-    if ((x+1) === undefined) {
-      let additional =
-      <Grid.Row key={x} columns={3}>
-        <Grid.Column key={ingredients[x].id} className="foodAvailable">
-          {uppercaseFirstLetter(ingredients[x].food_name)}
-        </Grid.Column>
-      </Grid.Row>
-      foodGrid.push(additional)
+  for (var x = newStart; x < ingredients.length; x++) {
+    if (ingredients[x+3] !== undefined ) {
+      let lastRow =
+        <Grid.Row columns={5} key={x}>
+          <Grid.Column  className="foodAvailableLast">
+            {<Link to={`/ingredient/${ingredients[x].id}`} className="seasonalItem">{uppercaseFirstLetter(ingredients[x].food_name)}</Link>}
+          </Grid.Column>
+          <Grid.Column className="foodAvailableLast">
+            {<Link to={`/ingredient/${ingredients[x+1].id}`} className="seasonalItem">{uppercaseFirstLetter(ingredients[x+1].food_name)}</Link>}
+          </Grid.Column>
+          <Grid.Column className="foodAvailableLast">
+            {<Link to={`/ingredient/${ingredients[x+2].id}`} className="seasonalItem">{uppercaseFirstLetter(ingredients[x+2].food_name)}</Link>}
+          </Grid.Column>
+          <Grid.Column className="foodAvailableLast">
+            {<Link to={`/ingredient/${ingredients[x+3].id}`} className="seasonalItem">{uppercaseFirstLetter(ingredients[x+3].food_name)}</Link>}
+          </Grid.Column>
+        </Grid.Row>
+      foodGrid.push(lastRow)
+      return foodGrid
     }
-    else {
-      let additional =
-      <Grid.Row key={x} columns={3}>
-        <Grid.Column key={ingredients[x].id} className="foodAvailable">
-          {uppercaseFirstLetter(ingredients[x].food_name)}
-        </Grid.Column>
-        <Grid.Column key={ingredients[x+1].id} className="foodAvailable">
-          {uppercaseFirstLetter(ingredients[x+1].food_name)}
-        </Grid.Column>
-      </Grid.Row>
-      foodGrid.push(additional)
+    else if (ingredients[x+2] !== undefined) {
+      let lastRow =
+        <Grid.Row columns={5} key={x}>
+          <Grid.Column className="foodAvailableLast">
+            {<Link to={`/ingredient/${ingredients[x].id}`} className="seasonalItem">{uppercaseFirstLetter(ingredients[x].food_name)}</Link>}
+          </Grid.Column>
+          <Grid.Column className="foodAvailableLast">
+            {<Link to={`/ingredient/${ingredients[x+1].id}`} className="seasonalItem">{uppercaseFirstLetter(ingredients[x+1].food_name)}</Link>}
+          </Grid.Column>
+          <Grid.Column className="foodAvailableLast">
+            {<Link to={`/ingredient/${ingredients[x+2].id}`} className="seasonalItem">{uppercaseFirstLetter(ingredients[x+2].food_name)}</Link>}
+          </Grid.Column>
+        </Grid.Row>
+      foodGrid.push(lastRow)
+      return foodGrid
+    }
+    else if (ingredients[x+1] !== undefined) {
+      let lastRow =
+        <Grid.Row columns={5} key={x}>
+          <Grid.Column  className="foodAvailableLast">
+            {<Link to={`/ingredient/${ingredients[x].id}`} className="seasonalItem">{uppercaseFirstLetter(ingredients[x].food_name)}</Link>}
+          </Grid.Column>
+          <Grid.Column className="foodAvailableLast">
+            {<Link to={`/ingredient/${ingredients[x+1].id}`} className="seasonalItem">{uppercaseFirstLetter(ingredients[x+1].food_name)}</Link>}
+          </Grid.Column>
+        </Grid.Row>
+      foodGrid.push(lastRow)
+      return foodGrid
+    }
+    else if (ingredients[x] !== undefined) {
+      let lastRow =
+        <Grid.Row columns={5} key={x}>
+          <Grid.Column className="foodAvailableLast">
+            {<Link to={`/ingredient/${ingredients[x].id}`} className="seasonalItem">{uppercaseFirstLetter(ingredients[x].food_name)}</Link>}
+          </Grid.Column>
+        </Grid.Row>
+      foodGrid.push(lastRow)
+      return foodGrid
     }
   }
   return foodGrid
 }
 
+
 class SeasonalBox extends Component {
   componentWillMount(){
     this.props.monthlyIngredients(this.props.params.month)
diff --git a/src/components/home/home.css b/src/components/home/home.css
index fba3a0e..526572c 100644
--- a/src/components/home/home.css
+++ b/src/components/home/home.css
@@ -24,3 +24,15 @@
   margin-left: 10%;
   padding: 2%;
 }
+
+a {
+  color: white;
+}
+
+.image {
+  width: 50%;
+  height: 70%;
+  margin-left: 25%;
+  margin-top: 15px;
+  margin-bottom: 30px;
+}
diff --git a/src/components/home/home.js b/src/components/home/home.js
index f34f77c..949ebc2 100644
--- a/src/components/home/home.js
+++ b/src/components/home/home.js
@@ -22,6 +22,7 @@ class IndexPage extends Component {
           </Grid.Column>
         </Grid.Row>
         <Grid.Row columns={1}>
+          <img className="image" src="https://cdn.pixabay.com/photo/2016/09/03/17/25/pumpkins-1642231_1280.jpg" />
           <InfoText />
         </Grid.Row>
       </Grid>