wired up redux firebase saga and bounded questions to app

.prettierrc

@@ -1,4 +1,3 @@
 {
-  "single-quote": true,
   "arrow-parens": "always"
 }

package.json

@@ -3,17 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "firebase": "^4.10.0",
     "firebase-admin": "^5.9.0",
     "firebase-functions": "^0.8.1",
     "highlight.js": "^9.12.0",
+    "is-empty-object": "^1.1.1",
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-highlight": "briancappello/react-highlight#react-v16-compiled",
-    "react-redux": "^5.0.6",
+    "react-redux": "^5.0.7",
+    "react-redux-firebase": "^2.0.4",
     "react-remarkable": "^1.1.3",
     "react-scripts": "1.1.1",
     "redux": "^3.7.2",
+    "redux-firestore": "^0.2.8",
+    "redux-saga": "^0.16.0",
     "reset-css": "^2.2.1"
   },
   "scripts": {

public/index.html

@@ -5,6 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
 
+    <script>
+      console.log('Hey buddy. Don\'t cheat. Just do your best.');
+    </script>
+
     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 
     <!--

questions.json

@@ -3,7 +3,7 @@
     "id": "basic-variable",
     "question": "Select the answer below that would set a variable named `myVariable` to `3`",
     "incorrectFeedback": "This a very basic question and if this answer wasn't on accident, the rest of the quiz is probably going to be very difficult. Start by reading up on the [fundamentals of Javascript](https://www.w3schools.com/js/)",
-    "codeFigure":"var name = \"Bill\";\n\nfunction caller(func){\n  var myObject = {\n  name: \"Joe\"\n};\n\n  return func(myObject);\n}\n\n  function callee(param) {\n  return param.name\n}\n\n  var c = caller(callee);",
+    "codeFigure":"var name = \"Bill\";\n\nfunction caller(func){\n  var myObject = {\n  name: \"Joe\"\n};\n\n  return func(myObject);\n}\n\n  function callee(param) {\n  return param.name\n}\n\nvar c = caller(callee);",
     "answers": [
       {
         "type": "code",
@@ -21,6 +21,7 @@
         "type": "code",
         "text": "var myVariable = {\n    3\n}"
       }
-    ]
+    ],
+    "correctAnswer": 1
   }
 ]

src/components/App/App.js

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
-import './App.css';
+import React, { Component } from "react";
+import "./App.css";
 
