Fix roomId handling

app/src/components/App.js

@@ -1,4 +1,5 @@
 import React, { useEffect, Suspense } from 'react';
+import { useParams} from 'react-router';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import JoinDialog from './JoinDialog';
@@ -13,6 +14,8 @@ const App = (props) =>
 		room
 	} = props;
 
+	let { id } = useParams();
+
 	useEffect(() =>
 	{
 		Room.preload();
@@ -23,7 +26,7 @@ const App = (props) =>
 	if (!room.joined)
 	{
 		return (
-			<JoinDialog />
+			<JoinDialog roomId={id} />
 		);
 	}
 	else

app/src/components/ChooseRoom.js

@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import { withRoomContext } from '../RoomContext';
-import * as roomActions from '../actions/roomActions';
 import PropTypes from 'prop-types';
 import { useIntl, FormattedMessage } from 'react-intl';
 import randomString from 'random-string';
@@ -166,13 +165,14 @@ const DialogActions = withStyles((theme) => ({
 
 const ChooseRoom = ({
 	roomClient,
-	roomId,
 	loggedIn,
 	myPicture,
-	changeRoomId,
 	classes
 }) =>
 {
+	const [ roomId, setRoomId ] =
+		useState(randomString({ length: 8 }).toLowerCase());
+
 	const intl = useIntl();
 
 	return (
@@ -214,12 +214,12 @@ const ChooseRoom = ({
 						{
 							const { value } = event.target;
 
-							changeRoomId(value);
+							setRoomId(value.toLowerCase());
 						}}
 						onBlur={() =>
 						{
 							if (roomId === '')
-								changeRoomId(randomString({ length: 8 }).toLowerCase());
+								setRoomId(randomString({ length: 8 }).toLowerCase());
 						}}
 						fullWidth
 					/>
@@ -253,43 +253,29 @@ const ChooseRoom = ({
 ChooseRoom.propTypes =
 {
 	roomClient   : PropTypes.any.isRequired,
-	roomId       : PropTypes.string,
 	loginEnabled : PropTypes.bool.isRequired,
 	loggedIn     : PropTypes.bool.isRequired,
 	myPicture    : PropTypes.string,
-	changeRoomId : PropTypes.func.isRequired,
 	classes      : PropTypes.object.isRequired
 };
 
 const mapStateToProps = (state) =>
 {
 	return {
-		roomId       : state.room.name,
 		loginEnabled : state.me.loginEnabled,
 		loggedIn     : state.me.loggedIn,
 		myPicture    : state.me.picture
 	};
 };
 
-const mapDispatchToProps = (dispatch) =>
-{
-	return {
-		changeRoomId : (roomId) =>
-		{
-			dispatch(roomActions.setRoomName(roomId));
-		}
-	};
-};
-
 export default withRoomContext(connect(
 	mapStateToProps,
-	mapDispatchToProps,
+	null,
 	null,
 	{
 		areStatesEqual : (next, prev) =>
 		{
 			return (
-				prev.room.name === next.room.name &&
 				prev.me.loginEnabled === next.me.loginEnabled &&
 				prev.me.loggedIn === next.me.loggedIn &&
 				prev.me.picture === next.me.picture

app/src/components/JoinDialog.js

@@ -165,6 +165,7 @@ const DialogActions = withStyles((theme) => ({
 const JoinDialog = ({
 	roomClient,
 	room,
+	roomId,
 	displayName,
 	displayNameInProgress,
 	loggedIn,
@@ -226,7 +227,7 @@ const JoinDialog = ({
 							id='room.roomId'
 							defaultMessage='Room ID: {roomName}'
 							values={{
-								roomName : room.name
+								roomName : roomId
 							}}
 						/>
 					</DialogContentText>
@@ -275,7 +276,7 @@ const JoinDialog = ({
 						<Button
 							onClick={() =>
 							{
-								roomClient.join({ joinVideo: false });
+								roomClient.join({ roomId, joinVideo: false });
 							}}
 							variant='contained'
 							color='secondary'
@@ -288,7 +289,7 @@ const JoinDialog = ({
 						<Button
 							onClick={() =>
 							{
-								roomClient.join({ joinVideo: true });
+								roomClient.join({ roomId, joinVideo: true });
 							}}
 							variant='contained'
 							color='secondary'
@@ -348,6 +349,7 @@ JoinDialog.propTypes =
 {
 	roomClient            : PropTypes.any.isRequired,
 	room                  : PropTypes.object.isRequired,
+	roomId                : PropTypes.string.isRequired,
 	displayName           : PropTypes.string.isRequired,
 	displayNameInProgress : PropTypes.bool.isRequired,
 	loginEnabled          : PropTypes.bool.isRequired,

app/src/components/appPropTypes.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 
 export const Room = PropTypes.shape(
 	{
-		url   : PropTypes.string.isRequired,
 		state : PropTypes.oneOf(
 			[ 'new', 'connecting', 'connected', 'closed' ]).isRequired,
 		activeSpeakerId : PropTypes.string