116 lines
3.1 KiB
TypeScript
116 lines
3.1 KiB
TypeScript
import { Button, Menu, MultiSelect, NavLink, Switch } from '@mantine/core';
|
|
import { runWakeCommand, useCommonHooks, useQueryAPI } from 'hooks';
|
|
import { useEffect, useState } from 'react';
|
|
import { FiMenu, FiMonitor, FiShuffle } from 'react-icons/fi';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { buttonClasses, menuClasses, navLinkClasses, selectClasses } from 'styles';
|
|
|
|
function SettingsButton() {
|
|
const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
|
|
const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
|
|
const navigate = useNavigate();
|
|
const {
|
|
currentTheme,
|
|
setCurrentTheme,
|
|
handleThemeChange,
|
|
theme,
|
|
allThemes,
|
|
appFilter,
|
|
setAppFilter,
|
|
bookmarkFilter,
|
|
setBookmarkFilter,
|
|
} = useCommonHooks();
|
|
|
|
useEffect(() => {
|
|
if (data) {
|
|
const list: [any] =
|
|
data.map((category: any) => {
|
|
return { value: category.filterName, label: category.filterName };
|
|
}) || [];
|
|
list.unshift({ value: 'All', label: 'All' });
|
|
setCategories(list);
|
|
}
|
|
}, [data, isFetched]);
|
|
|
|
return (
|
|
<Menu withinPortal={false} withArrow shadow='md' position='top'>
|
|
<Menu.Target>
|
|
<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
|
|
<FiMenu />
|
|
</Button>
|
|
</Menu.Target>
|
|
<Menu.Dropdown className={menuClasses.dropdown}>
|
|
<NavLink
|
|
label='Settings'
|
|
component='a'
|
|
className={navLinkClasses.defaultNavLink}
|
|
classNames={navLinkClasses}
|
|
onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
|
|
/>
|
|
<NavLink
|
|
label='Quick Actions'
|
|
className={navLinkClasses.defaultNavLink}
|
|
classNames={navLinkClasses}
|
|
>
|
|
<NavLink
|
|
label='Wake Dakota'
|
|
leftSection={<FiMonitor />}
|
|
onClick={() => runWakeCommand()}
|
|
className={navLinkClasses.defaultNavLink}
|
|
classNames={navLinkClasses}
|
|
/>
|
|
<NavLink
|
|
label='Shuffle Themes'
|
|
leftSection={
|
|
<Switch
|
|
labelPosition='left'
|
|
checked={currentTheme === 'random'}
|
|
onChange={(e) => {
|
|
setCurrentTheme(e.target.checked ? 'random' : theme.name);
|
|
}}
|
|
color={theme.primaryColor}
|
|
/>
|
|
}
|
|
onClick={() => {}}
|
|
className={navLinkClasses.defaultNavLink}
|
|
classNames={navLinkClasses}
|
|
/>
|
|
<NavLink
|
|
label='Random Theme'
|
|
leftSection={<FiShuffle />}
|
|
onClick={() => {
|
|
handleThemeChange(allThemes, true);
|
|
}}
|
|
className={navLinkClasses.defaultNavLink}
|
|
classNames={navLinkClasses}
|
|
/>
|
|
</NavLink>
|
|
<MultiSelect
|
|
label='App Filter'
|
|
data={categories ?? []}
|
|
defaultValue={appFilter}
|
|
withCheckIcon={false}
|
|
onChange={(data: any) => {
|
|
setAppFilter(data);
|
|
}}
|
|
classNames={selectClasses}
|
|
comboboxProps={{ withinPortal: false }}
|
|
/>
|
|
<MultiSelect
|
|
label='Bookmark Filter'
|
|
data={categories ?? []}
|
|
defaultValue={bookmarkFilter}
|
|
withCheckIcon={false}
|
|
onChange={(data: any) => {
|
|
setBookmarkFilter(data);
|
|
}}
|
|
classNames={selectClasses}
|
|
comboboxProps={{ withinPortal: false }}
|
|
/>
|
|
</Menu.Dropdown>
|
|
</Menu>
|
|
);
|
|
}
|
|
|
|
export default SettingsButton;
|