From 0c79f86d80a2f43cf58c7fb2d0cb6c341df1d516 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 8 Jun 2024 04:10:13 +0900
Subject: [PATCH] refactor(cli): streamline component selection and overwrite
 process

Refactored the 'cli add' command to streamline the process of component selection and the decision to overwrite an already installed one. The task has been split into two separate interactive choices to enhance the user experience and simplify the codebase. The force option is now also evaluated separately which results in cleaner code.
---
 packages/cli/src/commands/add.tsx | 107 ++++++++++++++++++------------
 1 file changed, 66 insertions(+), 41 deletions(-)

diff --git a/packages/cli/src/commands/add.tsx b/packages/cli/src/commands/add.tsx
index 9c91151..14d3077 100644
--- a/packages/cli/src/commands/add.tsx
+++ b/packages/cli/src/commands/add.tsx
@@ -5,7 +5,7 @@ import {mkdir, writeFile} from 'node:fs/promises'
 import {join} from 'node:path'
 import {getAvailableComponentNames, getComponentRealname, getComponentURL, getRegistry} from '../helpers/registry.js'
 import ora from 'ora'
-import React, {ComponentPropsWithoutRef, useState} from 'react'
+import React, {ComponentPropsWithoutRef} from 'react'
 import {render, Box} from 'ink'
 import {SearchBox} from '../components/SearchBox.js'
 import {getComponentsInstalled} from '../helpers/path.js'
@@ -16,43 +16,18 @@ function Generator() {
   let complete: boolean = false
 
   function ComponentSelector<T extends {displayName: string; key: string; installed: boolean}>(
-    props: Omit<ComponentPropsWithoutRef<typeof SearchBox<T>>, 'helper' | 'onSubmit'> & {
-      installed: string[]
-      onComplete: (value: T, force: 'yes' | 'no' | null) => void
-      skipForce: boolean
-    },
+    props: Omit<ComponentPropsWithoutRef<typeof SearchBox<T>>, 'helper'>,
   ) {
-    const [forceStaged, setForceStaged] = useState<boolean>(false)
-    const [onCompleteCache, setCache] = useState<T>({key: '', displayName: '', installed: false} as T)
-
     return (
       <Box>
-        {!forceStaged ? (
-          <SearchBox
-            helper={'Press Enter to select component.'}
-            {...props}
-            onSubmit={(T) => {
-              if (T.installed && !props.skipForce) {
-                setForceStaged(true)
-                setCache(T)
-              } else {
-                complete = true
-                props.onComplete(T, null)
-              }
-            }}
-          />
-        ) : null}
-        {forceStaged ? (
-          <Choice
-            question={'You already installed this component. Overwrite?'}
-            yes={'Yes, overwrite existing file and install it.'}
-            no={'No, cancel the action.'}
-            onSubmit={(value) => {
-              complete = true
-              props.onComplete(onCompleteCache, value)
-            }}
-          />
-        ) : null}
+        <SearchBox
+          helper={'Press Enter to select component.'}
+          {...props}
+          onSubmit={(value) => {
+            complete = true
+            props.onSubmit?.(value)
+          }}
+        />
       </Box>
     )
   }
@@ -70,6 +45,36 @@ function Generator() {
   ] as const
 }
 
+function Generator2() {
+  let complete = false
+
+  function ForceSelector({onComplete}: {onComplete: (value: 'yes' | 'no') => void}) {
+    return (
+      <Choice
+        question={'You already installed this component. Overwrite?'}
+        yes={'Yes, overwrite existing file and install it.'}
+        no={'No, cancel the action.'}
+        onSubmit={(value) => {
+          complete = true
+          onComplete(value)
+        }}
+      />
+    )
+  }
+
+  return [
+    ForceSelector,
+    new Promise<void>((r) => {
+      const i = setInterval(() => {
+        if (complete) {
+          r()
+          clearInterval(i)
+        }
+      }, 100)
+    }),
+  ] as const
+}
+
 export default class Add extends Command {
   static override args = {
     name: Args.string({description: 'name of component to install'}),
@@ -121,7 +126,12 @@ export default class Add extends Command {
     }))
 
     let name: string | undefined = args.name?.toLowerCase?.()
-    let quit = false
+    let requireForce: boolean =
+      !name || !componentNames.includes(name.toLowerCase())
+        ? false
+        : searchBoxComponent.find(({key}) => key === name)?.installed
+          ? !force
+          : false
 
     if (!name || !componentNames.includes(name.toLowerCase())) {
       const [ComponentSelector, waitForComplete] = Generator()
@@ -130,12 +140,27 @@ export default class Add extends Command {
         <ComponentSelector
           components={searchBoxComponent}
           initialQuery={args.name}
-          installed={installed}
-          skipForce={force}
-          onComplete={(comp, forceSelected) => {
+          onSubmit={(comp) => {
             name = comp.key
-            force = forceSelected === 'yes'
-            quit = forceSelected === 'no'
+            requireForce = comp.installed
+            inkInstance.clear()
+          }}
+        />,
+      )
+      await waitForComplete
+      inkInstance.unmount()
+    }
+
+    let quit = false
+
+    if (requireForce) {
+      const [ForceSelector, waitForComplete] = Generator2()
+
+      const inkInstance = render(
+        <ForceSelector
+          onComplete={(value) => {
+            force = value === 'yes'
+            quit = value === 'no'
             inkInstance.clear()
           }}
         />,