Dmg 4 10

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);
 }
 
@@ -57,7 +56,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);
 }
@@ -69,3 +68,34 @@ export const monthRecipes = date => {
   }
 }
 
+export const monthNamer = (month) => {
+  switch (month) {
+    case 'jan':
+      return 'January'
+    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
+
+  }
+}

src/components/app-maybe.js

@@ -1,11 +1,23 @@
 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
+} 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>
       );
   }
 }

src/components/availability/availability.css

@@ -0,0 +1,38 @@
+.seasonal_box {
+  margin-left: 10%;
+  width: 80%;
+  border: 1px solid black;
+  padding-top: 15px;
+}
+
+.header {
+  text-align: center;
+  font-family: "Times New Roman";
+}
+
+.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;
+}

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,12 +15,15 @@ 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>
-        <SeasonalBox />
+        <h2 className="header">Seasonal Ingredients for {monthNamer(this.props.match.params.month)}</h2>
+        <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>
     )
   }

src/components/availability/seasonal_box.js

@@ -1,19 +1,142 @@
 import React , { Component } from 'react';
-import { Row, Col } from 'react-materialize';
+import { Grid } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import {uppercaseFirstLetter} from '../../actions/index';
+import { monthlyIngredients } from '../../actions/index';
+import { bindActionCreators } from 'redux';
+import './availability.css';
+import { Link } from 'react-router-dom';
+
+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 % 5 + 1
+  let newStart = ingredients.length-end
+  for (var i = 0; i < ingredients.length; i++) {
+    if ((i+1) % 5 === 0 && i < ingredients.length - end) {
+    let foodRow =
+      <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 className="foodAvailable">
+          {<Link to={`/ingredient/${ingredients[i+1].id}`} className="seasonalItem">{uppercaseFirstLetter(ingredients[i+1].food_name)}</Link>}
+        </Grid.Column>
+        <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; 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 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)
+  }
   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)

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;
+}

src/components/home/home.js

@@ -4,12 +4,10 @@ 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 {
   render(){
-      console.log(this.props)
     return (
     <div>
        <NavBar />
@@ -24,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>

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'><Link to={`/ingredient/${this.props.ingredient}`}>Search By Ingredients</Link></Button>
+
           </div>
       </form>
     )

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>
     )