Skip to content

Commit 3a293aa

Browse files
NicoBiernatNicoBiernat
committed
Simplify user modals
1 parent adbe285 commit 3a293aa

File tree

3 files changed

+28
-112
lines changed

3 files changed

+28
-112
lines changed

‎src/modals/UserDeleteModal.tsx‎

Lines changed: 15 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import { AuthContext } from '@luna/contexts/api/auth/AuthContext';
22
import { newUninitializedUser, User } from '@luna/contexts/api/auth/types';
33
import {
44
Button,
5-
Checkbox,
6-
Input,
75
Modal,
86
ModalBody,
97
ModalContent,
@@ -20,7 +18,6 @@ export interface UserDeleteModalProps {
2018

2119
export function UserDeleteModal({ id, isOpen, setOpen }: UserDeleteModalProps) {
2220
const [user, setUser] = useState<User>(newUninitializedUser());
23-
const [permanentApiToken, setPermanentApiToken] = useState<boolean>(false);
2421
const auth = useContext(AuthContext);
2522

2623
// initialize modal state
@@ -35,22 +32,20 @@ export function UserDeleteModal({ id, isOpen, setOpen }: UserDeleteModalProps) {
3532
console.log('Fetching user failed:', userResult.error);
3633
setUser(newUninitializedUser());
3734
}
38-
const tokenResult = await auth.getToken(id);
39-
if (tokenResult.ok) {
40-
setPermanentApiToken(tokenResult.value.permanent);
41-
} else {
42-
console.log('Failed to fetch token:', tokenResult.error);
43-
}
4435
};
4536
fetchUser();
4637
}, [id, isOpen, auth]);
4738

48-
const deleteUser = useCallback(() => {
49-
console.log('deleting user with id', id);
50-
// TODO: call DELETE /users/<id>
39+
const deleteUser = useCallback(async () => {
40+
const result = await auth.deleteUser(user.id);
41+
if (result.ok) {
42+
console.log('Deleted user: ', id);
43+
} else {
44+
console.log('Deleting user', id, 'failed:', result.error);
45+
}
5146
// TODO: feedback from the request (success, error)
5247
setOpen(false);
53-
}, [id, setOpen]);
48+
}, [auth, id, setOpen, user.id]);
5449

