Clean up and typing

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

@@ -14,14 +14,15 @@ import { IconTrash } from '@tabler/icons-react';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { cardClasses, modalClasses, textInputClasses } from 'styles';
+import type { Provider } from 'types';
 
-function DebouncedSearchProvider({ searchProvider, handleDelete }: any) {
-	const { theme, isMobile } = useCommonHooks();
+function DebouncedSearchProvider({ searchProvider }: any) {
+	const { theme, isMobile, modalStyle, handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
-	const [provider, setProvider] = useState<any>(searchProvider);
-	const [update, setUpdate] = useState({});
+	const [provider, setProvider] = useState<Provider>(searchProvider);
+	const [update, setUpdate] = useState<any>({});
 	const [debounced] = useDebouncedValue(update, 1000);
 
 	useEffect(() => {
@@ -47,14 +48,7 @@ function DebouncedSearchProvider({ searchProvider, handleDelete }: any) {
 				onClose={() => {
 					closeModal();
 				}}
-				style={{
-					'--color-text-pri': theme.primaryColor,
-					'--color-text-acc': theme.accentColor,
-					'--color-background': theme.backgroundColor,
-					'--color-border': theme.borderColor,
-					'--color-search-background': theme.searchColor,
-					'--image-background': `url(${theme.backgroundImage})`,
-				}}
+				style={modalStyle}
 				closeOnEscape
 				closeOnClickOutside
 			>
@@ -84,7 +78,7 @@ function DebouncedSearchProvider({ searchProvider, handleDelete }: any) {
 									color={'red'}
 									styles={{ label: { color: 'black' } }}
 									onClick={() => {
-										handleDelete(provider);
+										handleDelete(provider, 'api/providers');
 										closeModal();
 									}}
 								>