working on redux convert

Author: turnerniles

.eslintrc

@@ -7,7 +7,10 @@
     }
   },
   "rules": {
-    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
+    "react/jsx-filename-extension": [
+      "error",
+      { "extensions": [".js", ".jsx"] }
+    ],
     "global-require": "off",
     "no-console": "off",
     "import/no-extraneous-dependencies": "off",

src/web/components/QuestionGen.js renamed to src/actions/QuestionGen.js

@@ -5,27 +5,24 @@ export function genRandomNumber() {
 export function genRandomOperator() {
   const randNum = Math.floor(Math.random() * 4);
 
-  return ["+", "-", "*", "/"][randNum];
+  return ['+', '-', '*', '/'][randNum];
 }
 
 export function generateQuestion() {
   const randomOperator = genRandomOperator();
   let randomNumber1 = genRandomNumber();
   let randomNumber2 = genRandomNumber();
-  let generatedQuestion =
-    randomNumber1 + " " + randomOperator + " " + randomNumber2;
+  let generatedQuestion = `${randomNumber1} ${randomOperator} ${randomNumber2}`;
 
-  if (randomOperator === "/") {
-    randomNumber1 = randomNumber1 * randomNumber2;
-    generatedQuestion =
-      randomNumber1 + " " + randomOperator + " " + randomNumber2;
+  if (randomOperator === '/') {
+    randomNumber1 *= randomNumber2;
+    generatedQuestion = `${randomNumber1} ${randomOperator} ${randomNumber2}`;
   } else {
     while (eval(generatedQuestion) < 0) {
       randomNumber1 = genRandomNumber();
       randomNumber2 = genRandomNumber();
       // Don't change the randomOperator in order to maintain operator randomness freqeuncy
-      generatedQuestion =
-        randomNumber1 + " " + randomOperator + " " + randomNumber2;
+      generatedQuestion = `${randomNumber1} ${randomOperator} ${randomNumber2}`;
     }
   }
   return generatedQuestion;

src/actions/game.js

@@ -0,0 +1,24 @@
+import { generateQuestion } from './QuestionGen.js';
+
+/**
+  * Generate New Questions
+  */
+export function generateQuestions(currentQuestions) {
+  currentQuestions[0] = generateQuestion();
+  currentQuestions[1] = currentQuestions[0];
+  return dispatch => new Promise(resolve => resolve(dispatch({
+    type: 'GENERATE_NEW_QUESTIONS',
+    data: currentQuestions,
+  })));
+}
+
+
+/**
+  * Set an Error Message
+  */
+export function setError(message) {
+  return dispatch => new Promise(resolve => resolve(dispatch({
+    type: 'RECIPES_ERROR',
+    data: message,
+  })));
+}

src/containers/Game.js

@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { login } from '../actions/member';
+import { generateQuestions } from '../actions/game';
+
+
+class Game extends Component {
+  static propTypes = {
+    Layout: PropTypes.func.isRequired,
+    locale: PropTypes.string,
+    member: PropTypes.shape({}).isRequired,
+    onFormSubmit: PropTypes.func.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    successMessage: PropTypes.string.isRequired,
+    answer: PropTypes.number.isRequired,
+  };
+
+  static defaultProps = {
+    locale: null,
+  };
+
+  state = {
+    errorMessage: null,
+  };
+
+  onFormSubmit = (data) => {
+    const { onFormSubmit } = this.props;
+    return onFormSubmit(data).catch((err) => {
+      this.setState({ errorMessage: err });
+      throw err;
+    });
+  };
+
+  render = () => {
+    const {
+      member, locale, Layout, isLoading, successMessage, currentQuestions, answer,
+    } = this.props;
+
+    const { errorMessage } = this.state;
+
+    console.log('in the container render currentQuestions', currentQuestions);
+
+    return (
+      <Layout
+        member={member}
+        locale={locale}
+        loading={isLoading}
+        error={errorMessage}
+        success={successMessage}
+        onFormSubmit={this.onFormSubmit}
+        currentQuestions={currentQuestions}
+        answer={answer}
+        generateQuestions={generateQuestions}
+      />
+    );
+  };
+}
+
+const mapStateToProps = state => ({
+  recipes: state.recipes || {},
+  member: state.member || {},
+  locale: state.locale || null,
+  isLoading: state.status.loading || false,
+  successMessage: state.status.success || '',
+  currentQuestions: state.game.currentQuestions,
+  answer: state.game.answer,
+});
+
+const mapDispatchToProps = {
+  onFormSubmit: login,
+  generateQuestions,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Game);

src/reducers/game.js

@@ -0,0 +1,33 @@
+import Store from '../store/recipes';
+
+export const initialState = Store;
+
+export default function gameReducer(state = initialState, action) {
+  switch (action.type) {
+    case 'GENERATE_NEW_QUESTIONS': {
+      console.log('in the reduce', action.data);
+      return {
+        ...state,
+        currentQuestions: action.data,
+        answer: eval(action.data[0]),
+      };
+    }
+    case 'MEALS_REPLACE': {
+      return {
+        ...state,
+        error: null,
+        loading: false,
+        meals: action.data,
+      };
+    }
+    case 'RECIPES_ERROR': {
+      return {
+        ...state,
+        error: action.data,
+      };
+    }
+
+    default:
+      return state;
+  }
+}

src/reducers/index.js

@@ -2,6 +2,7 @@ import status from './status';
 import member from './member';
 import recipes from './recipes';
 import locale from './locale';
+import game from './game';
 
 const rehydrated = (state = false, action) => {
   switch (action.type) {
@@ -18,4 +19,5 @@ export default {
   member,
   recipes,
   locale,
+  game,
 };

src/reducers/member.js

@@ -1,23 +1,23 @@
-import Store from '../store/member';
+import Store from "../store/member";
 
 export const initialState = Store;
 
 export default function userReducer(state = initialState, action) {
   switch (action.type) {
-    case 'USER_LOGIN': {
+    case "USER_LOGIN": {
       if (action.data) {
         return {
           ...state,
           loading: false,
           error: null,
           uid: action.data.uid,
           email: action.data.email,
-          emailVerified: action.data.emailVerified,
+          emailVerified: action.data.emailVerified
         };
       }
       return initialState;
     }
-    case 'USER_DETAILS_UPDATE': {
+    case "USER_DETAILS_UPDATE": {
       if (action.data) {
         return {
           ...state,
@@ -26,22 +26,22 @@ export default function userReducer(state = initialState, action) {
           firstName: action.data.firstName,
           lastName: action.data.lastName,
           signedUp: action.data.signedUp,
-          role: action.data.role,
+          role: action.data.role
         };
       }
       return initialState;
     }
-    case 'USER_ERROR': {
+    case "USER_ERROR": {
       if (action.data) {
         return {
           ...state,
           loading: false,
-          error: action.data,
+          error: action.data
         };
       }
       return initialState;
     }
-    case 'USER_RESET': {
+    case "USER_RESET": {
       return initialState;
     }
     default:

src/store/index.js

@@ -4,6 +4,7 @@ import { persistStore, persistCombineReducers } from 'redux-persist';
 import storage from 'redux-persist/es/storage'; // default: localStorage if web, AsyncStorage if react-native
 import thunk from 'redux-thunk';
 import reducers from '../reducers';
+import { generateQuestion } from '../actions/QuestionGen.js';
 
 // Redux Persist config
 const config = {
@@ -16,14 +17,27 @@ const reducer = persistCombineReducers(config, reducers);
 
 const middleware = [thunk];
 
+const questions = [];
+for (let i = 0; i < 2; i += 1) {
+  questions.push(generateQuestion());
+}
+
 const configureStore = () => {
   const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
   const store = createStore(
     reducer,
+    {
+      game: {
+        currentQuestions: questions,
+        answer: eval(questions[0]),
+      },
+    },
     composeEnhancer(applyMiddleware(...middleware)),
   );
 
+  console.log('created store', store);
+
   const persistor = persistStore(
     store,
     null,