diff --git a/src/hooks/useCommonHooks.ts b/src/hooks/useCommonHooks.ts index 50a8af6..d513838 100644 --- a/src/hooks/useCommonHooks.ts +++ b/src/hooks/useCommonHooks.ts @@ -32,6 +32,13 @@ const initialSettings: Settings = { guacamoleHost: 'https://domain.example.com/guacamole', lat: 29.750950134386066, lon: -95.36220654860034, + messageSettingsSort: 'Oldest', + appSettingsSort: 'Custom', + bookmarkSettingsSort: 'Custom', + themesSettingsSort: 'Oldest', + providerSettingsSort: 'Oldest', + wolClientsSettingsSort: 'A>Z', + guacamoleClientsSettingsSort: 'A>Z', }; export function useCommonHooks() { diff --git a/src/pages/settings/components/Applications/Applications.tsx b/src/pages/settings/components/Applications/Applications.tsx index 06841e5..b7369a2 100644 --- a/src/pages/settings/components/Applications/Applications.tsx +++ b/src/pages/settings/components/Applications/Applications.tsx @@ -27,8 +27,8 @@ import type { Application } from 'types'; import DebouncedApplication from './DebouncedApplication'; export function Applications() { - const [sortBy, setSortBy] = useState('Custom'); const allIcons: any = { ...fa6, ...vsc, ...si }; + const { isMobile, reorder, theme, settings, updateSetting } = useCommonHooks(); const defaultApplication: Application = { id: null, name: '', @@ -65,7 +65,7 @@ export function Applications() { ) .sort((a: Application, b: Application) => { if (!dragging) { - switch (sortBy) { + switch (settings.appSettingsSort) { case 'A>Z': return a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1; case 'Z>A': @@ -89,7 +89,6 @@ export function Applications() { return a.index > b.index ? 1 : -1; }); const [applicationList, setApplicationList] = useState([]); - const { isMobile, reorder, theme } = useCommonHooks(); const { mutateAsync } = useMutationAPI(); const [isOpen, setIsOpen] = useState(false); const [isLoading, setIsLoading] = useState(false); @@ -166,8 +165,10 @@ export function Applications() { searchPlaceholder={'Search Applications...'} isLoading={isLoading} setIsLoading={setIsLoading} - sortBy={sortBy} - setSortBy={setSortBy} + sortBy={settings.appSettingsSort} + setSortBy={(value) => { + updateSetting('appSettingsSort', value); + }} customSearchEnabled /> {modalOpened && ( diff --git a/src/pages/settings/components/Bookmarks/Bookmarks.tsx b/src/pages/settings/components/Bookmarks/Bookmarks.tsx index 49c1b3c..eba77a7 100644 --- a/src/pages/settings/components/Bookmarks/Bookmarks.tsx +++ b/src/pages/settings/components/Bookmarks/Bookmarks.tsx @@ -19,7 +19,7 @@ import type { Bookmark, BookmarkGroup } from 'types'; import DebouncedGroupSettingsItem from './DebouncedGroupSettingsItem'; export function Bookmarks() { - const [sortBy, setSortBy] = useState('Custom'); + const { isMobile, reorder, theme, settings, updateSetting } = useCommonHooks(); const defaultGroup = { id: null, categoryName: '', @@ -45,7 +45,6 @@ export function Bookmarks() { }); const [groups, setGroups] = useState([]); const [groupList, setGroupList] = useState([]); - const { isMobile, reorder, theme } = useCommonHooks(); const { mutateAsync } = useMutationAPI(); const [searchValue, setSearchValue] = useState(''); const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500); @@ -103,7 +102,7 @@ export function Bookmarks() { const groupList = [...new Set([...foundBookmarkGroups, ...foundGroups])].sort( (a: BookmarkGroup, b: BookmarkGroup) => { if (!dragging) { - switch (sortBy) { + switch (settings.bookmarkSettingsSort) { case 'A>Z': return a.categoryName.toLocaleLowerCase() > b.categoryName.toLocaleLowerCase() @@ -138,7 +137,13 @@ export function Bookmarks() { if (debouncedGroupSearch === searchValue) { setIsLoading(false); } - }, [groupData, groupsIsFetched, debouncedGroupSearch, sortBy, dragging]); + }, [ + groupData, + groupsIsFetched, + debouncedGroupSearch, + settings.bookmarkSettingsSort, + dragging, + ]); useEffect(() => { if (groupList.length > 0 && groupList !== groups) { @@ -256,8 +261,10 @@ export function Bookmarks() { searchPlaceholder={'Search Bookmarks...'} isLoading={isLoading} setIsLoading={setIsLoading} - sortBy={sortBy} - setSortBy={setSortBy} + sortBy={settings.bookmarkSettingsSort} + setSortBy={(value) => { + updateSetting('bookmarkSettingsSort', value); + }} customSearchEnabled /> {dragging ? ( diff --git a/src/pages/settings/components/GuacamoleClients/GuacamoleClients.tsx b/src/pages/settings/components/GuacamoleClients/GuacamoleClients.tsx index 03d8283..9e13950 100644 --- a/src/pages/settings/components/GuacamoleClients/GuacamoleClients.tsx +++ b/src/pages/settings/components/GuacamoleClients/GuacamoleClients.tsx @@ -23,7 +23,7 @@ import DebouncedGuacamoleClient from './DebouncedGuacamoleClient'; import GuacamoleClientSettingsItem from './GuacamoleClientSettingsItem'; export function GuacamoleClients() { - const [sortBy, setSortBy] = useState('Oldest'); + const { isMobile, theme, settings, updateSetting } = useCommonHooks(); const defaultGuacamoleClient: GuacamoleClient = { id: undefined, clientName: '', @@ -58,7 +58,7 @@ export function GuacamoleClients() { .includes((debouncedSearch as string).toLowerCase()), ) .sort((a: GuacamoleClient, b: GuacamoleClient) => { - switch (sortBy) { + switch (settings.guacamoleClientsSettingsSort) { case 'A>Z': return a.clientName.toLocaleLowerCase() > b.clientName.toLocaleLowerCase() ? 1 @@ -82,7 +82,6 @@ export function GuacamoleClients() { } }) || []; const { mutateAsync } = useMutationAPI(); - const { isMobile, theme } = useCommonHooks(); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const [isOpen, setIsOpen] = useState(false); const [isLoading, setIsLoading] = useState(false); @@ -240,8 +239,10 @@ export function GuacamoleClients() { searchPlaceholder={'Search Clients...'} isLoading={isLoading} setIsLoading={setIsLoading} - sortBy={sortBy} - setSortBy={setSortBy} + sortBy={settings.guacamoleClientsSettingsSort} + setSortBy={(value) => { + updateSetting('guacamoleClientsSettingsSort', value); + }} customSearchEnabled={false} /> (''); const [debouncedSearch] = useDebouncedValue(searchValue, 500); - const { isMobile, theme } = useCommonHooks(); const { mutateAsync } = useMutationAPI(); const messages: Message[] = messageData @@ -40,7 +39,7 @@ export function Messages() { m.message.toLowerCase().includes((debouncedSearch as string).toLowerCase()), ) .sort((a: Message, b: Message) => { - switch (sortBy) { + switch (settings.messageSettingsSort) { case 'A>Z': return a.message.toLocaleLowerCase() > b.message.toLocaleLowerCase() ? 1 : -1; case 'Z>A': @@ -108,8 +107,10 @@ export function Messages() { searchPlaceholder={'Search Messages...'} isLoading={isLoading} setIsLoading={setIsLoading} - sortBy={sortBy} - setSortBy={setSortBy} + sortBy={settings.messageSettingsSort} + setSortBy={(value) => { + updateSetting('messageSettingsSort', value); + }} customSearchEnabled={false} /> {modalOpened && ( diff --git a/src/pages/settings/components/Search/SearchProviders.tsx b/src/pages/settings/components/Search/SearchProviders.tsx index 94332a5..607f2dc 100644 --- a/src/pages/settings/components/Search/SearchProviders.tsx +++ b/src/pages/settings/components/Search/SearchProviders.tsx @@ -36,7 +36,7 @@ import DebouncedSearchProvider from './DebouncedSearchProvider'; import SearchProviderSettingsItem from './SearchProviderSettingsItem'; export function SearchProviders() { - const [sortBy, setSortBy] = useState('Oldest'); + const { isMobile, theme, iconFilter, settings, updateSetting } = useCommonHooks(); const allIcons: any = { ...fa6, ...vsc, ...si }; const defaultProvider: Provider = { id: undefined, @@ -70,7 +70,7 @@ export function SearchProviders() { a.prefix.toLowerCase().includes((debouncedSearch as string).toLowerCase()), ) .sort((a: Provider, b: Provider) => { - switch (sortBy) { + switch (settings.providerSettingsSort) { case 'A>Z': return a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1; case 'Z>A': @@ -89,7 +89,6 @@ export function SearchProviders() { return 0; } }) ?? []; - const { isMobile, theme, iconFilter } = useCommonHooks(); const { mutateAsync } = useMutationAPI(); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const [isOpen, setIsOpen] = useState(false); @@ -303,8 +302,10 @@ export function SearchProviders() { searchPlaceholder={'Search Providers...'} isLoading={isLoading} setIsLoading={setIsLoading} - sortBy={sortBy} - setSortBy={setSortBy} + sortBy={settings.providerSettingsSort} + setSortBy={(value) => { + updateSetting('providerSettingsSort', value); + }} customSearchEnabled={false} /> (''); const [debouncedSearch] = useDebouncedValue(searchValue, 500); const allThemes: Theme[] = allThemeData @@ -36,7 +36,7 @@ export function Themes() { a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()), ) .sort((a: Theme, b: Theme) => { - switch (sortBy) { + switch (settings.themesSettingsSort) { case 'A>Z': return a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1; case 'Z>A': @@ -84,8 +84,6 @@ export function Themes() { ), ] as string[]; - const { settings, updateSetting, theme, isMobile } = useCommonHooks(); - const [selectedTheme, setSelectedTheme] = useState({ id: undefined, name: 'default', @@ -153,8 +151,10 @@ export function Themes() { searchPlaceholder={'Search Themes...'} isLoading={isLoading} setIsLoading={setIsLoading} - sortBy={sortBy} - setSortBy={setSortBy} + sortBy={settings.themesSettingsSort} + setSortBy={(value) => { + updateSetting('themesSettingsSort', value); + }} customSearchEnabled={false} /> diff --git a/src/pages/settings/components/WoL/WolClients.tsx b/src/pages/settings/components/WoL/WolClients.tsx index 55bdb8a..1131bc7 100644 --- a/src/pages/settings/components/WoL/WolClients.tsx +++ b/src/pages/settings/components/WoL/WolClients.tsx @@ -19,6 +19,7 @@ import DebouncedWolClient from './DebouncedWolClient'; import WolClientSettingsItem from './WolClientSettingsItem'; export function WolClients() { + const { isMobile, theme, settings, updateSetting } = useCommonHooks(); const defaultWolClient: WolClient = { id: undefined, hostname: '', @@ -38,7 +39,6 @@ export function WolClients() { const { data: wolClientsData, isFetching: wolClientsIsFetching } = useQueryAPI({ endpoint: endpoint, }); - const [sortBy, setSortBy] = useState('Oldest'); const [searchValue, setSearchValue] = useState(''); const [debouncedSearch] = useDebouncedValue(searchValue, 500); const wolClients: WolClient[] = @@ -49,7 +49,7 @@ export function WolClients() { a.macAddress.toLowerCase().includes((debouncedSearch as string).toLowerCase()), ) .sort((a: WolClient, b: WolClient) => { - switch (sortBy) { + switch (settings.wolClientsSettingsSort) { case 'A>Z': return a.hostname.toLocaleLowerCase() > b.hostname.toLocaleLowerCase() ? 1 @@ -73,7 +73,6 @@ export function WolClients() { } }) || []; const { mutateAsync } = useMutationAPI(); - const { isMobile, theme } = useCommonHooks(); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const [isOpen, setIsOpen] = useState(false); const [isLoading, setIsLoading] = useState(false); @@ -179,8 +178,10 @@ export function WolClients() { searchPlaceholder={'Search Clients...'} isLoading={isLoading} setIsLoading={setIsLoading} - sortBy={sortBy} - setSortBy={setSortBy} + sortBy={settings.wolClientsSettingsSort} + setSortBy={(value) => { + updateSetting('wolClientsSettingsSort', value); + }} customSearchEnabled={false} />