From 8b8d7eb2898b415ca219aff39a73971515379481 Mon Sep 17 00:00:00 2001 From: Daniel Gardner Date: Sat, 8 Apr 2017 12:29:34 -0700 Subject: [PATCH] refactor for redux --- package.json | 6 +++ src/actions/index.js | 14 ++++++ src/components/{app.js => app-maybe.js} | 0 src/components/availability/availability.js | 27 ++++++++++++ .../{ => availability}/seasonal_box.js | 0 src/components/data/months.js | 2 +- src/components/{index.js => home/home.js} | 10 ++--- src/components/home/ingredients_dropdown.js | 32 ++++++++++++++ src/components/{ => home}/month_dropdown.js | 3 +- .../{ => home}/month_search_button.js | 0 .../ingredient_availability_box.js | 0 src/components/ingredients/ingredients.js | 0 src/components/ingredients_dropdown.js | 38 ---------------- .../{ => recipes}/recipe_infobox.js | 0 .../{ => recipes}/recipe_side_list.js | 0 src/components/recipes/recipes.js | 0 src/constants/constants.js | 4 ++ src/index.js | 43 +++++++------------ src/reducers/dateReducer.js | 14 ++++++ 19 files changed, 119 insertions(+), 74 deletions(-) rename src/components/{app.js => app-maybe.js} (100%) create mode 100644 src/components/availability/availability.js rename src/components/{ => availability}/seasonal_box.js (100%) rename src/components/{index.js => home/home.js} (63%) create mode 100644 src/components/home/ingredients_dropdown.js rename src/components/{ => home}/month_dropdown.js (86%) rename src/components/{ => home}/month_search_button.js (100%) rename src/components/{ => ingredients}/ingredient_availability_box.js (100%) create mode 100644 src/components/ingredients/ingredients.js delete mode 100644 src/components/ingredients_dropdown.js rename src/components/{ => recipes}/recipe_infobox.js (100%) rename src/components/{ => recipes}/recipe_side_list.js (100%) create mode 100644 src/components/recipes/recipes.js create mode 100644 src/constants/constants.js create mode 100644 src/reducers/dateReducer.js diff --git a/package.json b/package.json index b1b3027..ac8b700 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,15 @@ "version": "0.1.0", "private": true, "dependencies": { + "axios": "^0.16.0", "react": "^15.0.0", "react-dom": "^15.0.0", "react-materialize": "^0.18.1", + "react-redux": "^5.0.3", + "react-router-dom": "^4.0.0", + "redux": "^3.6.0", + "redux-promise-middleware": "^4.2.0", + "redux-thunk": "^2.2.0", "semantic-ui-react": "^0.67.2" }, "devDependencies": { diff --git a/src/actions/index.js b/src/actions/index.js index e69de29..3b40c97 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -0,0 +1,14 @@ +import axios from 'axios'; +import * as CONST from '../constants/constants'; + +function fetchMonth(date){ + const url = `http://supseasonal.herokuapp.com/api/months${date}` + return axios.get(url).then(response => response.data); +} + +const monthlyIngredients = (date) => { + return { + type:CONST.MONTH_INGREDIENTS, + payload: fetchMonth(date) + } +} diff --git a/src/components/app.js b/src/components/app-maybe.js similarity index 100% rename from src/components/app.js rename to src/components/app-maybe.js diff --git a/src/components/availability/availability.js b/src/components/availability/availability.js new file mode 100644 index 0000000..3bee2b1 --- /dev/null +++ b/src/components/availability/availability.js @@ -0,0 +1,27 @@ +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' + + +const mapStateToProps = (state, ownProps) => { + return { + date: state.date + } +} + +class Availability extends Component { + render(){ + return ( +
+ +

Seasonal Ingredients for {this.props.date}

+
Get the recipes for {this.props.date}
+ +
+ ) + } +} + +export default connect(mapStateToProps)(Availability) diff --git a/src/components/seasonal_box.js b/src/components/availability/seasonal_box.js similarity index 100% rename from src/components/seasonal_box.js rename to src/components/availability/seasonal_box.js diff --git a/src/components/data/months.js b/src/components/data/months.js index 699fb10..e63268a 100644 --- a/src/components/data/months.js +++ b/src/components/data/months.js @@ -1,3 +1,3 @@ -const months = [{key: 'jan', value: 'jan', text: 'January'},{key: 'feb', value: 'feb', text: 'February'}, {key: 'mar', value: 'mar', text: 'March'}, {key: 'apr', value: 'apr', text: 'April'}, {key: 'may', value: 'may', text: 'May'}, {key: 'jun', value: 'jun', text: 'June'}, {key: 'jul', value: 'jul', text: 'July'}, {key: 'aug', value: 'aug', text: 'August'}, {key: 'sep', value: 'sep', text: 'September'}, {key: 'oct', value: 'oct', text: 'October'}, {key: 'nov', value: 'nov', text: 'November'}, {key: 'dec', value: 'dec', text: 'December'}] +const months = [{ value: 'jan', text: 'January'},{ value: 'feb', text: 'February'}, { value: 'mar', text: 'March'}, { value: 'apr', text: 'April'}, { value: 'may', text: 'May'}, { value: 'jun', text: 'June'}, { value: 'jul', text: 'July'}, { value: 'aug', text: 'August'}, { value: 'sep', text: 'September'}, { value: 'oct', text: 'October'}, { value: 'nov', text: 'November'}, { value: 'dec', text: 'December'}] export default months diff --git a/src/components/index.js b/src/components/home/home.js similarity index 63% rename from src/components/index.js rename to src/components/home/home.js index ac4a3ba..7040c85 100644 --- a/src/components/index.js +++ b/src/components/home/home.js @@ -1,15 +1,15 @@ import React, { Component } from 'react'; import MonthDropdown from './month_dropdown'; import IngredientsDropdown from './ingredients_dropdown'; +import NavBar from '../navbar'; class IndexPage extends Component { - constructor(props) { - super(props) - } render(){
- {/* - */} + +

Sup Seasonal

+ +
} diff --git a/src/components/home/ingredients_dropdown.js b/src/components/home/ingredients_dropdown.js new file mode 100644 index 0000000..ac2a38a --- /dev/null +++ b/src/components/home/ingredients_dropdown.js @@ -0,0 +1,32 @@ +import React , { Component } from 'react'; +import { Dropdown } from 'semantic-ui-react' + +const mapStateToProps + +const DropdownIngredientsSelection = () => {( + +)} + + +class IngredientsDropdown extends Component { + render() { + return ( +
+
+ Select A Food! + }> + Food 1 + Food 2 + Food 3 + +
+
+ +
+
+ ) + } +} + +export default IngredientsDropdown diff --git a/src/components/month_dropdown.js b/src/components/home/month_dropdown.js similarity index 86% rename from src/components/month_dropdown.js rename to src/components/home/month_dropdown.js index ec5f603..b8d4c1b 100644 --- a/src/components/month_dropdown.js +++ b/src/components/home/month_dropdown.js @@ -4,11 +4,10 @@ import SearchByMonthButton from './month_search_button'; import months from './data/months'; const DropdownMonthSelection = () => {( - + )} class MonthDropdown extends Component { - // let navitems = month.map((months) => ) render() { return (
diff --git a/src/components/month_search_button.js b/src/components/home/month_search_button.js similarity index 100% rename from src/components/month_search_button.js rename to src/components/home/month_search_button.js diff --git a/src/components/ingredient_availability_box.js b/src/components/ingredients/ingredient_availability_box.js similarity index 100% rename from src/components/ingredient_availability_box.js rename to src/components/ingredients/ingredient_availability_box.js diff --git a/src/components/ingredients/ingredients.js b/src/components/ingredients/ingredients.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/ingredients_dropdown.js b/src/components/ingredients_dropdown.js deleted file mode 100644 index 34ed095..0000000 --- a/src/components/ingredients_dropdown.js +++ /dev/null @@ -1,38 +0,0 @@ -import React , { Component } from 'react'; -import { Dropdown } from 'semantic-ui-react' - - -const DropdownIngredientsSelection = () => {( - -)} - - -// class IngredientsDropdown extends Component { -// // let navitems = food_name.map((foodnames) => ) -// componentWillMount() { -// $(document).ready(() => { -// $('.collapsible').collapsible(); -// }); -// } -// -// render() { -// return ( -//
-//
-// Select A Food! -// }> -// Food 1 -// Food 2 -// Food 3 -// -//
-//
-// -//
-//
-// ) -// } -// } -// -// export default IngredientsDropdown diff --git a/src/components/recipe_infobox.js b/src/components/recipes/recipe_infobox.js similarity index 100% rename from src/components/recipe_infobox.js rename to src/components/recipes/recipe_infobox.js diff --git a/src/components/recipe_side_list.js b/src/components/recipes/recipe_side_list.js similarity index 100% rename from src/components/recipe_side_list.js rename to src/components/recipes/recipe_side_list.js diff --git a/src/components/recipes/recipes.js b/src/components/recipes/recipes.js new file mode 100644 index 0000000..e69de29 diff --git a/src/constants/constants.js b/src/constants/constants.js new file mode 100644 index 0000000..82ad69d --- /dev/null +++ b/src/constants/constants.js @@ -0,0 +1,4 @@ +export const MONTH_INGREDIENTS = 'MONTH_INGREDIENTS'; +export const DATE_CHANGE = 'DATE_CHANGE'; +export const GET_RECIPE = 'GET_RECIPE'; +export const ENTER_INGREDIENTS = 'ENTER_INGREDIENTS'; diff --git a/src/index.js b/src/index.js index 963534f..381eb6c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,38 +1,25 @@ - - import React from 'react'; import ReactDOM from 'react-dom'; -// import { Provider } from 'react-redux'; -// import { createStore, applyMiddleware } from 'redux'; - - import App from './components/app'; import reducers from './reducers'; -import IngredientAvail from './components/ingredient_availability_box.js'; -import RecipeInfobox from './components/recipe_infobox.js'; -import RecipeSideList from './components/recipe_side_list.js'; -import MonthDropdown from './components/month_dropdown'; -import IngredientsDropdown from './components/ingredients_dropdown' +import promiseMiddleware from 'redux-promise-middleware'; +import { applyMiddleware } from 'redux'; +import thunkMiddleware from 'redux-thunk'; -// const createStoreWithMiddleware = applyMiddleware()(createStore); +const store = createStore( + reducers, + window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), + applyMiddleware(thunkMiddleware, promiseMiddleware()) +); ReactDOM.render( - // - -// {/* //
-// // -// // -// //
*/} -// -// -// {/* */} -// -// {/* probably have to rename enteredIngredient to specified name on ingredients_dropdown*/} -// // -// {/* */} -// {/* */} - - // + + + , document.querySelector('.app')); + +if (module.hot) { + module.hot.accept() +} diff --git a/src/reducers/dateReducer.js b/src/reducers/dateReducer.js new file mode 100644 index 0000000..7616285 --- /dev/null +++ b/src/reducers/dateReducer.js @@ -0,0 +1,14 @@ +import * as CONST from '../constants/constants'; + +const date = (state = '', action) => { + switch (action.type) { + case CONST.DATE_CHANGE: + return action.date + case CONST.MONTH_INGREDIENTS: + return action.payload + default: + return state + } +} + +export default date