From ab519ffc96533b417d7a6633bc8102e766b444ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrien=20B=C3=A9raud?= <adrien.beraud@savoirfairelinux.com>
Date: Tue, 3 May 2022 15:34:48 -0400
Subject: [PATCH] update react, material
Change-Id: I4ae3cdf25982f0935641bf5846447e9d223563b4
---
JamiDaemon.js | 2 +-
README.txt | 4 +-
app.js | 2 +-
client/src/App.js | 67 ++++++++++++-------
client/src/AuthManager.js | 2 +-
client/src/components/AccountPreferences.js | 19 ++++--
client/src/components/ContactList.js | 2 +-
client/src/components/ConversationAvatar.js | 4 +-
client/src/components/ConversationList.js | 8 +--
client/src/components/ConversationListItem.js | 8 +--
.../components/ConversationsOverviewCard.js | 10 +--
client/src/components/Header.js | 10 +--
client/src/components/JamiIdCard.js | 4 +-
client/src/components/ListItemLink.js | 6 +-
client/src/components/Message.js | 4 +-
client/src/components/MessageList.js | 2 +-
client/src/components/NewContactForm.js | 4 +-
client/src/components/SendMessageForm.js | 21 ++++--
client/src/components/UsernameChooser.js | 4 +-
client/src/components/loading.js | 2 +-
client/src/components/welcome.js | 2 +-
client/src/index.js | 3 +-
client/src/pages/404.jsx | 3 -
client/src/pages/JamiMessenger.jsx | 19 +++---
client/src/pages/accountCreation.jsx | 6 +-
client/src/pages/accountSelection.jsx | 10 +--
client/src/pages/accountSettings.jsx | 2 +-
client/src/pages/addContactPage.jsx | 12 ++--
client/src/pages/jamiAccountCreation.jsx | 12 ++--
client/src/pages/loginDialog.jsx | 46 ++++++-------
client/src/pages/serverConfiguration.jsx | 29 +++++---
client/src/pages/serverSetup.jsx | 19 +++---
32 files changed, 193 insertions(+), 155 deletions(-)
diff --git a/JamiDaemon.js b/JamiDaemon.js
index efc39c12..1431a628 100755
--- a/JamiDaemon.js
+++ b/JamiDaemon.js
@@ -29,7 +29,7 @@ class JamiDaemon {
this.accounts = []
this.lookups = []
this.tempAccounts = []
- this.dring = require("./dring.node")
+ this.dring = require("./jamid.node")
this.dring.init({
AccountsChanged: () => {
console.log("AccountsChanged")
diff --git a/README.txt b/README.txt
index 6a6e74b5..51388abb 100644
--- a/README.txt
+++ b/README.txt
@@ -8,8 +8,8 @@ Next step will be to implement a video protocol such as WebRTC to allow audio an
# Main dependencies
-* Jami Deamon with NodeJS bindings (https://review.jami.net/admin/repos/ring-daemon),
-* NodeJS v14+
+* Jami Deamon with NodeJS bindings (https://review.jami.net/admin/repos/jami-daemon),
+* NodeJS v16+
# How to start the server
diff --git a/app.js b/app.js
index 9bff6340..da9e365e 100644
--- a/app.js
+++ b/app.js
@@ -1,7 +1,7 @@
'use strict'
import dotenv from 'dotenv'
-dotenv.config()
+const env = dotenv.config()
import { promises as fs } from 'fs'
import http from 'http'
diff --git a/client/src/App.js b/client/src/App.js
index 3687dccb..725cda0e 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -3,8 +3,10 @@
Author: Larbi Gharib <larbi.gharib@savoirfairelinux.com>
License: AGPL-3
*/
+import { ThemeProvider, StyledEngineProvider, createTheme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
import React, { useState, useEffect } from 'react'
-import { Route, Switch, Redirect } from 'react-router-dom'
+import { Route, Routes, Navigate, PageLayout, useNavigate } from 'react-router-dom'
import authManager from './AuthManager'
//import logo from './logo.svg'
import './App.scss'
@@ -21,6 +23,23 @@ import JamiAccountDialog from './pages/jamiAccountCreation.jsx'
import { AnimatePresence } from 'framer-motion'
import WelcomeAnimation from './components/welcome'
+const theme = createTheme();
+const useStyles = makeStyles((theme) => {
+ root: {
+ // some CSS that access to theme
+ }
+})
+
+const Home = (props) => {
+ console.log(`home ${props}`)
+ //const navigate = useNavigate()
+ const [state, setState] = useState({
+ auth: authManager.getState()
+ })
+
+ return <Navigate to="/account" />
+}
+
const App = (props) => {
const [state, setState] = useState({
loaded: false,
@@ -39,31 +58,31 @@ const App = (props) => {
if (displayWelcome) {
return <WelcomeAnimation showSetup={!state.auth.setupComplete} onComplete={() => setDisplayWelcome(false)} />
} else if (!state.auth.setupComplete) {
- return <Switch>
- <Route path="/setup" component={ServerSetup} />
- <Route><Redirect to="/setup" /></Route>
- </Switch>
+ return <Routes>
+ <Route path="/setup" element={<ServerSetup />} />
+ <Route path="/" element={<Navigate to="/setup" replace />} />
+ <Route index path="*" element={<Navigate to="/setup" replace />} />
+ </Routes>
}
- return <React.Fragment>
- <Route
- render={({ location }) => {
- console.log("App render location")
- return <AnimatePresence exitBeforeEnter initial={false}>
- <Switch location={location} key={location.pathname}>
- <Route exact path="/"><Redirect to="/account" /></Route>
- <Route path="/account/:accountId/settings" component={AccountSettings} />
- <Route path="/account/:accountId" component={JamiMessenger} />
- <Route path="/account" component={AccountSelection} />
- <Route path="/newAccount/jami" component={JamiAccountDialog} />
- <Route path="/newAccount" component={AccountCreationDialog} />
- <Route path="/setup"><Redirect to="/account" /></Route>
- <Route component={NotFoundPage} />
- </Switch>
- {!state.auth.authenticated && <SignInPage open={!state.auth.authenticated}/>}
- </AnimatePresence>}}
- />
- </React.Fragment>
+ return <ThemeProvider theme={theme}>
+ <Routes>
+ <Route path="/account">
+ <Route index element={<AccountSelection />} />
+ <Route path=":accountId">
+ <Route index path="*" element={<JamiMessenger />} />
+ <Route path="settings" element={<AccountSettings />} />
+ </Route>
+ </Route>
+ <Route path="/newAccount" element={<AccountCreationDialog />}>
+ <Route path="jami" element={<JamiAccountDialog />} />
+ </Route>
+ <Route path="/setup" element={<ServerSetup />} />
+ <Route path="/" index element={<Home />} />
+ <Route path="*" element={<NotFoundPage />} />
+ </Routes>
+ {!state.auth.authenticated && <SignInPage key="signin" open={!state.auth.authenticated}/>}
+ </ThemeProvider>
}
export default App
diff --git a/client/src/AuthManager.js b/client/src/AuthManager.js
index 83f731fc..21800cc8 100644
--- a/client/src/AuthManager.js
+++ b/client/src/AuthManager.js
@@ -119,7 +119,7 @@ class AuthManager {
console.log(response)
if (response.ok) {
console.log("Success, going home")
- //history.replace('/')
+ //navigate('/')
} else {
}
this.authenticating = false
diff --git a/client/src/components/AccountPreferences.js b/client/src/components/AccountPreferences.js
index 363df687..8160459d 100644
--- a/client/src/components/AccountPreferences.js
+++ b/client/src/components/AccountPreferences.js
@@ -1,7 +1,11 @@
import React, { useState } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import { List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader, Switch, Typography, Grid, Paper, CardContent, Card, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Toolbar, IconButton, ListItemAvatar, Input, TextField } from '@material-ui/core'
-import { PhoneCallbackRounded, GroupRounded, DeleteRounded, AddCircle } from '@material-ui/icons'
+
+
+import { makeStyles } from '@mui/styles'
+//import { createTheme, ThemeProvider } from '@mui/material/styles'
+
+import { List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader, Switch, Typography, Grid, Paper, CardContent, Card, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Toolbar, IconButton, ListItemAvatar, Input, TextField } from '@mui/material'
+import { PhoneCallbackRounded, GroupRounded, DeleteRounded, AddCircle } from '@mui/icons-material'
import Account from '../../../model/Account'
import JamiIdCard from './JamiIdCard'
@@ -28,7 +32,7 @@ const useStyles = makeStyles(theme => ({
},
textField: {
//marginLeft: theme.spacing(1),
- marginRight: theme.spacing(2),
+ //marginRight: theme.spacing(2),
}
}))
@@ -168,7 +172,7 @@ export default function AccountPreferences(props) {
placeholder="Enter new moderator name or URI"
fullWidth />
<ListItemSecondaryAction>
- <IconButton onClick={addModerator}><AddCircle /></IconButton>
+ <IconButton onClick={addModerator} size="large"><AddCircle /></IconButton>
</ListItemSecondaryAction>
</ListItem>
{!moderators || moderators.length === 0 ?
@@ -181,7 +185,7 @@ export default function AccountPreferences(props) {
</ListItemAvatar>
<ListItemText primary={moderator.getDisplayName()} />
<ListItemSecondaryAction>
- <IconButton onClick={e => removeModerator(moderator.uri)}><DeleteRounded /></IconButton>
+ <IconButton onClick={e => removeModerator(moderator.uri)} size="large"><DeleteRounded /></IconButton>
</ListItemSecondaryAction>
</ListItem>
))}
@@ -190,5 +194,6 @@ export default function AccountPreferences(props) {
</motion.div>
</List>
- </motion.div>)
+ </motion.div>
+ );
}
diff --git a/client/src/components/ContactList.js b/client/src/components/ContactList.js
index cbb64e15..2020a6e5 100644
--- a/client/src/components/ContactList.js
+++ b/client/src/components/ContactList.js
@@ -1,4 +1,4 @@
-import List from '@material-ui/core/List'
+import List from '@mui/material/List'
import React from 'react'
export default function ContactList() {
diff --git a/client/src/components/ConversationAvatar.js b/client/src/components/ConversationAvatar.js
index 601fcf62..e50c383d 100644
--- a/client/src/components/ConversationAvatar.js
+++ b/client/src/components/ConversationAvatar.js
@@ -1,6 +1,6 @@
import React from 'react'
-import { Avatar } from '@material-ui/core'
-import { PersonRounded } from '@material-ui/icons'
+import { Avatar } from '@mui/material'
+import { PersonRounded } from '@mui/icons-material'
export default function ConversationAvatar(props) {
return <Avatar>
diff --git a/client/src/components/ConversationList.js b/client/src/components/ConversationList.js
index 9fa46503..48053075 100644
--- a/client/src/components/ConversationList.js
+++ b/client/src/components/ConversationList.js
@@ -1,10 +1,10 @@
-import List from '@material-ui/core/List'
+import List from '@mui/material/List'
import React from 'react'
import ConversationListItem from './ConversationListItem'
-import ListSubheader from '@material-ui/core/ListSubheader';
+import ListSubheader from '@mui/material/ListSubheader';
import Conversation from '../../../model/Conversation';
-import { GroupRounded as GroupIcon } from '@material-ui/icons';
-import Typography from '@material-ui/core/Typography';
+import { GroupRounded as GroupIcon } from '@mui/icons-material';
+import Typography from '@mui/material/Typography';
export default function ConversationList(props) {
return (
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index 80a3aae9..ed69a770 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -1,7 +1,7 @@
-import { ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
+import { ListItem, ListItemAvatar, ListItemText } from '@mui/material'
import React from 'react'
import Conversation from '../../../model/Conversation'
-import { useHistory, useParams } from "react-router-dom"
+import { useNavigate, useParams } from "react-router-dom"
import ConversationAvatar from './ConversationAvatar'
export default function ConversationListItem(props) {
@@ -9,7 +9,7 @@ export default function ConversationListItem(props) {
const conversation = props.conversation
const pathId = conversationId || contactId
const isSelected = conversation.getDisplayUri() === pathId
- const history = useHistory()
+ const navigate = useNavigate()
const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${conversation.getFirstMember().contact.getUri()}`
if (conversation instanceof Conversation) {
@@ -18,7 +18,7 @@ export default function ConversationListItem(props) {
button
alignItems="flex-start"
selected={isSelected}
- onClick={() => history.replace(`/account/${conversation.getAccountId()}/${uri}`)}>
+ onClick={() => navigate(`/account/${conversation.getAccountId()}/${uri}`)}>
<ListItemAvatar><ConversationAvatar displayName={conversation.getDisplayNameNoFallback()} /></ListItemAvatar>
<ListItemText
primary={conversation.getDisplayName()} secondary={conversation.getDisplayUri()} />
diff --git a/client/src/components/ConversationsOverviewCard.js b/client/src/components/ConversationsOverviewCard.js
index 407ed941..9c57bffb 100644
--- a/client/src/components/ConversationsOverviewCard.js
+++ b/client/src/components/ConversationsOverviewCard.js
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
-import { Box, Card, CardActionArea, CardContent, CircularProgress, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { useHistory, useParams } from 'react-router';
+import { Box, Card, CardActionArea, CardContent, CircularProgress, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { useNavigate, useParams } from 'react-router';
import authManager from '../AuthManager'
import Conversation from '../../../model/Conversation';
@@ -15,7 +15,7 @@ const useStyles = makeStyles({
export default function ConversationsOverviewCard(props) {
const classes = useStyles()
- const history = useHistory()
+ const navigate = useNavigate()
const accountId = props.accountId || useParams().accountId
const [state, setState] = useState({ loaded: false })
@@ -31,7 +31,7 @@ export default function ConversationsOverviewCard(props) {
}, [accountId])
return (
- <Card onClick={() => history.push(`/account/${accountId}`)} >
+ <Card onClick={() => navigate(`/account/${accountId}`)} >
<CardActionArea>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
diff --git a/client/src/components/Header.js b/client/src/components/Header.js
index c621b56f..7db0dd24 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.js
@@ -1,17 +1,17 @@
import React, { useState } from 'react'
-import { Box, Button, Menu, MenuItem } from '@material-ui/core'
-import { useHistory, useParams } from "react-router-dom"
+import { Box, Button, Menu, MenuItem } from '@mui/material'
+import { useNavigate, useParams } from "react-router-dom"
import authManager from '../AuthManager'
export default function Header() {
- const history = useHistory()
+ const navigate = useNavigate()
const [anchorEl, setAnchorEl] = useState(null)
const handleClick = (event) => setAnchorEl(event.currentTarget)
const handleClose = () => setAnchorEl(null)
const params = useParams()
- const goToAccountSelection = () => history.push(`/account`)
- const goToAccountSettings = () => history.push(`/account/${params.accountId}/settings`)
+ const goToAccountSelection = () => navigate(`/account`)
+ const goToAccountSettings = () => navigate(`/account/${params.accountId}/settings`)
return (
<Box>
diff --git a/client/src/components/JamiIdCard.js b/client/src/components/JamiIdCard.js
index 1ecfd947..68c4e6cd 100644
--- a/client/src/components/JamiIdCard.js
+++ b/client/src/components/JamiIdCard.js
@@ -1,6 +1,6 @@
import React from 'react';
-import { Box, Card, CardContent, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, Card, CardContent, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
const useStyles = makeStyles({
title: {
diff --git a/client/src/components/ListItemLink.js b/client/src/components/ListItemLink.js
index 8ff17d18..915a24ba 100644
--- a/client/src/components/ListItemLink.js
+++ b/client/src/components/ListItemLink.js
@@ -1,8 +1,8 @@
import React, { useMemo, forwardRef } from 'react';
import PropTypes from 'prop-types';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
import { Link as RouterLink } from 'react-router-dom';
function ListItemLink(props) {
diff --git a/client/src/components/Message.js b/client/src/components/Message.js
index ab28177a..7cfbbdc2 100644
--- a/client/src/components/Message.js
+++ b/client/src/components/Message.js
@@ -1,5 +1,5 @@
-import { Typography } from '@material-ui/core'
-import { GroupOutlined } from '@material-ui/icons'
+import { Typography } from '@mui/material'
+import { GroupOutlined } from '@mui/icons-material'
import React from 'react'
import ConversationAvatar from './ConversationAvatar'
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index 175f19bc..3ae1b1c7 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,6 +1,6 @@
import Message from './Message'
import React, { useEffect } from 'react'
-import { Box, Divider, Typography } from '@material-ui/core'
+import { Box, Divider, Typography } from '@mui/material'
import ConversationAvatar from './ConversationAvatar'
export default function MessageList(props) {
diff --git a/client/src/components/NewContactForm.js b/client/src/components/NewContactForm.js
index 3543d6d2..a4c6f845 100644
--- a/client/src/components/NewContactForm.js
+++ b/client/src/components/NewContactForm.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react'
-import { InputBase, InputAdornment } from '@material-ui/core';
-import { SearchRounded } from '@material-ui/icons';
+import { InputBase, InputAdornment } from '@mui/material';
+import { SearchRounded } from '@mui/icons-material';
export default function NewContactForm(props) {
const [value, setValue] = useState('')
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index fa7c0f2d..ae0a7def 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -1,7 +1,7 @@
import React from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import { IconButton, InputBase, Paper, Popper } from '@material-ui/core'
-import { Send, EmojiEmotionsRounded } from '@material-ui/icons'
+import makeStyles from '@mui/styles/makeStyles';
+import { IconButton, InputBase, Paper, Popper } from '@mui/material'
+import { Send, EmojiEmotionsRounded } from '@mui/icons-material'
import EmojiPicker from 'emoji-picker-react'
import authManager from '../AuthManager'
@@ -56,7 +56,12 @@ export default function SendMessageForm(props) {
onSubmit={handleSubmit}
className="send-message-card"
className={classes.root}>
- <IconButton aria-describedby={id} variant="contained" color="primary" onClick={handleOpenEmojiPicker}>
+ <IconButton
+ aria-describedby={id}
+ variant="contained"
+ color="primary"
+ onClick={handleOpenEmojiPicker}
+ size="large">
<EmojiEmotionsRounded />
</IconButton>
<Popper
@@ -80,10 +85,14 @@ export default function SendMessageForm(props) {
value={currentMessage}
onChange={handleInputChange}
/>
- <IconButton type="submit" className={classes.iconButton} aria-label="search">
+ <IconButton
+ type="submit"
+ className={classes.iconButton}
+ aria-label="search"
+ size="large">
<Send />
</IconButton>
</Paper>
</div>
- )
+ );
}
diff --git a/client/src/components/UsernameChooser.js b/client/src/components/UsernameChooser.js
index 3d795ce7..2df96c6a 100644
--- a/client/src/components/UsernameChooser.js
+++ b/client/src/components/UsernameChooser.js
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'
import usePromise from "react-fetch-hook/usePromise"
-import { InputAdornment, TextField } from '@material-ui/core'
-import { SearchRounded } from '@material-ui/icons'
+import { InputAdornment, TextField } from '@mui/material'
+import { SearchRounded } from '@mui/icons-material'
import authManager from '../AuthManager'
const isInputValid = input => input && input.length > 2
diff --git a/client/src/components/loading.js b/client/src/components/loading.js
index 198b9933..dee6e88a 100644
--- a/client/src/components/loading.js
+++ b/client/src/components/loading.js
@@ -1,4 +1,4 @@
-import { CircularProgress, Container } from '@material-ui/core';
+import { CircularProgress, Container } from '@mui/material';
import React from 'react';
export default function LoadingPage() {
diff --git a/client/src/components/welcome.js b/client/src/components/welcome.js
index ff39c0be..46c054c4 100644
--- a/client/src/components/welcome.js
+++ b/client/src/components/welcome.js
@@ -1,4 +1,4 @@
-import { Button, Container } from '@material-ui/core';
+import { Button, Container } from '@mui/material';
import { AnimatePresence, motion } from 'framer-motion';
import React, { useState } from 'react';
import JamiLogo from '../../public/jami-logo-icon.svg'
diff --git a/client/src/index.js b/client/src/index.js
index 182e2cb0..27fa9554 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import App from './App.js'
import './index.scss'
-import { CssBaseline } from '@material-ui/core'
+//import { CssBaseline } from '@mui/material'
//import * as serviceWorker from './serviceWorker'
const rootEl = document.getElementById('root')
@@ -12,7 +12,6 @@ const rootEl = document.getElementById('root')
const render = Component =>
ReactDOM.render(
<React.StrictMode>
- <CssBaseline />
<Router>
<Component />
</Router>
diff --git a/client/src/pages/404.jsx b/client/src/pages/404.jsx
index 8d0dcb16..23882b25 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 13c8d481..97601469 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 9fc30cfc..22313669 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 6c52af4a..c9e07531 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 variants = {
}
const AccountSelection = (props) => {
- const history = useHistory()
+ const navigate = useNavigate()
const [state, setState] = useState({
loaded: false,
error: false,
@@ -30,7 +30,7 @@ const AccountSelection = (props) => {
.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 beca0fde..597d246c 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 a4c32d7b..d0451dfa 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 @@ const useStyles = makeStyles((theme) => ({
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 @@ export default function AddContactPage(props) {
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 ac597625..a37545d8 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 @@ export default function JamiAccountDialog(props) {
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 @@ export default function JamiAccountDialog(props) {
})
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 4e15ae16..cdefa71c 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 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 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 '@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 ba99fe6d..3bdfaaa8 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
+
+ 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() {
+ /*componentDidMount() {
this.controller = new AbortController()
if (this.req === undefined) {
this.req = authManager.fetch(`/api/serverConfig`, {signal: this.controller.signal})
@@ -27,7 +38,7 @@ const ServerOverview = (props) => {
componentWillUnmount() {
this.controller.abort()
this.req = undefined
- }
+ }*/
return (
<Container maxWidth="sm" className="app" >
@@ -37,4 +48,4 @@ const ServerOverview = (props) => {
)
}
-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 703f842e..db5b1552 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)
--
GitLab