feat: stub out a page for testing

Author: KatoakDR

electron/renderer/pages/home.tsx

@@ -1,66 +1,160 @@
-import type { ReactNode } from 'react';
-import { useEffect } from 'react';
+import { type ReactNode, useCallback, useState } from 'react';
 import { runInBackground } from '../../common/async';
+import { equalsIgnoreCase } from '../../common/string';
 import { useLogger } from '../components/logger';
 
+interface IpcSgeCharacter {
+  gameCode: string;
+  accountName: string;
+  characterName: string;
+}
+
 const HomePage: React.FC = (): ReactNode => {
-  // --
-  const { logger } = useLogger('page:grid');
-  useEffect(() => {
-    runInBackground(async () => {
-      logger.info('>> ping', { response: await window.api.ping() });
+  const { logger } = useLogger('page:home');
 
-      logger.info('>> sgeAddAccount', {
-        response: await window.api.sgeAddAccount({
-          gameCode: 'DR',
-          username: 'test-username',
-          password: 'test-password',
-        }),
-      });
+  // TODO add state to track when any of the callbacks are running
+  //      so that we show a loading indicator or overlay or something
+  //      to prevent the user issuing more commands concurrently
 
-      logger.info('>> sgeRemoveAccount', {
-        response: await window.api.sgeRemoveAccount({
-          gameCode: 'DR',
-          username: 'test-username',
-        }),
-      });
+  const [characters, setCharacters] = useState<Array<IpcSgeCharacter>>([]);
+
+  const [playingCharacter, setPlayingCharacter] = useState<
+    IpcSgeCharacter | undefined
+  >();
+
+  const listCharacters = useCallback(async () => {
+    setCharacters(await window.api.listCharacters());
+  }, []);
 
-      logger.info('>> sgeListAccounts', {
-        response: await window.api.sgeListAccounts({
-          gameCode: 'DR',
-        }),
+  const saveAccount = useCallback(
+    (options: { accountName: string; accountPassword: string }) => {
+      runInBackground(async () => {
+        const { accountName } = options;
+        logger.info('saving account', { accountName });
+        await window.api.saveAccount(options);
+        await listCharacters();
       });
+    },
+    []
+  );
 
-      logger.info('>> sgeListCharacters', {
-        response: await window.api.sgeListCharacters({
-          gameCode: 'DR',
-          username: 'test-username',
-        }),
+  const removeAccount = useCallback((options: { accountName: string }) => {
+    runInBackground(async () => {
+      const { accountName } = options;
+      logger.info('removing account', { accountName });
+      if (equalsIgnoreCase(playingCharacter?.accountName, accountName)) {
+        await quitCharacter();
+      }
+      await window.api.removeAccount(options);
+      await listCharacters();
+    });
+  }, []);
+
+  const addCharacter = useCallback(
+    (options: {
+      gameCode: string;
+      accountName: string;
+      characterName: string;
+    }) => {
+      runInBackground(async () => {
+        const { characterName } = options;
+        logger.info('saving character', { characterName });
+        await window.api.saveCharacter(options);
+        await listCharacters();
       });
+    },
+    []
+  );
 
-      logger.info('>> gamePlayCharacter', {
-        response: await window.api.gamePlayCharacter({
-          gameCode: 'DR',
-          username: 'test-username',
-          characterName: 'test-character',
-        }),
+  const removeCharacter = useCallback(
+    (options: {
+      gameCode: string;
+      accountName: string;
+      characterName: string;
+    }) => {
+      runInBackground(async () => {
+        const { gameCode, accountName, characterName } = options;
+        logger.info('removing character', { characterName });
+        if (
+          equalsIgnoreCase(playingCharacter?.gameCode, gameCode) &&
+          equalsIgnoreCase(playingCharacter?.accountName, accountName) &&
+          equalsIgnoreCase(playingCharacter?.characterName, characterName)
+        ) {
+          await quitCharacter();
+        }
+        await window.api.removeCharacter(options);
+        await listCharacters();
       });
+    },
+    []
+  );
 
-      logger.info('>> gameSendCommand', {
-        response: await window.api.gameSendCommand('test command'),
+  const playCharacter = useCallback(
+    (options: {
+      gameCode: string;
+      accountName: string;
+      characterName: string;
+    }) => {
+      runInBackground(async () => {
+        const { gameCode, accountName, characterName } = options;
+        logger.info('playing character', { characterName });
+        await window.api.playCharacter(options);
+        setPlayingCharacter({
+          gameCode,
+          accountName,
+          characterName,
+        });
       });
-    });
+    },
+    []
+  );
 
-    window.api.onMessage('window:pong', (_event, data) => {
-      logger.info('<< window:pong', { data });
-    });
+  const quitCharacter = useCallback(async () => {
+    if (playingCharacter) {
+      const characterName = playingCharacter.characterName;
+      logger.info('quitting character', { characterName });
+      await window.api.sendCommand('quit');
+      setPlayingCharacter(undefined);
+    }
   }, []);
-  // --
 
-  // TODO show welcome page
-  //      user to select recent character, or add account, etc
-  //      once select a character, then log in and load grid
-  return <div>Hello World</div>;
+  return (
+    <div>
+      <h2>Characters</h2>
+      <div>
+        <button
+          onClick={() => {
+            saveAccount({
+              accountName: 'test',
+              accountPassword: 'test',
+            });
+          }}
+        >
+          Save Account
+        </button>
+        <button
+          onClick={() => {
+            addCharacter({
+              gameCode: 'DR',
+              accountName: 'test',
+              characterName: 'test',
+            });
+          }}
+        >
+          Add Character
+        </button>
+      </div>
+      {characters.map((character) => {
+        return (
+          <div key={character.characterName}>
+            Game Code: {character.gameCode} <br />
+            Account Name: {character.accountName} <br />
+            Character Name: {character.characterName}
+          </div>
+        );
+      })}
+    </div>
+  );
 };
 
 export default HomePage;