From b1a69b178005c58b8064974dd9f2bea17e3f95d5 Mon Sep 17 00:00:00 2001 From: Chris Phillips Date: Fri, 2 Nov 2018 13:56:42 +0000 Subject: [PATCH 1/6] fetch --- package-lock.json | 28 +++++++++++++++++++++------- src/actions/index.js | 26 +++++++++++++++++++++++--- src/components/App.js | 10 +++++++++- src/components/Questions.js | 27 +++++++++++++++++++++++++++ src/containers/QuestionsContainer.js | 25 +++++++++++++++++++++++++ src/index.js | 8 ++++---- src/reducers/questionsResults.js | 13 +++++++++++++ 7 files changed, 122 insertions(+), 15 deletions(-) create mode 100644 src/components/Questions.js create mode 100644 src/containers/QuestionsContainer.js create mode 100644 src/reducers/questionsResults.js diff --git a/package-lock.json b/package-lock.json index 90154a0..257abfd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3752,12 +3752,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3772,17 +3774,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3899,7 +3904,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3911,6 +3917,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3925,6 +3932,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3932,12 +3940,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -3956,6 +3966,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -4036,7 +4047,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -4048,6 +4060,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -4169,6 +4182,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/src/actions/index.js b/src/actions/index.js index a1d9430..f536444 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -1,5 +1,25 @@ -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 => { + console.log(result) + dispatch(receiveQuestions(result)) + dispatch() + }) + .catch(function(error) { + // something went wrong. let's sort it out + }); } -} +}; + + +export function receiveQuestions(result){ + return { + type: 'RECEIVE_QUESTIONS', + questions: result + } +} \ No newline at end of file diff --git a/src/components/App.js b/src/components/App.js index ef2abb3..9643edb 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,10 +1,18 @@ import React from 'react'; +import QuestionsContainer from '../containers/QuestionsContainer'; + class App extends React.Component { + + + + + render(){ return (
- App contents go here + QUIZ +
) } diff --git a/src/components/Questions.js b/src/components/Questions.js new file mode 100644 index 0000000..f456c69 --- /dev/null +++ b/src/components/Questions.js @@ -0,0 +1,27 @@ +import React from "react"; + +class Questions extends React.Component { + + constructor() { + super(); + // this.quizDisplay = this.quizDisplay.bind(this); + } + + + componentDidMount(){ + this.props.fetchQuestion() + } + + render() { + + + return ( +
+ +
+ ); +} + +} + +export default Questions; diff --git a/src/containers/QuestionsContainer.js b/src/containers/QuestionsContainer.js new file mode 100644 index 0000000..0155810 --- /dev/null +++ b/src/containers/QuestionsContainer.js @@ -0,0 +1,25 @@ +import { connect } from "react-redux"; +import Questions from "../components/Questions"; +// import { setQuery, submitQuery } from "../actions" +import { fetchQuestionAPI } from '../actions'; + +// fetchQuestion={this.props.fetchQuestion} + +const mapStateToProps = state => { + return { + // selectedQuery: state.searchInput.selectedQuery + }; +} + + +const mapDispatchToProps = dispatch => { + return { + fetchQuestion: () => dispatch(fetchQuestionAPI()) + // selectedQuery: state.searchInput.selectedQuery + }; +} + + +export default connect( + mapStateToProps, mapDispatchToProps + )(Questions); \ No newline at end of file diff --git a/src/index.js b/src/index.js index 846662e..c295cfd 100644 --- 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/questionsResults.js b/src/reducers/questionsResults.js new file mode 100644 index 0000000..1af237c --- /dev/null +++ b/src/reducers/questionsResults.js @@ -0,0 +1,13 @@ + +function questionsResults(state = [], action){ + switch (action.type) { + case 'RECEIVE_QUESTIONS': + return action.questions + + + default: + return state + } + } + + export default questionsResults; \ No newline at end of file From 579b39d26ff4ad4e7a64827ba83e704b8b81f370 Mon Sep 17 00:00:00 2001 From: Chris Phillips Date: Sun, 4 Nov 2018 13:51:36 +0000 Subject: [PATCH 2/6] score component - not complete --- src/actions/index.js | 17 ++++++++++++++--- src/components/App.js | 5 ++++- src/components/Nav.js | 24 ++++++++++++++++++++++++ src/components/Questions.js | 28 ++++++++++++++++++++++++---- src/components/Score.js | 28 ++++++++++++++++++++++++++++ src/containers/QuestionsContainer.js | 8 ++++++-- src/containers/ScoreContainer.js | 20 ++++++++++++++++++++ src/reducers/index.js | 6 ++++-- src/reducers/questionsResults.js | 14 +++++++++++--- src/reducers/scoreFetch.js | 19 +++++++++++++++++++ 10 files changed, 154 insertions(+), 15 deletions(-) create mode 100644 src/components/Nav.js create mode 100644 src/components/Score.js create mode 100644 src/containers/ScoreContainer.js create mode 100644 src/reducers/scoreFetch.js diff --git a/src/actions/index.js b/src/actions/index.js index f536444..f81f7e4 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -6,9 +6,7 @@ export function fetchQuestionAPI(){ fetch(`https://opentdb.com/api.php?amount=1&type=multiple`) .then(response => response.json()) .then(result => { - console.log(result) dispatch(receiveQuestions(result)) - dispatch() }) .catch(function(error) { // something went wrong. let's sort it out @@ -20,6 +18,19 @@ export function fetchQuestionAPI(){ export function receiveQuestions(result){ return { type: 'RECEIVE_QUESTIONS', - questions: result + questions: result.results[0] + + //questions refers to a variable + //result = result of fetch + } +} + +export function scoreFetch(currentScore){ + return { + type: 'SCORE_FETCH', + score: currentScore //to complete + + //questions refers to a variable + //result = result of fetch } } \ No newline at end of file diff --git a/src/components/App.js b/src/components/App.js index 9643edb..93eba63 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,5 +1,7 @@ import React from 'react'; import QuestionsContainer from '../containers/QuestionsContainer'; +import ScoreContainer from '../containers/ScoreContainer'; +import Nav from '../components/Nav'; class App extends React.Component { @@ -11,8 +13,9 @@ class App extends React.Component { render(){ return (
- QUIZ +
) } diff --git a/src/components/Nav.js b/src/components/Nav.js new file mode 100644 index 0000000..6b79a0b --- /dev/null +++ b/src/components/Nav.js @@ -0,0 +1,24 @@ +import React from "react"; + +class Nav extends React.Component { + + constructor() { + super(); + } + + + + + render() { + return ( +
+QUIZ +
+ ) +} +} + + + + +export default Nav; diff --git a/src/components/Questions.js b/src/components/Questions.js index f456c69..04f7da5 100644 --- a/src/components/Questions.js +++ b/src/components/Questions.js @@ -4,24 +4,44 @@ class Questions extends React.Component { constructor() { super(); - // this.quizDisplay = this.quizDisplay.bind(this); + // this.mixQuestions = this.mixQuestions.bind(this); } componentDidMount(){ this.props.fetchQuestion() + // this.mixQuestions() } 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].map((answer) => + + ); - return (
- +
+

{this.props.questions.question}

+
    {answerList}
+
); } - } +// {this.props.questions.length > 0 ? +//
+//

