From 4ec02d1b2db9910abfafb80857e0efc441223a68 Mon Sep 17 00:00:00 2001
From: Ingo Oppermann <ingo@datarhei.com>
Date: Thu, 10 Nov 2022 13:45:02 +0100
Subject: [PATCH] Fix ChannelSelect routing

---
 src/Router.js              |  8 ++++----
 src/views/ChannelSelect.js | 13 ++++++++++---
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/Router.js b/src/Router.js
index 50fc92a..76d06b4 100644
--- a/src/Router.js
+++ b/src/Router.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route, Navigate, Routes, HashRouter } from 'react-router-dom';
+import { Route, Navigate, Routes, HashRouter as DOMRouter } from 'react-router-dom';
 
 import Views from './views';
 
@@ -11,9 +11,9 @@ export default function Router(props) {
 	const channelid = props.restreamer.GetCurrentChannelID();
 
 	return (
-		<HashRouter>
+		<DOMRouter>
 			<Routes>
-				<Route path="/" element={<Views.ChannelSelect restreamer={props.restreamer} />} />
+				<Route path="/" element={<Views.ChannelSelect channelid={channelid} />} />
 				<Route path="/playersite" element={<Views.Playersite restreamer={props.restreamer} />} />
 				<Route path="/settings" element={<Views.Settings restreamer={props.restreamer} />} />
 				<Route path="/settings/:tab" element={<Views.Settings restreamer={props.restreamer} />} />
@@ -26,7 +26,7 @@ export default function Router(props) {
 				<Route path="/:channelid/publication/:service/:index" element={<Views.EditService key={channelid} restreamer={props.restreamer} />} />
 				<Route path="*" render={() => <Navigate to="/" replace />} />
 			</Routes>
-		</HashRouter>
+		</DOMRouter>
 	);
 }
 
diff --git a/src/views/ChannelSelect.js b/src/views/ChannelSelect.js
index a268654..ba4b6d9 100644
--- a/src/views/ChannelSelect.js
+++ b/src/views/ChannelSelect.js
@@ -3,17 +3,24 @@ import { useNavigate } from 'react-router-dom';
 
 export default function ChannelSelector(props) {
 	const navigate = useNavigate();
+	const [$channelid, setChannelid] = React.useState('');
 
 	React.useEffect(() => {
 		onMount();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const onMount = () => {
-		const channelid = props.restreamer.GetCurrentChannelID();
+	React.useEffect(() => {
+		navigate(`/${$channelid}`, { replace: true });
+	}, [navigate, $channelid]);
 
-		navigate(`/${channelid}`, { replace: true });
+	const onMount = () => {
+		setChannelid(props.channelid);
 	};
 
 	return null;
 }
+
+ChannelSelector.defaultProps = {
+	channelid: '',
+};