update react, material
Change-Id: I4ae3cdf25982f0935641bf5846447e9d223563b4
diff --git a/client/src/pages/404.jsx b/client/src/pages/404.jsx
index 8d0dcb1..23882b2 100644
--- a/client/src/pages/404.jsx
+++ b/client/src/pages/404.jsx
@@ -1,6 +1,3 @@
-import React from 'react';
-
-
const NotFoundPage = () => {
return (
<div>
diff --git a/client/src/pages/JamiMessenger.jsx b/client/src/pages/JamiMessenger.jsx
index 13c8d48..9760146 100644
--- a/client/src/pages/JamiMessenger.jsx
+++ b/client/src/pages/JamiMessenger.jsx
@@ -1,14 +1,11 @@
-import { Route, Switch, useRouteMatch } from "react-router";
+import { Route, Routes } from 'react-router-dom'
+
import Messenger from "./messenger.jsx"
export default function JamiMessenger(props) {
- const { path, url } = useRouteMatch();
-
- console.log("JamiMessenger render")
-
- return <Switch>
- <Route path={`${path}/addContact/:contactId`} component={Messenger} />
- <Route path={`${path}/conversation/:conversationId`} component={Messenger} />
- <Route path={`${path}`} component={Messenger} />
- </Switch>
-}
\ No newline at end of file
+ return <Routes>
+ <Route path="addContact/:contactId" element={<Messenger />} />
+ <Route path="conversation/:conversationId" element={<Messenger />} />
+ <Route index path="*" element={<Messenger />} />
+ </Routes>
+}
diff --git a/client/src/pages/accountCreation.jsx b/client/src/pages/accountCreation.jsx
index 9fc30cf..2231366 100644
--- a/client/src/pages/accountCreation.jsx
+++ b/client/src/pages/accountCreation.jsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { Container, Card, CardContent, Typography, List, Avatar, Divider } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { DialerSipRounded, GroupOutlined, RoomRounded } from '@material-ui/icons';
+import { Container, Card, CardContent, Typography, List, Avatar, Divider } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { DialerSipRounded, GroupOutlined, RoomRounded } from '@mui/icons-material';
import ListItemLink from '../components/ListItemLink';
const useStyles = makeStyles((theme) => ({
diff --git a/client/src/pages/accountSelection.jsx b/client/src/pages/accountSelection.jsx
index 6c52af4..c9e0753 100644
--- a/client/src/pages/accountSelection.jsx
+++ b/client/src/pages/accountSelection.jsx
@@ -1,13 +1,13 @@
import React, { useEffect, useState } from 'react';
-import { Avatar, Card, CardHeader, Container, List } from '@material-ui/core';
+import { Avatar, Card, CardHeader, Container, List } from '@mui/material';
import Header from '../components/Header'
import authManager from '../AuthManager'
import Account from '../../../model/Account';
import LoadingPage from '../components/loading';
import ListItemLink from '../components/ListItemLink';
import ConversationAvatar from '../components/ConversationAvatar';
-import { AddRounded } from '@material-ui/icons';
-import { useHistory } from 'react-router';
+import { AddRounded } from '@mui/icons-material';
+import { useNavigate } from 'react-router';
import { motion } from 'framer-motion';
const variants = {
@@ -16,7 +16,7 @@
}
const AccountSelection = (props) => {
- const history = useHistory()
+ const navigate = useNavigate()
const [state, setState] = useState({
loaded: false,
error: false,
@@ -30,7 +30,7 @@
.then(result => {
console.log(result)
if (result.length === 0) {
- history.replace('/newAccount')
+ navigate('/newAccount')
} else {
setState({
loaded: true,
diff --git a/client/src/pages/accountSettings.jsx b/client/src/pages/accountSettings.jsx
index beca0fd..597d246 100644
--- a/client/src/pages/accountSettings.jsx
+++ b/client/src/pages/accountSettings.jsx
@@ -1,6 +1,6 @@
import React, {useEffect, useState} from 'react';
import { useParams } from 'react-router';
-import { Container, CircularProgress } from '@material-ui/core';
+import { Container, CircularProgress } from '@mui/material';
import Header from '../components/Header'
import AccountPreferences from '../components/AccountPreferences'
import authManager from '../AuthManager'
diff --git a/client/src/pages/addContactPage.jsx b/client/src/pages/addContactPage.jsx
index a4c32d7..d0451df 100644
--- a/client/src/pages/addContactPage.jsx
+++ b/client/src/pages/addContactPage.jsx
@@ -1,9 +1,9 @@
import React from 'react';
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
-import { Box, Container, Fab, Card, CardContent, Typography } from '@material-ui/core';
-import GroupAddRounded from '@material-ui/icons/GroupAddRounded';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, Container, Fab, Card, CardContent, Typography } from '@mui/material';
+import GroupAddRounded from '@mui/icons-material/GroupAddRounded';
+import makeStyles from '@mui/styles/makeStyles';
import authManager from '../AuthManager'
const useStyles = makeStyles((theme) => ({
@@ -19,7 +19,7 @@
export default function AddContactPage(props) {
const classes = useStyles()
- const history = useHistory();
+ const navigate = useNavigate();
const accountId = props.accountId || props.match.params.accountId
const contactId = props.contactId || props.match.params.contactId
@@ -35,7 +35,7 @@
console.log(response)
if (response.conversationId) {
- history.push(`/account/${accountId}/conversation/${response.conversationId}`)
+ navigate(`/account/${accountId}/conversation/${response.conversationId}`)
}
}
diff --git a/client/src/pages/jamiAccountCreation.jsx b/client/src/pages/jamiAccountCreation.jsx
index ac59762..a37545d 100644
--- a/client/src/pages/jamiAccountCreation.jsx
+++ b/client/src/pages/jamiAccountCreation.jsx
@@ -1,10 +1,10 @@
import React, { useState } from 'react';
-import { Container, Card, CardContent, Typography, Fab, CardActions, Box } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { AddRounded } from '@material-ui/icons';
+import { Container, Card, CardContent, Typography, Fab, CardActions, Box } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { AddRounded } from '@mui/icons-material';
import UsernameChooser from '../components/UsernameChooser';
import authManager from '../AuthManager'
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
const useStyles = makeStyles((theme) => ({
extendedIcon: {
@@ -29,7 +29,7 @@
const [name, setName] = useState('')
const [loading, setLoading] = useState(false)
const [error, setError] = useState(false)
- const history = useHistory()
+ const navigate = useNavigate()
const onSubmit = async event => {
event.preventDefault()
@@ -49,7 +49,7 @@
})
console.log(result)
if (result && result.accountId)
- history.replace(`/account/${result.accountId}/settings`)
+ navigate(`/account/${result.accountId}/settings`)
}
return (
diff --git a/client/src/pages/loginDialog.jsx b/client/src/pages/loginDialog.jsx
index 4e15ae1..cdefa71 100644
--- a/client/src/pages/loginDialog.jsx
+++ b/client/src/pages/loginDialog.jsx
@@ -1,29 +1,29 @@
import React from 'react';
-import Avatar from '@material-ui/core/Avatar';
-import Button from '@material-ui/core/Button';
-import TextField from '@material-ui/core/TextField';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-import Link from '@material-ui/core/Link';
-import Grid from '@material-ui/core/Grid';
-import Box from '@material-ui/core/Box';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import CardActionArea from '@material-ui/core/CardActionArea';
-import CardActions from '@material-ui/core/CardActions';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Link from '@mui/material/Link';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardActions from '@mui/material/CardActions';
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
-import Typography from '@material-ui/core/Typography';
-//import { makeStyles } from '@material-ui/core/styles';
-import Container from '@material-ui/core/Container';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import Typography from '@mui/material/Typography';
+//import { makeStyles } from '@mui/material/styles';
+import Container from '@mui/material/Container';
import { Redirect } from 'react-router-dom';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
+import CircularProgress from '@mui/material/CircularProgress';
+import DialogTitle from '@mui/material/DialogTitle';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
import authManager from '../AuthManager'
diff --git a/client/src/pages/serverConfiguration.jsx b/client/src/pages/serverConfiguration.jsx
index ba99fe6..3bdfaaa 100644
--- a/client/src/pages/serverConfiguration.jsx
+++ b/client/src/pages/serverConfiguration.jsx
@@ -1,18 +1,29 @@
-import React from 'react';
+import React from 'react'
import Header from '../components/Header'
import AccountPreferences from '../components/AccountPreferences'
-import Container from '@material-ui/core/Container';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import Container from '@mui/material/Container'
+import CircularProgress from '@mui/material/CircularProgress'
import authManager from '../AuthManager'
import Account from '../../../model/Account'
const ServerOverview = (props) => {
- this.accountId = props.accountId || props.match.params.accountId
- this.state = { loaded: false, account: props.account }
- this.req = undefined
+ this.accountId = props.accountId || props.match.params.accountId
+ this.state = { loaded: false, account: props.account }
+ this.req = undefined
- componentDidMount() {
+ useEffect(() => {
+ const controller = new AbortController()
+ authManager.fetch(`/api/serverConfig`, {signal: controller.signal})
+ .then(res => res.json())
+ .then(result => {
+ console.log(result)
+ setState({loaded: true, account: Account.from(result)})
+ }).catch(e => console.log(e))
+ return () => controller.abort()
+ }, [accountId])
+
+ /*componentDidMount() {
this.controller = new AbortController()
if (this.req === undefined) {
this.req = authManager.fetch(`/api/serverConfig`, {signal: this.controller.signal})
@@ -27,7 +38,7 @@
componentWillUnmount() {
this.controller.abort()
this.req = undefined
- }
+ }*/
return (
<Container maxWidth="sm" className="app" >
@@ -37,4 +48,4 @@
)
}
-export default ServerOverview;
\ No newline at end of file
+export default ServerOverview
\ No newline at end of file
diff --git a/client/src/pages/serverSetup.jsx b/client/src/pages/serverSetup.jsx
index 703f842..db5b155 100644
--- a/client/src/pages/serverSetup.jsx
+++ b/client/src/pages/serverSetup.jsx
@@ -1,32 +1,33 @@
import React, { useState } from 'react'
-import { useHistory } from "react-router-dom"
+import { useNavigate } from "react-router-dom"
-import { Box, Container, Fab, Card, CardContent, Typography, Input } from '@material-ui/core'
-import GroupAddRounded from '@material-ui/icons/GroupAddRounded'
-import { makeStyles } from '@material-ui/core/styles'
+import { Box, Container, Fab, Card, CardContent, Typography, Input } from '@mui/material'
+import GroupAddRounded from '@mui/icons-material/GroupAddRounded'
+import { makeStyles } from '@mui/styles';
import authManager from '../AuthManager'
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
- margin: theme.spacing(1),
+ //margin: theme.spacing(1),
},
},
extendedIcon: {
- marginRight: theme.spacing(1),
+ //marginRight: theme.spacing(1),
},
wizardCard: {
borderRadius: 8,
maxWidth: 360,
margin: "16px auto"
- }, textField: {
- margin: theme.spacing(1),
+ },
+ textField: {
+ //margin: theme.spacing(1),
}
}))
export default function ServerSetup(props) {
const classes = useStyles()
- const history = useHistory()
+ const navigate = useNavigate()
const [password, setPassword] = useState('')
const [passwordRepeat, setPasswordRepeat] = useState('')
const [loading, setLoading] = useState(false)