Add app selection when the variable changes

readmeio · Jun 29, 2018 · 79337d5 · 79337d5
1 parent 137a569
commit 79337d5
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 59 deletions.
diff --git a/packages/api-explorer/__tests__/Variable.test.jsx b/packages/api-explorer/__tests__/Variable.test.jsx
@@ -4,33 +4,39 @@ const { shallow } = require('enzyme');
 const { Variable } = require('../src/Variable');
 
 describe('single variable', () => {
+  const props = {
+    variable: 'apiKey',
+    user: { apiKey: '123456' },
+    defaults: [],
+  };
+
   test('should render value', () => {
-    const variable = shallow(<Variable variable="apiKey" user={{ apiKey: '123456' }} defaults={[]} />);
+    const variable = shallow(<Variable {...props} />);
 
     expect(variable.text()).toBe('123456');
   });
 
   test('should render default if value not set', () => {
-    const variable = shallow(<Variable variable="apiKey" user={{}} defaults={[ { name: 'apiKey', default: 'default' }]} />);
+    const variable = shallow(<Variable {...props} user={{}} defaults={[ { name: 'apiKey', default: 'default' }]} />);
 
     expect(variable.text()).toBe('default');
   });
 
   test('should render uppercase if no value and no default', () => {
-    const variable = shallow(<Variable variable="apiKey" user={{}} defaults={[]} />);
+    const variable = shallow(<Variable {...props} user={{}} defaults={[]} />);
 
     expect(variable.text()).toBe('APIKEY');
   });
 
   test('should render auth dropdown if default and oauth enabled', () => {
-    const variable = shallow(<Variable variable="apiKey" user={{}} defaults={[ { name: 'apiKey', default: 'default' }]} oauth />);
+    const variable = shallow(<Variable {...props} user={{}} defaults={[ { name: 'apiKey', default: 'default' }]} oauth />);
     variable.find('.variable-underline').simulate('click');
 
     expect(variable.find('#loginDropdown').length).toBe(1);
   });
 
   test('should render auth dropdown if no default and oauth enabled', () => {
-    const variable = shallow(<Variable variable="apiKey" user={{}} defaults={[]} oauth />);
+    const variable = shallow(<Variable {...props} user={{}} defaults={[]} oauth />);
     variable.find('.variable-underline').simulate('click');
 
     expect(variable.find('#loginDropdown').length).toBe(1);
@@ -40,59 +46,48 @@ describe('single variable', () => {
 });
 
 describe('multiple variables', () => {
+  const props = {
+    variable: 'apiKey',
+    user: { keys: [{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }] },
+    defaults: [],
+    selected: '',
+    changeSelected: () => {},
+  };
   test('should render the first of multiple values', () => {
-    const variable = shallow(
-      <Variable
-        variable="apiKey"
-        user={{ keys: [{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }] }}
-        defaults={[]}
-      />,
-    );
+    const variable = shallow(<Variable {...props} />);
 
     expect(variable.text()).toBe('123');
   });
 
   test('should render whatever the selected name is', () => {
-    const variable = shallow(
-      <Variable
-        variable="apiKey"
-        user={{ keys: [{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }]}}
-        selected="project2"
-        defaults={[]}
-      />,
-    );
+    const variable = shallow(<Variable {...props} selected="project2" />);
 
     expect(variable.text()).toBe('456');
   });
 
   test('should show dropdown when clicked', () => {
-    const variable = shallow(
-      <Variable
-        variable="apiKey"
-        user={{ keys: [{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }]}}
-        selected="project2"
-        defaults={[]}
-      />,
-    );
+    const variable = shallow(<Variable {...props} selected="project2" />);
 
     variable.find('.variable-underline').simulate('click');
 
     expect(variable.find('ul li').map(el => el.text())).toEqual(['project1', 'project2']);
   });
 
   test('should select value when clicked', () => {
+    function changeSelected(selected) {
+      expect(selected).toBe('project2');
+    }
     const variable = shallow(
       <Variable
-        variable="apiKey"
+        {...props}
         user={{ keys: [{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }, { name: 'project3'}]}}
         selected="project1"
+        changeSelected={changeSelected}
       />,
     );
 
     variable.find('.variable-underline').simulate('click');
     variable.find('ul li').at(1).simulate('click', { target: { innerText: variable.find('ul li').at(1).text() } });
-
-    expect(variable.text()).toBe('456');
   });
 
   test('should render auth dropdown if default and oauth enabled');

diff --git a/packages/api-explorer/src/Variable.jsx b/packages/api-explorer/src/Variable.jsx
@@ -3,6 +3,7 @@ const classNames = require('classnames');
 const PropTypes = require('prop-types');
 const VariablesContext = require('./contexts/Variables');
 const OauthContext = require('./contexts/Oauth');
+const SelectedAppContext = require('./contexts/SelectedApp');
 
 class Variable extends React.Component {
   static renderAuthDropdown() {
@@ -32,11 +33,10 @@ class Variable extends React.Component {
   }
   constructor(props) {
     super(props);
-    this.state = { showDropdown: false, selected: props.selected };
+    this.state = { showDropdown: false };
 
     this.toggleVarDropdown = this.toggleVarDropdown.bind(this);
     this.toggleAuthDropdown = this.toggleAuthDropdown.bind(this);
-    this.selectValue = this.selectValue.bind(this);
     this.renderVarDropdown = this.renderVarDropdown.bind(this);
   }
   getDefault() {
@@ -60,9 +60,6 @@ class Variable extends React.Component {
   toggleAuthDropdown() {
     this.setState({ showAuthDropdown: !this.state.showAuthDropdown });
   }
-  selectValue(event) {
-    this.setState({ selected: event.target.innerText, showDropdown: false });
-  }
   renderVarDropdown() {
     return (
       <div
@@ -80,8 +77,8 @@ class Variable extends React.Component {
             {this.props.user.keys.map(key => (
               // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
               <li
-                className={classNames({ active: this.state.selected === key.name })}
-                onClick={this.selectValue}
+                className={classNames({ active: this.props.selected === key.name })}
+                onClick={(event) => this.props.changeSelected(event.target.innerText)}
                 key={key.name}
               >
                 {key.name}
@@ -94,9 +91,7 @@ class Variable extends React.Component {
   }
   render() {
     /* eslint-disable jsx-a11y/no-static-element-interactions */
-    const { variable, user } = this.props;
-
-    const { selected } = this.state;
+    const { variable, user, selected } = this.props;
 
     if (Array.isArray(user.keys)) {
       const selectedValue = selected ? user.keys.find(key => key.name === selected) : user.keys[0];
@@ -128,6 +123,8 @@ class Variable extends React.Component {
 
 Variable.propTypes = {
   variable: PropTypes.string.isRequired,
+  selected: PropTypes.string.isRequired,
+  changeSelected: PropTypes.func.isRequired,
   user: PropTypes.shape({
     keys: PropTypes.array,
   }).isRequired,
@@ -146,9 +143,12 @@ module.exports = (props) => (
     {({ user, defaults }) => (
       <OauthContext.Consumer>
         {(oauth) => (
-          <Variable {...props} user={user} defaults={defaults} oauth={oauth} />
-        )
-      }
+          <SelectedAppContext.Consumer>
+            {({selected, changeSelected}) => (
+              <Variable {...props} user={user} defaults={defaults} oauth={oauth} selected={selected} changeSelected={changeSelected} />
+            )}
+          </SelectedAppContext.Consumer>
+        )}
       </OauthContext.Consumer>
     )}
   </VariablesContext.Consumer>

diff --git a/packages/api-explorer/src/contexts/SelectedApp.js b/packages/api-explorer/src/contexts/SelectedApp.js
@@ -0,0 +1,6 @@
+const React = require('react');
+
+module.exports = React.createContext({
+  selected: '',
+  changeSelected: () => {},
+});
diff --git a/packages/api-explorer/src/index.jsx b/packages/api-explorer/src/index.jsx
@@ -5,6 +5,7 @@ const extensions = require('@readme/oas-extensions');
 const VariablesContext = require('./contexts/Variables');
 const OauthContext = require('./contexts/Oauth');
 const GlossaryTermsContext = require('./contexts/GlossaryTerms');
+const SelectedAppContext = require('./contexts/SelectedApp');
 
 const Doc = require('./Doc');
 
@@ -22,13 +23,19 @@ class ApiExplorer extends React.Component {
 
   constructor(props) {
     super(props);
+
+    this.setLanguage = this.setLanguage.bind(this);
+    this.getDefaultLanguage = this.getDefaultLanguage.bind(this);
+    this.changeSelected = this.changeSelected.bind(this);
+
     this.state = {
       language: Cookie.get('readme_language') || this.getDefaultLanguage(),
       apiKey: ApiExplorer.getApiKey(),
+      selectedApp: {
+        selected: '',
+        changeSelected: this.changeSelected,
+      },
     };
-
-    this.setLanguage = this.setLanguage.bind(this);
-    this.getDefaultLanguage = this.getDefaultLanguage.bind(this);
   }
 
   setLanguage(language) {
@@ -51,6 +58,11 @@ class ApiExplorer extends React.Component {
 
     return this.props.oasFiles[apiSetting];
   }
+
+  changeSelected(selected) {
+    this.setState({ selectedApp: { selected, changeSelected: this.changeSelected } });
+  }
+
   render() {
     const theme = this.props.flags.stripe ? 'stripe' : '';
     return (
@@ -63,18 +75,20 @@ class ApiExplorer extends React.Component {
             <VariablesContext.Provider value={this.props.variables}>
               <OauthContext.Provider value={this.props.oauth}>
                 <GlossaryTermsContext.Provider value={this.props.glossaryTerms}>
-                  <Doc
-                    key={doc._id}
-                    doc={doc}
-                    oas={this.getOas(doc)}
-                    setLanguage={this.setLanguage}
-                    flags={this.props.flags}
-                    language={this.state.language}
-                    oauth={this.props.oauth}
-                    suggestedEdits={this.props.suggestedEdits}
-                    apiKey={this.state.apiKey}
-                    tryItMetrics={this.props.tryItMetrics}
-                  />
+                  <SelectedAppContext.Provider value={this.state.selectedApp}>
+                    <Doc
+                      key={doc._id}
+                      doc={doc}
+                      oas={this.getOas(doc)}
+                      setLanguage={this.setLanguage}
+                      flags={this.props.flags}
+                      language={this.state.language}
+                      oauth={this.props.oauth}
+                      suggestedEdits={this.props.suggestedEdits}
+                      apiKey={this.state.apiKey}
+                      tryItMetrics={this.props.tryItMetrics}
+                    />
+                  </SelectedAppContext.Provider>
                 </GlossaryTermsContext.Provider>
               </OauthContext.Provider>
             </VariablesContext.Provider>