-import { Quiz } from 'components';
+import { Quiz } from "components";
 
 class App extends Component {
     render() {

src/components/App/App.test.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 
 it(`renders without crashing`, () => {
     const div = document.createElement(`div`);

src/components/App/index.js

@@ -1 +1 @@
-export { default as App } from './App.js';
+export { default as App } from "./App.js";

src/components/QuestionAnswer/QuestionAnswer.component.js

@@ -1,12 +1,12 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent } from "react";
 
-import Highlight from 'react-highlight';
+import Highlight from "react-highlight";
 
-import Markdown from 'react-remarkable';
+import Markdown from "react-remarkable";
 
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
-import './QuestionAnswer.css';
+import "./QuestionAnswer.css";
 
 export default class QuestionAnswer extends PureComponent {
   static propTypes = {

src/components/QuestionAnswer/index.js

@@ -1 +1 @@
-export { default as QuestionAnswer } from './QuestionAnswer.component';
+export { default as QuestionAnswer } from "./QuestionAnswer.component";

src/components/Quiz/Quiz.component.js

@@ -1,9 +1,31 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent } from "react";
 
-import './Quiz.css';
+import isEmptyObject from 'is-empty-object';
+
+import {
+    QuizQuestion,
+} from 'components';
+
+import PropTypes from 'prop-types';
+
+import "./Quiz.css";
 
 export default class Quiz extends PureComponent {
+    static propTypes = {
+        questions: PropTypes.object,
+    };
+
     render() {
-        return <div className={`Quiz`} />;
+        const { questions } = this.props;
+
+        return questions && !isEmptyObject(questions) ? (
+            <div className={`Quiz`}>
+                {Object.values(questions).map((question) => (
+                    <div key={question.id}>
+                        <QuizQuestion {...question} />
+                    </div>
+                ))}
+            </div>
+        ) : null;
     }
 }

src/components/Quiz/Quiz.container.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux'
+
+import { compose } from 'redux'
+
+import { firestoreConnect } from 'react-redux-firebase'
+
+import Quiz from './Quiz.component';
+
+export default compose(
+    firestoreConnect([
+        `questions`,
+    ]),
+    connect(
+        (state) => ({
+            questions: state.firestore.data.questions
+        })
+    )
+)(Quiz)

src/components/Quiz/index.js

@@ -1 +1 @@
-export { default as Quiz } from './Quiz.component';
+export { default as Quiz } from "./Quiz.container";

src/components/QuizQuestion/QuizQuestion.component.js

@@ -1,16 +1,16 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent } from "react";
 
-import Highlight from 'react-highlight';
+import Highlight from "react-highlight";
 
-import Markdown from 'react-remarkable';
+import Markdown from "react-remarkable";
 
-import { QuestionAnswer } from 'components';
+import { QuestionAnswer } from "components";
 
-import 'highlight.js/styles/github-gist.css';
+import "highlight.js/styles/github-gist.css";
 
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
-import './QuizQuestion.css';
+import "./QuizQuestion.css";
 
 export default class QuizQuestion extends PureComponent {
   static propTypes = {

src/components/QuizQuestion/index.js

@@ -1 +1 @@
-export { default as QuizQuestion } from './QuizQuestion.component';
+export { default as QuizQuestion } from "./QuizQuestion.component";

src/components/index.js

@@ -1,5 +1,4 @@
-export * from './App';
-export * from './QuestionAnswer';
-export * from './Questions';
-export * from './Quiz';
-export * from './QuizQuestion';
+export * from "./App";
+export * from "./QuestionAnswer";
+export * from "./Quiz";
+export * from "./QuizQuestion";

src/index.js

@@ -1,11 +1,21 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import 'reset-css';
-import './index.css';
+import React from "react";
+import ReactDOM from "react-dom";
+import "reset-css";
+import "./index.css";
 
-import { App } from 'components';
+import { Provider } from "react-redux";
 
-import registerServiceWorker from './registerServiceWorker';
+import store from "store";
+
+import { App } from "components";
+
+import registerServiceWorker from "./registerServiceWorker";
+
+ReactDOM.render(
+    <Provider store={store}>
+        <App />
+    </Provider>,
+    document.getElementById(`root`)
+);
 
-ReactDOM.render(<App />, document.getElementById(`root`));
 registerServiceWorker();

src/store/index.js

@@ -0,0 +1,37 @@
+import { createStore, combineReducers, compose } from "redux";
+
+import { reactReduxFirebase } from "react-redux-firebase";
+
+import { reduxFirestore, firestoreReducer } from "redux-firestore";
+
+import firebase from "firebase";
+
+import 'firebase/firestore';
+
+// react-redux-firebase config
+const rrfConfig = {
+    userProfile: `users`,
+    useFirestoreForProfile: true, // Firestore for Profile instead of Realtime DB
+};
+
+firebase.initializeApp({
+    apiKey: `AIzaSyBVRfPWkOwK2mWquD7-BP4r4v4pXYWL6l8`,
+    authDomain: `dan-wilt-coaching-assessmen.firebaseapp.com`,
+    databaseURL: `https://dan-wilt-coaching-assessmen.firebaseio.com`,
+    projectId: `dan-wilt-coaching-assessmen`,
+    storageBucket: `dan-wilt-coaching-assessmen.appspot.com`,
+    messagingSenderId: `92351047707`,
+});
+
+firebase.firestore();
+
+const createStoreWithFirebase = compose(
+    reactReduxFirebase(firebase, rrfConfig), // firebase instance as first argument
+    reduxFirestore(firebase) // <- needed if using firestore
+)(createStore);
+
+const rootReducer = combineReducers({
+    firestore: firestoreReducer, // <- needed if using firestore
+});
+
+export default createStoreWithFirebase(rootReducer, {}, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());