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