refactor for redux

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": {

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

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 (
+      <div>
+        <NavBar />
+        <h2>Seasonal Ingredients for {this.props.date}</h2>
+        <div><Link to='/recipes'>Get the recipes for {this.props.date}</Link></div>
+        <SeasonalBox />
+      </div>
+    )
+  }
+}
+
+export default connect(mapStateToProps)(Availability)

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

src/components/index.js → 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(){
     <div>
-      {/* <MonthDropdown />
-      <IngredientsDropdown /> */}
+      <NavBar />
+      <div><h1>Sup Seasonal</h1></div>
+      <MonthDropdown />
+      <IngredientsDropdown />
     </div>
   }
 

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 = () => {(
+  <Dropdown placeholder='Select A Month' fluid selection options={friendOptions} />
+)}
+
+
+class IngredientsDropdown extends Component {
+  render() {
+    return (
+      <div>
+        <div>
+        <Dropdown  className="collapsible" trigger={
+        <Button>Select A Food!</Button>
+        }>
+          <NavItem>Food 1</NavItem>
+          <NavItem>Food 2</NavItem>
+          <NavItem>Food 3</NavItem>
+        </Dropdown>
+        </div>
+        <div>
+          <IngredientSearch />
+        </div>
+      </div>
+    )
+  }
+}
+
+export default IngredientsDropdown

src/components/month_dropdown.js → src/components/home/month_dropdown.js

@@ -4,11 +4,10 @@ import SearchByMonthButton from './month_search_button';
 import months from './data/months';
 
 const DropdownMonthSelection = () => {(
-  <Dropdown placeholder='Select A Month' fluid selection options={null} />
+  <Dropdown placeholder='Select A Month' fluid selection options={months} />
 )}
 
 class MonthDropdown extends Component {
-  // let navitems = month.map((months) => <NavItem month={months} />)
   render() {
     return (
     <div>

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';

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(
-  // <Provider store={createStoreWithMiddleware(reducers)}>
-<App />
-// {/* //   <div>
-// //     <MonthDropdown />
-// //     <IngredientsDropdown />
-// //   </div> */}
-//
-//
-//     {/* <App /> */}
-//
-//     {/* probably have to rename enteredIngredient to specified name on ingredients_dropdown*/}
-//     // <IngredientAvail ingredient={this.state.enteredIngredient}/>
-//     {/* <RecipeInfobox /> */}
-//     {/* <RecipeSideList /> */}
-
-  // </Provider>
+  <Provider store={store}>
+    <App />
+  </Provider>
   , document.querySelector('.app'));
+
+if (module.hot) {
+  module.hot.accept()
+}

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