From 359b20fc6d737fd76fb8f92581652c698a7b936e Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Sat, 6 Jan 2024 15:01:29 +0100
Subject: [PATCH] Add a screen wrapper in desktop mode

---
 docker-compose.dev.yml           |  1 +
 front/Dockerfile.dev             |  2 +-
 front/utils/navigator.tsx        | 40 ++++++++++++++++++++++++++++----
 front/views/V2/DiscoveryView.tsx |  3 +--
 4 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index c535ba9..52b7e90 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -67,6 +67,7 @@ services:
       - NGINX_PORT=4567
     ports:
       - "19006:19006"
+      - "8081:8081"
     volumes:
       - ./front:/app
     depends_on:
diff --git a/front/Dockerfile.dev b/front/Dockerfile.dev
index 732b370..23f4382 100644
--- a/front/Dockerfile.dev
+++ b/front/Dockerfile.dev
@@ -4,4 +4,4 @@ WORKDIR /app
 RUN yarn global add npx expo-cli
 
 ENV DEVAPIURL http://back:3000
-CMD npx expo start --web
\ No newline at end of file
+CMD npx expo start
diff --git a/front/utils/navigator.tsx b/front/utils/navigator.tsx
index 5b3124a..1dea477 100644
--- a/front/utils/navigator.tsx
+++ b/front/utils/navigator.tsx
@@ -12,11 +12,15 @@ import * as React from 'react';
 
 import type { BottomTabNavigationConfig } from '@react-navigation/bottom-tabs/src/types';
 import type {
+	BottomTabHeaderProps,
 	BottomTabNavigationEventMap,
 	BottomTabNavigationOptions,
+	BottomTabNavigationProp,
 } from '@react-navigation/bottom-tabs';
 import { BottomTabView } from '@react-navigation/bottom-tabs';
 
+import { Screen, Header, getHeaderTitle, SafeAreaProviderCompat } from '@react-navigation/elements';
+
 import ScaffoldMobileCC from '../components/UI/ScaffoldMobileCC';
 import { useBreakpointValue } from 'native-base';
 import ScaffoldDesktopCC from '../components/UI/ScaffoldDesktopCC';
@@ -59,6 +63,18 @@ function BottomTabNavigator({
 	});
 
 	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
+	const descriptor = descriptors[state.routes[state.index]!.key]!;
+	const header =
+		descriptor.options.header ??
+		(({ layout, options }: BottomTabHeaderProps) => (
+			<Header
+				{...options}
+				layout={layout}
+				title={getHeaderTitle(options, state.routes[state.index]!.name)}
+			/>
+		));
+	const dimensions = SafeAreaProviderCompat.initialMetrics.frame;
+
 	return (
 		<NavigationContent>
 			{screenSize === 'small' ? (
@@ -71,11 +87,25 @@ function BottomTabNavigator({
 					sceneContainerStyle={sceneContainerStyle}
 				/>
 			) : (
-				<ScaffoldDesktopCC
-					state={state}
-					navigation={navigation}
-					descriptors={descriptors}>
-					{descriptors[state.routes[state.index]!.key]!.render()}
+				<ScaffoldDesktopCC state={state} navigation={navigation} descriptors={descriptors}>
+					<Screen
+						focused
+						navigation={descriptor.navigation}
+						route={descriptor.route}
+						headerShown={descriptor.options.headerShown}
+						headerStatusBarHeight={descriptor.options.headerStatusBarHeight}
+						headerTransparent={descriptor.options.headerTransparent}
+						header={header({
+							layout: dimensions,
+							route: descriptor.route,
+							navigation:
+								descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
+							options: descriptor.options,
+						})}
+						style={sceneContainerStyle}
+					>
+						{descriptor.render()}
+					</Screen>
 				</ScaffoldDesktopCC>
 			)}
 		</NavigationContent>
diff --git a/front/views/V2/DiscoveryView.tsx b/front/views/V2/DiscoveryView.tsx
index 42b2fbc..a419bb2 100644
--- a/front/views/V2/DiscoveryView.tsx
+++ b/front/views/V2/DiscoveryView.tsx
@@ -7,8 +7,7 @@ import API from '../../API';
 import { RouteProps, useNavigation } from '../../Navigation';
 import GoldenRatio from '../../components/V2/GoldenRatio';
 
-// eslint-disable-next-line @typescript-eslint/ban-types
-const HomeView = (props: RouteProps<{}>) => {
+const HomeView = () => {
 	const suggestionsQuery = useQuery(
 		API.getSongSuggestions(['artist', 'likedByUsers', 'SongHistory'])
 	);