Refactor

2024-12-06 15:33:58 -06:00
parent 00c141d8d7
commit 33813a34fb
48 changed files with 2188 additions and 420 deletions
--- a/src/pages/homepage/components/Search/Search.tsx
+++ b/src/pages/homepage/components/Search/Search.tsx
@@ -0,0 +1,124 @@
+import { Stack, TextInput } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { useState } from 'react';
+import { HelpModal } from '../../../../components/HelpModal/HelpModal';
+import { WeatherModal } from '../../../../components/WeatherModal/WeatherModal';
+import { containsProtocol, useQueryAPI, validURL } from '../../../../hooks';
+import { textInputClasses } from '../../../../styles';
+
+export default function Search({
+	current,
+	outlook,
+	hourly,
+	weatherModalOpened,
+	closeWeatherModal,
+	openWeatherModal,
+}: any) {
+	const { data: providers } = useQueryAPI({ endpoint: 'api/providers' });
+	const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
+		useDisclosure(false);
+
+	const [providerLabel, setProviderLabel] = useState('Google Search');
+	const [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
+	const [value, setValue] = useState('');
+	const handleKeyPress = (item: any) => {
+		let option = '';
+		let subtext = '';
+		if (item.target.value.startsWith('/')) {
+			option =
+				item.target.value.substr(1, item.target.value.indexOf(' ') - 1) ||
+				item.target.value.substr(1);
+			subtext = item.target.value.substr(2 + option.length);
+		} else if (item.target.value.startsWith('!')) {
+			if (item.target.value.startsWith('!w')) {
+				subtext = item.target.value.substr(2);
+			}
+		} else {
+			subtext = item.target.value;
+		}
+		if (item.key === 'Enter') {
+			if (providerLabel === 'Show help') {
+				openProviderModal();
+			} else if (item.target.value.startsWith('/')) {
+				open(`${providerURL}${subtext}`, '_self');
+			} else if (providerLabel === 'Show weather') {
+				openWeatherModal();
+			} else if (validURL(item.target.value)) {
+				if (containsProtocol(item.target.value)) window.location = item.target.value;
+				else open(`https://${item.target.value}`, '_self');
+			} else {
+				open(`${providerURL}${subtext}`, '_self');
+			}
+		}
+	};
+
+	return (
+		<Stack
+			style={{
+				height: '100px',
+				backgroundColor: 'transparent',
+				textAlign: 'center',
+				position: 'relative',
+				padding: '.3em',
+				display: 'inline-block',
+				gap: 0,
+			}}
+		>
+			<TextInput
+				autoFocus
+				className={textInputClasses.search}
+				classNames={textInputClasses}
+				spellCheck='true'
+				leftSection={providerLabel}
+				value={value}
+				data-active={value !== ''}
+				onChange={(item: any) => {
+					setValue(item.currentTarget.value);
+					if (
+						item.target.value === '/?' ||
+						item.target.value === '!help' ||
+						item.target.value === '!h'
+					) {
+						setProviderLabel('Show help');
+					} else if (item.target.value.startsWith('/')) {
+						const provider = providers?.find(
+							(p: any) => p.prefix === item.target.value.split(' ')[0],
+						);
+						setProviderLabel(provider?.name || 'Invalid Search');
+						setProviderURL(provider?.url);
+					} else if (item.target.value.startsWith('!')) {
+						if (item.target.value === '!w' || item.target.value === '!weather') {
+							setProviderLabel('Show weather');
+						}
+					} else {
+						setProviderLabel('Google Search');
+						setProviderURL('https://www.google.com/search?q=');
+					}
+				}}
+				onKeyUp={(item: any) => {
+					if (providerLabel !== 'Invalid Search') {
+						handleKeyPress(item);
+					}
+				}}
+			/>
+			<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>
+	);
+}