refactor: aggregate command into own component

newrelic · Oct 15, 2020 · 1b1fa11 · 1b1fa11
1 parent 9482d11
commit 1b1fa11
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 49 deletions.
diff --git a/src/components/Terminal/Command.js b/src/components/Terminal/Command.js
@@ -1,35 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Prompt from './Prompt';
-import { css } from '@emotion/core';
+import CommandLine from './CommandLine';
+import ShellOutput from './ShellOutput';
 
-const Command = ({ line, prompt, getTokenProps }) => (
-  <div
-    css={css`
-      display: grid;
-      grid-template-columns: 1ch 1fr;
-      grid-gap: 1ch;
-    `}
-  >
-    <Prompt character={prompt} />
-    <div
-      css={css`
-        color: #fafafa;
-        white-space: pre;
-      `}
-    >
-      {line.map((token, key) => (
-        // eslint-disable-next-line react/jsx-key
-        <span {...getTokenProps({ token, key })} />
+const Command = ({ command, getTokenProps }) => {
+  return (
+    <>
+      {command.lines.map((line, idx) => (
+        <CommandLine
+          key={`command-${idx}`}
+          line={line}
+          prompt={idx > 0 ? '>' : '$'}
+          getTokenProps={getTokenProps}
+        />
       ))}
-    </div>
-  </div>
-);
+
+      {command.output.map((line, idx) => (
+        <ShellOutput key={`output-${idx}`} line={line} />
+      ))}
+    </>
+  );
+};
 
 Command.propTypes = {
-  line: PropTypes.arrayOf(PropTypes.object).isRequired,
+  command: PropTypes.object.isRequired,
   getTokenProps: PropTypes.func.isRequired,
-  prompt: PropTypes.oneOf(['$', '>']),
 };
 
 export default Command;
diff --git a/src/components/Terminal/CommandLine.js b/src/components/Terminal/CommandLine.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Prompt from './Prompt';
+import { css } from '@emotion/core';
+
+const CommandLine = ({ line, prompt, getTokenProps }) => (
+  <div
+    css={css`
+      display: grid;
+      grid-template-columns: 1ch 1fr;
+      grid-gap: 1ch;
+    `}
+  >
+    <Prompt character={prompt} />
+    <div
+      css={css`
+        color: #fafafa;
+        white-space: pre;
+      `}
+    >
+      {line.map((token, key) => (
+        // eslint-disable-next-line react/jsx-key
+        <span {...getTokenProps({ token, key })} />
+      ))}
+    </div>
+  </div>
+);
+
+CommandLine.propTypes = {
+  line: PropTypes.arrayOf(PropTypes.object).isRequired,
+  getTokenProps: PropTypes.func.isRequired,
+  prompt: PropTypes.oneOf(['$', '>']),
+};
+
+export default CommandLine;
diff --git a/src/components/Terminal/Output.js → src/components/Terminal/ShellOutput.js b/src/components/Terminal/Output.js → src/components/Terminal/ShellOutput.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 
-const Output = ({ line }) => (
+const ShellOutput = ({ line }) => (
   <div
     css={css`
       color: #fafafa;
@@ -40,8 +40,8 @@ OUTPUT_COLORS.variable = OUTPUT_COLORS.purple;
 OUTPUT_COLORS.success = OUTPUT_COLORS.green;
 OUTPUT_COLORS.error = OUTPUT_COLORS.red;
 
-Output.propTypes = {
+ShellOutput.propTypes = {
   line: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
 
-export default Output;
+export default ShellOutput;
diff --git a/src/components/Terminal/Terminal.js b/src/components/Terminal/Terminal.js
@@ -5,7 +5,6 @@ import { Button, useClipboard } from '@newrelic/gatsby-theme-newrelic';
 import Highlight from 'prism-react-renderer';
 import Prism from 'prismjs';
 import Command from './Command';
-import Output from './Output';
 import theme from './theme';
 import rollupIntoCommands from './rollupIntoCommands';
 
@@ -96,26 +95,15 @@ const Terminal = ({ children }) => {
       >
         <code>
           <Highlight Prism={Prism} code={code} language="shell">
-            {({ tokens, getTokenProps }) => {
-              const commands = rollupIntoCommands(tokens, code);
-
-              return commands.map(({ lines, output }, commandIdx) => (
-                <>
-                  {lines.map((line, idx) => (
-                    <Command
-                      key={`${commandIdx}-${idx}`}
-                      line={line}
-                      prompt={idx > 0 ? '>' : '$'}
-                      getTokenProps={getTokenProps}
-                    />
-                  ))}
-
-                  {output.map((line, idx) => (
-                    <Output key={`${commandIdx}-${idx}`} line={line} />
-                  ))}
-                </>
-              ));
-            }}
+            {({ tokens, getTokenProps }) =>
+              rollupIntoCommands(tokens, code).map((command, idx) => (
+                <Command
+                  key={idx}
+                  command={command}
+                  getTokenProps={getTokenProps}
+                />
+              ))
+            }
           </Highlight>
         </code>
       </pre>