State management

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

@@ -24,6 +24,7 @@ import * as vsc from 'react-icons/vsc';
 import { popoverClasses, selectClasses, textInputClasses } from 'styles';
 import type { Application } from 'types';
 import AddItemModal from '../Shared/AddItemModal';
+import NoItemsFound from '../Shared/NoItemsFound';
 import SettingsHeader from '../Shared/SettingsHeader';
 import AppSettingsItem from './AppSettingsItem';
 import DebouncedApplication from './DebouncedApplication';
@@ -54,6 +55,7 @@ const ApplicationSettings = () => {
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const [dragging, setDragging] = useState(false);
 	const [isOpen, setIsOpen] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
 
 	function onDragEnd(result: any) {
 		if (!result.destination) {
@@ -81,17 +83,22 @@ const ApplicationSettings = () => {
 		closeModal();
 		setNewApplication(defaultApplication);
 	};
-
 	useEffect(() => {
 		if (applicationData && !isAppsFetching) {
 			setApplications(
 				applicationData
-					.filter((a: Application) =>
-						a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
+					.filter(
+						(a: Application) =>
+							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
+							a.url.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
+							a.baseUrl.toLowerCase().includes(debouncedSearch.toLowerCase()),
 					)
 					.sort((a: Application, b: Application) => (a.index > b.index ? 1 : -1)),
 			);
 		}
+		if (debouncedSearch === searchValue) {
+			setIsLoading(false);
+		}
 	}, [applicationData, isAppsFetching, debouncedSearch]);
 
 	useEffect(() => {
@@ -103,7 +110,6 @@ const ApplicationSettings = () => {
 			});
 		}
 	}, [applicationList]);
-
 	return (
 		<Stack w={'100%'}>
 			<AddItemModal
@@ -253,11 +259,13 @@ const ApplicationSettings = () => {
 				title={'Applications'}
 				tooltip={{
 					title:
-						'Applications are the applicationData that will be displayed on the homepage.',
+						'Applications are the app buttons that will be displayed on the homepage.',
 					highlightList: [
 						'Applications',
 						'applicationData',
 						'application',
+						'app',
+						'apps',
 						'name',
 						'base url',
 						'url',
@@ -270,6 +278,8 @@ const ApplicationSettings = () => {
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
 				searchPlaceholder={'Search Applications...'}
+				isLoading={isLoading}
+				setIsLoading={setIsLoading}
 			/>
 			{dragging ? (
 				<DragDropContext onDragEnd={onDragEnd}>
@@ -361,39 +371,49 @@ const ApplicationSettings = () => {
 					align='center'
 				>
 					<Grid columns={18} w={'75%'}>
-						{applications?.map((application: Application) => (
-							<GridCol span={6} key={application.id}>
-								<Popover
-									withArrow
-									withOverlay
-									closeOnClickOutside={!isOpen}
-									classNames={popoverClasses}
-								>
-									<Popover.Target>
-										<Box
-											onClick={(e) => {
-												e.stopPropagation();
-											}}
-										>
-											<AppSettingsItem
-												url={application.url}
-												icon={application.icon}
-												name={application.name}
-												enabled={application.enabled}
+						{applications.length > 0 ? (
+							applications?.map((application: Application) => (
+								<GridCol span={6} key={application.id}>
+									<Popover
+										withArrow
+										withOverlay
+										closeOnClickOutside={!isOpen}
+										classNames={popoverClasses}
+									>
+										<Popover.Target>
+											<Box
+												onClick={(e) => {
+													e.stopPropagation();
+												}}
+											>
+												<AppSettingsItem
+													url={application.url}
+													icon={application.icon}
+													name={application.name}
+													enabled={application.enabled}
+													allIcons={allIcons}
+												/>
+											</Box>
+										</Popover.Target>
+										<Popover.Dropdown w={isMobile ? '100%' : undefined}>
+											<DebouncedApplication
+												application={application}
+												setIsOpen={setIsOpen}
 												allIcons={allIcons}
 											/>
-										</Box>
-									</Popover.Target>
-									<Popover.Dropdown w={isMobile ? '100%' : undefined}>
-										<DebouncedApplication
-											application={application}
-											setIsOpen={setIsOpen}
-											allIcons={allIcons}
-										/>
-									</Popover.Dropdown>
-								</Popover>
+										</Popover.Dropdown>
+									</Popover>
+								</GridCol>
+							))
+						) : (
+							<GridCol
+								w={'100%'}
+								span={18}
+								style={{ display: 'flex', justifyContent: 'center' }}
+							>
+								<NoItemsFound />
 							</GridCol>
-						))}
+						)}
 					</Grid>
 				</Stack>
 			)}