feat: use sidebar hooks

Author: KatoakDR

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

@@ -9,10 +9,9 @@ import type { ReactNode } from 'react';
 import type React from 'react';
 import { useCallback, useState } from 'react';
 import { useRemoveAccount, useSaveAccount } from '../../../hooks/accounts.jsx';
-import { usePubSub } from '../../../hooks/pubsub.jsx';
+import { useShowSidebarCharacters } from '../../../hooks/sidebar.jsx';
 import { runInBackground } from '../../../lib/async/run-in-background.js';
 import type { Account } from '../../../types/game.types.js';
-import { SidebarId } from '../../../types/sidebar.types.js';
 import type { ModalAddAccountConfirmData } from './modal-add-account.jsx';
 import { ModalAddAccount } from './modal-add-account.jsx';
 import { ModalEditAccount } from './modal-edit-account.jsx';
@@ -21,8 +20,6 @@ import { ModalRemoveAccount } from './modal-remove-account.jsx';
 import { TableListAccounts } from './table-list-accounts.jsx';
 
 export const SidebarItemAccounts: React.FC = (): ReactNode => {
-  const { publish } = usePubSub();
-
   const [showAddModal, setShowAddModal] = useState(false);
   const [showEditModal, setShowEditModal] = useState(false);
   const [showRemoveModal, setShowRemoveModal] = useState(false);
@@ -34,9 +31,7 @@ export const SidebarItemAccounts: React.FC = (): ReactNode => {
   // The contextual account being managed.
   const [account, setAccount] = useState<Account>();
 
-  const switchToSidebarCharacters = useCallback(() => {
-    publish('sidebar:show', SidebarId.Characters);
-  }, [publish]);
+  const showSidebarCharacters = useShowSidebarCharacters();
 
   const closeModals = useCallback(() => {
     setShowAddModal(false);
@@ -97,8 +92,8 @@ export const SidebarItemAccounts: React.FC = (): ReactNode => {
     <EuiPanel>
       <EuiCallOut title="My Accounts" iconType="key" size="s">
         Add your DragonRealms accounts here, then use the{' '}
-        <EuiLink onClick={switchToSidebarCharacters}>Characters menu</EuiLink>{' '}
-        to add and play your characters.
+        <EuiLink onClick={showSidebarCharacters}>Characters menu</EuiLink> to
+        add and play your characters.
       </EuiCallOut>
 
       <EuiSpacer size="m" />

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

@@ -12,10 +12,9 @@ import {
   useRemoveCharacter,
   useSaveCharacter,
 } from '../../../hooks/characters.jsx';
-import { usePubSub } from '../../../hooks/pubsub.jsx';
+import { useShowSidebarAccounts } from '../../../hooks/sidebar.jsx';
 import { runInBackground } from '../../../lib/async/run-in-background.js';
 import type { Character } from '../../../types/game.types.js';
-import { SidebarId } from '../../../types/sidebar.types.js';
 import { TableListCharacters } from '../characters/table-list-characters.jsx';
 import type { ModalAddCharacterConfirmData } from './modal-add-character.jsx';
 import { ModalAddCharacter } from './modal-add-character.jsx';
@@ -26,8 +25,6 @@ import {
 } from './modal-remove-character.jsx';
 
 export const SidebarItemCharacters: React.FC = (): ReactNode => {
-  const { publish } = usePubSub();
-
   const [showAddModal, setShowAddModal] = useState(false);
   const [showEditModal, setShowEditModal] = useState(false);
   const [showRemoveModal, setShowRemoveModal] = useState(false);
@@ -40,9 +37,7 @@ export const SidebarItemCharacters: React.FC = (): ReactNode => {
   // The contextual character being managed.
   const [character, setCharacter] = useState<Character>();
 
-  const switchToSidebarAccounts = useCallback(() => {
-    publish('sidebar:show', SidebarId.Accounts);
-  }, [publish]);
+  const showSidebarAccounts = useShowSidebarAccounts();
 
   const closeModals = useCallback(() => {
     setShowAddModal(false);
@@ -115,9 +110,9 @@ export const SidebarItemCharacters: React.FC = (): ReactNode => {
   return (
     <EuiPanel>
       <EuiCallOut title="My Characters" iconType="user" size="s">
-        Use the{' '}
-        <EuiLink onClick={switchToSidebarAccounts}>Accounts menu</EuiLink> to
-        add your DragonRealms accounts, then add and play your characters here.
+        Use the <EuiLink onClick={showSidebarAccounts}>Accounts menu</EuiLink>{' '}
+        to add your DragonRealms accounts, then add and play your characters
+        here.
       </EuiCallOut>
 
       <EuiSpacer size="m" />

electron/renderer/hooks/sidebar.tsx

@@ -0,0 +1,66 @@
+import { useCallback } from 'react';
+import { SidebarId } from '../types/sidebar.types.js';
+import { usePubSub } from './pubsub.jsx';
+
+type ShowSidebarFn = (sidebarId: SidebarId) => void;
+
+/**
+ * Provides a function that when called switches to the specified sidebar.
+ */
+export const useShowSidebar = (): ShowSidebarFn => {
+  const { publish } = usePubSub();
+
+  const fn = useCallback<ShowSidebarFn>(
+    (sidebarId: SidebarId): void => {
+      publish('sidebar:show', sidebarId);
+    },
+    [publish]
+  );
+
+  return fn;
+};
+
+type ShowSidebarAccountsFn = () => void;
+
+/**
+ * Provides a function that when called switches to the accounts sidebar.
+ */
+export const useShowSidebarAccounts = (): ShowSidebarAccountsFn => {
+  const showSidebar = useShowSidebar();
+
+  const fn = useCallback<ShowSidebarAccountsFn>(() => {
+    showSidebar(SidebarId.Accounts);
+  }, [showSidebar]);
+
+  return fn;
+};
+
+type ShowSidebarCharactersFn = () => void;
+
+/**
+ * Provides a function that when called switches to the characters sidebar.
+ */
+export const useShowSidebarCharacters = (): ShowSidebarCharactersFn => {
+  const showSidebar = useShowSidebar();
+
+  const fn = useCallback<ShowSidebarCharactersFn>(() => {
+    showSidebar(SidebarId.Characters);
+  }, [showSidebar]);
+
+  return fn;
+};
+
+type ShowSidebarSettingsFn = () => void;
+
+/**
+ * Provides a function that when called switches to the settings sidebar.
+ */
+export const useShowSidebarSettings = (): ShowSidebarSettingsFn => {
+  const showSidebar = useShowSidebar();
+
+  const fn = useCallback<ShowSidebarSettingsFn>(() => {
+    showSidebar(SidebarId.Settings);
+  }, [showSidebar]);
+
+  return fn;
+};