Webatrice: update package.json (#4590)

* update package.json

* cleanup

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/containers/App/AppShellRoutes.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 
 import { RouteEnum } from 'types';
 import {
@@ -15,23 +15,22 @@ import {
   Unsupported
 } from 'containers';
 
-const Routes = () => (
+const AppShellRoutes = () => (
   <div className="AppShell-routes overflow-scroll">
-    <Switch>
-      <Route path={RouteEnum.ACCOUNT} render={() => <Account />} />
-      <Route path={RouteEnum.DECKS} render={() => <Decks />} />
-      <Route path={RouteEnum.GAME} render={() => <Game />} />
-      <Route path={RouteEnum.LOGS} render={() => <Logs />} />
-      <Route path={RouteEnum.PLAYER} render={() => <Player />} />
-      {<Route path={RouteEnum.ROOM} render={() => <Room />} />}
-      <Route path={RouteEnum.SERVER} render={() => <Server />} />
-      <Route path={RouteEnum.LOGIN} render={() => <Login />} />
-      <Route path={RouteEnum.INITIALIZE} render={() => <Initialize />} />
-      <Route path={RouteEnum.UNSUPPORTED} render={() => <Unsupported />} />
+    <Routes>
+      <Route path='*' element={<Initialize />} />
 
-      <Redirect from="*" to={RouteEnum.INITIALIZE} />
-    </Switch>
+      <Route path={RouteEnum.ACCOUNT} element={<Account />} />
+      <Route path={RouteEnum.DECKS} element={<Decks />} />
+      <Route path={RouteEnum.GAME} element={<Game />} />
+      <Route path={RouteEnum.LOGS} element={<Logs />} />
+      <Route path={RouteEnum.PLAYER} element={<Player />} />
+      {<Route path={RouteEnum.ROOM} element={<Room />} />}
+      <Route path={RouteEnum.SERVER} element={<Server />} />
+      <Route path={RouteEnum.LOGIN} element={<Login />} />
+      <Route path={RouteEnum.UNSUPPORTED} element={<Unsupported />} />
+    </Routes>
   </div>
 );
 
-export default Routes;
+export default AppShellRoutes;

webclient/src/containers/App/FeatureDetection.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 import { dexieService } from 'services';
 import { RouteEnum } from 'types';
 
@@ -15,7 +15,7 @@ const FeatureDetection = () => {
   }, []);
 
   return unsupported
-    ? <Redirect from="*" to={RouteEnum.UNSUPPORTED} />
+    ? <Navigate to={RouteEnum.UNSUPPORTED} />
     : <></>;
 
   function detectIndexedDB() {

webclient/src/containers/Initialize/Initialize.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 import { connect } from 'react-redux';
-import { Redirect, withRouter } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 
@@ -28,7 +28,7 @@ const Initialize = ({ initialized }: InitializeProps) => {
   const { t } = useTranslation();
 
   return initialized
-    ? <Redirect from="*" to={RouteEnum.LOGIN} />
+    ? <Navigate to={RouteEnum.LOGIN} />
     : (
       <div className={'Initialize ' + classes.root}>
         <div className='Initialize-content'>
@@ -60,4 +60,4 @@ const mapStateToProps = state => ({
   initialized: ServerSelectors.getInitialized(state),
 });
 
-export default withRouter(connect(mapStateToProps)(Initialize));
+export default connect(mapStateToProps)(Initialize);

webclient/src/containers/Login/Login.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
-import { Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
@@ -221,7 +221,7 @@ const Login = ({ state, description, connectOptions }: LoginProps) => {
 
   return (
     <div className={'login overflow-scroll ' + classes.root}>
-      { isConnected && <Redirect from="*" to={RouteEnum.SERVER} />}
+      { isConnected && <Navigate to={RouteEnum.SERVER} />}
 
       <div className="login__wrapper">
         <Paper className="login-content">

webclient/src/containers/Room/Room.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
-import { withRouter, generatePath } from 'react-router-dom';
+import { useNavigate, useParams, generatePath } from 'react-router-dom';
 
 import ListItem from '@material-ui/core/ListItem';
 import Paper from '@material-ui/core/Paper';
@@ -17,26 +17,28 @@ import SayMessage from './SayMessage';
 import './Room.css';
 
 // @TODO (3)
-function Room(props) {
+const Room = (props) => {
+  const { joined, rooms, messages } = props;
+  const navigate = useNavigate();
+  const params = useParams();
 
-  const { joined, match, history, rooms, messages } = props;
-  const roomId = parseInt(match.params.roomId, 0);
+  const roomId = parseInt(params.roomId, 0);
+  const room = rooms[roomId];
+  const roomMessages = messages[roomId];
+  const users = room.userList;
 
-  if (!joined.find(({ roomId: id }) => id === roomId)) {
-    history.push(generatePath(RouteEnum.SERVER));
-  }
+  useEffect(() => {
+    if (!joined.find(({ roomId: id }) => id === roomId)) {
+      navigate(generatePath(RouteEnum.SERVER));
+    }
+  }, [joined]);
 
-  function handleRoomSay({ message }) {
+  const handleRoomSay = ({ message }) => {
     if (message) {
       RoomsService.roomSay(roomId, message);
     }
   }
 
-  const room = rooms[roomId];
-
-  const roomMessages = messages[roomId];
-  const users = room.userList;
-
   return (
     <div className="room-view">
       <AuthGuard />
@@ -98,4 +100,4 @@ const mapStateToProps = state => ({
   joined: RoomsSelectors.getJoinedRooms(state),
 });
 
-export default withRouter(connect(mapStateToProps)(Room));
+export default connect(mapStateToProps)(Room);

webclient/src/containers/Room/SayMessage.tsx

@@ -3,22 +3,17 @@ import { Form } from 'react-final-form'
 
 import { InputAction } from 'components';
 
-const required = (value) => (value ? undefined : 'Required');
-
-const SayMessage = (props) => {
-  const { onSubmit } = props
-  return (
-    <Form onSubmit={values => onSubmit(values)}>
-      {({ handleSubmit, form }) => (
-        <form onSubmit={e => {
-          handleSubmit(e)
-          form.restart()
-        }}>
-          <InputAction action="Send" label="Chat" name="message" validate={required}/>
-        </form>
-      )}
-    </Form>
-  );
-}
+const SayMessage = ({ onSubmit }) => (
+  <Form onSubmit={onSubmit}>
+    {({ handleSubmit, form }) => (
+      <form onSubmit={e => {
+        handleSubmit(e)
+        form.restart()
+      }}>
+        <InputAction action="Send" label="Chat" name="message" />
+      </form>
+    )}
+  </Form>
+);
 
 export default SayMessage;

webclient/src/containers/Server/Rooms.tsx

@@ -1,6 +1,6 @@
 // eslint-disable-next-line
 import React from "react";
-import { generatePath } from 'react-router-dom';
+import { generatePath, useNavigate } from 'react-router-dom';
 import * as _ from 'lodash';
 
 import Button from '@material-ui/core/Button';
@@ -16,10 +16,12 @@ import { RouteEnum } from 'types';
 
 import './Rooms.css';
 
-const Rooms = ({ rooms, joinedRooms, history }) => {
+const Rooms = ({ rooms, joinedRooms }) => {
+  const navigate = useNavigate();
+
   function onClick(roomId) {
     if (_.find(joinedRooms, room => room.roomId === roomId)) {
-      history.push(generatePath(RouteEnum.ROOM, { roomId }));
+      navigate(generatePath(RouteEnum.ROOM, { roomId }));
     } else {
       RoomsService.joinRoom(roomId);
     }

webclient/src/containers/Server/Server.tsx

@@ -1,59 +1,62 @@
 // eslint-disable-next-line
 import React, { Component } from "react";
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+import { generatePath, useNavigate } from 'react-router-dom';
 
 import ListItem from '@material-ui/core/ListItem';
 import Paper from '@material-ui/core/Paper';
 
-import { RoomsSelectors, ServerSelectors } from 'store';
-
 import { AuthGuard, ThreePaneLayout, UserDisplay, VirtualList } from 'components';
-import { Room, User } from 'types';
+import { useReduxEffect } from 'hooks';
+import { RoomsSelectors, RoomsTypes, ServerSelectors } from 'store';
+import { Room, RouteEnum, User } from 'types';
 import Rooms from './Rooms';
 
 import './Server.css';
 
-class Server extends Component<ServerProps, ServerState> {
-  render() {
-    const { message, rooms, joinedRooms, history, users } = this.props;
+const Server = ({ message, rooms, joinedRooms, users }: ServerProps) => {
+  const navigate = useNavigate();
 
-    return (
-      <div className="server-rooms">
-        <AuthGuard />
+  useReduxEffect((action: any) => {
+    const roomId = action.roomInfo.roomId.toString();
+    navigate(generatePath(RouteEnum.ROOM, { roomId }));
+  }, RoomsTypes.JOIN_ROOM, []);
 
-        <ThreePaneLayout
-          top={(
-            <Paper className="serverRoomWrapper overflow-scroll">
-              <Rooms rooms={rooms} joinedRooms={joinedRooms} history={history} />
-            </Paper>
-          )}
+  return (
+    <div className="server-rooms">
+      <AuthGuard />
 
-          bottom={(
-            <Paper className="serverMessage overflow-scroll">
-              <div className="serverMessage__content" dangerouslySetInnerHTML={{ __html: message }} />
-            </Paper>
-          )}
+      <ThreePaneLayout
+        top={(
+          <Paper className="serverRoomWrapper overflow-scroll">
+            <Rooms rooms={rooms} joinedRooms={joinedRooms} />
+          </Paper>
+        )}
 
-          side={(
-            <Paper className="server-rooms__side overflow-scroll">
-              <div className="server-rooms__side-label">
-                Users connected to server: {users.length}
-              </div>
-              <VirtualList
-                itemKey={(index) => users[index].name }
-                items={ users.map(user => (
-                  <ListItem button dense>
-                    <UserDisplay user={user} />
-                  </ListItem>
-                )) }
-              />
-            </Paper>
-          )}
-        />
-      </div>
-    );
-  }
+        bottom={(
+          <Paper className="serverMessage overflow-scroll">
+            <div className="serverMessage__content" dangerouslySetInnerHTML={{ __html: message }} />
+          </Paper>
+        )}
+
+        side={(
+          <Paper className="server-rooms__side overflow-scroll">
+            <div className="server-rooms__side-label">
+              Users connected to server: {users.length}
+            </div>
+            <VirtualList
+              itemKey={(index) => users[index].name }
+              items={ users.map(user => (
+                <ListItem button dense>
+                  <UserDisplay user={user} />
+                </ListItem>
+              )) }
+            />
+          </Paper>
+        )}
+      />
+    </div>
+  );
 }
 
 interface ServerProps {
@@ -61,11 +64,6 @@ interface ServerProps {
   rooms: Room[];
   joinedRooms: Room[];
   users: User[];
-  history: any;
-}
-
-interface ServerState {
-
 }
 
 const mapStateToProps = state => ({
@@ -75,4 +73,4 @@ const mapStateToProps = state => ({
   users: ServerSelectors.getUsers(state)
 });
 
-export default withRouter(connect(mapStateToProps)(Server));
+export default connect(mapStateToProps)(Server);

webclient/src/containers/Unsupported/Unsupported.tsx

@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { withRouter } from 'react-router-dom';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 
@@ -27,4 +26,4 @@ const mapStateToProps = state => ({
 
 });
 
-export default withRouter(connect(mapStateToProps)(Unsupported));
+export default connect(mapStateToProps)(Unsupported);