Updated names for uniformity

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

@@ -1,13 +1,4 @@
-import {
-	ActionIcon,
-	Button,
-	Card,
-	Group,
-	Stack,
-	Text,
-	TextInput,
-	Tooltip,
-} from '@mantine/core';
+import { ActionIcon, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
@@ -53,6 +44,7 @@ function DebouncedSearchProvider({
 			<DeleteItemModal
 				modalOpened={modalOpened}
 				handleClose={handleClose}
+				handleDelete={() => handleDelete(provider, 'api/providers')}
 				title={'Delete Search Provider'}
 				body={
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -69,25 +61,6 @@ function DebouncedSearchProvider({
 							}}
 						>{`"${provider.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
-						<Group pos={'absolute'} bottom={8}>
-							<Button
-								color={'red'}
-								styles={{ label: { color: 'black' } }}
-								onClick={() => {
-									handleDelete(provider, 'api/providers');
-									handleClose();
-								}}
-							>
-								Delete
-							</Button>
-							<Button
-								color={'grey'}
-								styles={{ label: { color: 'black' } }}
-								onClick={handleClose}
-							>
-								Cancel
-							</Button>
-						</Group>
 					</Stack>
 				}
 			/>

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

@@ -27,10 +27,10 @@ const SearchProviderSettings = () => {
 		prefix: '',
 	};
 	const endpoint = 'api/providers';
-	const { data: providers, isFetched: providersIsFetched } = useQueryAPI({
+	const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
 		endpoint: endpoint,
 	});
-	const [providerData, setProviderData] = useState<Provider[]>([]);
+	const [providers, setProviders] = useState<Provider[]>([]);
 	const { isMobile } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [newProvider, setNewProvider] = useState<Provider>(defaultProvider);
@@ -45,16 +45,16 @@ const SearchProviderSettings = () => {
 	};
 
 	useEffect(() => {
-		if (providers && providersIsFetched) {
-			setProviderData(
-				providers
+		if (providerData && providerDataIsFetched) {
+			setProviders(
+				providerData
 					.filter((a: Provider) =>
 						a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
 					)
 					.sort((a: Provider, b: Provider) => (a.prefix > b.prefix ? 1 : -1)),
 			);
 		}
-	}, [providers, providersIsFetched, debouncedSearch]);
+	}, [providerData, providerDataIsFetched, debouncedSearch]);
 
 	return (
 		<Stack>
@@ -138,16 +138,16 @@ const SearchProviderSettings = () => {
 			<SettingsHeader
 				setDragging={undefined}
 				openModal={openModal}
-				title={'Search Providers'}
+				title={'Search providerData'}
 				tooltip={{
-					title: 'Search providers and shortcuts can be configured here.',
-					highlightList: ['Providers', 'search', 'provider', 'prefix'],
+					title: 'Search providerData and shortcuts can be configured here.',
+					highlightList: ['providerData', 'search', 'provider', 'prefix'],
 					description:
-						'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.',
+						'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.',
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
-				searchPlaceholder={'Search Search Providers...'}
+				searchPlaceholder={'Search Search providerData...'}
 			/>
 			<Stack
 				mt={isMobile ? '9rem' : '6rem'}
@@ -156,7 +156,7 @@ const SearchProviderSettings = () => {
 				align='center'
 			>
 				<Grid columns={18} w={'75%'}>
-					{providerData?.map((provider: Provider) => (
+					{providers?.map((provider: Provider) => (
 						<GridCol span={isMobile ? 18 : 6} key={provider.id}>
 							<Popover
 								withArrow