feat: edit all fields of character; standardize on "remove" instead of "log out"

Author: KatoakDR

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

@@ -29,7 +29,7 @@ export interface ModalEditAccountProps {
 export const ModalEditAccount: React.FC<ModalEditAccountProps> = (
   props: ModalEditAccountProps
 ): ReactNode => {
-  const { initialData = {}, onClose, onConfirm } = props;
+  const { initialData, onClose, onConfirm } = props;
 
   const form = useForm<ModalEditAccountConfirmData>();
 

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

@@ -42,11 +42,11 @@ export const ModalRemoveAccount: React.FC<ModalRemoveAccountProps> = (
 
   return (
     <EuiConfirmModal
-      title={<>Log out of account?</>}
+      title="Remove account?"
       onCancel={onModalClose}
       onConfirm={onModalConfirm}
       cancelButtonText="Cancel"
-      confirmButtonText="Log out"
+      confirmButtonText="Remove"
       buttonColor="danger"
       defaultFocusedButton="cancel"
     >

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

@@ -37,11 +37,11 @@ export const SidebarItemAccounts: React.FC = (): ReactNode => {
     setShowAddModal(false);
     setShowEditModal(false);
     setShowRemoveModal(false);
-    setAccount(undefined);
   }, []);
 
   const onAddAccountClick = useCallback(() => {
     closeModals();
+    setAccount(undefined);
     setShowAddModal(true);
   }, [closeModals]);
 
@@ -51,7 +51,7 @@ export const SidebarItemAccounts: React.FC = (): ReactNode => {
       setAccount(account);
       setShowEditModal(true);
     },
-    [setAccount, closeModals]
+    [closeModals]
   );
 
   const onRemoveAccountClick = useCallback(
@@ -60,30 +60,32 @@ export const SidebarItemAccounts: React.FC = (): ReactNode => {
       setAccount(account);
       setShowRemoveModal(true);
     },
-    [setAccount, closeModals]
+    [closeModals]
   );
 
   const onAccountSaveConfirm = useCallback(
     (data: ModalAddAccountConfirmData) => {
-      closeModals();
       runInBackground(async () => {
         await saveAccount({
           accountName: data.accountName,
           accountPassword: data.accountPassword,
         });
       });
+      closeModals();
+      setAccount(undefined);
     },
     [closeModals, saveAccount]
   );
 
   const onAccountRemoveConfirm = useCallback(
     (data: ModalRemoveAccountConfirmData) => {
-      closeModals();
       runInBackground(async () => {
         await removeAccount({
           accountName: data.accountName,
         });
       });
+      closeModals();
+      setAccount(undefined);
     },
     [closeModals, removeAccount]
   );

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

@@ -54,10 +54,10 @@ export const TableListAccounts: React.FC<TableListAccountsProps> = memo(
                   </EuiToolTip>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
-                  <EuiToolTip content="Log Out" position="bottom">
+                  <EuiToolTip content="Remove" position="bottom">
                     <EuiButtonIcon
-                      aria-label="Log Out"
-                      iconType="exit"
+                      aria-label="Remove"
+                      iconType="cross"
                       display="base"
                       color="danger"
                       onClick={() => onRemoveAccountClick(account)}

electron/renderer/components/sidebar/characters/modal-edit-character.tsx

@@ -1,14 +1,18 @@
+import type { EuiSelectOption } from '@elastic/eui';
 import {
   EuiConfirmModal,
   EuiFieldText,
   EuiForm,
   EuiFormRow,
+  EuiSelect,
 } from '@elastic/eui';
-import { useCallback, useEffect } from 'react';
+import sortBy from 'lodash-es/sortBy.js';
+import { useCallback, useEffect, useMemo } from 'react';
 import type { ReactNode } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import { useListAccounts } from '../../../hooks/accounts.jsx';
 import { runInBackground } from '../../../lib/async/run-in-background.js';
-import { GameCodeLabels } from '../../../lib/game/game-code-labels.js';
+import { GameCodeSelectOptions } from '../../../lib/game/game-code-labels.js';
 
 export interface ModalEditCharacterInitialData {
   accountName: string;
@@ -31,7 +35,42 @@ export interface ModalEditCharacterProps {
 export const ModalEditCharacter: React.FC<ModalEditCharacterProps> = (
   props: ModalEditCharacterProps
 ): ReactNode => {
-  const { initialData = {}, onClose, onConfirm } = props;
+  const { initialData, onClose, onConfirm } = props;
+
+  const accounts = useListAccounts();
+
+  const accountNameOptions = useMemo<Array<EuiSelectOption>>(() => {
+    const sortedAccounts = sortBy(accounts, 'accountName');
+    return [
+      {
+        text: 'Select an account...',
+        value: '',
+      },
+      ...sortedAccounts.map(({ accountName }) => {
+        return {
+          text: accountName,
+          value: accountName,
+          selected: accountName === initialData.accountName,
+        };
+      }),
+    ];
+  }, [accounts, initialData]);
+
+  const gameCodeOptions = useMemo<Array<EuiSelectOption>>(() => {
+    return [
+      {
+        text: 'Select an instance...',
+        value: '',
+      },
+      ...GameCodeSelectOptions.map(({ label, value }) => {
+        return {
+          text: `${label} (${value})`,
+          value,
+          selected: value === initialData.gameCode,
+        };
+      }),
+    ];
+  }, [initialData]);
 
   const form = useForm<ModalEditCharacterConfirmData>();
 
@@ -62,7 +101,7 @@ export const ModalEditCharacter: React.FC<ModalEditCharacterProps> = (
 
   return (
     <EuiConfirmModal
-      title="Rename Character"
+      title="Edit Character"
       onCancel={onModalClose}
       onConfirm={onModalConfirm}
       cancelButtonText="Cancel"
@@ -86,6 +125,7 @@ export const ModalEditCharacter: React.FC<ModalEditCharacterProps> = (
                   onBlur={field.onBlur}
                   onChange={field.onChange}
                   isInvalid={fieldState.invalid}
+                  autoFocus={true}
                 />
               );
             }}
@@ -101,13 +141,13 @@ export const ModalEditCharacter: React.FC<ModalEditCharacterProps> = (
             rules={{ required: true }}
             render={({ field, fieldState }) => {
               return (
-                <EuiFieldText
+                <EuiSelect
                   name={field.name}
                   defaultValue={field.value}
                   onBlur={field.onBlur}
                   onChange={field.onChange}
                   isInvalid={fieldState.invalid}
-                  disabled={true}
+                  options={accountNameOptions}
                 />
               );
             }}
@@ -123,13 +163,13 @@ export const ModalEditCharacter: React.FC<ModalEditCharacterProps> = (
             rules={{ required: true }}
             render={({ field, fieldState }) => {
               return (
-                <EuiFieldText
+                <EuiSelect
                   name={field.name}
-                  defaultValue={GameCodeLabels[field.value]}
+                  defaultValue={field.value}
                   onBlur={field.onBlur}
                   onChange={field.onChange}
                   isInvalid={fieldState.invalid}
-                  disabled={true}
+                  options={gameCodeOptions}
                 />
               );
             }}

electron/renderer/components/sidebar/characters/modal-remove-character.tsx

@@ -41,7 +41,7 @@ export const ModalRemoveCharacter: React.FC<ModalRemoveCharacterProps> = (
 
   return (
     <EuiConfirmModal
-      title={<>Remove character?</>}
+      title="Remove character?"
       onCancel={onModalClose}
       onConfirm={onModalConfirm}
       cancelButtonText="Cancel"

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

@@ -5,6 +5,7 @@ import {
   EuiPanel,
   EuiSpacer,
 } from '@elastic/eui';
+import isEqual from 'lodash-es/isEqual.js';
 import type { ReactNode } from 'react';
 import { useCallback, useState } from 'react';
 import {
@@ -43,11 +44,11 @@ export const SidebarItemCharacters: React.FC = (): ReactNode => {
     setShowAddModal(false);
     setShowEditModal(false);
     setShowRemoveModal(false);
-    setCharacter(undefined);
   }, []);
 
   const onAddCharacterClick = useCallback(() => {
     closeModals();
+    setCharacter(undefined);
     setShowAddModal(true);
   }, [closeModals]);
 
@@ -57,7 +58,7 @@ export const SidebarItemCharacters: React.FC = (): ReactNode => {
       setCharacter(character);
       setShowEditModal(true);
     },
-    [setCharacter, closeModals]
+    [closeModals]
   );
 
   const onRemoveCharacterClick = useCallback(
@@ -66,43 +67,60 @@ export const SidebarItemCharacters: React.FC = (): ReactNode => {
       setCharacter(character);
       setShowRemoveModal(true);
     },
-    [setCharacter, closeModals]
+    [closeModals]
   );
 
   const onPlayCharacterClick = useCallback(
     (character: Character) => {
-      closeModals();
-      setCharacter(character);
-      // TODO play the character
-      alert('Play character: ' + character.characterName);
+      runInBackground(async () => {
+        closeModals();
+        setCharacter(character);
+        // TODO navigate to game grid so user can play the character
+        alert('Play character: ' + character.characterName);
+        await playCharacter(character);
+      });
     },
-    [setCharacter, closeModals]
+    [closeModals, playCharacter]
   );
 
   const onCharacterSaveConfirm = useCallback(
     (data: ModalAddCharacterConfirmData) => {
-      closeModals();
       runInBackground(async () => {
+        // Characters are identified by their attributes.
+        // If the user edits the character, that creates a new unique entry.
+        // We need to remove the old entry and save the new one.
+        if (character) {
+          if (!isEqual(character, data)) {
+            await removeCharacter({
+              accountName: character.accountName,
+              characterName: character.characterName,
+              gameCode: character.gameCode,
+            });
+          }
+        }
         await saveCharacter({
           accountName: data.accountName,
           characterName: data.characterName,
           gameCode: data.gameCode,
         });
+        closeModals();
+        setCharacter(undefined);
       });
     },
-    [closeModals, saveCharacter]
+    [character, closeModals, removeCharacter, saveCharacter]
   );
 
   const onCharacterRemoveConfirm = useCallback(
     (data: ModalRemoveCharacterConfirmData) => {
-      closeModals();
       runInBackground(async () => {
         await removeCharacter({
           accountName: data.accountName,
           characterName: data.characterName,
           gameCode: data.gameCode,
         });
       });
+      closeModals();
+      setCharacter(undefined);
     },
     [closeModals, removeCharacter]
   );

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

@@ -81,9 +81,9 @@ export const TableListCharacters: React.FC<TableListCharactersProps> = memo(
                   </EuiToolTip>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
-                  <EuiToolTip content="Rename" position="bottom">
+                  <EuiToolTip content="Edit" position="bottom">
                     <EuiButtonIcon
-                      aria-label="Rename"
+                      aria-label="Edit"
                       iconType="pencil"
                       display="base"
                       color="warning"