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