From 03c267742b12c4271804f4e04d5306073d861007 Mon Sep 17 00:00:00 2001
From: Arthi-chaud <arthur.jamet@gmail.com>
Date: Tue, 10 Jan 2023 10:20:31 +0000
Subject: [PATCH] Front: Play Page: Use Timer, and push Score page on end

---
 front/app.config.ts      |  1 +
 front/package.json       |  1 +
 front/views/PlayView.tsx | 34 +++++++++++++++++++++++-----------
 front/yarn.lock          |  5 +++++
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/front/app.config.ts b/front/app.config.ts
index 5bf8e63..134c0bd 100644
--- a/front/app.config.ts
+++ b/front/app.config.ts
@@ -33,6 +33,7 @@ module.exports = {
   },
   "extra": {
     apiUrl: process.env.API_URL,
+    scoroUrl: process.env.SCORO_URL,
     "eas": {
       "projectId": "dade8e5e-3e2c-49f7-98c5-cf8834c7ebb2"
     }
diff --git a/front/package.json b/front/package.json
index c84e7b5..f680571 100644
--- a/front/package.json
+++ b/front/package.json
@@ -49,6 +49,7 @@
     "react-native-testing-library": "^6.0.0",
     "react-native-web": "~0.18.9",
     "react-redux": "^8.0.2",
+    "react-timer-hook": "^3.0.5",
     "redux-persist": "^6.0.0",
     "yup": "^0.32.11"
   },
diff --git a/front/views/PlayView.tsx b/front/views/PlayView.tsx
index 28cc5a6..a78b9e4 100644
--- a/front/views/PlayView.tsx
+++ b/front/views/PlayView.tsx
@@ -7,6 +7,8 @@ import { useNavigation } from '@react-navigation/native';
 import { useQuery } from 'react-query';
 import API from '../API';
 import LoadingComponent from '../components/Loading';
+import Constants from 'expo-constants';
+import { useStopwatch } from 'react-timer-hook';
 
 type PlayViewProps = {
 	songId: number
@@ -17,11 +19,11 @@ const PlayView = ({ songId }: PlayViewProps) => {
 	const song = useQuery(['song'], () => API.getSong(songId));
 	const toast = useToast();
 	const webSocket = useRef<WebSocket>();
-	const timer = useRef<NodeJS.Timer>();
-	// If paused is undefined, it means the song as not started yet
+	const timer = useStopwatch({ autoStart: false });
 	const [paused, setPause] = useState<boolean>();
 
 	const onPause = () => {
+		timer.pause();
 		setPause(true);
 		webSocket.current?.send(JSON.stringify({
 			type: "pause",
@@ -49,18 +51,27 @@ const PlayView = ({ songId }: PlayViewProps) => {
 			time: Date.now()
 		}));
 		
-		if (inputs.size < 1) {
+		if (inputs.size < 2) {
+			toast.show({ description: 'No MIDI Keyboard found' });
 			return;
 		}
 		toast.show({ description: `MIDI ready!`, placement: 'top' });
 		let inputIndex = 0;
-		webSocket.current = new WebSocket(process.env.SCORO_URL!);
-		webSocket.current.send(JSON.stringify({
-			type: "start",
-			name: "clair-de-lune" /*song.data.id*/,
-		}));
+		webSocket.current = new WebSocket(Constants.manifest?.extra?.scoroUrl);
+		webSocket.current.onopen = () => {
+			webSocket.current!.send(JSON.stringify({
+				type: "start",
+				name: "clair-de-lune" /*song.data.id*/,
+			}));
+			timer.start();
+		};
 		webSocket.current.onmessage = (message) => {
-			toast.show({ description: message.data });
+			const data = JSON.parse(message.data);
+			if (data.type == 'end') {
+				navigation.navigate('Score');
+			} else if (data.song_launched == undefined) {
+				toast.show({ description: data, placement: 'top', colorScheme: 'secondary' });
+			}
 		}
 		setPause(false);
 		inputs.forEach((input) => {
@@ -89,6 +100,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 
 		return () => {
 			ScreenOrientation.unlockAsync().catch(() => {});
+			clearInterval(timer);
 			onEnd();
 		}
 	}, [])
@@ -117,7 +129,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 						    as: Ionicons,
 						    name: "play-back"
 						}}/>
-						<IconButton size='sm'  variant='solid'  _icon={{
+						<IconButton size='sm' variant='solid' _icon={{
 						    as: Ionicons,
 						    name: paused === false ? "pause" : "play"
 						}} onPress={() => { 
@@ -127,7 +139,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 								onPause();
 							}
 						 }}/>
-						<Text>0:30</Text>
+						<Text>{timer.minutes}:{timer.seconds.toString().padStart(2, '0')}</Text>
 						<IconButton size='sm' colorScheme='coolGray' variant='solid' _icon={{
 						    as: Ionicons,
 						    name: "stop"
diff --git a/front/yarn.lock b/front/yarn.lock
index f111872..1e4881d 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -11401,6 +11401,11 @@ react-test-renderer@17.0.2, react-test-renderer@~17.0.2:
     react-shallow-renderer "^16.13.1"
     scheduler "^0.20.2"
 
+react-timer-hook@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/react-timer-hook/-/react-timer-hook-3.0.5.tgz#a8d930f99b180cd88da245965a26a17df3e7457b"
+  integrity sha512-n+98SdmYvui2ne3KyWb3Ldu4k0NYQa3g/VzW6VEIfZJ8GAk/jJsIY700M8Nd2vNSTj05c7wKyQfJBqZ0x7zfiA==
+
 react@18.1.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"