Adrien Béraud | 023f7cf | 2022-09-18 14:57:53 -0400 | [diff] [blame] | 1 | import { Fragment, useEffect, useState } from 'react' |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 2 | import { Avatar, Card, CardHeader, Container, List } from '@mui/material'; |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 3 | import Header from '../components/Header' |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 4 | import authManager from '../AuthManager' |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 5 | import Account from '../../../model/Account'; |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 6 | import LoadingPage from '../components/loading'; |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 7 | import ListItemLink from '../components/ListItemLink'; |
| 8 | import ConversationAvatar from '../components/ConversationAvatar'; |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 9 | import { AddRounded } from '@mui/icons-material'; |
| 10 | import { useNavigate } from 'react-router'; |
Adrien Béraud | 6c93496 | 2021-06-07 10:13:26 -0400 | [diff] [blame] | 11 | import { motion } from 'framer-motion'; |
| 12 | |
| 13 | const variants = { |
| 14 | enter: { opacity: 1, y: 0 }, |
| 15 | exit: { opacity: 0, y: "-50px" }, |
| 16 | } |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 17 | |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 18 | const AccountSelection = (props) => { |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 19 | const navigate = useNavigate() |
idillon | 2899696 | 2022-09-06 17:49:41 -0400 | [diff] [blame] | 20 | const [loaded, setLoaded] = useState(false) |
| 21 | const [error, setError] = useState(false) |
| 22 | const [accounts, setAccounts] = useState([]) |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 23 | |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 24 | useEffect(() => { |
| 25 | const controller = new AbortController() |
| 26 | authManager.fetch(`/api/accounts`, {signal: controller.signal}) |
| 27 | .then(res => res.json()) |
| 28 | .then(result => { |
| 29 | console.log(result) |
Adrien Béraud | e5cad98 | 2021-06-07 10:05:50 -0400 | [diff] [blame] | 30 | if (result.length === 0) { |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 31 | navigate('/newAccount') |
Adrien Béraud | e5cad98 | 2021-06-07 10:05:50 -0400 | [diff] [blame] | 32 | } else { |
idillon | 2899696 | 2022-09-06 17:49:41 -0400 | [diff] [blame] | 33 | setLoaded(true) |
| 34 | setAccounts(result.map(account => Account.from(account))) |
Adrien Béraud | e5cad98 | 2021-06-07 10:05:50 -0400 | [diff] [blame] | 35 | } |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 36 | }, error => { |
| 37 | console.log(`get error ${error}`) |
idillon | 2899696 | 2022-09-06 17:49:41 -0400 | [diff] [blame] | 38 | setLoaded(true) |
| 39 | setError(true) |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 40 | }).catch(e => console.log(e)) |
idillon | 2899696 | 2022-09-06 17:49:41 -0400 | [diff] [blame] | 41 | // return () => controller.abort() // crash on React18 |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 42 | }, []) |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 43 | |
idillon | 2899696 | 2022-09-06 17:49:41 -0400 | [diff] [blame] | 44 | if (!loaded) |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 45 | return <LoadingPage /> |
| 46 | return ( |
Adrien Béraud | 023f7cf | 2022-09-18 14:57:53 -0400 | [diff] [blame] | 47 | <Fragment> |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 48 | <Header /> |
| 49 | <Container maxWidth="sm" style={{paddingBottom:32}}> |
Adrien Béraud | 6c93496 | 2021-06-07 10:13:26 -0400 | [diff] [blame] | 50 | <motion.div drag="x" initial="exit" animate="enter" exit="exit" variants={variants}> |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 51 | <Card style={{marginTop:32, marginBottom:32}}> |
| 52 | <CardHeader title="Choose an account" /> |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 53 | <List> |
idillon | 2899696 | 2022-09-06 17:49:41 -0400 | [diff] [blame] | 54 | {accounts.map(account => <ListItemLink key={account.getId()} |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 55 | icon={<ConversationAvatar displayName={account.getDisplayNameNoFallback()} />} |
| 56 | to={`/account/${account.getId()}/settings`} |
| 57 | primary={account.getDisplayName()} |
| 58 | secondary={account.getDisplayUri()} />)} |
| 59 | <ListItemLink |
| 60 | icon={<Avatar><AddRounded /></Avatar>} |
| 61 | to='/newAccount' |
| 62 | primary="Create new account" /> |
| 63 | </List> |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 64 | </Card> |
Adrien Béraud | 6c93496 | 2021-06-07 10:13:26 -0400 | [diff] [blame] | 65 | </motion.div> |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 66 | </Container> |
Adrien Béraud | 023f7cf | 2022-09-18 14:57:53 -0400 | [diff] [blame] | 67 | </Fragment> |
| 68 | ); |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 69 | } |
| 70 | |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 71 | export default AccountSelection |