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>