State management

src/pages/settings/components/Search/SearchProviders.tsx

@@ -15,6 +15,7 @@ import { useEffect, useState } from 'react';
 import { popoverClasses, textInputClasses } from 'styles';
 import type { Provider } from 'types';
 import AddItemModal from '../Shared/AddItemModal';
+import NoItemsFound from '../Shared/NoItemsFound';
 import SettingsHeader from '../Shared/SettingsHeader';
 import DebouncedSearchProvider from './DebouncedSearchProvider';
 import SearchProviderSettingsItem from './SearchProviderSettingsItem';
@@ -38,6 +39,7 @@ const SearchProviderSettings = () => {
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const [isOpen, setIsOpen] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
 
 	const handleClose = () => {
 		setNewProvider(defaultProvider);
@@ -48,12 +50,17 @@ const SearchProviderSettings = () => {
 		if (providerData && providerDataIsFetched) {
 			setProviders(
 				providerData
-					.filter((a: Provider) =>
-						a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
+					.filter(
+						(a: Provider) =>
+							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
+							a.url.toLowerCase().includes(debouncedSearch.toLowerCase()),
 					)
 					.sort((a: Provider, b: Provider) => (a.prefix > b.prefix ? 1 : -1)),
 			);
 		}
+		if (debouncedSearch === searchValue) {
+			setIsLoading(false);
+		}
 	}, [providerData, providerDataIsFetched, debouncedSearch]);
 
 	return (
@@ -138,16 +145,18 @@ const SearchProviderSettings = () => {
 			<SettingsHeader
 				setDragging={undefined}
 				openModal={openModal}
-				title={'Search providerData'}
+				title={'Search Providers'}
 				tooltip={{
-					title: 'Search providerData and shortcuts can be configured here.',
+					title: 'Search providers and shortcuts can be configured here.',
 					highlightList: ['providerData', 'search', 'provider', 'prefix'],
 					description:
-						'providerData can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.',
+						'Providers can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.',
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
 				searchPlaceholder={'Search Search providerData...'}
+				isLoading={isLoading}
+				setIsLoading={setIsLoading}
 			/>
 			<Stack
 				mt={isMobile ? '9rem' : '6rem'}
@@ -156,32 +165,42 @@ const SearchProviderSettings = () => {
 				align='center'
 			>
 				<Grid columns={18} w={'75%'}>
-					{providers?.map((provider: Provider) => (
-						<GridCol span={isMobile ? 18 : 6} key={provider.id}>
-							<Popover
-								withArrow
-								withOverlay
-								closeOnClickOutside={!isOpen}
-								classNames={popoverClasses}
-							>
-								<Popover.Target>
-									<Box
-										onClick={(e) => {
-											e.stopPropagation();
-										}}
-									>
-										<SearchProviderSettingsItem provider={provider} />
-									</Box>
-								</Popover.Target>
-								<Popover.Dropdown w={isMobile ? '100%' : undefined}>
-									<DebouncedSearchProvider
-										searchProvider={provider}
-										setIsOpen={setIsOpen}
-									/>
-								</Popover.Dropdown>
-							</Popover>
+					{providers.length > 0 ? (
+						providers?.map((provider: Provider) => (
+							<GridCol span={isMobile ? 18 : 6} key={provider.id}>
+								<Popover
+									withArrow
+									withOverlay
+									closeOnClickOutside={!isOpen}
+									classNames={popoverClasses}
+								>
+									<Popover.Target>
+										<Box
+											onClick={(e) => {
+												e.stopPropagation();
+											}}
+										>
+											<SearchProviderSettingsItem provider={provider} />
+										</Box>
+									</Popover.Target>
+									<Popover.Dropdown w={isMobile ? '100%' : undefined}>
+										<DebouncedSearchProvider
+											searchProvider={provider}
+											setIsOpen={setIsOpen}
+										/>
+									</Popover.Dropdown>
+								</Popover>
+							</GridCol>
+						))
+					) : (
+						<GridCol
+							w={'100%'}
+							span={18}
+							style={{ display: 'flex', justifyContent: 'center' }}
+						>
+							<NoItemsFound />
 						</GridCol>
-					))}
+					)}
 				</Grid>
 			</Stack>
 		</Stack>