@@ -3,7 +3,7 @@ import { useState, useEffect, FormEvent, ChangeEvent, Fragment } from 'react';
3
3
import { useDispatch , useSelector } from 'react-redux' ;
4
4
5
5
// Typescript
6
- import { Query , SearchForm } from '../../../interfaces' ;
6
+ import { Query , GeneralForm } from '../../../interfaces' ;
7
7
8
8
// Components
9
9
import { CustomQueries } from './CustomQueries/CustomQueries' ;
@@ -12,7 +12,7 @@ import { CustomQueries } from './CustomQueries/CustomQueries';
12
12
import { Button , SettingsHeadline , InputGroup } from '../../UI' ;
13
13
14
14
// Utils
15
- import { inputHandler , searchSettingsTemplate } from '../../../utility' ;
15
+ import { inputHandler , generalSettingsTemplate } from '../../../utility' ;
16
16
17
17
// Data
18
18
import { queries } from '../../../utility/searchQueries.json' ;
@@ -22,16 +22,20 @@ import { State } from '../../../store/reducers';
22
22
import { bindActionCreators } from 'redux' ;
23
23
import { actionCreators } from '../../../store' ;
24
24
25
- export const SearchSettings = ( ) : JSX . Element => {
26
- const { loading, customQueries, config } = useSelector (
27
- ( state : State ) => state . config
28
- ) ;
25
+ export const GeneralSettings = ( ) : JSX . Element => {
26
+ const {
27
+ config : { loading, customQueries, config } ,
28
+ bookmarks : { categories } ,
29
+ } = useSelector ( ( state : State ) => state ) ;
29
30
30
31
const dispatch = useDispatch ( ) ;
31
- const { updateConfig } = bindActionCreators ( actionCreators , dispatch ) ;
32
+ const { updateConfig, sortApps, sortCategories, sortBookmarks } =
33
+ bindActionCreators ( actionCreators , dispatch ) ;
32
34
33
35
// Initial state
34
- const [ formData , setFormData ] = useState < SearchForm > ( searchSettingsTemplate ) ;
36
+ const [ formData , setFormData ] = useState < GeneralForm > (
37
+ generalSettingsTemplate
38
+ ) ;
35
39
36
40
// Get config
37
41
useEffect ( ( ) => {
@@ -46,14 +50,24 @@ export const SearchSettings = (): JSX.Element => {
46
50
47
51
// Save settings
48
52
await updateConfig ( formData ) ;
53
+
54
+ // Sort entities with new settings
55
+ if ( formData . useOrdering !== config . useOrdering ) {
56
+ sortApps ( ) ;
57
+ sortCategories ( ) ;
58
+
59
+ for ( let { id } of categories ) {
60
+ sortBookmarks ( id ) ;
61
+ }
62
+ }
49
63
} ;
50
64
51
65
// Input handler
52
66
const inputChangeHandler = (
53
67
e : ChangeEvent < HTMLInputElement | HTMLSelectElement > ,
54
68
options ?: { isNumber ?: boolean ; isBool ?: boolean }
55
69
) => {
56
- inputHandler < SearchForm > ( {
70
+ inputHandler < GeneralForm > ( {
57
71
e,
58
72
options,
59
73
setStateHandler : setFormData ,
@@ -63,66 +77,123 @@ export const SearchSettings = (): JSX.Element => {
63
77
64
78
return (
65
79
< Fragment >
66
- { /* GENERAL SETTINGS */ }
67
80
< form
68
81
onSubmit = { ( e ) => formSubmitHandler ( e ) }
69
82
style = { { marginBottom : '30px' } }
70
83
>
84
+ { /* === GENERAL OPTIONS === */ }
71
85
< SettingsHeadline text = "General" />
86
+ { /* SORT TYPE */ }
72
87
< InputGroup >
73
- < label htmlFor = "defaultSearchProvider" > Default search provider </ label >
88
+ < label htmlFor = "useOrdering" > Sorting type </ label >
74
89
< select
75
- id = "defaultSearchProvider "
76
- name = "defaultSearchProvider "
77
- value = { formData . defaultSearchProvider }
90
+ id = "useOrdering "
91
+ name = "useOrdering "
92
+ value = { formData . useOrdering }
78
93
onChange = { ( e ) => inputChangeHandler ( e ) }
79
94
>
80
- { [ ...queries , ...customQueries ] . map ( ( query : Query , idx ) => {
81
- const isCustom = idx >= queries . length ;
95
+ < option value = "createdAt" > By creation date</ option >
96
+ < option value = "name" > Alphabetical order</ option >
97
+ < option value = "orderId" > Custom order</ option >
98
+ </ select >
99
+ </ InputGroup >
82
100
83
- return (
84
- < option key = { idx } value = { query . prefix } >
85
- { isCustom && '+' } { query . name }
86
- </ option >
87
- ) ;
88
- } ) }
101
+ { /* === APPS OPTIONS === */ }
102
+ < SettingsHeadline text = "Apps" />
103
+ { /* PIN APPS */ }
104
+ < InputGroup >
105
+ < label htmlFor = "pinAppsByDefault" >
106
+ Pin new applications by default
107
+ </ label >
108
+ < select
109
+ id = "pinAppsByDefault"
110
+ name = "pinAppsByDefault"
111
+ value = { formData . pinAppsByDefault ? 1 : 0 }
112
+ onChange = { ( e ) => inputChangeHandler ( e , { isBool : true } ) }
113
+ >
114
+ < option value = { 1 } > True</ option >
115
+ < option value = { 0 } > False</ option >
89
116
</ select >
90
117
</ InputGroup >
91
118
119
+ { /* APPS OPPENING */ }
92
120
< InputGroup >
93
- < label htmlFor = "searchSameTab" >
94
- Open search results in the same tab
121
+ < label htmlFor = "appsSameTab" > Open applications in the same tab</ label >
122
+ < select
123
+ id = "appsSameTab"
124
+ name = "appsSameTab"
125
+ value = { formData . appsSameTab ? 1 : 0 }
126
+ onChange = { ( e ) => inputChangeHandler ( e , { isBool : true } ) }
127
+ >
128
+ < option value = { 1 } > True</ option >
129
+ < option value = { 0 } > False</ option >
130
+ </ select >
131
+ </ InputGroup >
132
+
133
+ { /* === BOOKMARKS OPTIONS === */ }
134
+ < SettingsHeadline text = "Bookmarks" />
135
+ { /* PIN CATEGORIES */ }
136
+ < InputGroup >
137
+ < label htmlFor = "pinCategoriesByDefault" >
138
+ Pin new categories by default
95
139
</ label >
96
140
< select
97
- id = "searchSameTab "
98
- name = "searchSameTab "
99
- value = { formData . searchSameTab ? 1 : 0 }
141
+ id = "pinCategoriesByDefault "
142
+ name = "pinCategoriesByDefault "
143
+ value = { formData . pinCategoriesByDefault ? 1 : 0 }
100
144
onChange = { ( e ) => inputChangeHandler ( e , { isBool : true } ) }
101
145
>
102
146
< option value = { 1 } > True</ option >
103
147
< option value = { 0 } > False</ option >
104
148
</ select >
105
149
</ InputGroup >
106
150
151
+ { /* BOOKMARKS OPPENING */ }
107
152
< InputGroup >
108
- < label htmlFor = "hideSearch" > Hide search bar</ label >
153
+ < label htmlFor = "bookmarksSameTab" >
154
+ Open bookmarks in the same tab
155
+ </ label >
109
156
< select
110
- id = "hideSearch "
111
- name = "hideSearch "
112
- value = { formData . hideSearch ? 1 : 0 }
157
+ id = "bookmarksSameTab "
158
+ name = "bookmarksSameTab "
159
+ value = { formData . bookmarksSameTab ? 1 : 0 }
113
160
onChange = { ( e ) => inputChangeHandler ( e , { isBool : true } ) }
114
161
>
115
162
< option value = { 1 } > True</ option >
116
163
< option value = { 0 } > False</ option >
117
164
</ select >
118
165
</ InputGroup >
119
166
167
+ { /* SEARCH SETTINGS */ }
168
+ < SettingsHeadline text = "Search" />
120
169
< InputGroup >
121
- < label htmlFor = "disableAutofocus" > Disable search bar autofocus </ label >
170
+ < label htmlFor = "defaultSearchProvider" > Default search provider </ label >
122
171
< select
123
- id = "disableAutofocus"
124
- name = "disableAutofocus"
125
- value = { formData . disableAutofocus ? 1 : 0 }
172
+ id = "defaultSearchProvider"
173
+ name = "defaultSearchProvider"
174
+ value = { formData . defaultSearchProvider }
175
+ onChange = { ( e ) => inputChangeHandler ( e ) }
176
+ >
177
+ { [ ...queries , ...customQueries ] . map ( ( query : Query , idx ) => {
178
+ const isCustom = idx >= queries . length ;
179
+
180
+ return (
181
+ < option key = { idx } value = { query . prefix } >
182
+ { isCustom && '+' } { query . name }
183
+ </ option >
184
+ ) ;
185
+ } ) }
186
+ </ select >
187
+ </ InputGroup >
188
+
189
+ < InputGroup >
190
+ < label htmlFor = "searchSameTab" >
191
+ Open search results in the same tab
192
+ </ label >
193
+ < select
194
+ id = "searchSameTab"
195
+ name = "searchSameTab"
196
+ value = { formData . searchSameTab ? 1 : 0 }
126
197
onChange = { ( e ) => inputChangeHandler ( e , { isBool : true } ) }
127
198
>
128
199
< option value = { 1 } > True</ option >
0 commit comments