diff --git a/components/filter-sort-games.tsx b/components/filter-sort-games.tsx index 780f7e846976a46c89fed2a5b9d966e8867a6b1a..0c6743fc32bf1be771c9294b67f0076dfdad7326 100644 --- a/components/filter-sort-games.tsx +++ b/components/filter-sort-games.tsx @@ -19,6 +19,8 @@ export default function Sort() { const sortm = searchParams.get('sortby') const sorto = searchParams.get('order') + const [isSetByUser, setIsSetByUser] = useState(false) + const [selectedCategory, setSelectedCategory] = useState(cat || '') const [selectedGenre, setSelectedGenre] = useState(gen || '') const [selectedPlatform, setSelectedPlatform] = useState(plat || '') @@ -42,10 +44,10 @@ export default function Sort() { const url = `${pathname}${queryParamString ? `${queryParamString}` : ''}` useEffect(() => { - if (url) { - router.push(url) // needs fix for after game details page + if (url && isSetByUser) { + router.push(url) } - }, [router, url]) + }, [isSetByUser, router, url]) function toggleSortOrder() { const newSortOrder = selectedSortOrder === 'desc' ? 'asc' : 'desc' @@ -59,12 +61,17 @@ export default function Sort() { setSelectedPlatform('') setSelectedSortMethod('total_rating_count') setSelectedSortOrder('desc') + setIsSetByUser(false) } return ( <Card className="p-6 grid items-start gap-2 bg-secondary"> <h1 className="font-bold">Filter</h1> - <Select value={selectedCategory ? selectedCategory : undefined} key={selectedCategory[0]} onValueChange={(value) => setSelectedCategory(value)}> + <Select value={selectedCategory ? selectedCategory : undefined} key={selectedCategory[0]} + onValueChange={(value) => { + setSelectedCategory(value) + setIsSetByUser(true) + }}> <SelectTrigger className={`bg-background border-none w-full ${selectedCategory[0] ? 'font-extrabold' : ''}`}> <SelectValue placeholder="By category..." /> </SelectTrigger> @@ -81,7 +88,11 @@ export default function Sort() { </SelectContent> </Select> - <Select value={selectedGenre ? selectedGenre : undefined} key={selectedGenre[0]} onValueChange={(value) => setSelectedGenre(value)}> + <Select value={selectedGenre ? selectedGenre : undefined} key={selectedGenre[0]} + onValueChange={(value) => { + setSelectedGenre(value) + setIsSetByUser(true) + }}> <SelectTrigger className={`bg-background border-none w-full ${selectedGenre[0] ? 'font-extrabold' : ''}`}> <SelectValue placeholder="By genre..." /> </SelectTrigger> @@ -110,7 +121,11 @@ export default function Sort() { </SelectContent> </Select> - <Select value={selectedPlatform ? selectedPlatform : undefined} key={selectedPlatform[0]} onValueChange={(value) => setSelectedPlatform(value)}> + <Select value={selectedPlatform ? selectedPlatform : undefined} key={selectedPlatform[0]} + onValueChange={(value) => { + setSelectedPlatform(value) + setIsSetByUser(true) + }}> <SelectTrigger className={`bg-background border-none w-full ${selectedPlatform[0] ? 'font-extrabold' : ''}`}> <SelectValue placeholder="By Platform..." /> </SelectTrigger> @@ -139,7 +154,10 @@ export default function Sort() { </SelectGroup> </SelectContent> </Select> - <Button variant="ghost" onClick={() => toggleSortOrder()} className="bg-background border-none"> + <Button variant="ghost" onClick={() => { + toggleSortOrder() + setIsSetByUser(true) + }} className="bg-background border-none"> <Icons.arrowdown className={`h-4 w-4 transition-all transform ${selectedSortOrder === 'asc' ? 'rotate-180' : ''}`} /> </Button> </div>