Moved all logs to use console.log instead. Static are meant for single items tied to state. Changed useEffect to useLayoutEffect

Author: kevinwang5658

package.json

@@ -14,7 +14,8 @@
     "tsx": "^4.7.3",
     "ink": "^4.4.1",
     "@inkjs/ui": "^1.0.0",
-    "react": "^18.3.1"
+    "react": "^18.3.1",
+    "chalk": "^5.3.0"
   },
   "description": "Codify is a set up as code tool for developers",
   "devDependencies": {
@@ -27,6 +28,7 @@
     "@types/node": "^18",
     "@types/semver": "^7.5.4",
     "@types/react": "^18.3.1",
+    "@types/chalk": "^2.2.0",
     "eslint-config-prettier": "^9.0.0",
     "chai": "^4",
     "chai-as-promised": "^7.1.1",

src/commands/apply/index.ts

@@ -43,14 +43,13 @@ export default class Apply extends Command {
     const { plan } = await PlanOrchestrator.run(resolvedPath);
     reporter.displayPlan(plan);
 
-    const confirm = await reporter.promptConfirmation()
+    const confirm = await reporter.promptApplyConfirmation()
 
     if (!confirm) {
       return this.exit(0);
     }
 
-    setTimeout(() => console.log('Confirmed!'), 500)
-
     // this.exit(0);
+
   }
 }

src/ui/components/default-component.tsx

@@ -1,8 +1,9 @@
 import { Select } from '@inkjs/ui';
+import chalk from 'chalk';
 import { PlanResponseData } from 'codify-schemas';
 import { Box, Static, Text } from 'ink';
 import { EventEmitter } from 'node:events';
-import React, { useEffect, useState } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 
 import { RenderEvent, RenderState } from '../reporters/reporter.js';
 import { PlanComponent } from './plan/plan.js';
