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