Added persistent sort to more locations

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() {

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<Application[]>([]);
-	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 && (

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<BookmarkGroup[]>([]);
 	const [groupList, setGroupList] = useState<BookmarkGroup[]>([]);
-	const { isMobile, reorder, theme } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [searchValue, setSearchValue] = useState<string | number>('');
 	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 ? (

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}
 			/>
 			<Stack

src/pages/settings/components/Messages/Messages.tsx

@@ -17,6 +17,7 @@ import type { Message } from 'types';
 import DebouncedMessage from './DebouncedMessage';
 
 export function Messages() {
+	const { isMobile, theme, settings, updateSetting } = useCommonHooks();
 	const endpoint = 'api/messages';
 	const { data: messageData, isFetching: messageDataIsFetching } = useQueryAPI({
 		endpoint: endpoint,
@@ -29,10 +30,8 @@ export function Messages() {
 			message: isNotEmpty('Message is required'),
 		},
 	});
-	const [sortBy, setSortBy] = useState('Oldest');
 	const [searchValue, setSearchValue] = useState<string | number>('');
 	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 && (

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}
 			/>
 			<Stack

src/pages/settings/components/Theming/Themes/Themes.tsx

@@ -24,11 +24,11 @@ import { ThemeCard } from './ThemeCard';
 import { ThemeModal } from './ThemeModal';
 
 export function Themes() {
+	const { settings, updateSetting, theme, isMobile } = useCommonHooks();
 	const backgroundsEndpoint = 'api/backgrounds';
 	const { data: allThemeData, isFetching: allThemeDataIsFetching } = useQueryAPI({
 		endpoint: 'api/themes',
 	});
-	const [sortBy, setSortBy] = useState('Oldest');
 	const [searchValue, setSearchValue] = useState<string | number>('');
 	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<Theme>({
 		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}
 			/>
 			<Stack mt={isMobile ? '11rem' : '7rem'} align='center'>

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<string | number>('');
 	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}
 			/>
 			<Stack

src/types/settings.ts

@@ -25,4 +25,11 @@ export interface Settings {
 	defaultFont: string;
 	lat: number;
 	lon: number;
+	messageSettingsSort: string;
+	appSettingsSort: string;
+	bookmarkSettingsSort: string;
+	themesSettingsSort: string;
+	providerSettingsSort: string;
+	wolClientsSettingsSort: string;
+	guacamoleClientsSettingsSort: string;
 }