1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-24 05:39:35 +02:00

Sorting settings. Sort apps on change/add/update

This commit is contained in:
unknown 2021-06-18 10:38:05 +02:00
parent 8974fb3b49
commit 754dc3a7b9
9 changed files with 124 additions and 27 deletions

View file

@ -2,7 +2,7 @@ import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
// Redux
import { connect } from 'react-redux';
import { createNotification, updateConfig } from '../../../store/actions';
import { createNotification, updateConfig, sortApps } from '../../../store/actions';
// Typescript
import { GlobalState, NewNotification, SettingsForm } from '../../../interfaces';
@ -17,6 +17,7 @@ import { searchConfig } from '../../../utility';
interface ComponentProps {
createNotification: (notification: NewNotification) => void;
updateConfig: (formData: SettingsForm) => void;
sortApps: () => void;
loading: boolean;
}
@ -26,7 +27,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
customTitle: document.title,
pinAppsByDefault: 1,
pinCategoriesByDefault: 1,
hideHeader: 0
hideHeader: 0,
useOrdering: 'createdAt'
})
// Get config
@ -35,7 +37,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
customTitle: searchConfig('customTitle', 'Flame'),
pinAppsByDefault: searchConfig('pinAppsByDefault', 1),
pinCategoriesByDefault: searchConfig('pinCategoriesByDefault', 1),
hideHeader: searchConfig('hideHeader', 0)
hideHeader: searchConfig('hideHeader', 0),
useOrdering: searchConfig('useOrdering', 'createdAt')
})
}, [props.loading]);
@ -46,8 +49,11 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
// Save settings
await props.updateConfig(formData);
// update local page title
// Update local page title
document.title = formData.customTitle;
// Get sorted apps
props.sortApps();
}
// Input handler
@ -113,6 +119,19 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
<option value={0}>False</option>
</select>
</InputGroup>
<InputGroup>
<label htmlFor='useOrdering'>Sorting type</label>
<select
id='useOrdering'
name='useOrdering'
value={formData.useOrdering}
onChange={(e) => inputChangeHandler(e)}
>
<option value='createdAt'>By creation date</option>
<option value='name'>Alphabetical order</option>
<option value='orderId'>Custom order</option>
</select>
</InputGroup>
<Button>Save changes</Button>
</form>
)
@ -124,4 +143,4 @@ const mapStateToProps = (state: GlobalState) => {
}
}
export default connect(mapStateToProps, { createNotification, updateConfig })(OtherSettings);
export default connect(mapStateToProps, { createNotification, updateConfig, sortApps })(OtherSettings);