feat(ui): add raw output mode

Only show errors, requests and raw messages
tagoro9 · Dec 23, 2022 · d2a3f53 · d2a3f53
1 parent 86ab900
commit d2a3f53
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 12 deletions.
diff --git a/src/io/messenger.ts b/src/io/messenger.ts
@@ -35,6 +35,7 @@ export interface Message {
   detail?: string;
   emoji?: Emoji;
   message: string;
+  showInRawMode?: boolean;
   showSpinner: boolean;
   type: MessageType;
 }
@@ -69,8 +70,8 @@ export class Messenger {
   }
 
   @boundMethod
-  public emit(message: string, emoji?: Emoji): void {
-    this.subject.next({ emoji, message, type: MessageType.INFO, showSpinner: true });
+  public emit(message: string, emoji?: Emoji, showInRawMode?: boolean): void {
+    this.subject.next({ emoji, message, type: MessageType.INFO, showInRawMode, showSpinner: true });
   }
 
   @boundMethod

diff --git a/src/ui/Fotingo.tsx b/src/ui/Fotingo.tsx
@@ -12,6 +12,7 @@ export function Fotingo({
   messenger,
   programStartTime,
   showFooter = true,
+  useRawOutput = false,
 }: FotingoProps): JSX.Element {
   const { executionTime, isDone, isInThread, messages, request, sendRequestData } = useCmd(
     messenger,
@@ -27,9 +28,12 @@ export function Fotingo({
         isRequesting={request !== undefined}
         isInThread={isInThread}
         messages={messages}
+        useRawOutput={useRawOutput}
       />
       {request && <InputRequest request={request} onSubmit={sendRequestData} />}
-      {!request && executionTime && showFooter && <Footer executionTime={executionTime} />}
+      {!request && executionTime && showFooter && !useRawOutput && (
+        <Footer executionTime={executionTime} />
+      )}
     </>
   );
 }
diff --git a/src/ui/Message.tsx b/src/ui/Message.tsx
@@ -13,9 +13,14 @@ const MESSAGE_TYPE_TO_EMOJI: Record<MessageProps['message']['type'], string | un
   status: undefined,
 };
 
-export function Message({ isDone = false, isLast = false, message }: MessageProps): JSX.Element {
-  return (
-    <Box>
+export function Message({
+  isDone = false,
+  isLast = false,
+  message,
+  useRawOutput = false,
+}: MessageProps): JSX.Element {
+  const spinnerOrEmoji =
+    useRawOutput && message.type !== 'error' ? undefined : (
       <Box>
         {!isDone && message.showSpinner && isLast ? (
           <Box marginRight={1}>
@@ -29,11 +34,22 @@ export function Message({ isDone = false, isLast = false, message }: MessageProp
           </Text>
         )}
       </Box>
+    );
+  const messageColor = useRawOutput || message.type !== 'error' ? undefined : 'red';
+  const messageDetailColor = useRawOutput || message.type !== 'request' ? undefined : 'gray';
+  const wrap = useRawOutput ? 'end' : undefined;
+  return (
+    <Box>
+      {spinnerOrEmoji}
       <Box>
-        <Text color={message.type === 'error' ? 'red' : undefined}>{message.message}</Text>
+        <Text color={messageColor} wrap={wrap}>
+          {message.message}
+        </Text>
         {message.detail && (
           <Box marginLeft={1}>
-            <Text color={message.type === 'request' ? 'gray' : undefined}>{message.detail}</Text>
+            <Text color={messageDetailColor} wrap={wrap}>
+              {message.detail}
+            </Text>
           </Box>
         )}
       </Box>

diff --git a/src/ui/Messages.tsx b/src/ui/Messages.tsx
@@ -12,18 +12,23 @@ export function Messages({
   isInThread,
   isRequesting,
   messages,
+  useRawOutput = false,
 }: MessagesProps): JSX.Element {
-  const pastMessages = init(messages);
-  const lastMessage = last(messages);
+  const actualMessages = messages.filter(
+    (message) =>
+      message.showInRawMode || ['request', 'error'].includes(message.type) || !useRawOutput,
+  );
+  const pastMessages = init(actualMessages);
+  const lastMessage = last(actualMessages);
   const staticMessages =
     isDebugging && lastMessage !== undefined ? [...pastMessages, lastMessage] : pastMessages;
   return (
     <Box flexDirection="column">
       <Static items={staticMessages}>
-        {(message, id) => <Message key={id} message={message} />}
+        {(message, id) => <Message key={id} message={message} useRawOutput={useRawOutput} />}
       </Static>
       {lastMessage && !isDebugging && !isRequesting && !isInThread && (
-        <Message isDone={isDone} isLast={true} message={lastMessage} />
+        <Message isDone={isDone} isLast={true} message={lastMessage} useRawOutput={useRawOutput} />
       )}
     </Box>
   );

diff --git a/src/ui/props.ts b/src/ui/props.ts
@@ -15,6 +15,7 @@ export interface MessageProps {
   isDone?: boolean;
   isLast?: boolean;
   message: Omit<Message, 'message'> & { message: string | Element };
+  useRawOutput?: boolean;
 }
 
 export interface MessagesProps {
@@ -23,6 +24,7 @@ export interface MessagesProps {
   isInThread: boolean;
   isRequesting: boolean;
   messages: Array<Omit<Message, 'message'> & { message: string | Element }>;
+  useRawOutput?: boolean;
 }
 
 export interface FotingoProps {
@@ -31,4 +33,5 @@ export interface FotingoProps {
   messenger: Messenger;
   programStartTime: number;
   showFooter?: boolean;
+  useRawOutput?: boolean;
 }