Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 1 | import React, { 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() |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 20 | const [state, setState] = useState({ |
| 21 | loaded: false, |
| 22 | error: false, |
| 23 | accounts: [] |
| 24 | }) |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 25 | |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 26 | useEffect(() => { |
| 27 | const controller = new AbortController() |
| 28 | authManager.fetch(`/api/accounts`, {signal: controller.signal}) |
| 29 | .then(res => res.json()) |
| 30 | .then(result => { |
| 31 | console.log(result) |
Adrien Béraud | e5cad98 | 2021-06-07 10:05:50 -0400 | [diff] [blame] | 32 | if (result.length === 0) { |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 33 | navigate('/newAccount') |
Adrien Béraud | e5cad98 | 2021-06-07 10:05:50 -0400 | [diff] [blame] | 34 | } else { |
| 35 | setState({ |
| 36 | loaded: true, |
| 37 | accounts: result.map(account => Account.from(account)), |
| 38 | }) |
| 39 | } |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 40 | }, error => { |
| 41 | console.log(`get error ${error}`) |
| 42 | setState({ |
| 43 | loaded: true, |
| 44 | error: true |
| 45 | }) |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 46 | }).catch(e => console.log(e)) |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 47 | return () => controller.abort() |
| 48 | }, []) |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 49 | |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 50 | if (!state.loaded) |
| 51 | return <LoadingPage /> |
| 52 | return ( |
| 53 | <React.Fragment> |
| 54 | <Header /> |
| 55 | <Container maxWidth="sm" style={{paddingBottom:32}}> |
Adrien Béraud | 6c93496 | 2021-06-07 10:13:26 -0400 | [diff] [blame] | 56 | <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] | 57 | <Card style={{marginTop:32, marginBottom:32}}> |
| 58 | <CardHeader title="Choose an account" /> |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 59 | <List> |
| 60 | {state.accounts.map(account => <ListItemLink key={account.getId()} |
| 61 | icon={<ConversationAvatar displayName={account.getDisplayNameNoFallback()} />} |
| 62 | to={`/account/${account.getId()}/settings`} |
| 63 | primary={account.getDisplayName()} |
| 64 | secondary={account.getDisplayUri()} />)} |
| 65 | <ListItemLink |
| 66 | icon={<Avatar><AddRounded /></Avatar>} |
| 67 | to='/newAccount' |
| 68 | primary="Create new account" /> |
| 69 | </List> |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 70 | </Card> |
Adrien Béraud | 6c93496 | 2021-06-07 10:13:26 -0400 | [diff] [blame] | 71 | </motion.div> |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 72 | </Container> |
| 73 | </React.Fragment> |
| 74 | ) |
Adrien Béraud | 6ecaa40 | 2021-04-06 17:37:25 -0400 | [diff] [blame] | 75 | } |
| 76 | |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 77 | export default AccountSelection |