Slight refactor

src/pages/homepage/components/Search/Search.tsx

@@ -1,25 +1,26 @@
 import { Stack, TextInput } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { HelpModal } from '../../../../components/HelpModal/HelpModal';
-import { WeatherModal } from '../../../../components/WeatherModal/WeatherModal';
-import { containsProtocol, useQueryAPI, validURL } from '../../../../hooks';
-import { textInputClasses } from '../../../../styles';
+import { HelpModal, WeatherModal } from 'components';
+import { containsProtocol, useCommonHooks, validURL } from 'hooks';
+import { textInputClasses } from 'styles';
 
 export default function Search({
 	current,
 	outlook,
-	hourly,
 	weatherModalOpened,
 	closeWeatherModal,
 	openWeatherModal,
-	providerLabel,
-	setProviderLabel,
-	providerURL,
-	setProviderURL,
-	value,
-	setValue,
 }: any) {
-	const { data: providers } = useQueryAPI({ endpoint: 'api/providers' });
+	const {
+		providerLabel,
+		setProviderLabel,
+		providerURL,
+		setProviderURL,
+		searchValue,
+		setSearchValue,
+		providers,
+	} = useCommonHooks();
+
 	const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
 		useDisclosure(false);
 
@@ -72,10 +73,10 @@ export default function Search({
 				classNames={textInputClasses}
 				spellCheck='true'
 				leftSection={providerLabel}
-				value={value}
-				data-active={value !== ''}
+				value={searchValue}
+				data-active={searchValue !== ''}
 				onChange={(item: any) => {
-					setValue(item.currentTarget.value);
+					setSearchValue(item.currentTarget.value);
 					if (
 						item.target.value === '/?' ||
 						item.target.value === '!help' ||
@@ -104,22 +105,14 @@ export default function Search({
 				}}
 			/>
 			<HelpModal
-				providers={providers}
 				providerModalOpened={providerModalOpened}
 				closeProviderModal={closeProviderModal}
-				setValue={setValue}
-				setProviderLabel={setProviderLabel}
-				setProviderURL={setProviderURL}
 			/>
 			<WeatherModal
 				current={current}
 				outlook={outlook}
-				hourly={hourly}
 				closeWeatherModal={closeWeatherModal}
 				weatherModalOpened={weatherModalOpened}
-				setValue={setValue}
-				setProviderLabel={setProviderLabel}
-				setProviderURL={setProviderURL}
 			/>
 		</Stack>
 	);