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
|
import fuzzy from 'fuzzy';
import users from '../users';
const DEFAULT_STATE = {
results: [
's/18562',
],
searchText: '',
selectedResult: null,
isExactMatch: false,
};
function getSearchResults(allUsers, query) {
if (query.trim() === '') {
return [];
}
const allResults = fuzzy.filter(query, allUsers, {
extract: user => user.value,
});
const firstResults = allResults.splice(0, 4);
const userIds = firstResults.map(result => result.original.id);
return userIds;
}
const search = (state = DEFAULT_STATE, action) => {
switch (action.type) {
case 'SEARCH/SET_USER': {
const { user } = action;
if (user == null) {
return DEFAULT_STATE;
}
return {
...state,
results: [],
searchText: users.byId[user].value,
selectedResult: user,
isExactMatch: true,
};
}
case 'SEARCH/INPUT_CHANGE': {
const { searchText } = action;
const results = getSearchResults(users.allUsers, action.searchText);
let selectedResult = null;
let isExactMatch = false;
// Is the typed value exactly the same as the first result? Then show the
// appropiate icon instead of the generic search icon.
if ((results.length === 1) && (action.searchText === users.byId[results[0]].value)) {
[selectedResult] = results;
isExactMatch = true;
}
return {
...state,
results,
searchText,
selectedResult,
isExactMatch,
};
}
case 'SEARCH/CHANGE_SELECTED_RESULT': {
const { results, isExactMatch } = state;
if (isExactMatch) return state;
const prevSelectedResult = state.selectedResult;
const prevSelectedResultIndex = results.indexOf(prevSelectedResult);
let nextSelectedResultIndex =
prevSelectedResultIndex + action.relativeChange;
if (nextSelectedResultIndex < -1) {
nextSelectedResultIndex = results.length - 1;
} else if (nextSelectedResultIndex > results.length - 1) {
nextSelectedResultIndex = -1;
}
const nextSelectedResult =
nextSelectedResultIndex === -1
? null
: results[nextSelectedResultIndex];
return {
...state,
selectedResult: nextSelectedResult,
};
}
default:
return state;
}
};
export default search;
export const _test = {
DEFAULT_STATE,
};
|