feat: WIP refactored default reporter to use a new statement management library (jotai) instead of being event based

kevinwang5658 · kevinwang5658 · commit 8c744ce4775c · 2025-01-23T17:22:36.000-05:00
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -18,11 +18,11 @@
     "unicorn/no-array-for-each": "off",
     "unicorn/prefer-object-from-entries": "off",
     "unicorn/prefer-type-error": "off",
-    "no-await-in-loop": "off",
     "quotes": [
       "error",
       "single"
-    ]
+    ],
+    "no-await-in-loop": "off"
   },
   "ignorePatterns": [
     "*.test.ts"
diff --git a/codify.json b/codify.json
@@ -19,5 +19,6 @@
       "firefox"
     ]
   },
+  { "type": "terraform" },
   { "type": "alias", "alias": "gcdsdd", "value": "git clone" }
 ]
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "debug": "^4.3.4",
     "ink": "^5",
     "ink-form": "^2.0.1",
+    "jotai": "^2.11.1",
     "js-yaml": "^4.1.0",
     "js-yaml-source-map": "^0.2.2",
     "json-source-map": "^0.6.1",
diff --git a/src/ui/components/default-component.tsx b/src/ui/components/default-component.tsx
@@ -1,12 +1,14 @@
 import { PasswordInput, Select } from '@inkjs/ui';
 import chalk from 'chalk';
 import { Box, Static, Text } from 'ink';
+import { useAtom } from 'jotai';
 import { EventEmitter } from 'node:events';
 import React, { useLayoutEffect, useState } from 'react';
 
 import { Plan } from '../../entities/plan.js';
 import { ImportResult, RequiredParameters } from '../../orchestrators/import.js';
 import { RenderEvent, RenderState } from '../reporters/reporter.js';
+import { RenderStatus, store } from '../store/index.js';
 import { ImportResultComponent } from './import/import-result.js';
 import { ImportParametersForm } from './import/index.js';
 import { PlanComponent } from './plan/plan.js';
