add root branch selection (#35)

* add root branch selection

* cleanup

.gitignore

@@ -1,5 +1,8 @@
 node_modules
 dist
+.env
+
+/.local-config
 
 # IntelliJ IDEA
 /.idea

README.md

@@ -4,44 +4,15 @@ CLI for stacked Git commands
 
 ## Development
 
-### First-Time Setup
+### Getting started
 
-Before installing packages, make sure to authenticate your local `~/.npmrc` to
-Github Packages so it can read Github Packages.
-
-1.  Generate a PAT using this guide:
-    [Creating a Personal Access Token (classic)](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic)
-
-        1. Make sure the PAT has atleast `read:packages` scope like so:
-        	![image showing permissions required for GH PAT](static/images/ghpermissions.png)
-
-2.  Copy the contents `.npmrc.sample` file into a newly created `.npmrc` file in
-    the root of this project. Replace `<YOUR_TOKEN_HERE>` with the PAT generated
-    above.
-
-    1. Alternative methods and further reading available on GH Docs here:
-       [Authenticating to Github Packages](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-with-a-personal-access-token).
-
-3.  Run `npm i` to install dependencies as usual.
-
-4.  Link the package to your global npm packages:
+1.  Create an environment file.
+    ```bash
+    cp sample.env .env
+    ```
+2.  Run `npm i` to install dependencies as usual.
 
+3.  Link the package to your global npm packages:
     ```bash
     $ npm link && npm install --global gumption
     ```
-
-## Documentation
-
-```
-$ gumption --help
-
-  Usage
-    $ gumption
-
-  Options
-    --name  Your name
-
-  Examples
-    $ gumption --name=Jane
-    Hello, Jane
-```

package.json

@@ -33,6 +33,7 @@
         "@types/node": "^20.12.8",
         "@types/react": "^18.0.32",
         "chalk": "^5.2.0",
+        "dotenv": "^16.4.5",
         "eslint": "^8.49.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-prettier": "^5.0.0",

sample.env

@@ -0,0 +1,2 @@
+# development | production
+NODE_ENV=development

src/commands/branch/new.test.tsx

@@ -1,5 +1,6 @@
 import BranchNew from './new.js';
 import React from 'react';
+import { Loading } from '../../components/loading.js';
 import { Text } from 'ink';
 import { delay } from '../../utils/time.js';
 import { describe, expect, it, vi } from 'vitest';
@@ -45,7 +46,10 @@ vi.mock('../../services/git.js', () => {
     };
 });
 
