Add a bottom tab navigator

2024-01-04 14:38:37 +01:00
parent 7160b77607
commit 5525110d39
3 changed files with 169 additions and 106 deletions
--- a/front/Navigation.tsx
+++ b/front/Navigation.tsx
@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/ban-types */
 import { NativeStackScreenProps, createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import {
 	NavigationProp,
 	ParamListBase,
 	useNavigation as navigationHook,
 } from '@react-navigation/native';
-import React, { Component, ComponentProps, ComponentType, ReactElement, ReactNode, useEffect, useMemo } from 'react';
+import React, { ComponentProps, ComponentType, useEffect, useMemo } from 'react';
 import { DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
 import { RootState, useSelector } from './state/Store';
 import { useDispatch } from 'react-redux';
@@ -35,100 +36,126 @@ import MusicView from './views/MusicView';
 import Leaderboardiew from './views/LeaderboardView';
 import { LinearGradient } from 'expo-linear-gradient';

+const Stack = createNativeStackNavigator<AppRouteParams & { Loading: never; Oops: never }>();
+const Tab = createBottomTabNavigator<AppRouteParams & { Loading: never; Oops: never }>();
+
+const Tabs = () => {
+	return (
+		<Tab.Navigator>
+			{Object.entries(tabRoutes).map(([name, route], routeIndex) => (
+				<Tab.Screen
+					key={'route-' + routeIndex}
+					name={name}
+					options={{ ...route.options, headerTransparent: true }}
+					component={RouteToScreen(route.component)}
+				/>
+			))}
+		</Tab.Navigator>
+	);
+};
+
 // Util function to hide route props in URL
 const removeMe = () => '';

-const protectedRoutes = () =>
-	({
-		Home: {
-			component: DiscoveryView,
-			options: { headerShown: false },
-			link: '/',
+const tabRoutes = {
+	Home: {
+		component: DiscoveryView,
+		options: { headerShown: false },
+		link: '/',
+	},
+	Settings: {
+		component: SettingsTab,
+		options: { headerShown: false },
+		link: '/settings/:screen?',
+		stringify: {
+			screen: removeMe,
 		},
-		Music: {
-			component: MusicView,
-			options: { headerShown: false },
-			link: '/music',
-		},
-		Play: {
-			component: PlayView,
-			options: { headerShown: false, title: translate('play') },
-			link: '/play/:songId',
-		},
-		Settings: {
-			component: SettingsTab,
-			options: { headerShown: false },
-			link: '/settings/:screen?',
-			stringify: {
-				screen: removeMe,
-			},
-		},
-		Artist: {
-			component: ArtistDetailsView,
-			options: { title: translate('artistFilter') },
-			link: '/artist/:artistId',
-		},
-		Genre: {
-			component: GenreDetailsView,
-			options: { title: translate('genreFilter') },
-			link: '/genre/:genreId',
-		},
-		Search: {
-			component: SearchView,
-			options: { headerShown: false },
-			link: '/search/:query?',
-		},
-		Leaderboard: {
-			component: Leaderboardiew,
-			options: { title: translate('leaderboardTitle'), headerShown: false },
-			link: '/leaderboard',
-		},
-		Error: {
-			component: ErrorView,
-			options: { title: translate('error'), headerLeft: null },
-			link: undefined,
-		},
-		User: { component: ProfileView, options: { headerShown: false }, link: '/user' },
-		Verified: {
-			component: VerifiedView,
-			options: { title: 'Verify email', headerShown: false },
-			link: '/verify',
-		},
-	}) as const;
+	},
+	User: { component: ProfileView, options: { headerShown: false }, link: '/user' },
+	Music: {
+		component: MusicView,
+		options: { headerShown: false },
+		link: '/music',
+	},
+	Search: {
+		component: SearchView,
+		options: { headerShown: false },
+		link: '/search/:query?',
+	},
+	Leaderboard: {
+		component: Leaderboardiew,
+		options: { title: translate('leaderboardTitle'), headerShown: false },
+		link: '/leaderboard',
+	},
+};

-const publicRoutes = () =>
-	({
-		Login: {
-			component: SigninView,
-			options: { title: translate('signInBtn'), headerShown: false },
-			link: '/login',
-		},
-		Signup: {
-			component: SignupView,
-			options: { title: translate('signUpBtn'), headerShown: false },
-			link: '/signup',
-		},
-		Google: {
-			component: GoogleView,
-			options: { title: 'Google signin', headerShown: false },
-			link: '/logged/google',
-		},
-		PasswordReset: {
-			component: PasswordResetView,
-			options: { title: 'Password reset form', headerShown: false },
-			link: '/password_reset',
-		},
-		ForgotPassword: {
-			component: ForgotPasswordView,
-			options: { title: 'Password reset form', headerShown: false },
-			link: '/forgot_password',
-		},
-	}) as const;
+const protectedRoutes = {
+	Tabs: {
+		component: Tabs,
+		options: { headerShown: false, path: '' },
+		link: '',
+		childRoutes: tabRoutes,
+	},
+	Play: {
+		component: PlayView,
+		options: { headerShown: false, title: translate('play') },
+		link: '/play/:songId',
+	},
+	Artist: {
+		component: ArtistDetailsView,
+		options: { title: translate('artistFilter') },
+		link: '/artist/:artistId',
+	},
+	Genre: {
+		component: GenreDetailsView,
+		options: { title: translate('genreFilter') },
+		link: '/genre/:genreId',
+	},
+	Error: {
+		component: ErrorView,
+		options: { title: translate('error'), headerLeft: null },
+		link: undefined,
+	},
+	Verified: {
+		component: VerifiedView,
+		options: { title: 'Verify email', headerShown: false },
+		link: '/verify',
+	},
+};
+
+const publicRoutes = {
+	Login: {
+		component: SigninView,
+		options: { title: translate('signInBtn'), headerShown: false },
+		link: '/login',
+	},
+	Signup: {
+		component: SignupView,
+		options: { title: translate('signUpBtn'), headerShown: false },
+		link: '/signup',
+	},
+	Google: {
+		component: GoogleView,
+		options: { title: 'Google signin', headerShown: false },
+		link: '/logged/google',
+	},
+	PasswordReset: {
+		component: PasswordResetView,
+		options: { title: 'Password reset form', headerShown: false },
+		link: '/password_reset',
+	},
+	ForgotPassword: {
+		component: ForgotPasswordView,
+		options: { title: 'Password reset form', headerShown: false },
+		link: '/forgot_password',
+	},
+};

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Route<Props = any> = {
 	component: ComponentType<Props>;
 	options: object;
+	link?: string;
 };

 type OmitOrUndefined<T, K extends string> = T extends undefined ? T : Omit<T, K>;
@@ -140,12 +167,10 @@ type RouteParams<Routes extends Record<string, Route>> = {
 	>;
 };

-type PrivateRoutesParams = RouteParams<ReturnType<typeof protectedRoutes>>;
-type PublicRoutesParams = RouteParams<ReturnType<typeof publicRoutes>>;
+type PrivateRoutesParams = RouteParams<typeof protectedRoutes>;
+type PublicRoutesParams = RouteParams<typeof publicRoutes>;
 type AppRouteParams = PrivateRoutesParams & PublicRoutesParams;

-const Stack = createNativeStackNavigator<AppRouteParams & { Loading: never; Oops: never }>();
-
 const RouteToScreen = <T extends {}>(Component: Route<T>['component']) =>
 	function Route(props: NativeStackScreenProps<T & ParamListBase>) {
 		const colorScheme = useColorScheme();
@@ -160,7 +185,7 @@ const RouteToScreen = <T extends {}>(Component: Route<T>['component']) =>
 					zIndex: -2,
 				}}
 			>
-				<Component {...props.route.params as T} route={props.route} />
+				<Component {...(props.route.params as T)} route={props.route} />
 			</LinearGradient>
 		);
 	};
