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
112
113
114
115
116
117
118
119
120
121
|
import {fetchApi} from "../../utils";
export const ADD = "ADD"
export const REQUEST_LIST = "REQUEST_LIST"
export const RECEIVE_LIST = "RECEIVE_LIST"
const defaultState = {
list: [],
isFetching: false,
actionsDuringFetch: [],
byId: {},
indexOf: {},
};
export default function makeList(actionType, fetchURL) {
function reduceList(state = defaultState, action = {}) {
if (action.type !== actionType) {
return state
}
// Handle cases where we finished fetching or are still fetching.
if (action.cmd === RECEIVE_LIST) {
let s = {
isFetching: false,
actionsDuringFetch: [],
list: action.list,
byId: {},
indexOf: {}
}
for (let i = 0; i < action.list.length; i++) {
let item = action.list[i]
s.byId[item.id] = item
s.indexOf[item.id] = i
}
for (action of state.actionsDuringFetch) {
s = reduceList(s, action)
}
return s
} else if (state.isFetching) {
return {
...state,
actionsDuringFetch: [...state.actionsDuringFetch, action]
}
}
switch (action.cmd) {
case ADD:
return {
list: [...state.list, action.item],
byId: {...state.byId, [action.item.id]: action.item},
indexOf: {...state.indexOf, [action.item.id]: state.list.length},
}
case REQUEST_LIST:
return {
...defaultState,
isFetching: true
}
default:
console.debug("unknown action", action.type)
return state
}
}
function addToList(item) {
return {
type: actionType,
cmd: ADD,
item
}
}
function updateList(action) {
/* This action creater takes all WebSocket events */
return dispatch => {
switch (action.cmd) {
case "add":
return dispatch(addToList(action.data))
case "reset":
return dispatch(fetchList())
default:
console.error("unknown list update", action)
}
}
}
function requestList() {
return {
type: actionType,
cmd: REQUEST_LIST,
}
}
function receiveList(list) {
return {
type: actionType,
cmd: RECEIVE_LIST,
list
}
}
function fetchList() {
return dispatch => {
dispatch(requestList())
fetchApi(fetchURL).then(response => {
return response.json().then(json => {
dispatch(receiveList(json.data))
})
})
}
}
return {reduceList, addToList, updateList, fetchList}
}
|
