feat: perf and formatting

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

@@ -1,6 +1,7 @@
-import { EuiConfirmModal } from '@elastic/eui';
-import { type ReactNode, useCallback } from 'react';
-import { useListCharacters } from '../../../hooks/list-characters.jsx';
+import { EuiCode, EuiConfirmModal } from '@elastic/eui';
+import type { ReactNode } from 'react';
+import { useCallback } from 'react';
+import { useListCharacters } from '../../../hooks/characters.jsx';
 
 export interface ModalRemoveAccountInitialData {
  accountName: string;
@@ -41,20 +42,32 @@ export const ModalRemoveAccount: React.FC<ModalRemoveAccountProps> = (
 
  return (
  <EuiConfirmModal
- title={<>Log out of account {initialData.accountName}?</>}
+ title={<>Log out of account?</>}
  onCancel={onModalClose}
  onConfirm={onModalConfirm}
  cancelButtonText="Cancel"
  confirmButtonText="Log out"
  buttonColor="danger"
  defaultFocusedButton="cancel"
  >
- Associated characters will also be removed.
- <ul>
- {characters.map(({ characterName }) => {
- return <li key={characterName}>{characterName}</li>;
- })}
- </ul>
+ <p>
+ <EuiCode>{initialData.accountName}</EuiCode>
+ </p>
+
+ {characters.length > 0 && (
+ <p>
+ Associated characters will also be removed:
+ <ul>
+ {characters.map(({ characterName }) => {
+ return (
+ <li key={characterName}>
+ <EuiCode>{characterName}</EuiCode>
+ </li>
+ );
+ })}
+ </ul>
+ </p>
+ )}
  </EuiConfirmModal>
  );
 };

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

@@ -1,34 +1,25 @@
-import type { EuiBasicTableColumn } from '@elastic/eui';
-import {
- EuiButton,
- EuiButtonIcon,
- EuiCallOut,
- EuiFlexGroup,
- EuiFlexItem,
- EuiInMemoryTable,
- EuiPanel,
- EuiSpacer,
- EuiToolTip,
-} from '@elastic/eui';
+import { EuiButton, EuiCallOut, EuiPanel, EuiSpacer } from '@elastic/eui';
 import type { ReactNode } from 'react';
 import type React from 'react';
 import { useCallback, useState } from 'react';
-import { useListAccounts } from '../../../hooks/list-accounts.jsx';
+import { useRemoveAccount, useSaveAccount } from '../../../hooks/accounts.jsx';
 import { runInBackground } from '../../../lib/async/run-in-background.js';
 import type { Account } from '../../../types/game.types.js';
 import type { ModalAddAccountConfirmData } from './modal-add-account.jsx';
 import { ModalAddAccount } from './modal-add-account.jsx';
 import { ModalEditAccount } from './modal-edit-account.jsx';
 import type { ModalRemoveAccountConfirmData } from './modal-remove-account.jsx';
 import { ModalRemoveAccount } from './modal-remove-account.jsx';
+import { TableListAccounts } from './table-list-accounts.jsx';
 
 export const SidebarItemAccounts: React.FC = (): ReactNode => {
  const [showAddAccountModal, setShowAddAccountModal] = useState(false);
  const [showEditAccountModal, setShowEditAccountModal] = useState(false);
  const [showRemoveAccountModal, setShowRemoveAccountModal] = useState(false);
 
- // All accounts to display.
- const accounts = useListAccounts();
+ // Hooks to save and remove accounts.
+ const saveAccount = useSaveAccount();
+ const removeAccount = useRemoveAccount();
 
  // The contextual account being edited or removed.
  const [account, setAccount] = useState<Account>();
@@ -67,67 +58,27 @@ export const SidebarItemAccounts: React.FC = (): ReactNode => {
  (data: ModalAddAccountConfirmData) => {
  closeModals();
  runInBackground(async () => {
- await window.api.saveAccount({
+ await saveAccount({
  accountName: data.accountName,
  accountPassword: data.accountPassword,
  });
  });
  },
- [closeModals]
+ [closeModals, saveAccount]
  );
 
  const onAccountRemoveConfirm = useCallback(
  (data: ModalRemoveAccountConfirmData) => {
  closeModals();
  runInBackground(async () => {
- await window.api.removeAccount({
+ await removeAccount({
  accountName: data.accountName,
  });
  });
  },
- [closeModals]
+ [closeModals, removeAccount]
  );
 
- const columns: Array<EuiBasicTableColumn<Account>> = [
- {
- field: 'accountName',
- name: 'Name',
- dataType: 'string',
- },
- {
- field: 'actions',
- name: 'Actions',
- render: (_value: unknown, account: Account) => {
- return (
- <EuiFlexGroup responsive={true} gutterSize="s" alignItems="center">
- <EuiFlexItem grow={false}>
- <EuiToolTip content="Change Password" position="bottom">
- <EuiButtonIcon
- aria-label="Change Password"
- iconType="lock"
- // display="base"
- color="warning"
- onClick={() => onEditAccountClick(account)}
- />
- </EuiToolTip>
- </EuiFlexItem>
- <EuiFlexItem grow={false}>
- <EuiToolTip content="Log Out" position="bottom">
- <EuiButtonIcon
- aria-label="Log Out"
- iconType="exit"
- // display="base"
- color="danger"
- onClick={() => onRemoveAccountClick(account)}
- />
- </EuiToolTip>
- </EuiFlexItem>
- </EuiFlexGroup>
- );
- },
- },
- ];
-
  return (
  <EuiPanel>
  <EuiCallOut title="My Accounts" iconType="key" size="s">
@@ -143,9 +94,10 @@ export const SidebarItemAccounts: React.FC = (): ReactNode => {
 
  <EuiSpacer size="m" />
 
- {accounts.length > 0 && (
- <EuiInMemoryTable items={accounts} columns={columns} />
- )}
+ <TableListAccounts
+ editAccountClick={onEditAccountClick}
+ removeAccountClick={onRemoveAccountClick}
+ />
 
  <EuiSpacer size="m" />
 

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

@@ -0,0 +1,83 @@
+import type { EuiBasicTableColumn } from '@elastic/eui';
+import {
+ EuiButtonIcon,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiInMemoryTable,
+ EuiToolTip,
+} from '@elastic/eui';
+import { type ReactNode, memo, useMemo } from 'react';
+import { useListAccounts } from '../../../hooks/accounts.jsx';
+import type { Account } from '../../../types/game.types.js';
+
+export interface TableListAccountsProps {
+ editAccountClick: (account: Account) => void;
+ removeAccountClick: (account: Account) => void;
+}
+
+export const TableListAccounts: React.FC<TableListAccountsProps> = memo(
+ (props: TableListAccountsProps): ReactNode => {
+ const { editAccountClick, removeAccountClick } = props;
+
+ // All accounts to display.
+ const accounts = useListAccounts();
+
+ const columns = useMemo<Array<EuiBasicTableColumn<Account>>>(() => {
+ return [
+ {
+ field: 'accountName',
+ name: 'Name',
+ dataType: 'string',
+ truncateText: true,
+ },
+ {
+ field: 'actions',
+ name: 'Actions',
+ width: '25%',
+ render: (_value: unknown, account: Account) => {
+ return (
+ <EuiFlexGroup
+ responsive={true}
+ gutterSize="s"
+ alignItems="center"
+ >
+ <EuiFlexItem grow={false}>
+ <EuiToolTip content="Change Password" position="bottom">
+ <EuiButtonIcon
+ aria-label="Change Password"
+ iconType="lock"
+ display="base"
+ color="warning"
+ onClick={() => editAccountClick(account)}
+ />
+ </EuiToolTip>
+ </EuiFlexItem>
+ <EuiFlexItem grow={false}>
+ <EuiToolTip content="Log Out" position="bottom">
+ <EuiButtonIcon
+ aria-label="Log Out"
+ iconType="exit"
+ display="base"
+ color="danger"
+ onClick={() => removeAccountClick(account)}
+ />
+ </EuiToolTip>
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ );
+ },
+ },
+ ];
+ }, [editAccountClick, removeAccountClick]);
+
+ return (
+ <>
+ {accounts.length > 0 && (
+ <EuiInMemoryTable items={accounts} columns={columns} />
+ )}
+ </>
+ );
+ }
+);
+
+TableListAccounts.displayName = 'TableListAccounts';