Search History tab

src/pages/settings/Settings.tsx

@@ -16,6 +16,7 @@ import Applications from './components/Applications/Applications';
 import Bookmarks from './components/Bookmarks/Bookmarks';
 import Messages from './components/Messages/Messages';
 import Personalization from './components/Personalization/Personalization';
+import SearchHistory from './components/Search/SearchHistory';
 import SearchProviders from './components/Search/SearchProviders';
 import { ThemePlaylists } from './components/Theming/ThemePlaylists';
 import { Themes } from './components/Theming/Themes';
@@ -83,6 +84,9 @@ export function Settings() {
 					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='providers'>
 						{isMobile ? <FiSearch /> : 'Search Providers'}
 					</Tabs.Tab>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='history'>
+						{isMobile ? <FiSearch /> : 'Search History'}
+					</Tabs.Tab>
 					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='wolClients'>
 						{isMobile ? <FiMonitor /> : 'WoL Clients'}
 					</Tabs.Tab>
@@ -143,6 +147,14 @@ export function Settings() {
 						<SearchProviders />
 					</ScrollArea>
 				</Tabs.Panel>
+				<Tabs.Panel value='history'>
+					<ScrollArea
+						className={scrollAreaClasses.default}
+						classNames={scrollAreaClasses}
+					>
+						<SearchHistory />
+					</ScrollArea>
+				</Tabs.Panel>
 				<Tabs.Panel value='wolClients'>
 					<ScrollArea
 						className={scrollAreaClasses.default}

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

@@ -0,0 +1,122 @@
+import { Group, Stack, Text } from '@mantine/core';
+import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
+import { DataTable, DeleteItemModal, SettingsHeader } from 'components';
+import { SearchHistoryColumns } from 'components/Columns/SearchHistoryColumns';
+import { useCommonHooks, useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
+import { textClasses } from 'styles';
+import type { SearchHistoryItem } from 'types';
+
+const SearchHistory = () => {
+	const searchEndpoint = 'api/searchHistory';
+	const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({
+		endpoint: searchEndpoint,
+	});
+	const [searchHistory, setSearchHistory] = useState<SearchHistoryItem[]>([]);
+	const [searchValue, setSearchValue] = useState('');
+	const [searchHistoryItem, setSearchHistoryItem] = useState<SearchHistoryItem>();
+	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
+	const [isLoading, setIsLoading] = useState(false);
+	const { isMobile, handleDelete } = useCommonHooks();
+	const [filtersEnabled, setFiltersEnabled] = useState(false);
+	const [globalFilter, setGlobalFilter] = useState<string>('');
+	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
+	const handleClose = () => {
+		closeModal();
+	};
+
+	const [sorting, setSorting] = useState([
+		{
+			id: 'dateTimeStamp',
+			desc: true,
+		},
+	]);
+
+	useEffect(() => {
+		if (historyData && historyDataIsFetched) {
+			setSearchHistory(historyData);
+		}
+	}, [historyData, historyDataIsFetched]);
+
+	useEffect(() => {
+		setGlobalFilter(debouncedSearch);
+		if (debouncedSearch === globalFilter) {
+			setIsLoading(false);
+		}
+	}, [debouncedSearch, globalFilter]);
+
+	return (
+		<Stack w={'100%'}>
+			<DeleteItemModal
+				modalOpened={modalOpened}
+				handleClose={handleClose}
+				handleDelete={() => handleDelete(searchHistoryItem, 'api/searchHistory')}
+				title={'Delete Search History Item'}
+				body={
+					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
+						<Text>Are you sure you want to delete this Search History Item?</Text>
+						<Group>
+							<Text
+								className={textClasses.deleteItem}
+								classNames={textClasses}
+							>{`${searchHistoryItem?.provider}`}</Text>
+							<Text
+								className={textClasses.deleteItem}
+								classNames={textClasses}
+							>{`"${searchHistoryItem?.searchTerm}"`}</Text>
+						</Group>
+						<Text c='red'>This action cannot be undone!</Text>
+					</Stack>
+				}
+			/>
+			<SettingsHeader
+				setDragging={undefined}
+				openModal={() => {}}
+				title={'Search History'}
+				tooltip={{
+					title:
+						'All searches are stored in the database and can be found in this table.',
+					highlightList: ['searches', 'search', 'provider', 'prefix'],
+					description:
+						'Searches can be reviewed in the table on this page and can be deleted if necessary.',
+				}}
+				searchValue={searchValue}
+				setSearchValue={setSearchValue}
+				searchPlaceholder={'Search your Search History...'}
+				isLoading={isLoading}
+				setIsLoading={setIsLoading}
+			/>
+			<Stack
+				mt={isMobile ? '10rem' : '6rem'}
+				mb={isMobile ? '6rem' : '1rem'}
+				align='center'
+			>
+				<Stack
+					h={'calc(100vh - 15rem)'}
+					w={'100%'}
+					p={'1rem'}
+					pt={0}
+					mt={'1rem'}
+					style={{ overflow: 'scroll', whiteSpace: 'none' }}
+				>
+					<DataTable
+						data={searchHistory}
+						columns={SearchHistoryColumns(
+							setSearchHistoryItem,
+							openModal,
+							filtersEnabled,
+							setFiltersEnabled,
+						)}
+						sorting={sorting}
+						setSorting={setSorting}
+						filtersEnabled={filtersEnabled}
+						globalFilter={globalFilter}
+						setGlobalFilter={setGlobalFilter}
+					/>
+				</Stack>
+			</Stack>
+		</Stack>
+	);
+};
+
+export default SearchHistory;