add changes commit command

src/app.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Box, Text } from 'ink';
+import { PropValidationResult } from './types.js';
 import { type Result } from 'meow';
 import { findCommand } from './utils/commands.js';
 
 type Props = {
     readonly cli: Result<any>;
 };
 
 export default function App({ cli }: Props) {
@@ -23,21 +24,21 @@
         );
     }
 
-    const { valid, errors } = command.config.validateProps
+    const validationResult = command.config.validateProps
         ? command.config.validateProps({
               cli,
               input: cli.input,
           })
-        : { valid: true, errors: [] };
+        : ({ valid: true } as PropValidationResult);
 
-    if (!valid) {
+    if (!validationResult.valid) {
         return (
             <Box flexDirection="column">
                 <Text>
                     Invalid inputs for command:{' '}
                     <Text color="red">{sanitizedInput.join(' ')}</Text>
                 </Text>
-                {errors?.map((error) => (
+                {validationResult.errors.map((error) => (
                     <Text key={error}>
                         - <Text color="red">{error}</Text>
                     </Text>

src/command-registry.ts

@@ -1,4 +1,7 @@
 import ChangesAdd, { changesAddConfig } from './commands/changes/add.js';
+import ChangesCommit, {
+    changesCommitConfig,
+} from './commands/changes/commit.js';
 import Help, { helpConfig } from './commands/help.js';
 import Hop, { hopConfig } from './commands/hop.js';
 import Sync, { syncConfig } from './commands/sync.js';
@@ -31,5 +34,9 @@ export const REGISTERED_COMMANDS: CommandGroup = {
             component: ChangesAdd,
             config: changesAddConfig,
         },
+        commit: {
+            component: ChangesCommit,
+            config: changesCommitConfig,
+        },
     } as CommandGroup,
 } as const;

src/commands/changes/commit.test.tsx

@@ -0,0 +1,101 @@
+import ChangesCommit from './commit.js';
+import React from 'react';
+import { Text } from 'ink';
+import { delay } from '../../utils/time.js';
+import { describe, expect, it, vi } from 'vitest';
+import { render } from '@levelbreaded/ink-testing-library';
+
+const ARBITRARY_DELAY = 250; // ms
+
+const mocks = vi.hoisted(() => {
+    return {
+        createGitService: vi.fn(({}) => {
+            return {
+                commit: async ({ message }: { message: string }) => {
+                    console.log(message);
+                    return new Promise((resolve) =>
+                        setTimeout(resolve, ARBITRARY_DELAY)
+                    );
+                },
+            };
+        }),
+    };
+});
+
+vi.mock('../../services/git.js', () => {
+    return {
+        DEFAULT_OPTIONS: {},
+        createGitService: mocks.createGitService,
+    };
+});
+
+const LOADING_MESSAGE = 'Loading...';
+const SUCCESS_MESSAGE = 'Committed all changes';
+
+describe('correctly renders changes commit UI', () => {
+    it('runs as intended', async () => {
+        const actual1 = render(
+            <ChangesCommit
+                cli={{
+                    flags: {},
+                    unnormalizedFlags: {},
+                }}
+                input={['changes', 'commit', 'commit message']}
+            />
+        );
+
+        const actual2 = render(
+            <ChangesCommit
+                cli={{
+                    flags: {},
+                    unnormalizedFlags: {},
+                }}
+                input={['changes', 'c', 'commit message']}
+            />
+        );
+
+        const ExpectedComp = () => {
+            return (
+                <Text bold color="green">
+                    {SUCCESS_MESSAGE}
+                </Text>
+            );
+        };
+        const expected = render(<ExpectedComp />);
+
+        await delay(ARBITRARY_DELAY + 250);
+        expect(actual1.lastFrame()).to.equal(expected.lastFrame());
+        expect(actual2.lastFrame()).to.equal(expected.lastFrame());
+    });
+
+    it('displays a loading state while processing', async () => {
+        const actual1 = render(
+            <ChangesCommit
+                cli={{
+                    flags: {},
+                    unnormalizedFlags: {},
+                }}
+                input={['changes', 'commit', 'commit message']}
+            />
+        );
+
+        const actual2 = render(
+            <ChangesCommit
+                cli={{
+                    flags: {},
+                    unnormalizedFlags: {},
+                }}
+                input={['changes', 'c', 'commit message']}
+            />
+        );
+
+        const ExpectedComp = () => {
+            return <Text color="cyan">{LOADING_MESSAGE}</Text>;
+        };
+        const expected = render(<ExpectedComp />);
+
+        await delay(ARBITRARY_DELAY / 2);
+        expect(actual1.lastFrame()).to.equal(expected.lastFrame());
+        expect(actual2.lastFrame()).to.equal(expected.lastFrame());
+    });
+});

src/commands/changes/commit.tsx

@@ -0,0 +1,94 @@
+import ErrorDisplay from '../../components/error-display.js';
+import React, { useEffect, useState } from 'react';
+import { CommandConfig, CommandProps } from '../../types.js';
+import { Text } from 'ink';
+import { useGit } from '../../hooks/use-git.js';
+
+function ChangesCommit({ input }: CommandProps) {
+    const [, , message] = input;
+    // todo: refactor to a sanitize input pattern
+    const result = useChangesCommit({ message: message! });
+
+    if (result.isError) {
+        return <ErrorDisplay error={result.error} />;
+    }
+
+    if (result.isLoading) {
+        return <Text color="cyan">Loading...</Text>;
+    }
+
+    return (
+        <Text bold color="green">
+            Committed all changes
+        </Text>
+    );
+}
+
+type Action = { isLoading: boolean } & (
+    | {
+          isError: false;
+      }
+    | {
+          isError: true;
+          error: Error;
+      }
+);
+
+type State =
+    | {
+          type: 'LOADING';
+      }
+    | {
+          type: 'COMPLETE';
+      }
+    | {
+          type: 'ERROR';
+          error: Error;
+      };
+
+const useChangesCommit = ({ message }: { message: string }): Action => {
+    const git = useGit();
+    const [state, setState] = useState<State>({ type: 'LOADING' });
+
+    useEffect(() => {
+        git.commit({ message })
+            .then(() => setState({ type: 'COMPLETE' }))
+            .catch((e: Error) => {
+                setState({ type: 'ERROR', error: e });
+            });
+    }, []);
+
+    if (state.type === 'ERROR') {
+        return {
+            isLoading: false,
+            isError: true,
+            error: state.error,
+        };
+    }
+
+    return {
+        isLoading: state.type === 'LOADING',
+        isError: false,
+    };
+};
+
+export const changesCommitConfig: CommandConfig = {
+    description: 'Stage and commit all changes.',
+    usage: 'changes commit "<message>"',
+    key: 'commit',
+    aliases: ['c'],
+    validateProps: (props) => {
+        const { input } = props;
+        const [, , message] = input;
+
+        if (!message)
+            return {
+                valid: false,
+                errors: ['Please provide a commit message'],
+            };
+
+        return { valid: true };
+    },
+};
+
+export default ChangesCommit;

src/services/git.ts

@@ -12,6 +12,7 @@ export interface GitService {
     branchLocal: () => Promise<ReturnType<SimpleGit['branchLocal']>>;
     checkout: (branch: string) => Promise<ReturnType<SimpleGit['checkout']>>;
     addAllFiles: () => Promise<void>;
+    commit: (args: { message: string }) => Promise<void>;
 }
 
 export const createGitService = ({
@@ -33,5 +34,8 @@ export const createGitService = ({
         addAllFiles: async () => {
             await gitEngine.add('.');
         },
+        commit: async ({ message }) => {
+            await gitEngine.commit(message);
+        },
     };
 };

src/types.ts

@@ -1,13 +1,18 @@
 import { ComponentType } from 'react';
 import { Result } from 'meow';
 
-type ValidateProps<T extends Record<string, unknown>> = (props: T) => {
-    valid: boolean;
-    errors?: string[];
-};
+export type ValidateProps<T extends Record<string, unknown>> = (
+    props: T
+) => PropValidationResult;
+
+export type PropValidationResult =
+    | {
+          valid: true;
+      }
+    | { valid: false; errors: string[] };
 
 export interface CommandProps extends Record<string, unknown> {
     cli: Pick<Result<any>, 'flags' | 'unnormalizedFlags'>;
     input: string[];
 }