fix: tankFiltersContext types

This commit is contained in:
TrèsAbhi committed 2024-07-07 18:07:07 -05:00
1 parent 555c94f3b1
commit 3c9fcfa623
3 files changed
+17 -7

No files matched your search

@@ -31,6 +31,7 @@ export function Header() {
>
<Flex align="center" gap="1">
<IconButton
size={isSelected ? '1' : '2'}
variant={isSelected ? 'soft' : 'ghost'}
color={isSelected ? undefined : 'gray'}
highContrast={!isSelected}
@@ -1,11 +1,13 @@
import { Flex, Link, Text } from '@radix-ui/themes';
import { useTankFilters } from '../../../../stores/tankFilters';
import { useTankFiltersContext } from '../../../../stores/tankFilters';
interface NoResultsProps {
type?: 'filters' | 'search';
}
export function NoResults({ type = 'filters' }: NoResultsProps) {
const tankFiltersContext = useTankFiltersContext();
return (
<Flex flexGrow="1" align="center" justify="center">
<Text color="gray">
@@ -15,7 +17,10 @@ export function NoResults({ type = 'filters' }: NoResultsProps) {
underline="always"
color="red"
onClick={() =>
useTankFilters.setState(useTankFilters.getInitialState(), true)
tankFiltersContext.setState(
tankFiltersContext.getInitialState(),
true,
)
}
>
{type === 'filters' ? 'Try clearing filters' : 'Try searching again'}
@@ -4,7 +4,10 @@ import { debounce } from 'lodash';
import { useRouter } from 'next/navigation';
import { KeyboardEventHandler, useCallback, useRef } from 'react';
import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
import { useTankFilters } from '../../../../stores/tankFilters';
import {
useTankFilters,
useTankFiltersContext,
} from '../../../../stores/tankFilters';
import { QuickLink } from './QuickLink';
import { Sort } from './Sort';
@@ -14,26 +17,27 @@ interface SearchBarProps {
}
export function SearchBar({ topResult, onSelect }: SearchBarProps) {
const tankFiltersContext = useTankFiltersContext();
const router = useRouter();
const input = useRef<HTMLInputElement>(null);
const searching = useTankFilters((state) => state.searching);
const performSearch = useCallback(
debounce(() => {
useTankFilters.setState({ searching: false });
tankFiltersContext.setState({ searching: false });
if (!input.current) return;
const sanitized = input.current.value.trim();
useTankFilters.setState({
tankFiltersContext.setState({
search: sanitized.length === 0 ? undefined : sanitized,
});
}, 500),
[],
);
const handleChange = useCallback(() => {
if (!useTankFilters.getState().searching) {
useTankFilters.setState({ searching: true });
if (!tankFiltersContext.getState().searching) {
tankFiltersContext.setState({ searching: true });
}
performSearch();