constructorlabs · chrisphillers · Nov 2, 2018 · Nov 4, 2018 · Nov 4, 2018 · Nov 4, 2018
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
  <head>
  <title>Redux intro</title>
  <link rel="stylesheet" type="text/css" href="style.css">
+ <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  </head>
  <body>
  <div id="root">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
  "classnames": "^2.2.6",
  "enzyme": "^3.3.0",
  "enzyme-adapter-react-16": "^1.1.1",
+ "he": "^1.2.0",
  "prop-types": "^15.6.2",
  "react": "^16.2.0",
  "react-dom": "^16.2.0",

diff --git a/src/actions/index.js b/src/actions/index.js
@@ -1,5 +1,99 @@
-export function fetchQuestion(){
- return function(dispatch){
 
+export function fetchQuestionAPI(){
+ // console.log()
+ return function(dispatch, getState){
+ // const {reduxState} = getState();
+ fetch(`https://opentdb.com/api.php?amount=1&type=multiple`)
+ .then(response => response.json())
+ .then(result => {
+ dispatch(receiveQuestions(result))
+ dispatch(correct_answer(result))
+ dispatch(fetchPhoto(result.results[0].category))
+ // dispatch(receiveSearch(result.results[0].category))
+ // console.log('hi')
+ })
+ .catch(function(error) {
+ // something went wrong. let's sort it out
+ });
+ }
+};
+
+export function correct_answer(result){
+ return {
+ type: 'CORRECT_ANSWER',
+ correct_answer: result.results[0].correct_answer
+ }
+}
+
+export function score(isCorrect){
+ console.log(isCorrect)
+ return {
+
+ type: 'SCORE_ADD',
+ answerIsCorrect: isCorrect
+
+ }
+
+}
+
+function fetchPhoto(category){
+ console.log('hi')
+ return function(dispatch, getState){
+ // const {reduxState} = getState();
+ fetch(`https://api.unsplash.com/search/photos?page=1&query=${category}&client_id=d1463f432cce4150640ff56ee13c1f94ec0b2993db4395bcb8913f34daeb0d48`)
+ .then(response => response.json())
+ .then(result => {
+ dispatch(savePhoto(result))
+ })
+ .catch(function(error) {
+ // something went wrong. let's sort it out
+ });
+ }
+};
+
+
+export function savePhoto(result){
+ // console.log(result.results[0].urls.regular)
+ return {
+ type: 'SAVE_PHOTO_URL',
+ image: result.results[0].urls.regular
+
+ }
+}
+
+
+export function receiveQuestions(result){
+ return {
+ type: 'RECEIVE_QUESTIONS',
+ questions: result.results[0]
+
+ //questions refers to a variable
+ //result = result of fetch
  }
 }
+
+
+export function countDown()
+{
+ counter = counter - 1;
+ window.status = counter;
+ if (counter == 0)
+ {
+ window.clearTimeout( timer );
+ timer = null;
+ }
+ else
+ {
+ timer = window.setTimeout( "countDown()", 1000);
+ }
+}
+
+
+var timer;
+var counter = 10;
+
+export function startCounting()
+{
+ timer = window.setTimeout( "countDown()", 1000 );
+ window.status = counter; // show the initial value
+}
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,10 +1,18 @@
 import React from 'react';
+import QuestionsContainer from '../containers/QuestionsContainer';
+import ScoreContainer from '../containers/ScoreContainer';
+import Nav from '../components/Nav';
+
 
 class App extends React.Component {
+
+
  render(){
  return (
- <div>
- App contents go here
+ <div >
+ <Nav /> 
+ <QuestionsContainer />
+ <ScoreContainer/>
  </div>
  )
  }

diff --git a/src/components/Nav.js b/src/components/Nav.js
@@ -0,0 +1,21 @@
+import React from "react";
+
+class Nav extends React.Component {
+
+ constructor() {
+ super();
+ }
+
+ render() {
+ return (
+<div className="Nav">
+ <h1>THIS IS A QUIZ</h1>
+</div>
+ )
+}
+}
+
+
+
+
+export default Nav;
diff --git a/src/components/Questions.js b/src/components/Questions.js
@@ -0,0 +1,55 @@
+import React from "react";
+import { decode } from 'he';
+
+class Questions extends React.Component {
+
+ constructor() {
+ super();
+ }
+
+
+ componentDidMount(){
+ this.props.fetchQuestion()
+ }
+
+
+ render() {
+ console.log(this.props.questions)
+ let answerList = (this.props.questions.incorrect_answers === undefined) 
+ ? 
+ null : 
+
+
+ [...this.props.questions.incorrect_answers, this.props.questions.correct_answer]
+ .sort(function() { return 0.5 - Math.random() })
+ .map((answer) =>
+ <button className ="voting-button" key={answer} onClick={() => this.props.clickHandler(this.props.questions.correct_answer === answer)}>{answer}</button>
+ );
+
+ let questionDecoded = (this.props.questions.question === undefined) ? null : decode(this.props.questions.question)
+ // decoding HTML entities in questions using 'he' - ternary to cover initial undefined state.
+
+ return (
+ <div className="quiz__display" 
+ style = {{backgroundImage: `url(${this.props.image})`}}>
+ <div>
+ <h2>{questionDecoded}</h2>
+ <ul>{answerList}</ul>
+ </div>
+ </div>
+ );
+}
+}
+
+// {this.props.questions.length > 0 ? 
+// <div key={this.props.questions.question}>
+// <h2 key={this.props.questions.question}>
+// {this.props.questions.question}</h2>
+// {this.props.questions.incorrect_answers}
+
+// </div> : 
+// <h3>I haven't fetched yet</h3>}
+
+
+
+export default Questions;
diff --git a/src/components/Score.js b/src/components/Score.js
@@ -0,0 +1,49 @@
+import React from "react";
+
+class Score extends React.Component {
+
+ constructor() {
+ super();
+ // this.mixQuestions = this.mixQuestions.bind(this);
+ }
+
+
+
+
+ render() {
+
+ // let emotion = === true ? "/static/img/basket_full.png": "/static/img/basket.png";
+
+ // if (this.props.score 0) {
+ // emotion = "/static/img/basket_full.png";
+ // } else if ( ) {
+ // greeting = "/static/img/basket.png";
+ // }
+
+ // return (
+ // <div className="nav">
+ // <img className="nav__logo" src="/static/img/logo.png" />
+ // <img className="nav__basket" onClick={() => this.props.openBasket()} src={basketFull}/>
+ // </div>
+
+
+
+
+ return (
+ <div className="score">
+ <div>
+ <h2>SCORE: {this.props.score}</h2>
+ {/* <img src=`{this.props.score}.jpg`/>
+ <img className="nav__logo" src="/img/0.jpg" />
+
+ <img src="${this.props.score}.jpg">
+ */}
+ </div>
+ </div>
+ );
+}
+}
+
+
+
+export default Score;
diff --git a/src/containers/QuestionsContainer.js b/src/containers/QuestionsContainer.js
@@ -0,0 +1,34 @@
+import { connect } from "react-redux";
+import Questions from "../components/Questions";
+// import { setQuery, submitQuery } from "../actions"
+import { fetchQuestionAPI, score, image } from '../actions';
+
+
+
+// fetchQuestion={this.props.fetchQuestion}
+
+const mapStateToProps = state => {
+ return {
+ questions: state.questionsResults.questions,
+ image: state.image 
+
+ //name of prop being passed down(object) : state:(importedreducercomponent).(key of object)
+ };
+}
+
+
+
+const mapDispatchToProps = dispatch => {
+ return {
+ fetchQuestion: () => dispatch(fetchQuestionAPI()),
+ clickHandler: (isCorrect) => {
+ dispatch(score(isCorrect)),
+ dispatch(fetchQuestionAPI())
+ }
+ };
+}
+
+
+export default connect(
+ mapStateToProps, mapDispatchToProps
+ )(Questions);
diff --git a/src/containers/ScoreContainer.js b/src/containers/ScoreContainer.js
@@ -0,0 +1,18 @@
+import { connect } from "react-redux";
+import Score from "../components/Score";
+import { score } from '../actions';
+
+const mapStateToProps = state => {
+ return {
+ score: state.score
+
+ //name of prop being passed down(object) : state:(importedreducercomponent).(key of object)
+ };
+}
+
+
+
+
+export default connect(
+ mapStateToProps
+ )(Score);
diff --git a/src/img/0.jpg b/src/img/0.jpg
diff --git a/src/index.js b/src/index.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './components/App';
-
 import thunkMiddleware from 'redux-thunk';
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, compose } from "redux";
 import { Provider } from 'react-redux';
 import rootReducer from './reducers';
 
-const store = createStore(rootReducer, applyMiddleware(
- thunkMiddleware
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const store = createStore(rootReducer, {}, composeEnhancers(
+ applyMiddleware(thunkMiddleware) 
 ));
 
 ReactDOM.render(

diff --git a/src/reducers/correct_answer.js b/src/reducers/correct_answer.js
@@ -0,0 +1,21 @@
+
+function correct_answer(state = {
+ correct_answer: ``
+ }, action){
+ switch (action.type) {
+ case 'CORRECT_ANSWER':
+ // console.log(action.questions);
+
+
+
+ const newAnswer = Object.assign({}, state, { correct_answer: action.correct_answer});
+ return newAnswer
+
+ //return = action of returning the value of 'questions' in the action object.
+
+ default:
+ return state
+ }
+ }
+
+ export default correct_answer;
diff --git a/src/reducers/gifs.js b/src/reducers/gifs.js
@@ -0,0 +1,13 @@
+function gifs(state = '', action){
+ switch (action.type) {
+
+ case 'GIF':
+ console.log(action)
+ return action.answerIsCorrect ? state + 1 : state -1
+
+ default:
+ return state
+ }
+ }
+
+ export default gifs;