|
@@ -3,7 +3,7 @@ import { useState, useEffect, FormEvent, ChangeEvent, Fragment } from 'react';
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
|
|
// Typescript
|
|
|
-import { Query, SearchForm } from '../../../interfaces';
|
|
|
+import { Query, GeneralForm } from '../../../interfaces';
|
|
|
|
|
|
// Components
|
|
|
import { CustomQueries } from './CustomQueries/CustomQueries';
|
|
@@ -12,7 +12,7 @@ import { CustomQueries } from './CustomQueries/CustomQueries';
|
|
|
import { Button, SettingsHeadline, InputGroup } from '../../UI';
|
|
|
|
|
|
// Utils
|
|
|
-import { inputHandler, searchSettingsTemplate } from '../../../utility';
|
|
|
+import { inputHandler, generalSettingsTemplate } from '../../../utility';
|
|
|
|
|
|
// Data
|
|
|
import { queries } from '../../../utility/searchQueries.json';
|
|
@@ -22,16 +22,20 @@ import { State } from '../../../store/reducers';
|
|
|
import { bindActionCreators } from 'redux';
|
|
|
import { actionCreators } from '../../../store';
|
|
|
|
|
|
-export const SearchSettings = (): JSX.Element => {
|
|
|
- const { loading, customQueries, config } = useSelector(
|
|
|
- (state: State) => state.config
|
|
|
- );
|
|
|
+export const GeneralSettings = (): JSX.Element => {
|
|
|
+ const {
|
|
|
+ config: { loading, customQueries, config },
|
|
|
+ bookmarks: { categories },
|
|
|
+ } = useSelector((state: State) => state);
|
|
|
|
|
|
const dispatch = useDispatch();
|
|
|
- const { updateConfig } = bindActionCreators(actionCreators, dispatch);
|
|
|
+ const { updateConfig, sortApps, sortCategories, sortBookmarks } =
|
|
|
+ bindActionCreators(actionCreators, dispatch);
|
|
|
|
|
|
// Initial state
|
|
|
- const [formData, setFormData] = useState<SearchForm>(searchSettingsTemplate);
|
|
|
+ const [formData, setFormData] = useState<GeneralForm>(
|
|
|
+ generalSettingsTemplate
|
|
|
+ );
|
|
|
|
|
|
// Get config
|
|
|
useEffect(() => {
|
|
@@ -46,6 +50,16 @@ export const SearchSettings = (): JSX.Element => {
|
|
|
|
|
|
// Save settings
|
|
|
await updateConfig(formData);
|
|
|
+
|
|
|
+ // Sort entities with new settings
|
|
|
+ if (formData.useOrdering !== config.useOrdering) {
|
|
|
+ sortApps();
|
|
|
+ sortCategories();
|
|
|
+
|
|
|
+ for (let { id } of categories) {
|
|
|
+ sortBookmarks(id);
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
// Input handler
|
|
@@ -53,7 +67,7 @@ export const SearchSettings = (): JSX.Element => {
|
|
|
e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
|
|
|
options?: { isNumber?: boolean; isBool?: boolean }
|
|
|
) => {
|
|
|
- inputHandler<SearchForm>({
|
|
|
+ inputHandler<GeneralForm>({
|
|
|
e,
|
|
|
options,
|
|
|
setStateHandler: setFormData,
|
|
@@ -63,40 +77,70 @@ export const SearchSettings = (): JSX.Element => {
|
|
|
|
|
|
return (
|
|
|
<Fragment>
|
|
|
- {/* GENERAL SETTINGS */}
|
|
|
<form
|
|
|
onSubmit={(e) => formSubmitHandler(e)}
|
|
|
style={{ marginBottom: '30px' }}
|
|
|
>
|
|
|
+ {/* === GENERAL OPTIONS === */}
|
|
|
<SettingsHeadline text="General" />
|
|
|
+ {/* SORT TYPE */}
|
|
|
<InputGroup>
|
|
|
- <label htmlFor="defaultSearchProvider">Default search provider</label>
|
|
|
+ <label htmlFor="useOrdering">Sorting type</label>
|
|
|
<select
|
|
|
- id="defaultSearchProvider"
|
|
|
- name="defaultSearchProvider"
|
|
|
- value={formData.defaultSearchProvider}
|
|
|
+ id="useOrdering"
|
|
|
+ name="useOrdering"
|
|
|
+ value={formData.useOrdering}
|
|
|
onChange={(e) => inputChangeHandler(e)}
|
|
|
>
|
|
|
- {[...queries, ...customQueries].map((query: Query, idx) => {
|
|
|
- const isCustom = idx >= queries.length;
|
|
|
+ <option value="createdAt">By creation date</option>
|
|
|
+ <option value="name">Alphabetical order</option>
|
|
|
+ <option value="orderId">Custom order</option>
|
|
|
+ </select>
|
|
|
+ </InputGroup>
|
|
|
|
|
|
- return (
|
|
|
- <option key={idx} value={query.prefix}>
|
|
|
- {isCustom && '+'} {query.name}
|
|
|
- </option>
|
|
|
- );
|
|
|
- })}
|
|
|
+ {/* === APPS OPTIONS === */}
|
|
|
+ <SettingsHeadline text="Apps" />
|
|
|
+ {/* PIN APPS */}
|
|
|
+ <InputGroup>
|
|
|
+ <label htmlFor="pinAppsByDefault">
|
|
|
+ Pin new applications by default
|
|
|
+ </label>
|
|
|
+ <select
|
|
|
+ id="pinAppsByDefault"
|
|
|
+ name="pinAppsByDefault"
|
|
|
+ value={formData.pinAppsByDefault ? 1 : 0}
|
|
|
+ onChange={(e) => inputChangeHandler(e, { isBool: true })}
|
|
|
+ >
|
|
|
+ <option value={1}>True</option>
|
|
|
+ <option value={0}>False</option>
|
|
|
</select>
|
|
|
</InputGroup>
|
|
|
|
|
|
+ {/* APPS OPPENING */}
|
|
|
<InputGroup>
|
|
|
- <label htmlFor="searchSameTab">
|
|
|
- Open search results in the same tab
|
|
|
+ <label htmlFor="appsSameTab">Open applications in the same tab</label>
|
|
|
+ <select
|
|
|
+ id="appsSameTab"
|
|
|
+ name="appsSameTab"
|
|
|
+ value={formData.appsSameTab ? 1 : 0}
|
|
|
+ onChange={(e) => inputChangeHandler(e, { isBool: true })}
|
|
|
+ >
|
|
|
+ <option value={1}>True</option>
|
|
|
+ <option value={0}>False</option>
|
|
|
+ </select>
|
|
|
+ </InputGroup>
|
|
|
+
|
|
|
+ {/* === BOOKMARKS OPTIONS === */}
|
|
|
+ <SettingsHeadline text="Bookmarks" />
|
|
|
+ {/* PIN CATEGORIES */}
|
|
|
+ <InputGroup>
|
|
|
+ <label htmlFor="pinCategoriesByDefault">
|
|
|
+ Pin new categories by default
|
|
|
</label>
|
|
|
<select
|
|
|
- id="searchSameTab"
|
|
|
- name="searchSameTab"
|
|
|
- value={formData.searchSameTab ? 1 : 0}
|
|
|
+ id="pinCategoriesByDefault"
|
|
|
+ name="pinCategoriesByDefault"
|
|
|
+ value={formData.pinCategoriesByDefault ? 1 : 0}
|
|
|
onChange={(e) => inputChangeHandler(e, { isBool: true })}
|
|
|
>
|
|
|
<option value={1}>True</option>
|
|
@@ -104,12 +148,15 @@ export const SearchSettings = (): JSX.Element => {
|
|
|
</select>
|
|
|
</InputGroup>
|
|
|
|
|
|
+ {/* BOOKMARKS OPPENING */}
|
|
|
<InputGroup>
|
|
|
- <label htmlFor="hideSearch">Hide search bar</label>
|
|
|
+ <label htmlFor="bookmarksSameTab">
|
|
|
+ Open bookmarks in the same tab
|
|
|
+ </label>
|
|
|
<select
|
|
|
- id="hideSearch"
|
|
|
- name="hideSearch"
|
|
|
- value={formData.hideSearch ? 1 : 0}
|
|
|
+ id="bookmarksSameTab"
|
|
|
+ name="bookmarksSameTab"
|
|
|
+ value={formData.bookmarksSameTab ? 1 : 0}
|
|
|
onChange={(e) => inputChangeHandler(e, { isBool: true })}
|
|
|
>
|
|
|
<option value={1}>True</option>
|
|
@@ -117,12 +164,36 @@ export const SearchSettings = (): JSX.Element => {
|
|
|
</select>
|
|
|
</InputGroup>
|
|
|
|
|
|
+ {/* SEARCH SETTINGS */}
|
|
|
+ <SettingsHeadline text="Search" />
|
|
|
<InputGroup>
|
|
|
- <label htmlFor="disableAutofocus">Disable search bar autofocus</label>
|
|
|
+ <label htmlFor="defaultSearchProvider">Default search provider</label>
|
|
|
<select
|
|
|
- id="disableAutofocus"
|
|
|
- name="disableAutofocus"
|
|
|
- value={formData.disableAutofocus ? 1 : 0}
|
|
|
+ id="defaultSearchProvider"
|
|
|
+ name="defaultSearchProvider"
|
|
|
+ value={formData.defaultSearchProvider}
|
|
|
+ onChange={(e) => inputChangeHandler(e)}
|
|
|
+ >
|
|
|
+ {[...queries, ...customQueries].map((query: Query, idx) => {
|
|
|
+ const isCustom = idx >= queries.length;
|
|
|
+
|
|
|
+ return (
|
|
|
+ <option key={idx} value={query.prefix}>
|
|
|
+ {isCustom && '+'} {query.name}
|
|
|
+ </option>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </select>
|
|
|
+ </InputGroup>
|
|
|
+
|
|
|
+ <InputGroup>
|
|
|
+ <label htmlFor="searchSameTab">
|
|
|
+ Open search results in the same tab
|
|
|
+ </label>
|
|
|
+ <select
|
|
|
+ id="searchSameTab"
|
|
|
+ name="searchSameTab"
|
|
|
+ value={formData.searchSameTab ? 1 : 0}
|
|
|
onChange={(e) => inputChangeHandler(e, { isBool: true })}
|
|
|
>
|
|
|
<option value={1}>True</option>
|