@@ -20,7 +22,7 @@ export function DefaultComponent(props: {
   const { emitter } = props;
 
   const [state, setState] = useState(RenderState.GENERATING_PLAN);
-  const [progressState, setProgressState] = useState(null as ProgressState | null);
+  // const [progressState, setProgressState] = useState(null as ProgressState | null);
   const [hideProgress, setHideProgress] = useState(false);
   const [plan, setPlan] = useState(null as Plan | null);
   const [showSudoPrompt, setShowPromptSudo] = useState(false);
@@ -29,19 +31,22 @@ export function DefaultComponent(props: {
   const [importResult, setImportResult] = useState<ImportResult | null>(null);
   const [sudoAttemptCount, setSudoAttemptCount] = useState(0);
   const [confirmationMessage, setConfirmationMessage] = useState('');
+  
+  const [{ status: renderStatus, data: renderData }] = useAtom(store.renderState);
+  const [progressState] = useAtom(store.progressState);
 
   // 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);
+          // setProgressState(null);
           setPlan(obj.plan);
           break;
         }
 
         case RenderState.DISPLAY_IMPORT_RESULT: {
-          setProgressState(null);
+          // setProgressState(null);
           setImportResult(obj.importResult);
           break;
         }
@@ -61,7 +66,7 @@ export function DefaultComponent(props: {
     });
 
     emitter.on(RenderEvent.PROGRESS_UPDATE, (state: ProgressState) => {
-      setProgressState(structuredClone(state));
+      // setProgressState(structuredClone(state));
     });
 
     emitter.on(RenderEvent.PROMPT_SUDO, (attemptCount) => {
@@ -94,21 +99,28 @@ export function DefaultComponent(props: {
     })
   }, []);
 
+  // console.log(renderStatus);
+  // console.log(renderData);
+  //
+  // console.log(renderStatus);
+  // console.log(progressState);
+  // console.log(renderData);
+
   return <Box flexDirection="column">
     {
-      ([RenderState.APPLY_COMPLETE, RenderState.APPLYING, RenderState.GENERATING_PLAN].includes(state)) && progressState && !hideProgress && (
+      renderStatus === RenderStatus.PROGRESS && progressState && !hideProgress && (
         <ProgressDisplay emitter={spinnerEmitter} eventType="data" progress={progressState}/>
       )
     }
     {
-      state >= RenderState.DISPLAY_PLAN && plan && <Static items={[plan]}>{
+      renderStatus === RenderStatus.DISPLAY_PLAN && <Static items={[renderData as Plan]}>{
         (plan, idx) => <PlanComponent key={idx} plan={plan}/>
       }</Static>
     }
     {
-      state === RenderState.PROMPT_CONFIRMATION && (
+      renderStatus === RenderStatus.PROMPT_CONFIRMATION && (
         <Box flexDirection="column">
-          <Text>{confirmationMessage}</Text>
+          <Text>{renderData as string}</Text>
           <Select onChange={(value) => emitter.emit(RenderEvent.PROMPT_CONFIRMATION_RESULT, value === 'yes')} options={[
             { label: 'Yes', value: 'yes' },
             { label: 'No', value: 'no' },
@@ -117,7 +129,7 @@ export function DefaultComponent(props: {
       )
     }
     {
-      state === RenderState.APPLY_COMPLETE && (
+      renderStatus === RenderStatus.APPLY_COMPLETE && (
         <Box flexDirection="column">
           <Text> </Text>
           <Text>🎉 Finished applying 🎉</Text>
diff --git a/src/ui/reporters/default-reporter.tsx b/src/ui/reporters/default-reporter.tsx
@@ -10,6 +10,7 @@ import { ImportResult, RequiredParameters, UserSuppliedParameters } from '../../
 import { SudoUtils } from '../../utils/sudo.js';
 import { DefaultComponent } from '../components/default-component.js';
 import { ProgressState, ProgressStatus } from '../components/progress/progress-display.js';
+import { RenderStatus, store } from '../store/index.js';
 import { DisplayPlanStateTransition, RenderEvent, RenderState, Reporter } from './reporter.js';
 
 const ProgressLabelMapping = {
@@ -81,31 +82,37 @@ export class DefaultReporter implements Reporter {
   }
 
   displayPlan(plan: Plan): void {
+    store.set(store.renderState, { status: RenderStatus.DISPLAY_PLAN, data: plan });
+    store.set(store.progressState, null);
     this.progressState = null;
 
-    this.renderEmitter.emit(RenderEvent.STATE_TRANSITION, {
-      nextState: RenderState.DISPLAY_PLAN,
-      plan,
-    } as DisplayPlanStateTransition);
+    // this.renderEmitter.emit(RenderEvent.STATE_TRANSITION, {
+    //   nextState: RenderState.DISPLAY_PLAN,
+    //   plan,
+    // } as DisplayPlanStateTransition);
   }
 
   async promptConfirmation(message: string): Promise<boolean> {
     const result = await Promise.all([
       new Promise<boolean>((resolve) => {
         this.renderEmitter.once(RenderEvent.PROMPT_CONFIRMATION_RESULT, (isConfirmed) => resolve(isConfirmed as boolean));
       }),
-      this.renderEmitter.emit(RenderEvent.STATE_TRANSITION, {
-        nextState: RenderState.PROMPT_CONFIRMATION,
-        message,
-      }),
+
+      store.set(store.renderState, { status: RenderStatus.PROMPT_CONFIRMATION, data: message })
+      // this.renderEmitter.emit(RenderEvent.STATE_TRANSITION, {
+      //   nextState: RenderState.PROMPT_CONFIRMATION,
+      //   message,
+      // }),
     ])
 
     const continueApply = result[0];
 
     if (continueApply) {
-      this.renderEmitter.emit(RenderEvent.STATE_TRANSITION, {
-        nextState: RenderState.APPLYING,
-      });
+      // this.renderEmitter.emit(RenderEvent.STATE_TRANSITION, {
+      //   nextState: RenderState.APPLYING,
+      // });
+
+      store.set(store.renderState, { status: RenderStatus.PROGRESS });
 
       this.log(`${message} -> "Yes"`)
     }
@@ -114,9 +121,11 @@ export class DefaultReporter implements Reporter {
   }
 
   displayApplyComplete(messages: string[]): Promise<void> | void {
-    this.renderEmitter.emit(RenderEvent.STATE_TRANSITION, {
-      nextState: RenderState.APPLY_COMPLETE,
-    });
+    store.set(store.renderState, { status: RenderStatus.APPLY_COMPLETE });
+
+    // this.renderEmitter.emit(RenderEvent.STATE_TRANSITION, {
+    //   nextState: RenderState.APPLY_COMPLETE,
+    // });
   }
 
   private log(args: string): void {
@@ -134,7 +143,9 @@ export class DefaultReporter implements Reporter {
     };
 
     this.log(`${label} started`)
-    this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
+
+    store.set(store.progressState, structuredClone(this.progressState));
+    // this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
   }
 
   private onProcessFinishEvent(name: ProcessName): void {
@@ -143,8 +154,9 @@ export class DefaultReporter implements Reporter {
     this.progressState!.status = ProgressStatus.FINISHED;
 
     this.log(`${label} finished successfully`)
-    this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
 
+    store.internal.set(store.progressState, structuredClone(this.progressState));
+    // this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
   }
 
   private onSubprocessStartEvent(name: SubProcessName, additionalName?: string): void {
@@ -160,7 +172,9 @@ export class DefaultReporter implements Reporter {
     });
 
     this.log(`${label} started`)
-    this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
+
+    store.set(store.progressState, structuredClone(this.progressState));
+    // this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
   }
 
   private onSubprocessFinishEvent(name: SubProcessName, additionalName?: string): void {
@@ -180,7 +194,8 @@ export class DefaultReporter implements Reporter {
     subProgress.status = ProgressStatus.FINISHED;
 
     this.log(`${label} finished successfully`)
-    this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
+    store.set(store.progressState, structuredClone(this.progressState));
+    // this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
   }
 
   private async getUserPassword(): Promise<string> {
diff --git a/src/ui/reporters/reporter.ts b/src/ui/reporters/reporter.ts
@@ -64,7 +64,7 @@ export const ReporterFactory = {
   create(type: ReporterType): Reporter {
     switch (type) {
       case ReporterType.DEBUG: {
-        return new DebugReporter();
+        return new DefaultReporter();
       }
 
       case ReporterType.PLAIN: {
diff --git a/src/ui/store/index.ts b/src/ui/store/index.ts
@@ -0,0 +1,36 @@
+import { atom, createStore, getDefaultStore, Setter, Getter, Atom, WritableAtom } from 'jotai'
+
+import { ProgressState } from '../components/progress/progress-display.js';
+
+export interface RenderState {
+  status: RenderStatus;
+  data?: unknown;
+}
+
+export enum RenderStatus {
+  PROGRESS,
+  DISPLAY_PLAN,
+  DISPLAY_IMPORT_RESULT,
+  IMPORT_PROMPT,
+  PROMPT_CONFIRMATION,
+  APPLY_COMPLETE,
+  SUDO_PROMPT,
+}
+
+export const store = new class {
+  private internal = getDefaultStore()
+
+  renderState = atom(<RenderState>{ status: RenderStatus.PROGRESS })
+  renderStatus = atom((get) => get(this.renderState).status)
+  renderData = atom((get) => get(this.renderState).data)
+
+  progressState = atom(null as ProgressState | null)
+
+  get<Value>(atom: Atom<Value>): Value {
+    return this.internal.get(atom);
+  }
+
+  set<Value, Args extends unknown[], Result>(atom: WritableAtom<Value, Args, Result>, ...args: Args): Result {
+    return this.internal.set(atom, ...args);
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -19,5 +19,6 @@`
`19`	`19`	`"firefox"`
`20`	`20`	`]`
`21`	`21`	`},`
	`22`	`+ { "type": "terraform" },`
`22`	`23`	`{ "type": "alias", "alias": "gcdsdd", "value": "git clone" }`
`23`	`24`	`]`
Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@ export const ReporterFactory = {`
`64`	`64`	`create(type: ReporterType): Reporter {`
`65`	`65`	`switch (type) {`
`66`	`66`	`case ReporterType.DEBUG: {`
`67`		`- return new DebugReporter();`
	`67`	`+ return new DefaultReporter();`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`case ReporterType.PLAIN: {`