5550
return (
5651
<Modal isOpen={isOpen} onOpenChange={setOpen}>
@@ -59,50 +54,13 @@ export function UserDeleteModal({ id, isOpen, setOpen }: UserDeleteModalProps) {
5954
<>
6055
<ModalHeader>Delete User</ModalHeader>
6156
<ModalBody>
62-
<Input label="ID" value={id.toString()} isDisabled />
63-
64-
<Input
65-
label="Username"
66-
value={user.username}
67-
onValueChange={username => {
68-
if (!user) return;
69-
setUser({ ...user, username });
70-
}}
71-
isDisabled
72-
/>
73-
<Input
74-
label="E-Mail"
75-
value={user.email}
76-
onValueChange={email => {
77-
if (!user) return;
78-
setUser({ ...user, email });
79-
}}
80-
isDisabled
81-
/>
82-
<Input
83-
label="Created At"
84-
value={user.createdAt.toLocaleString()}
85-
isDisabled
86-
/>
87-
<Input
88-
label="Updated At"
89-
value={user.updatedAt.toLocaleString()}
90-
isDisabled
91-
/>
92-
<Input
93-
label="Last Login"
94-
value={user.lastSeen.toLocaleString()}
95-
isDisabled
96-
/>
97-
<Checkbox
98-
isSelected={permanentApiToken}
99-
onValueChange={permanentApiToken => {
100-
setPermanentApiToken(permanentApiToken);
101-
}}
102-
isDisabled
103-
>
104-
Permanent API Token
105-
</Checkbox>
57+
<span>
58+
Do you really want to delete the user{' '}
59+
<b>
60+
{user.username} (ID: {user.id})
61+
</b>
62+
?
63+
</span>
10664
</ModalBody>
10765
<ModalFooter>
10866
<Button color="danger" onPress={deleteUser}>

‎src/modals/UserDetailsModal.tsx‎

Lines changed: 13 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,13 @@ import { newUninitializedUser, User } from '@luna/contexts/api/auth/types';
33
import {
44
Button,
55
Checkbox,
6+
Chip,
67
Input,
78
Modal,
89
ModalBody,
910
ModalContent,
1011
ModalFooter,
1112
ModalHeader,
12-
Select,
13-
SelectItem,
1413
} from '@heroui/react';
1514
import { useContext, useEffect, useState } from 'react';
1615

@@ -34,13 +33,14 @@ export function UserDetailsModal({ id, isOpen, setOpen }: UserShowModalProps) {
3433
setUser(userResult.value);
3534
} else {
3635
console.log('Failed to fetch user:', userResult.error);
37-
setUser(newUninitializedUser);
36+
setUser(newUninitializedUser());
3837
}
3938
const tokenResult = await auth.getToken(id);
4039
if (tokenResult.ok) {
4140
setPermanentApiToken(tokenResult.value.permanent);
4241
} else {
4342
console.log('Failed to fetch token:', tokenResult.error);
43+
setPermanentApiToken(false);
4444
}
4545
};
4646
fetchUser();
@@ -54,58 +54,31 @@ export function UserDetailsModal({ id, isOpen, setOpen }: UserShowModalProps) {
5454
<ModalHeader>User</ModalHeader>
5555
<ModalBody>
5656
<Input label="ID" value={id.toString()} isDisabled />
57-
<Input
58-
label="Username"
59-
value={user.username}
60-
onValueChange={username => {
61-
if (!user) return;
62-
setUser({ ...user, username });
63-
}}
64-
isDisabled
65-
/>
66-
<Input
67-
label="E-Mail"
68-
value={user.email}
69-
onValueChange={email => {
70-
if (!user) return;
71-
setUser({ ...user, email });
72-
}}
73-
isDisabled
74-
/>
75-
57+
<Input label="Username" value={user.username} />
58+
<Input label="E-Mail" value={user.email} />
7659
<Input
7760
label="Created At"
7861
value={user.createdAt.toLocaleString()}
79-
isDisabled
8062
/>
8163
<Input
8264
label="Updated At"
8365
value={user.updatedAt.toLocaleString()}
84-
isDisabled
8566
/>
8667
<Input
8768
label="Last Login"
8869
value={user.lastSeen.toLocaleString()}
89-
isDisabled
9070
/>
91-
<Checkbox
92-
isSelected={permanentApiToken}
93-
onValueChange={permanentApiToken => {
94-
setPermanentApiToken(permanentApiToken);
95-
}}
96-
isDisabled
97-
>
98-
Permanent API Token
99-
</Checkbox>
100-
{/* TODO: find better component for displaying list of roles */}
101-
<Select label="Roles" items={user.roles || []}>
102-
{role => <SelectItem key={role.id}>{role.name}</SelectItem>}
103-
</Select>
10471
<Input
10572
label="Registration Key"
106-
value={user.registrationKey?.key}
107-
isDisabled
73+
value={user.registrationKey ? user.registrationKey.key : ''}
10874
/>
75+
<Checkbox isSelected={permanentApiToken}>
76+
Permanent API Token
77+
</Checkbox>
78+
Roles:
79+
{user.roles.map(role => (
80+
<Chip key={role.id}>{role.name}</Chip>
81+
))}
10982
</ModalBody>
11083
<ModalFooter>
11184
<Button onPress={onClose}>Cancel</Button>

‎src/modals/UserEditModal.tsx‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -104,21 +104,6 @@ export function UserEditModal({ id, isOpen, setOpen }: UserEditModalProps) {
104104
setUser({ ...user, email });
105105
}}
106106
/>
107-
<Input
108-
label="Created At"
109-
value={user.createdAt.toLocaleString()}
110-
isDisabled
111-
/>
112-
<Input
113-
label="Updated At"
114-
value={user.updatedAt.toLocaleString()}
115-
isDisabled
116-
/>
117-
<Input
118-
label="Last Login"
119-
value={user.lastSeen.toLocaleString()}
120-
isDisabled
121-
/>
122107
<Checkbox
123108
isSelected={permanentApiToken}
124109
onValueChange={permanentApiToken => {

0 commit comments

Comments
 (0)