-
Notifications
You must be signed in to change notification settings - Fork 0
/
action-creators.js
111 lines (94 loc) · 2.57 KB
/
action-creators.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import axios from 'axios';
import {
MOVE_CLOCKWISE,
MOVE_COUNTERCLOCKWISE,
SET_SELECTED_ANSWER,
SET_INFO_MESSAGE,
INPUT_CHANGE,
RESET_FORM,
SET_QUIZ_INTO_STATE,
} from "./action-types";
// ❗ You don't need to add extra action creators to achieve MVP
export function moveClockwise() {
console.log("clockwise is dispacthed");
return {
type: MOVE_CLOCKWISE
}
}
export function moveCounterClockwise() {
console.log("counterClocwise is dispatched");
return {
type: MOVE_COUNTERCLOCKWISE
};
}
export function selectAnswer(answer) {
return { type: SET_SELECTED_ANSWER, payload: answer };
}
export function setMessage(message) {
return {
type: SET_INFO_MESSAGE,
payload: message
};
}
export function setQuiz(quiz) {
return {
type: SET_QUIZ_INTO_STATE,
payload: quiz
}
}
export function inputChange(name, value) {
return {
type: INPUT_CHANGE,
payload: { name, value }
}
}
export function resetForm() {
return {
type: RESET_FORM
}
}
// ❗ Async action creators
export function fetchQuiz() {
return async function (dispatch) {
console.log('Fetching quiz...');
axios.get(' http://localhost:9000/api/quiz/next').then(res => {
dispatch(setQuiz(res.data))
})
// First, dispatch an action to reset the quiz state (so the "Loading next quiz..." message can display)
// On successful GET:
// - Dispatch an action to send the obtained quiz to its state
}
}
export function postAnswer(quiz, answer) {
return async function (dispatch) {
// On successful POST:
// - Dispatch an action to reset the selected answer state
// - Dispatch an action to set the server message to state
// - Dispatch the fetching of the next quiz
const body = {
quiz_id: quiz.quiz_id,
answer_id: answer.answer_id
}
axios.post('http://localhost:9000/api/quiz/answer', body).then(res => {
dispatch(setMessage(res.data.message));
dispatch(selectAnswer(null));
dispatch(fetchQuiz());
})
}
};
export function postQuiz(quiz) {
return async function (dispatch) {
const body = {
"question_text": quiz.newQuestion,
"true_answer_text": quiz.newTrueAnswer,
"false_answer_text": quiz.newFalseAnswer
};
axios.post('http://localhost:9000/api/quiz/new', body)
.then(res => {
const message = `Congrats: "${quiz.newQuestion}" is a great question!`
dispatch(setMessage(message));
dispatch(resetForm());
})
}
}
// ❗ On promise rejections, use log statements or breakpoints, and put an appropriate error message in state