113 lines
3.6 KiB
TypeScript
113 lines
3.6 KiB
TypeScript
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, isFetching: historyDataIsFetching } = useQueryAPI({
|
|
endpoint: searchEndpoint,
|
|
});
|
|
const searchHistory: SearchHistoryItem[] = historyData || [];
|
|
const [searchValue, setSearchValue] = useState<string | number>('');
|
|
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 | number>('');
|
|
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
|
|
const handleClose = () => {
|
|
closeModal();
|
|
};
|
|
|
|
const [sorting, setSorting] = useState([
|
|
{
|
|
id: 'dateTimeStamp',
|
|
desc: true,
|
|
},
|
|
]);
|
|
|
|
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={undefined}
|
|
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 - 14rem)'} w={'100%'} p={'1rem'} pt={0} mt={'1rem'} gap={0}>
|
|
<Stack h={'inherit'} style={{ overflow: 'scroll', whiteSpace: 'none' }}>
|
|
<DataTable
|
|
data={searchHistory}
|
|
columns={SearchHistoryColumns(
|
|
setSearchHistoryItem,
|
|
openModal,
|
|
filtersEnabled,
|
|
setFiltersEnabled,
|
|
)}
|
|
sorting={sorting}
|
|
setSorting={setSorting}
|
|
filtersEnabled={filtersEnabled}
|
|
globalFilter={globalFilter}
|
|
setGlobalFilter={setGlobalFilter}
|
|
isRefreshing={historyDataIsFetching}
|
|
/>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default SearchHistory;
|