Front: Use TabRouter for Search

Arthi-chaud · Aug 10, 2024 · a3cadd8 · a3cadd8
1 parent c950206
commit a3cadd8
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 223 deletions.
diff --git a/front/src/components/infinite/selectable-infinite-view.tsx b/front/src/components/infinite/selectable-infinite-view.tsx
diff --git a/front/src/components/tab-router.tsx b/front/src/components/tab-router.tsx
@@ -31,7 +31,7 @@ export const useTabRouter = <TabValue extends string>(
 		router: NextRouter,
 	) => string | string[] | undefined,
 	// This should persist the tab change in the router
-	onTabChange: (newTab: TabValue) => void,
+	urlOnTabChange: (newTab: TabValue) => string,
 	defaultTab: TabValue,
 	...otherTabs: TabValue[]
 ) => {
@@ -60,7 +60,9 @@ export const useTabRouter = <TabValue extends string>(
 		}
 	}, [router.asPath]);
 	useEffect(() => {
-		onTabChange(selectedTab);
+		router.push(urlOnTabChange(selectedTab), undefined, {
+			shallow: true,
+		});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedTab]);
 

diff --git a/front/src/pages/genres/[slugOrId].tsx b/front/src/pages/genres/[slugOrId].tsx
@@ -64,10 +64,7 @@ const GenrePage: Page<GetPropsTypesFrom<typeof prepareSSR>> = ({ props }) => {
 	const genre = useQuery(API.getGenre, genreIdentifier);
 	const { selectedTab, selectTab } = useTabRouter(
 		(r) => r.query.t,
-		(newTab) =>
-			router.push(`/genres/${genreIdentifier}?t=${newTab}`, undefined, {
-				shallow: true,
-			}),
+		(newTab) => `/genres/${genreIdentifier}?t=${newTab}`,
 		"album",
 		"artist",
 		"song",
@@ -92,14 +89,14 @@ const GenrePage: Page<GetPropsTypesFrom<typeof prepareSSR>> = ({ props }) => {
 			<Tabs
 				value={selectedTab}
 				onChange={(__, tabName) => selectTab(tabName)}
-				variant="scrollable"
+				variant="fullWidth"
 			>
 				{tabs.map((value, index) => (
 					<Tab
 						key={index}
 						value={value}
 						sx={{ minWidth: "fit-content", flex: 1 }}
-						label={t(value)}
+						label={t(`${value}s`)}
 					/>
 				))}
 			</Tabs>