Bug fixes and new biome lint update

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

@@ -1,17 +1,9 @@
-import {
-	ActionIcon,
-	Group,
-	type OptionsFilter,
-	Select,
-	Stack,
-	Text,
-} from '@mantine/core';
+import { type OptionsFilter, Select, Stack, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { HelpModal, WeatherModal } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiEdit, FiTrash } from 'react-icons/fi';
-import { actionIconClasses, selectClasses } from 'styles';
+import { selectClasses } from 'styles';
 import type {
 	Application,
 	CurrentWeather,
@@ -19,6 +11,7 @@ import type {
 	Provider,
 	SearchHistoryItem,
 } from 'types';
+import SearchSelectItem from './SearchHistoryItem';
 
 export default function Search({
 	current,
@@ -53,7 +46,6 @@ export default function Search({
 	const [dropdownOpened, { open: openDropdown, close: closeDropdown }] = useDisclosure();
 	const [listIndex, setListIndex] = useState(0);
 	const {
-		theme,
 		isMobile,
 		urlPattern,
 		providerLabel,
@@ -272,112 +264,6 @@ export default function Search({
 			.slice(0, 10);
 	};
 
-	function RenderOption(item: any) {
-		const [showFillButton, setShowFillButton] = useState(false);
-		const m = new Date(item.option.dateTimeStamp);
-		const year = `${m.getUTCFullYear()}`.slice(-2);
-		const month = `0${m.getUTCMonth() + 1}`.slice(-2);
-		const day = `0${m.getUTCDate()}`.slice(-2);
-		const hours = `0${m.getUTCHours()}`.slice(-2);
-		const minutes = `0${m.getUTCMinutes()}`.slice(-2);
-		const dateString = isMobile
-			? `${month}/${day}/${year}`
-			: `${month}/${day}/${year} ${hours}:${minutes}`;
-		return (
-			<Group
-				w={'100%'}
-				display={'flex'}
-				justify={'space-between'}
-				gap={0}
-				onClick={() => {
-					handleSearchHistoryItem(item);
-				}}
-				onMouseEnter={() => {
-					setShowFillButton(true);
-				}}
-				onMouseLeave={() => {
-					setShowFillButton(false);
-				}}
-			>
-				<Group m={0} p={0} miw={'160px'} style={{ overflow: 'hidden' }}>
-					<Text
-						style={{
-							backgroundColor: `${theme.primaryColor}33`,
-							fontWeight: 600,
-							borderRadius: '15px',
-							padding: '.25rem',
-						}}
-					>
-						{item.option.provider}
-					</Text>
-					{showFillButton && (
-						<ActionIcon
-							className={actionIconClasses.selectOptionActions}
-							classNames={actionIconClasses}
-							onClick={(e) => {
-								e.stopPropagation();
-								setSearchValue(`${item.option.prefix} ${item.option.searchTerm}`);
-							}}
-						>
-							<FiEdit />
-						</ActionIcon>
-					)}
-				</Group>
-				<Group
-					m={0}
-					p={0}
-					gap={0}
-					justify='space-between'
-					w={'65%'}
-					style={{
-						whiteSpace: 'nowrap',
-						overflow: 'hidden',
-						boxSizing: 'border-box',
-						position: 'relative',
-					}}
-				>
-					<Text
-						w={'75%'}
-						c={'var(--mantine-color-primary-0)'}
-						style={{
-							overflow: 'hidden',
-							textOverflow: 'ellipsis',
-						}}
-					>
-						{item.option.searchTerm}
-					</Text>
-					<Text
-						w={'25%'}
-						style={{
-							color: `${theme.primaryColor}55`,
-							textAlign: 'right',
-						}}
-					>
-						{dateString}
-					</Text>
-				</Group>
-				<Group m={0} p={0} right={'1rem'} w={'24px'}>
-					{showFillButton && (
-						<ActionIcon
-							className={actionIconClasses.selectOptionActions}
-							classNames={actionIconClasses}
-							onClick={(e) => {
-								e.stopPropagation();
-								mutateAsync({
-									method: 'DELETE',
-									endpoint: searchEndpoint,
-									body: { id: item.option.id },
-								});
-							}}
-						>
-							<FiTrash />
-						</ActionIcon>
-					)}
-				</Group>
-			</Group>
-		);
-	}
-
 	useEffect(() => {
 		if (providerData && providerDataIsFetched) {
 			setProviders(providerData);
@@ -460,7 +346,13 @@ export default function Search({
 				autoFocus={!isMobile}
 				leftSection={providerLabel}
 				rightSection={<Stack />}
-				renderOption={RenderOption}
+				renderOption={(item: any) => (
+					<SearchSelectItem
+						item={item}
+						handleSearchHistoryItem={handleSearchHistoryItem}
+						searchEndpoint={searchEndpoint}
+					/>
+				)}
 				onBlur={() => {
 					setPlaceholderValue('');
 					setListIndex(0);