+// {this.props.questions.question}

+// {this.props.questions.incorrect_answers} + +//
: +//

I haven't fetched yet

} + + + export default Questions; diff --git a/src/components/Score.js b/src/components/Score.js new file mode 100644 index 0000000..c342d36 --- /dev/null +++ b/src/components/Score.js @@ -0,0 +1,28 @@ +import React from "react"; + +class Questions extends React.Component { + + constructor() { + super(); + // this.mixQuestions = this.mixQuestions.bind(this); + } + + + + + render() { + + return ( +
+
+

{this.props.score}

+ +
+
+ ); +} +} + + + +export default Questions; diff --git a/src/containers/QuestionsContainer.js b/src/containers/QuestionsContainer.js index 0155810..01fcfed 100644 --- a/src/containers/QuestionsContainer.js +++ b/src/containers/QuestionsContainer.js @@ -7,15 +7,19 @@ import { fetchQuestionAPI } from '../actions'; const mapStateToProps = state => { return { - // selectedQuery: state.searchInput.selectedQuery + questions: state.questionsResults.questions + + //name of prop being passed down(object) : state:(importedreducercomponent).(key of object) }; } + const mapDispatchToProps = dispatch => { return { - fetchQuestion: () => dispatch(fetchQuestionAPI()) + fetchQuestion: () => dispatch(fetchQuestionAPI()), // selectedQuery: state.searchInput.selectedQuery + clickHandler: (answer) => dispatch() }; } diff --git a/src/containers/ScoreContainer.js b/src/containers/ScoreContainer.js new file mode 100644 index 0000000..1821677 --- /dev/null +++ b/src/containers/ScoreContainer.js @@ -0,0 +1,20 @@ +import { connect } from "react-redux"; +import Score from "../components/Score"; +// import { setQuery, submitQuery } from "../actions" +import { scoreFetch } from '../actions'; + +// fetchQuestion={this.props.fetchQuestion} + +const mapStateToProps = state => { + return { + score: state.scoreFetch.score + + //name of prop being passed down(object) : state:(importedreducercomponent).(key of object) + }; +} + + + +export default connect( + mapStateToProps + )(Score); \ No newline at end of file diff --git a/src/reducers/index.js b/src/reducers/index.js index 8e738e8..8a9213e 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,6 +1,8 @@ import { combineReducers } from 'redux'; -import placeholder from './placeholder'; +import questionsResults from './QuestionsResults'; +import scoreFetch from './ScoreFetch'; + export default combineReducers({ - placeholder + questionsResults }); diff --git a/src/reducers/questionsResults.js b/src/reducers/questionsResults.js index 1af237c..3c948bb 100644 --- a/src/reducers/questionsResults.js +++ b/src/reducers/questionsResults.js @@ -1,9 +1,17 @@ -function questionsResults(state = [], action){ +function questionsResults(state = { + questions: {} +}, action){ switch (action.type) { case 'RECEIVE_QUESTIONS': - return action.questions - + // console.log(action.questions); + + + + const newQuestions = Object.assign({}, state, { questions: action.questions}); + return newQuestions + + //return = action of returning the value of 'questions' in the action object. default: return state diff --git a/src/reducers/scoreFetch.js b/src/reducers/scoreFetch.js new file mode 100644 index 0000000..a824b44 --- /dev/null +++ b/src/reducers/scoreFetch.js @@ -0,0 +1,19 @@ + +function scoreFetch(state = { + score: 0 + }, action){ + switch (action.type) { + case 'SCORE_FETCH': + // console.log(action.questions); + + const currentScore = {score: action.score} + return currentScore; + + //return = action of returning the value of 'questions' in the action object. + + default: + return state + } + } + + export default scoreFetch; \ No newline at end of file From 5c9f35d03fb97d55a7076ec152bdeae821fd17e0 Mon Sep 17 00:00:00 2001 From: Chris Phillips Date: Sun, 4 Nov 2018 14:48:05 +0000 Subject: [PATCH 3/6] score component, incomplete --- src/actions/index.js | 25 +++++++++++++++++++++++++ src/containers/ScoreContainer.js | 3 +-- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index f81f7e4..075de6e 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -33,4 +33,29 @@ export function scoreFetch(currentScore){ //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 } \ No newline at end of file diff --git a/src/containers/ScoreContainer.js b/src/containers/ScoreContainer.js index 1821677..ecc41c0 100644 --- a/src/containers/ScoreContainer.js +++ b/src/containers/ScoreContainer.js @@ -1,9 +1,8 @@ import { connect } from "react-redux"; import Score from "../components/Score"; -// import { setQuery, submitQuery } from "../actions" import { scoreFetch } from '../actions'; -// fetchQuestion={this.props.fetchQuestion} +// scoreFetch={this.props.scoreFetch} const mapStateToProps = state => { return { From ac1e7dd250e7b366c176bfacc96ddea1f907204f Mon Sep 17 00:00:00 2001 From: Chris Phillips Date: Sun, 4 Nov 2018 20:34:26 +0000 Subject: [PATCH 4/6] score fixed --- src/actions/index.js | 39 +++++++++++++++++++++------- src/components/Questions.js | 3 ++- src/components/Score.js | 4 +-- src/containers/QuestionsContainer.js | 5 ++-- src/containers/ScoreContainer.js | 7 +++-- src/reducers/index.js | 11 ++++++-- src/reducers/scoreFetch.js | 19 -------------- 7 files changed, 49 insertions(+), 39 deletions(-) delete mode 100644 src/reducers/scoreFetch.js diff --git a/src/actions/index.js b/src/actions/index.js index 075de6e..d20f1ab 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -7,6 +7,8 @@ export function fetchQuestionAPI(){ .then(response => response.json()) .then(result => { dispatch(receiveQuestions(result)) + dispatch(correct_answer(result)) + // console.log(result.results[0]) }) .catch(function(error) { // something went wrong. let's sort it out @@ -14,26 +16,45 @@ export function fetchQuestionAPI(){ } }; +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 + } + +} + + + export function receiveQuestions(result){ return { type: 'RECEIVE_QUESTIONS', questions: result.results[0] - + //questions refers to a variable //result = result of fetch } } -export function scoreFetch(currentScore){ - return { - type: 'SCORE_FETCH', - score: currentScore //to complete +// export function score(currentScore){ +// return { +// type: 'SCORE_FETCH', +// score: currentScore //to complete - //questions refers to a variable - //result = result of fetch - } -} +// //questions refers to a variable +// //result = result of fetch +// } +// } export function countDown() { diff --git a/src/components/Questions.js b/src/components/Questions.js index 04f7da5..f7820b5 100644 --- a/src/components/Questions.js +++ b/src/components/Questions.js @@ -12,6 +12,7 @@ class Questions extends React.Component { this.props.fetchQuestion() // this.mixQuestions() } + render() { console.log(this.props.questions) @@ -19,7 +20,7 @@ class Questions extends React.Component { ? null : [...this.props.questions.incorrect_answers, this.props.questions.correct_answer].map((answer) => - + ); return ( diff --git a/src/components/Score.js b/src/components/Score.js index c342d36..0234808 100644 --- a/src/components/Score.js +++ b/src/components/Score.js @@ -1,6 +1,6 @@ import React from "react"; -class Questions extends React.Component { +class Score extends React.Component { constructor() { super(); @@ -25,4 +25,4 @@ class Questions extends React.Component { -export default Questions; +export default Score; diff --git a/src/containers/QuestionsContainer.js b/src/containers/QuestionsContainer.js index 01fcfed..c438bce 100644 --- a/src/containers/QuestionsContainer.js +++ b/src/containers/QuestionsContainer.js @@ -1,7 +1,8 @@ import { connect } from "react-redux"; import Questions from "../components/Questions"; // import { setQuery, submitQuery } from "../actions" -import { fetchQuestionAPI } from '../actions'; +import { fetchQuestionAPI, score } from '../actions'; + // fetchQuestion={this.props.fetchQuestion} @@ -19,7 +20,7 @@ const mapDispatchToProps = dispatch => { return { fetchQuestion: () => dispatch(fetchQuestionAPI()), // selectedQuery: state.searchInput.selectedQuery - clickHandler: (answer) => dispatch() + clickHandler: (isCorrect) => dispatch(score(isCorrect)) }; } diff --git a/src/containers/ScoreContainer.js b/src/containers/ScoreContainer.js index ecc41c0..553b0bf 100644 --- a/src/containers/ScoreContainer.js +++ b/src/containers/ScoreContainer.js @@ -1,12 +1,10 @@ import { connect } from "react-redux"; import Score from "../components/Score"; -import { scoreFetch } from '../actions'; - -// scoreFetch={this.props.scoreFetch} +import { score } from '../actions'; const mapStateToProps = state => { return { - score: state.scoreFetch.score + score: state.score //name of prop being passed down(object) : state:(importedreducercomponent).(key of object) }; @@ -14,6 +12,7 @@ const mapStateToProps = state => { + export default connect( mapStateToProps )(Score); \ No newline at end of file diff --git a/src/reducers/index.js b/src/reducers/index.js index 8a9213e..ea08393 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,8 +1,15 @@ import { combineReducers } from 'redux'; import questionsResults from './QuestionsResults'; -import scoreFetch from './ScoreFetch'; +import score from './score'; +import correct_answer from './correct_answer'; + + + export default combineReducers({ - questionsResults + questionsResults, + score, + correct_answer + }); diff --git a/src/reducers/scoreFetch.js b/src/reducers/scoreFetch.js deleted file mode 100644 index a824b44..0000000 --- a/src/reducers/scoreFetch.js +++ /dev/null @@ -1,19 +0,0 @@ - -function scoreFetch(state = { - score: 0 - }, action){ - switch (action.type) { - case 'SCORE_FETCH': - // console.log(action.questions); - - const currentScore = {score: action.score} - return currentScore; - - //return = action of returning the value of 'questions' in the action object. - - default: - return state - } - } - - export default scoreFetch; \ No newline at end of file From 3a01387afe1c35d5a209636ce80264ad39eff931 Mon Sep 17 00:00:00 2001 From: Chris Phillips Date: Sun, 4 Nov 2018 20:35:14 +0000 Subject: [PATCH 5/6] adding missing reducers --- src/reducers/correct_answer.js | 21 +++++++++++++++++++++ src/reducers/score.js | 21 +++++++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 src/reducers/correct_answer.js create mode 100644 src/reducers/score.js diff --git a/src/reducers/correct_answer.js b/src/reducers/correct_answer.js new file mode 100644 index 0000000..0bf1535 --- /dev/null +++ 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; \ No newline at end of file diff --git a/src/reducers/score.js b/src/reducers/score.js new file mode 100644 index 0000000..72f9b11 --- /dev/null +++ b/src/reducers/score.js @@ -0,0 +1,21 @@ + +function score(state = 0, action){ + switch (action.type) { + // case 'SCORE_FETCH': + // // console.log(action.questions); + + // const currentScore = {score: action.score} + + // return currentScore; + + //return = action of returning the value of 'questions' in the action object. + case 'SCORE_ADD': + console.log(action) + return action.answerIsCorrect ? state + 1 : state -1 + + default: + return state + } + } + + export default score; \ No newline at end of file From 72477803d1aa1b135ef7830379df264dc6c7764f Mon Sep 17 00:00:00 2001 From: Chris Phillips Date: Mon, 5 Nov 2018 22:25:46 +0000 Subject: [PATCH 6/6] quick styling, cyclical fetch --- index.html | 1 + package-lock.json | 33 ++++++----------- package.json | 1 + src/actions/index.js | 39 ++++++++++++++------ src/components/App.js | 5 +-- src/components/Nav.js | 5 +-- src/components/Questions.js | 19 +++++++--- src/components/Score.js | 25 ++++++++++++- src/containers/QuestionsContainer.js | 12 ++++-- src/img/0.jpg | Bin 0 -> 12493 bytes src/reducers/correct_answer.js | 2 +- src/reducers/gifs.js | 13 +++++++ src/reducers/image.js | 13 +++++++ src/reducers/index.js | 5 ++- src/reducers/score.js | 9 +---- style.css | 53 ++++++++++++++++++++++++++- 16 files changed, 171 insertions(+), 64 deletions(-) create mode 100644 src/img/0.jpg create mode 100644 src/reducers/gifs.js create mode 100644 src/reducers/image.js diff --git a/index.html b/index.html index 20c7415..7c071e3 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ Redux intro +
diff --git a/package-lock.json b/package-lock.json index 257abfd..bedd838 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3752,14 +3752,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3774,20 +3772,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -3904,8 +3899,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -3917,7 +3911,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3932,7 +3925,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3940,14 +3932,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -3966,7 +3956,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -4047,8 +4036,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -4060,7 +4048,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -4182,7 +4169,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4688,6 +4674,11 @@ "minimalistic-assert": "^1.0.1" } }, + "he": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", + "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", diff --git a/package.json b/package.json index 7102a0e..c16cf96 100644 --- 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 index d20f1ab..ee04285 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -8,7 +8,9 @@ export function fetchQuestionAPI(){ .then(result => { dispatch(receiveQuestions(result)) dispatch(correct_answer(result)) - // console.log(result.results[0]) + 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 @@ -29,11 +31,35 @@ export function score(isCorrect){ 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){ @@ -46,15 +72,6 @@ export function receiveQuestions(result){ } } -// export function score(currentScore){ -// return { -// type: 'SCORE_FETCH', -// score: currentScore //to complete - -// //questions refers to a variable -// //result = result of fetch -// } -// } export function countDown() { diff --git a/src/components/App.js b/src/components/App.js index 93eba63..ba98808 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -7,12 +7,9 @@ import Nav from '../components/Nav'; class App extends React.Component { - - - render(){ return ( -
+