Updates to settings to allow sorting

src/pages/settings/components/WoL/WolClients.tsx

@@ -38,14 +38,40 @@ 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[] =
-		wolClientsData.filter(
-			(a: WolClient) =>
-				a.hostname.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
-				a.macAddress.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
-		) || [];
+		wolClientsData
+			.filter(
+				(a: WolClient) =>
+					a.hostname.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
+					a.macAddress.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
+			)
+			.sort((a: WolClient, b: WolClient) => {
+				switch (sortBy) {
+					case 'A>Z':
+						return a.hostname.toLocaleLowerCase() > b.hostname.toLocaleLowerCase()
+							? 1
+							: -1;
+					case 'Z>A':
+						return a.hostname.toLocaleLowerCase() < b.hostname.toLocaleLowerCase()
+							? 1
+							: -1;
+					case 'Newest':
+						if (a.id && b.id) {
+							return a.id < b.id ? 1 : -1;
+						}
+						return -1;
+					case 'Oldest':
+						if (a.id && b.id) {
+							return a.id > b.id ? 1 : -1;
+						}
+						return -1;
+					default:
+						return 0;
+				}
+			}) || [];
 	const { mutateAsync } = useMutationAPI();
 	const { isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
@@ -151,8 +177,9 @@ export function WolClients() {
 				searchPlaceholder={'Search Clients...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
-				sortBy={''}
-				setSortBy={undefined}
+				sortBy={sortBy}
+				setSortBy={setSortBy}
+				customSearchEnabled={false}
 			/>
 			<Stack
 				mt={isMobile ? '10rem' : '6rem'}