simon | d47ef9e | 2022-09-28 22:24:28 -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'; |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 3 | import Header from '../components/Header'; |
| 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 }, |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 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) => { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 19 | const navigate = useNavigate(); |
| 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(() => { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 25 | const controller = new AbortController(); |
| 26 | authManager |
| 27 | .fetch(`/api/accounts`, { signal: controller.signal }) |
| 28 | .then((res) => res.json()) |
| 29 | .then( |
| 30 | (result) => { |
| 31 | console.log(result); |
| 32 | if (result.length === 0) { |
| 33 | navigate('/newAccount'); |
| 34 | } else { |
| 35 | setLoaded(true); |
| 36 | setAccounts(result.map((account) => Account.from(account))); |
| 37 | } |
| 38 | }, |
| 39 | (error) => { |
| 40 | console.log(`get error ${error}`); |
| 41 | setLoaded(true); |
| 42 | setError(true); |
Adrien Béraud | e5cad98 | 2021-06-07 10:05:50 -0400 | [diff] [blame] | 43 | } |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 44 | ) |
| 45 | .catch((e) => console.log(e)); |
| 46 | // return () => controller.abort() // crash on React18 |
| 47 | }, []); |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 48 | |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 49 | if (!loaded) return <LoadingPage />; |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 50 | return ( |
Adrien Béraud | 023f7cf | 2022-09-18 14:57:53 -0400 | [diff] [blame] | 51 | <Fragment> |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 52 | <Header /> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 53 | <Container maxWidth="sm" style={{ paddingBottom: 32 }}> |
Adrien Béraud | 6c93496 | 2021-06-07 10:13:26 -0400 | [diff] [blame] | 54 | <motion.div drag="x" initial="exit" animate="enter" exit="exit" variants={variants}> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 55 | <Card style={{ marginTop: 32, marginBottom: 32 }}> |
| 56 | <CardHeader title="Choose an account" /> |
| 57 | <List> |
| 58 | {accounts.map((account) => ( |
| 59 | <ListItemLink |
| 60 | key={account.getId()} |
| 61 | icon={<ConversationAvatar displayName={account.getDisplayNameNoFallback()} />} |
| 62 | to={`/account/${account.getId()}/settings`} |
| 63 | primary={account.getDisplayName()} |
| 64 | secondary={account.getDisplayUri()} |
| 65 | /> |
| 66 | ))} |
| 67 | <ListItemLink |
| 68 | icon={ |
| 69 | <Avatar> |
| 70 | <AddRounded /> |
| 71 | </Avatar> |
| 72 | } |
| 73 | to="/newAccount" |
| 74 | primary="Create new account" |
| 75 | /> |
| 76 | </List> |
| 77 | </Card> |
Adrien Béraud | 6c93496 | 2021-06-07 10:13:26 -0400 | [diff] [blame] | 78 | </motion.div> |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 79 | </Container> |
Adrien Béraud | 023f7cf | 2022-09-18 14:57:53 -0400 | [diff] [blame] | 80 | </Fragment> |
| 81 | ); |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 82 | }; |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 83 | |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 84 | export default AccountSelection; |