Skip to content

Commit 25f2e80

Browse files
KatoakDRKatoakDR
committed
feat: perf and formatting
1 parent 0abc327 commit 25f2e80

File tree

3 files changed

+120
-72
lines changed

3 files changed

+120
-72
lines changed

‎electron/renderer/components/sidebar/accounts/modal-remove-account.tsx

+23-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { EuiConfirmModal } from '@elastic/eui';
2-
import { type ReactNode, useCallback } from 'react';
3-
import { useListCharacters } from '../../../hooks/list-characters.jsx';
1+
import { EuiCode, EuiConfirmModal } from '@elastic/eui';
2+
import type { ReactNode } from 'react';
3+
import { useCallback } from 'react';
4+
import { useListCharacters } from '../../../hooks/characters.jsx';
45

56
export interface ModalRemoveAccountInitialData {
67
accountName: string;
@@ -41,20 +42,32 @@ export const ModalRemoveAccount: React.FC<ModalRemoveAccountProps> = (
4142

4243
return (
4344
<EuiConfirmModal
44-
title={<>Log out of account {initialData.accountName}?</>}
45+
title={<>Log out of account?</>}
4546
onCancel={onModalClose}
4647
onConfirm={onModalConfirm}
4748
cancelButtonText="Cancel"
4849
confirmButtonText="Log out"
4950
buttonColor="danger"
5051
defaultFocusedButton="cancel"
5152
>
52-
Associated characters will also be removed.
53-
<ul>
54-
{characters.map(({ characterName }) => {
55-
return <li key={characterName}>{characterName}</li>;
56-
})}
57-
</ul>
53+
<p>
54+
<EuiCode>{initialData.accountName}</EuiCode>
55+
</p>
56+
57+
{characters.length > 0 && (
58+
<p>
59+
Associated characters will also be removed:
60+
<ul>
61+
{characters.map(({ characterName }) => {
62+
return (
63+
<li key={characterName}>
64+
<EuiCode>{characterName}</EuiCode>
65+
</li>
66+
);
67+
})}
68+
</ul>
69+
</p>
70+
)}
5871
</EuiConfirmModal>
5972
);
6073
};

‎electron/renderer/components/sidebar/accounts/sidebar-item-accounts.tsx

+14-62
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,25 @@
1-
import type { EuiBasicTableColumn } from '@elastic/eui';
2-
import {
3-
EuiButton,
4-
EuiButtonIcon,
5-
EuiCallOut,
6-
EuiFlexGroup,
7-
EuiFlexItem,
8-
EuiInMemoryTable,
9-
EuiPanel,
10-
EuiSpacer,
11-
EuiToolTip,
12-
} from '@elastic/eui';
1+
import { EuiButton, EuiCallOut, EuiPanel, EuiSpacer } from '@elastic/eui';
132
import type { ReactNode } from 'react';
143
import type React from 'react';
154
import { useCallback, useState } from 'react';
16-
import { useListAccounts } from '../../../hooks/list-accounts.jsx';
5+
import { useRemoveAccount, useSaveAccount } from '../../../hooks/accounts.jsx';
176
import { runInBackground } from '../../../lib/async/run-in-background.js';
187
import type { Account } from '../../../types/game.types.js';
198
import type { ModalAddAccountConfirmData } from './modal-add-account.jsx';
209
import { ModalAddAccount } from './modal-add-account.jsx';
2110
import { ModalEditAccount } from './modal-edit-account.jsx';
2211
import type { ModalRemoveAccountConfirmData } from './modal-remove-account.jsx';
2312
import { ModalRemoveAccount } from './modal-remove-account.jsx';
13+
import { TableListAccounts } from './table-list-accounts.jsx';
2414

2515
export const SidebarItemAccounts: React.FC = (): ReactNode => {
2616
const [showAddAccountModal, setShowAddAccountModal] = useState(false);
2717
const [showEditAccountModal, setShowEditAccountModal] = useState(false);
2818
const [showRemoveAccountModal, setShowRemoveAccountModal] = useState(false);
2919

30-
// All accounts to display.
31-
const accounts = useListAccounts();
20+
// Hooks to save and remove accounts.
21+
const saveAccount = useSaveAccount();
22+
const removeAccount = useRemoveAccount();
3223

3324
// The contextual account being edited or removed.
3425
const [account, setAccount] = useState<Account>();
@@ -67,67 +58,27 @@ export const SidebarItemAccounts: React.FC = (): ReactNode => {
6758
(data: ModalAddAccountConfirmData) => {
6859
closeModals();
6960
runInBackground(async () => {
70-
await window.api.saveAccount({
61+
await saveAccount({
7162
accountName: data.accountName,
7263
accountPassword: data.accountPassword,
7364
});
7465
});
7566
},
76-
[closeModals]
67+
[closeModals, saveAccount]
7768
);
7869

7970
const onAccountRemoveConfirm = useCallback(
8071
(data: ModalRemoveAccountConfirmData) => {
8172
closeModals();
8273
runInBackground(async () => {
83-
await window.api.removeAccount({
74+
await removeAccount({
8475
accountName: data.accountName,
8576
});
8677
});
8778
},
88-
[closeModals]
79+
[closeModals, removeAccount]
8980
);
9081

91-
const columns: Array<EuiBasicTableColumn<Account>> = [
92-
{
93-
field: 'accountName',
94-
name: 'Name',
95-
dataType: 'string',
96-
},
97-
{
98-
field: 'actions',
99-
name: 'Actions',
100-
render: (_value: unknown, account: Account) => {
101-
return (
102-
<EuiFlexGroup responsive={true} gutterSize="s" alignItems="center">
103-
<EuiFlexItem grow={false}>
104-
<EuiToolTip content="Change Password" position="bottom">
105-
<EuiButtonIcon
106-
aria-label="Change Password"
107-
iconType="lock"
108-
// display="base"
109-
color="warning"
110-
onClick={() => onEditAccountClick(account)}
111-
/>
112-
</EuiToolTip>
113-
</EuiFlexItem>
114-
<EuiFlexItem grow={false}>
115-
<EuiToolTip content="Log Out" position="bottom">
116-
<EuiButtonIcon
117-
aria-label="Log Out"
118-
iconType="exit"
119-
// display="base"
120-
color="danger"
121-
onClick={() => onRemoveAccountClick(account)}
122-
/>
123-
</EuiToolTip>
124-
</EuiFlexItem>
125-
</EuiFlexGroup>
126-
);
127-
},
128-
},
129-
];
130-
13182
return (
13283
<EuiPanel>
13384
<EuiCallOut title="My Accounts" iconType="key" size="s">
@@ -143,9 +94,10 @@ export const SidebarItemAccounts: React.FC = (): ReactNode => {
14394

14495
<EuiSpacer size="m" />
14596

146-
{accounts.length > 0 && (
147-
<EuiInMemoryTable items={accounts} columns={columns} />
148-
)}
97+
<TableListAccounts
98+
editAccountClick={onEditAccountClick}
99+
removeAccountClick={onRemoveAccountClick}
100+
/>
149101

150102
<EuiSpacer size="m" />
151103

‎electron/renderer/components/sidebar/accounts/table-list-accounts.tsx

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import type { EuiBasicTableColumn } from '@elastic/eui';
2+
import {
3+
EuiButtonIcon,
4+
EuiFlexGroup,
5+
EuiFlexItem,
6+
EuiInMemoryTable,
7+
EuiToolTip,
8+
} from '@elastic/eui';
9+
import { type ReactNode, memo, useMemo } from 'react';
10+
import { useListAccounts } from '../../../hooks/accounts.jsx';
11+
import type { Account } from '../../../types/game.types.js';
12+
13+
export interface TableListAccountsProps {
14+
editAccountClick: (account: Account) => void;
15+
removeAccountClick: (account: Account) => void;
16+
}
17+
18+
export const TableListAccounts: React.FC<TableListAccountsProps> = memo(
19+
(props: TableListAccountsProps): ReactNode => {
20+
const { editAccountClick, removeAccountClick } = props;
21+
22+
// All accounts to display.
23+
const accounts = useListAccounts();
24+
25+
const columns = useMemo<Array<EuiBasicTableColumn<Account>>>(() => {
26+
return [
27+
{
28+
field: 'accountName',
29+
name: 'Name',
30+
dataType: 'string',
31+
truncateText: true,
32+
},
33+
{
34+
field: 'actions',
35+
name: 'Actions',
36+
width: '25%',
37+
render: (_value: unknown, account: Account) => {
38+
return (
39+
<EuiFlexGroup
40+
responsive={true}
41+
gutterSize="s"
42+
alignItems="center"
43+
>
44+
<EuiFlexItem grow={false}>
45+
<EuiToolTip content="Change Password" position="bottom">
46+
<EuiButtonIcon
47+
aria-label="Change Password"
48+
iconType="lock"
49+
display="base"
50+
color="warning"
51+
onClick={() => editAccountClick(account)}
52+
/>
53+
</EuiToolTip>
54+
</EuiFlexItem>
55+
<EuiFlexItem grow={false}>
56+
<EuiToolTip content="Log Out" position="bottom">
57+
<EuiButtonIcon
58+
aria-label="Log Out"
59+
iconType="exit"
60+
display="base"
61+
color="danger"
62+
onClick={() => removeAccountClick(account)}
63+
/>
64+
</EuiToolTip>
65+
</EuiFlexItem>
66+
</EuiFlexGroup>
67+
);
68+
},
69+
},
70+
];
71+
}, [editAccountClick, removeAccountClick]);
72+
73+
return (
74+
<>
75+
{accounts.length > 0 && (
76+
<EuiInMemoryTable items={accounts} columns={columns} />
77+
)}
78+
</>
79+
);
80+
}
81+
);
82+
83+
TableListAccounts.displayName = 'TableListAccounts';

0 commit comments

Comments
 (0)