Merge branch 'mobile' into 'main'

AAAAAA FINALLY FIXED

See merge request !53

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>