Initial implementation for fixing selected code samples

readmeio · Sep 6, 2018 · 21ea699 · 21ea699
1 parent 319ae85
commit 21ea699
Show file tree

Hide file tree

Showing 3 changed files with 54,879 additions and 25 deletions.
diff --git a/packages/api-explorer/__tests__/CodeSample.test.jsx b/packages/api-explorer/__tests__/CodeSample.test.jsx
@@ -196,6 +196,42 @@ describe('code examples', () => {
     expect(codeSample.find('.hub-code-auto pre').length).toBe(1);
     expect(codeSample.find('.hub-lang-switch-node').text()).toBe('Node');
   });
+
+  test('should not display more than one example block at a time', () => {
+    const docProps = {
+      setLanguage: () => {},
+      operation: new Operation({}, '/pet/{id}', 'get'),
+      formData: {},
+      language: 'javascript',
+      examples: [
+        {
+          name: 'Javascript/Node.js',
+          code: 'console.log(1);',
+          language: 'javascript',
+        },
+        {
+          name: 'TypeScript',
+          code: 'console.log(1)',
+          language: 'javascript',
+        },
+      ],
+    };
+
+    const codeSample = shallow(
+      <CodeSample
+        {...docProps}
+        oas={
+          new Oas({
+            [extensions.SAMPLES_ENABLED]: true,
+            [extensions.SAMPLES_LANGUAGES]: ['node', 'curl'],
+            servers: [{ url: 'http://example.com' }],
+          })
+        }
+      />,
+    );
+
+    expect(codeSample.find('.code-sample-tabs a.selected').length).toBe(1);
+  });
 });
 
 describe('updating language', () => {

diff --git a/packages/api-explorer/dist/index.js b/packages/api-explorer/dist/index.js
diff --git a/packages/api-explorer/src/CodeSample.jsx b/packages/api-explorer/src/CodeSample.jsx
@@ -12,38 +12,65 @@ const syntaxHighlighter = require('@readme/syntax-highlighter');
 const generateCodeSnippet = require('./lib/generate-code-snippet');
 
 class CodeSample extends React.Component {
-  renderExamples(examples, setLanguage) {
+  constructor(props) {
+    super(props);
+
+    const { examples, language } = props;
+    const selectedExample = examples.find(example => example.language === language);
+
+    this.state = {
+      selectedExample,
+    };
+  }
+
+  getKey(example, index) {
+    const key = `${example.language}-${index}`;
+    const selected = this.state.selectedExample === example;
+    return { key, selected };
+  }
+
+  selectExample(example) {
+    this.setState({ selectedExample: example });
+  }
+
+  renderSelected(examples, setLanguage) {
     const examplesWithLanguages = examples.filter(example => example.language);
     return (
       <div>
         <ul className="code-sample-tabs">
-          {examplesWithLanguages.map(example => (
-            <li key={example.language}>
-              {
-                // eslint-disable-next-line jsx-a11y/href-no-hash
-                <a
-                  href="#"
-                  className={`hub-lang-switch-${example.language}`}
-                  onClick={e => {
-                    e.preventDefault();
-                    setLanguage(example.language);
-                  }}
-                >
-                  {example.name || generateCodeSnippet.getLangName(example.language)}
-                </a>
-              }
-            </li>
-          ))}
+          {examplesWithLanguages.map((example, index) => {
+            const { key, selected } = this.getKey(example, index);
+            const selectedClass = selected ? 'selected' : '';
+            return (
+              <li key={key}>
+                {
+                  // eslint-disable-next-line jsx-a11y/href-no-hash
+                  <a
+                    href="#"
+                    className={selectedClass}
+                    onClick={e => {
+                      e.preventDefault();
+                      setLanguage(example.language);
+                      this.selectExample(example);
+                    }}
+                  >
+                    {example.name || generateCodeSnippet.getLangName(example.language)}
+                  </a>
+                }
+              </li>
+            );
+          })}
         </ul>
         <div className="code-sample-body">
-          {examplesWithLanguages.map(example => {
+          {examplesWithLanguages.map((example, index) => {
+            const { key, selected } = this.getKey(example, index);
             return (
-              <div style={{ display: this.props.language === example.language ? 'block' : 'none' }}>
-                <CopyCode key={`copy-${example.language}`} code={example.code} />
+              <div style={{ display: selected ? 'block' : 'none' }}>
+                <CopyCode key={`copy-${key}`} code={example.code} />
                 <pre
                   className="tomorrow-night tabber-body"
-                  key={example.language} // eslint-disable-line react/no-array-index-key
-                  style={{ display: this.props.language === example.language ? 'block' : '' }}
+                  key={key} // eslint-disable-line react/no-array-index-key
+                  style={{ display: this.state.selectedExample === example ? 'block' : '' }}
                   // eslint-disable-next-line react/no-danger
                   dangerouslySetInnerHTML={{
                     __html: syntaxHighlighter(example.code || '', example.language, true),
@@ -63,7 +90,7 @@ class CodeSample extends React.Component {
     return (
       <div className="code-sample tabber-parent">
         {(() => {
-          if (examples.length) return this.renderExamples(examples, setLanguage);
+          if (examples.length) return this.renderSelected(examples, setLanguage);
           if (!oas[extensions.SAMPLES_ENABLED]) {
             return <div className="hub-no-code">No code samples available</div>;
           }