Adding sorting to items in settings

src/pages/settings/components/Applications/Applications.tsx

@@ -27,6 +27,7 @@ import type { Application } from 'types';
 import DebouncedApplication from './DebouncedApplication';
 
 export function Applications() {
+	const [sortBy, setSortBy] = useState('Custom');
 	const allIcons: any = { ...fa6, ...vsc, ...si };
 	const defaultApplication: Application = {
 		id: null,
@@ -38,6 +39,7 @@ export function Applications() {
 		index: 0,
 		enabled: 1,
 	};
+	const [dragging, setDragging] = useState(false);
 	const [searchValue, setSearchValue] = useState<string | number>('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const form = useForm({
@@ -54,19 +56,41 @@ export function Applications() {
 	const { data: applicationData, isFetching: applicationDataIsFetching } = useQueryAPI({
 		endpoint: appsEndpoint,
 	});
-	const applications: Application[] =
-		applicationData
-			?.filter(
-				(a: Application) =>
-					a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
-					a.url.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
-					a.baseUrl.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
-			)
-			.sort((a: Application, b: Application) => (a.index > b.index ? 1 : -1)) || [];
+	const applications: Application[] = applicationData
+		?.filter(
+			(a: Application) =>
+				a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
+				a.url.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
+				a.baseUrl.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
+		)
+		.sort((a: Application, b: Application) => {
+			if (!dragging) {
+				switch (sortBy) {
+					case 'A>Z':
+						return a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1;
+					case 'Z>A':
+						return a.name.toLocaleLowerCase() < b.name.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;
+					case 'Custom':
+						return a.index > b.index ? 1 : -1;
+					default:
+						return 0;
+				}
+			}
+			return a.index > b.index ? 1 : -1;
+		});
 	const [applicationList, setApplicationList] = useState<Application[]>([]);
 	const { isMobile, reorder, theme } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
-	const [dragging, setDragging] = useState(false);
 	const [isOpen, setIsOpen] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 
@@ -104,7 +128,7 @@ export function Applications() {
 
 	useEffect(() => {
 		if (applicationList.length > 0 && applicationList !== applications) {
-			mutateAsync({
+			void mutateAsync({
 				method: 'PATCH',
 				endpoint: appsOrderEndpoint,
 				body: applicationList,
@@ -114,7 +138,7 @@ export function Applications() {
 	return (
 		<Stack>
 			<SettingsHeader
-				setDragging={applications.length > 0 ? setDragging : undefined}
+				setDragging={applications?.length > 0 ? setDragging : undefined}
 				openModal={openModal}
 				title={'Applications'}
 				tooltip={{
@@ -140,6 +164,8 @@ export function Applications() {
 				searchPlaceholder={'Search Applications...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
+				sortBy={sortBy}
+				setSortBy={setSortBy}
 			/>
 			{modalOpened && (
 				<AddItemModal
@@ -149,12 +175,12 @@ export function Applications() {
 					body={
 						<form
 							onSubmit={form.onSubmit((values) => {
-								mutateAsync({
+								void mutateAsync({
 									method: 'POST',
 									endpoint: appsEndpoint,
 									body: {
 										...values,
-										index: applications.length,
+										index: applications?.length,
 									},
 								});
 								handleClose();
@@ -318,7 +344,7 @@ export function Applications() {
 							size: 'xl',
 						}}
 					/>
-					{applications.length > 0 ? (
+					{applications?.length > 0 ? (
 						<Droppable droppableId={'groupList'}>
 							{(provided) => (
 								<Grid