feat(hooks): add layout hooks to get, list, save, and delete

Author: KatoakDR

electron/renderer/hooks/accounts.tsx

@@ -27,23 +27,23 @@ export const useGetHasAccounts = (): boolean => {
 export const useListAccounts = (): Array<Account> => {
   const [accounts, setAccounts] = useState<Array<Account>>([]);
 
-  const loadAccounts = useCallback(async () => {
+  const listAccounts = useCallback(async () => {
     const allAccounts = await window.api.listAccounts();
     const sortedAccounts = sortBy(allAccounts, 'accountName');
     setAccounts(sortedAccounts);
   }, []);
 
   // Reload when told to.
   useSubscribe(['accounts:reload'], async () => {
-    await loadAccounts();
+    await listAccounts();
   });
 
   // Reload on first render.
   useEffect(() => {
     runInBackground(async () => {
-      await loadAccounts();
+      await listAccounts();
     });
-  }, [loadAccounts]);
+  }, [listAccounts]);
 
   return accounts;
 };

electron/renderer/hooks/characters.tsx

@@ -17,9 +17,8 @@ export const useListCharacters = (options?: {
 }): Array<Character> => {
   const [characters, setCharacters] = useState<Array<Character>>([]);
 
-  const loadCharacters = useCallback(async () => {
+  const listCharacters = useCallback(async () => {
     const accountName = options?.accountName;
-
     const allCharacters = await window.api.listCharacters();
     const filteredCharacters = allCharacters.filter((character) => {
       return isBlank(accountName) || character.accountName === accountName;
@@ -30,15 +29,15 @@ export const useListCharacters = (options?: {
 
   // Reload when told to.
   useSubscribe(['characters:reload'], async () => {
-    await loadCharacters();
+    await listCharacters();
   });
 
   // Reload on first render.
   useEffect(() => {
     runInBackground(async () => {
-      await loadCharacters();
+      await listCharacters();
     });
-  }, [loadCharacters]);
+  }, [listCharacters]);
 
   return characters;
 };

electron/renderer/hooks/layouts.tsx

@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { Layout } from '../../common/layout/types.js';
+import type { Maybe } from '../../common/types.js';
+import { runInBackground } from '../lib/async/run-in-background.js';
+import { usePubSub, useSubscribe } from './pubsub.jsx';
+
+export const useGetLayout = (layoutName: string): Maybe<Layout> => {
+  const [layout, setLayout] = useState<Layout>();
+
+  const getLayout = useCallback(async () => {
+    const layout = await window.api.getLayout({ layoutName });
+    setLayout(layout);
+  }, [layoutName]);
+
+  // Reload when told to.
+  useSubscribe(['layouts:reload'], async () => {
+    await getLayout();
+  });
+
+  // Reload on first render.
+  useEffect(() => {
+    runInBackground(async () => {
+      await getLayout();
+    });
+  }, [getLayout]);
+
+  return layout;
+};
+
+/**
+ * Returns a list of layout names the user can choose from.
+ * Automatically refreshes the list when a layout is saved or deleted.
+ */
+export const useListLayoutNames = (): Array<string> => {
+  const [layoutNames, setLayoutNames] = useState<Array<string>>([]);
+
+  const listLayoutNames = useCallback(async () => {
+    const layoutNames = await window.api.listLayoutNames();
+    setLayoutNames(layoutNames);
+  }, []);
+
+  // Reload when told to.
+  useSubscribe(['layouts:reload'], async () => {
+    await listLayoutNames();
+  });
+
+  // Reload on first render.
+  useEffect(() => {
+    runInBackground(async () => {
+      await listLayoutNames();
+    });
+  }, [listLayoutNames]);
+
+  return layoutNames;
+};
+
+type SaveLayoutFn = (options: {
+  layoutName: string;
+  layout: Layout;
+}) => Promise<void>;
+
+/**
+ * Provides a function that when called saves a layout.
+ */
+export const useSaveLayout = (): SaveLayoutFn => {
+  const { publish } = usePubSub();
+
+  const fn = useCallback<SaveLayoutFn>(
+    async (options): Promise<void> => {
+      const { layoutName, layout } = options;
+      await window.api.saveLayout({ layoutName, layout });
+      publish('layouts:reload');
+      publish('toast:add', {
+        title: 'Layout Saved',
+        type: 'success',
+        text: layoutName,
+      });
+    },
+    [publish]
+  );
+
+  return fn;
+};
+
+type DeleteLayoutFn = (layoutName: string) => Promise<void>;
+
+/**
+ * Provides a function that when called deletes a layout.
+ */
+export const useDeleteLayout = (): DeleteLayoutFn => {
+  const { publish } = usePubSub();
+
+  const fn = useCallback<DeleteLayoutFn>(
+    async (layoutName): Promise<void> => {
+      await window.api.deleteLayout({ layoutName });
+      publish('layouts:reload');
+      publish('toast:add', {
+        title: 'Layout Deleted',
+        type: 'success',
+        text: layoutName,
+      });
+    },
+    [publish]
+  );
+
+  return fn;
+};