-const LOADING_MESSAGE = 'Loading...';
+vi.mock('../../services/store.js', async () => {
+    const { mockStoreService } = await import('../../utils/test-helpers.js');
+    return mockStoreService({ rootInitialized: true });
+});
 
 describe('correctly renders changes commit UI', () => {
     it('runs as intended', async () => {
@@ -73,8 +77,8 @@ describe('correctly renders changes commit UI', () => {
 
         const ExpectedComp = () => {
             return (
-                <Text bold color="green">
-                    New branch created - {newBranchName}
+                <Text color="green">
+                    New branch created - <Text bold>{newBranchName}</Text>
                 </Text>
             );
         };
@@ -106,10 +110,7 @@ describe('correctly renders changes commit UI', () => {
             />
         );
 
-        const ExpectedComp = () => {
-            return <Text color="cyan">{LOADING_MESSAGE}</Text>;
-        };
-        const expected = render(<ExpectedComp />);
+        const expected = render(<Loading />);
 
         await delay(ARBITRARY_DELAY / 2);
         expect(actual1.lastFrame()).to.equal(expected.lastFrame());

src/commands/branch/new.tsx

@@ -1,35 +1,47 @@
 import ErrorDisplay from '../../components/error-display.js';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Action, useAction } from '../../hooks/use-action.js';
 import {
     CommandConfig,
     CommandProps,
     PropSanitationResult,
     Valid,
 } from '../../types.js';
+import { Loading } from '../../components/loading.js';
+import { SelectRootBranch } from '../../components/select-root-branch.js';
 import { Text } from 'ink';
 import { safeBranchNameFromCommitMessage } from '../../utils/naming.js';
 import { useGit } from '../../hooks/use-git.js';
+import { useTree } from '../../hooks/use-tree.js';
 
 function BranchNew(props: CommandProps) {
     const args = branchNewConfig.getProps(props) as Valid<
         PropSanitationResult<CommandArgs>
     >;
     const { commitMessage } = args.props;
 
-    const result = useBranchNew({ message: commitMessage });
+    const { rootBranchName } = useTree();
+
+    const result = useBranchNew({
+        message: commitMessage,
+        enabled: Boolean(rootBranchName),
+    });
+
+    if (!result.isEnabled) {
+        return <SelectRootBranch />;
+    }
 
     if (result.isError) {
         return <ErrorDisplay error={result.error} />;
     }
 
     if (result.isLoading) {
-        return <Text color="cyan">Loading...</Text>;
+        return <Loading />;
     }
 
     return (
-        <Text bold color="green">
-            New branch created - {result.branchName}
+        <Text color="green">
+            New branch created - <Text bold>{result.branchName}</Text>
         </Text>
     );
 }
@@ -38,7 +50,13 @@ type UseBranchNewAction = Action & {
     branchName: string;
 };
 
-const useBranchNew = ({ message }: { message: string }): UseBranchNewAction => {
+const useBranchNew = ({
+    message,
+    enabled,
+}: {
+    message: string;
+    enabled: boolean;
+}): UseBranchNewAction => {
     const git = useGit();
 
     const branchName = safeBranchNameFromCommitMessage(message);
@@ -52,9 +70,11 @@ const useBranchNew = ({ message }: { message: string }): UseBranchNewAction => {
 
     const action = useAction({
         asyncAction: performAction,
+        enabled,
     });
 
     return {
+        isEnabled: action.isEnabled,
         isLoading: action.isLoading,
         isError: action.isError,
         error: action.error,

src/commands/changes/add.test.tsx

@@ -1,5 +1,6 @@
 import ChangesAdd from './add.js';
 import React from 'react';
+import { Loading } from '../../components/loading.js';
 import { Text } from 'ink';
 import { delay } from '../../utils/time.js';
 import { describe, expect, it, vi } from 'vitest';
@@ -28,7 +29,11 @@ vi.mock('../../services/git.js', () => {
     };
 });
 
-const LOADING_MESSAGE = 'Loading...';
+vi.mock('../../services/store.js', async () => {
+    const { mockStoreService } = await import('../../utils/test-helpers.js');
+    return mockStoreService({ rootInitialized: false });
+});
+
 const SUCCESS_MESSAGE = 'Staged all changes';
 
 describe('correctly renders changes add UI', () => {
@@ -88,10 +93,7 @@ describe('correctly renders changes add UI', () => {
             />
         );
 
-        const ExpectedComp = () => {
-            return <Text color="cyan">{LOADING_MESSAGE}</Text>;
-        };
-        const expected = render(<ExpectedComp />);
+        const expected = render(<Loading />);
 
         await delay(ARBITRARY_DELAY / 2);
         expect(actual1.lastFrame()).to.equal(expected.lastFrame());

src/commands/changes/add.tsx

@@ -2,6 +2,7 @@ import ErrorDisplay from '../../components/error-display.js';
 import React, { useCallback } from 'react';
 import { Action, useAction } from '../../hooks/use-action.js';
 import { CommandConfig, CommandProps } from '../../types.js';
+import { Loading } from '../../components/loading.js';
 import { Text } from 'ink';
 import { useGit } from '../../hooks/use-git.js';
 
@@ -13,7 +14,7 @@ function ChangedAdd({}: CommandProps) {
     }
 
     if (result.isLoading) {
-        return <Text color="cyan">Loading...</Text>;
+        return <Loading />;
     }
 
     return (

src/commands/changes/commit.test.tsx

@@ -1,5 +1,6 @@
 import ChangesCommit from './commit.js';
 import React from 'react';
+import { Loading } from '../../components/loading.js';
 import { Text } from 'ink';
 import { delay } from '../../utils/time.js';
 import { describe, expect, it, vi } from 'vitest';
@@ -34,7 +35,11 @@ vi.mock('../../services/git.js', () => {
     };
 });
 
-const LOADING_MESSAGE = 'Loading...';
+vi.mock('../../services/store.js', async () => {
+    const { mockStoreService } = await import('../../utils/test-helpers.js');
+    return mockStoreService({ rootInitialized: true });
+});
+
 const SUCCESS_MESSAGE = 'Committed all changes';
 
 describe('correctly renders changes commit UI', () => {
@@ -94,10 +99,7 @@ describe('correctly renders changes commit UI', () => {
             />
         );
 
-        const ExpectedComp = () => {
-            return <Text color="cyan">{LOADING_MESSAGE}</Text>;
-        };
-        const expected = render(<ExpectedComp />);
+        const expected = render(<Loading />);
 
         await delay(ARBITRARY_DELAY / 2);
         expect(actual1.lastFrame()).to.equal(expected.lastFrame());

src/commands/changes/commit.tsx

@@ -7,21 +7,34 @@ import {
     PropSanitationResult,
     Valid,
 } from '../../types.js';
+import { Loading } from '../../components/loading.js';
+import { SelectRootBranch } from '../../components/select-root-branch.js';
 import { Text } from 'ink';
 import { useGit } from '../../hooks/use-git.js';
+import { useTree } from '../../hooks/use-tree.js';
 
 function ChangesCommit(props: CommandProps) {
     const args = changesCommitConfig.getProps(props) as Valid<
         PropSanitationResult<CommandArgs>
     >;
-    const result = useChangesCommit({ message: args.props.message });
+
+    const { rootBranchName } = useTree();
+
+    const result = useChangesCommit({
+        message: args.props.message,
+        enabled: Boolean(rootBranchName),
+    });
+
+    if (!result.isEnabled) {
+        return <SelectRootBranch />;
+    }
 
     if (result.isError) {
         return <ErrorDisplay error={result.error} />;
     }
 
     if (result.isLoading) {
-        return <Text color="cyan">Loading...</Text>;
+        return <Loading />;
     }
 
     return (
@@ -31,7 +44,13 @@ function ChangesCommit(props: CommandProps) {
     );
 }
 
-const useChangesCommit = ({ message }: { message: string }): Action => {
+const useChangesCommit = ({
+    message,
+    enabled,
+}: {
+    message: string;
+    enabled: boolean;
+}): Action => {
     const git = useGit();
 
     const performAction = useCallback(async () => {
@@ -41,6 +60,7 @@ const useChangesCommit = ({ message }: { message: string }): Action => {
 
     return useAction({
         asyncAction: performAction,
+        enabled,
     });
 };
 

src/commands/hop.test.tsx

@@ -2,7 +2,7 @@ import GumptionItemComponent from '../components/gumption-item-component.js';
 import Hop from './hop.js';
 import React from 'react';
 import SelectInput from 'ink-select-input';
-import { KEYS } from '../utils/test-helpers.js';
+import { KEYS, mockStoreService } from '../utils/test-helpers.js';
 import { delay } from '../utils/time.js';
 import { describe, expect, it, vi } from 'vitest';
 import { render } from 'ink-testing-library';
@@ -29,6 +29,11 @@ vi.mock('../services/git.js', () => {
     };
 });
 
+vi.mock('../services/store.js', async () => {
+    const { mockStoreService } = await import('../utils/test-helpers.js');
+    return mockStoreService({ rootInitialized: false });
+});
+
 describe('correctly renders hop UI', () => {
     it('displays branch names in a list', async () => {
         const actual1 = render(