@@ -14,33 +15,25 @@ export function DefaultComponent(props: {
   const { emitter } = props;
 
   const [state, setState] = useState(RenderState.GENERATING_PLAN);
-  const [staticOutput, setStaticOutput] = useState([] as Array<Record<string, unknown> | string>);
   const [progressState, setProgressState] = useState(null as ProgressState | null);
   const [plan, setPlan] = useState(null as PlanResponseData[] | null);
-  const [confirmValue, setConfirmValue] = useState(null as boolean | null)
 
-  useEffect(() => {
+  // Use layoutEffect runs before the first render, whereas useEffect runs after
+  useLayoutEffect(() => {
     emitter.on(RenderEvent.STATE_TRANSITION, (obj) => {
       switch (obj.nextState) {
         case RenderState.DISPLAY_PLAN: {
+          setProgressState(null);
           setPlan(obj.plan);
-          setState(obj.nextState);
-          break;
-        }
-
-        case RenderState.ASK_CONFIRMATION: {
-          setState(obj.nextState);
-          break;
-        }
-
-        case RenderState.APPLYING: {
           break;
         }
       }
+
+      setState(obj.nextState);
     })
 
-    emitter.on(RenderEvent.LOG, (newValue: string) => {
-      setStaticOutput([...newValue]);
+    emitter.on(RenderEvent.LOG, (log: string) => {
+      console.log(chalk.cyan(log))
     });
 
     emitter.on(RenderEvent.PROGRESS_UPDATE, (state: ProgressState) => {
@@ -49,40 +42,25 @@ export function DefaultComponent(props: {
   }, []);
 
   return <Box flexDirection="column">
-    <Static items={staticOutput}>
-      {
-        (text, idx) => <Text color="cyan" key={idx}>{text.toString()}</Text>
-      }
-    </Static>
+    {
+      (state === RenderState.GENERATING_PLAN || state === RenderState.APPLYING) && progressState && (
+        <ProgressDisplay progress={progressState}/>
+      )
+    }
     {
       state >= RenderState.DISPLAY_PLAN && plan && <Static items={[plan]}>{
         (plan, idx) => <PlanComponent key={idx} plan={plan}/>
       }</Static>
     }
     {
-      (state === RenderState.GENERATING_PLAN || state === RenderState.APPLYING) && progressState &&
-      <ProgressDisplay progress={progressState}/>
-    }
-    {
-      state === RenderState.ASK_CONFIRMATION && (
-        confirmValue === null
-          ? <Box flexDirection="column">
-            <Text>Do you want to apply the above changes?</Text>
-            <Select onChange={(value) => {
-              setConfirmValue(value === 'yes');
-              emitter.emit(RenderEvent.PROMPT_RESULT, value === 'yes')
-            }} options={[
-              { label: 'Yes', value: 'yes' },
-              { label: 'No', value: 'no' },
-            ]}/>
-          </Box>
-          : <Box flexDirection="column">
-            <Text>Do you want to apply the above changes?</Text>
-            <Select highlightText={confirmValue ? 'Yes' : 'No'} isDisabled options={[
-              { label: 'Yes', value: 'yes' },
-              { label: 'No', value: 'no' },
-            ]}/>
-          </Box>
+      state === RenderState.PROMPT_APPLY_CONFIRMATION && (
+        <Box flexDirection="column">
+          <Text>Do you want to apply the above changes?</Text>
+          <Select onChange={(value) => emitter.emit(RenderEvent.PROMPT_RESULT, value === 'yes')} options={[
+            { label: 'Yes', value: 'yes' },
+            { label: 'No', value: 'no' },
+          ]}/>
+        </Box>
       )
     }
   </Box>

src/ui/reporters/default-reporter.tsx

@@ -9,10 +9,10 @@ import { ProgressState, ProgressStatus } from '../components/progress/progress-d
 import { DisplayPlanStateTransition, RenderEvent, RenderState, Reporter } from './reporter.js';
 
 const ProgressLabelMapping = {
-  [ProcessName.APPLY]: 'Applying plan...',
-  [ProcessName.PLAN]: 'Generating plan...',
+  [ProcessName.APPLY]: 'Codify plan',
+  [ProcessName.PLAN]: 'Codify plan',
   [SubProcessName.APPLY_RESOURCE]: 'Applying resource',
-  [SubProcessName.GENERATE_PLAN]: 'Generating plan',
+  [SubProcessName.GENERATE_PLAN]: 'Refresh states and generating plan',
   [SubProcessName.INITIALIZE_PLUGINS]: 'Initializing plugins',
   [SubProcessName.PARSE]: 'Parsing configs',
   [SubProcessName.VALIDATE]: 'Validating configs',
@@ -21,56 +21,64 @@ const ProgressLabelMapping = {
 export class DefaultReporter implements Reporter {
 
   private renderEmitter = new EventEmitter();
-  private staticOutput = new Array<string>()
   private progressState: ProgressState | null = null
 
   constructor() {
-    ctx.on(Event.OUTPUT, (...args) => this.renderLog(...args));
+    render(<DefaultComponent emitter={this.renderEmitter}/>)
+
+    ctx.on(Event.OUTPUT, (args) => this.log(args));
     ctx.on(Event.PROCESS_START, (name) => this.onProcessStartEvent(name))
     ctx.on(Event.PROCESS_FINISH, (name) => this.onProcessFinishEvent(name))
     ctx.on(Event.SUB_PROCESS_START, (name) => this.onSubprocessStartEvent(name));
     ctx.on(Event.SUB_PROCESS_FINISH, (name) => this.onSubprocessFinishEvent(name))
+  }
 
-    render(<DefaultComponent emitter={this.renderEmitter}/>)
+  displayPlan(plan: PlanResponseData[]): void {
+    this.progressState = null;
+
+    this.renderEmitter.emit(RenderEvent.STATE_TRANSITION, {
+      nextState: RenderState.DISPLAY_PLAN,
+      plan,
+    } as DisplayPlanStateTransition);
   }
 
-  async promptConfirmation(): Promise<boolean> {
+  async promptApplyConfirmation(): Promise<boolean> {
     const result = await Promise.all([
       new Promise<boolean>((resolve) => {
         this.renderEmitter.once(RenderEvent.PROMPT_RESULT, (isConfirmed) => resolve(isConfirmed as boolean));
       }),
       this.renderEmitter.emit(RenderEvent.STATE_TRANSITION, {
-        nextState: RenderState.ASK_CONFIRMATION,
+        nextState: RenderState.PROMPT_APPLY_CONFIRMATION,
       }),
     ])
 
+    const continueApply = result[0];
 
-    return result[0];
-  }
+    if (continueApply) {
+      this.renderEmitter.emit(RenderEvent.STATE_TRANSITION, {
+        nextState: RenderState.APPLYING,
+      });
+    }
 
-  displayPlan(plan: PlanResponseData[]): void {
-    this.renderEmitter.emit(RenderEvent.STATE_TRANSITION, {
-      nextState: RenderState.DISPLAY_PLAN,
-      plan,
-    } as DisplayPlanStateTransition);
+    this.log(`Do you want to apply the above changes? -> ${continueApply ? '"Yes"' : '"No"'}`)
+    return continueApply;
   }
 
-  private renderLog(...args: string[]) {
-    this.staticOutput.push(...args);
-    this.renderEmitter.emit(RenderEvent.LOG, this.staticOutput);
+  private log(args: string): void {
+    this.renderEmitter.emit(RenderEvent.LOG, args);
   }
 
   private onProcessStartEvent(name: ProcessName): void {
     const label = ProgressLabelMapping[name];
 
     this.progressState = {
+      label: label + '...',
       name,
-      label,
       status: ProgressStatus.IN_PROGRESS,
       subProgresses: [],
     };
 
-    this.renderLog(`${label} started`)
+    this.log(`${label} started`)
     this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
   }
 
@@ -79,7 +87,7 @@ export class DefaultReporter implements Reporter {
 
     this.progressState!.status = ProgressStatus.FINISHED;
 
-    this.renderLog(`${label} finished successfully`)
+    this.log(`${label} finished successfully`)
     this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
 
   }
@@ -88,12 +96,12 @@ export class DefaultReporter implements Reporter {
     const label = ProgressLabelMapping[name];
 
     this.progressState?.subProgresses?.push({
-      name,
       label,
+      name,
       status: ProgressStatus.IN_PROGRESS,
     });
 
-    this.renderLog(`${label} started`)
+    this.log(`${label} started`)
     this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
   }
 
@@ -110,7 +118,7 @@ export class DefaultReporter implements Reporter {
 
     subProgress.status = ProgressStatus.FINISHED;
 
-    this.renderLog(`${label} finished successfully`)
+    this.log(`${label} finished successfully`)
     this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
   }
 

src/ui/reporters/plain-reporter.ts

@@ -16,7 +16,7 @@ export class PlainReporter implements Reporter {
     ctx.on(Event.SUB_PROCESS_FINISH, (name) => console.log(name))
   }
 
-  async promptConfirmation(): Promise<boolean> {
+  async promptApplyConfirmation(): Promise<boolean> {
     const response = await new Promise((resolve) => {
       this.rl.question('Is this okay?\n', (answer) => resolve(answer));
     });

src/ui/reporters/reporter.ts

@@ -13,7 +13,7 @@ export enum RenderEvent {
 export enum RenderState {
   GENERATING_PLAN,
   DISPLAY_PLAN,
-  ASK_CONFIRMATION,
+  PROMPT_APPLY_CONFIRMATION,
   APPLYING,
 }
 
@@ -26,7 +26,7 @@ export interface DisplayPlanStateTransition extends StateTransition {
 }
 
 export interface Reporter {
-  promptConfirmation(): Promise<boolean>
+  promptApplyConfirmation(): Promise<boolean>
 
   displayPlan(plan: PlanResponseData[]): void
 }