@@ -175,20 +200,24 @@ const routesToScreens = (routes: Partial<Record<keyof AppRouteParams, Route>>) =
 		/>
 	));

-const routesToLinkingConfig = (
-	routes: Partial<
-		Record<keyof AppRouteParams, { link?: string; stringify?: Record<string, () => string> }>
-	>
-) => {
+type RouteDescription = Record<
+	string,
+	{ link?: string; stringify?: Record<string, () => string>; childRoutes?: RouteDescription }
+>;
+
+const routesToLinkingConfig = (routes: RouteDescription) => {
 	// Too lazy to (find the) type
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const pagesToRoute = {} as Record<keyof AppRouteParams, any>;
 	Object.keys(routes).forEach((route) => {
 		const index = route as keyof AppRouteParams;
-		if (routes[index]?.link) {
+		if (routes[index]?.link !== undefined) {
 			pagesToRoute[index] = {
 				path: routes[index]!.link!,
 				stringify: routes[index]!.stringify,
+				screens: routes[index]!.childRoutes
+					? routesToLinkingConfig(routes[index]!.childRoutes!).config.screens
+					: undefined,
 			};
 		}
 	});
@@ -248,12 +277,6 @@ export const Router = () => {
 		}
 		return 'noAuth';
 	}, [userProfile, accessToken]);
-	const routes = useMemo(() => {
-		if (authStatus == 'authed') {
-			return protectedRoutes();
-		}
-		return publicRoutes();
-	}, [authStatus]);

 	useEffect(() => {
 		if (accessToken) {
@@ -268,7 +291,9 @@ export const Router = () => {

 	return (
 		<NavigationContainer
-			linking={routesToLinkingConfig(routes)}
+			linking={routesToLinkingConfig(
+				authStatus == 'authed' ? { ...protectedRoutes } : publicRoutes
+			)}
 			fallback={<LoadingView />}
 			theme={colorScheme == 'light' ? DefaultTheme : DarkTheme}
 		>
@@ -281,10 +306,10 @@ export const Router = () => {
 								<ProfileErrorView onTryAgain={() => userProfile.refetch()} />
 							))}
 						/>
-						{routesToScreens(publicRoutes())}
+						{routesToScreens(publicRoutes)}
 					</>
 				) : (
-					routesToScreens(routes)
+					routesToScreens(protectedRoutes)
 				)}
 			</Stack.Navigator>
 		</NavigationContainer>
--- a/front/package.json
+++ b/front/package.json
@@ -21,6 +21,7 @@
 		"@expo/webpack-config": "^19.0.0",
 		"@motiz88/react-native-midi": "^0.0.6",
 		"@react-native-async-storage/async-storage": "1.18.2",
+		"@react-navigation/bottom-tabs": "^6.5.11",
 		"@react-navigation/native": "^6.1.8",
 		"@react-navigation/native-stack": "^6.9.14",
 		"@reduxjs/toolkit": "^1.9.6",
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -2644,6 +2644,15 @@
    invariant "^2.2.4"
    nullthrows "^1.1.1"

+"@react-navigation/bottom-tabs@^6.5.11":
+  version "6.5.11"
+  resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.11.tgz#b6e67a3aa19e60ed9c1139fa0253586c479832d5"
+  integrity sha512-CBN/NOdxnMvmjw+AJQI1kltOYaClTZmGec5pQ3ZNTPX86ytbIOylDIITKMfTgHZcIEFQDymx1SHeS++PIL3Szw==
+  dependencies:
+    "@react-navigation/elements" "^1.3.21"
+    color "^4.2.3"
+    warn-once "^0.1.0"
+
 "@react-navigation/core@^6.4.10":
  version "6.4.10"
  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.4.10.tgz#0c52621968b35e3a75e189e823d3b9e3bad77aff"
@@ -4646,11 +4655,27 @@ color-name@1.1.3:
  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==

-color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
  version "1.1.4"
  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==

+color-string@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
+  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
+color@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
+  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
+  dependencies:
+    color-convert "^2.0.1"
+    color-string "^1.9.0"
+
 colord@^2.9.1:
  version "2.9.3"
  resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
@@ -6966,6 +6991,11 @@ is-arrayish@^0.2.1:
  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==

+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
 is-async-function@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
@@ -10698,6 +10728,13 @@ simple-plist@^1.1.0:
    bplist-parser "0.3.1"
    plist "^3.0.5"

+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
+  dependencies:
+    is-arrayish "^0.3.1"
+
 sisteransi@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"