Refactor SourcePicker

-SourceLocationPicker is the presentation UI -SourcePicker is the container, containing the state and on change handlers
qtomlinson · Jun 10, 2022 · d374137 · d374137
1 parent 5e203f0
commit d374137
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 56 deletions.
diff --git a/src/components/SourceLocationPicker.js b/src/components/SourceLocationPicker.js
@@ -0,0 +1,86 @@
+// Copyright (c) Codescoop Oy and others. Licensed under the MIT license.
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react'
+import { Button, ButtonGroup } from 'react-bootstrap'
+import { GitHubSelector, GitHubCommitPicker } from './'
+import { getGitHubRevisions } from '../api/clearlyDefined'
+import EntitySpec from '../utils/entitySpec'
+import { clone } from 'lodash'
+import { PropTypes } from 'prop-types'
+
+class SourceLocationPicker extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { activeProvider: 'github' }
+    this.onSelectComponent = this.onSelectComponent.bind(this)
+    this.onProviderClick = this.onProviderClick.bind(this)
+  }
+
+  static propTypes = {
+    token: PropTypes.string,
+    value: PropTypes.string,
+    selectedComponent: PropTypes.object,
+    onChangeComponent: PropTypes.func.isRequired
+  }
+
+  onSelectComponent(value, tool) {
+    const { onChangeComponent } = this.props
+    const [namespace, name] = value.name.split('/')
+    const component = new EntitySpec(value.type, value.provider, namespace, name)
+    component.tool = tool
+    onChangeComponent(component)
+  }
+
+  onProviderClick(event) {
+    const activeProvider = event.target.name
+    this.setState({ activeProvider })
+  }
+
+  renderProviderButtons() {
+    const { activeProvider } = this.state
+    return (
+      <ButtonGroup>
+        <Button name="github" onClick={this.onProviderClick} active={activeProvider === 'github'}>
+          GitHub
+        </Button>
+      </ButtonGroup>
+    )
+  }
+
+  commitChanged(component, value) {
+    const { onChangeComponent } = this.props
+    const newComponent = clone(component)
+    newComponent.revision = value ? value.sha : null
+    onChangeComponent(newComponent)
+  }
+
+  render() {
+    const { activeProvider } = this.state
+    const { token, selectedComponent, value } = this.props
+
+    return (
+      <>
+        <div>{this.renderProviderButtons()}</div>
+        <div>{activeProvider === 'github' && <GitHubSelector onChange={this.onSelectComponent} />}</div>
+        <div>
+          {selectedComponent && activeProvider === 'github' && (
+            <GitHubCommitPicker
+              allowNew
+              request={selectedComponent}
+              getGitHubRevisions={path => getGitHubRevisions(token, path)}
+              onChange={this.commitChanged.bind(this, selectedComponent)}
+            />
+          )}
+        </div>
+        <div className="source-picker__current-source">
+          <a href={selectedComponent ? selectedComponent.url : value} target="_blank" rel="noopener noreferrer">
+            {selectedComponent ? selectedComponent.url : value}
+          </a>
+        </div>
+      </>
+    )
+  }
+}
+
+export default SourceLocationPicker
diff --git a/src/components/SourcePicker.js b/src/components/SourcePicker.js
@@ -3,48 +3,28 @@
 
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-import { Grid, Button, ButtonGroup, FormGroup } from 'react-bootstrap'
-import { GitHubSelector, GitHubCommitPicker } from './'
-import { getGitHubRevisions } from '../api/clearlyDefined'
-import EntitySpec from '../utils/entitySpec'
-import { clone } from 'lodash'
+import { Grid, Button, FormGroup } from 'react-bootstrap'
+import SourceLocationPicker from './SourceLocationPicker'
+import { PropTypes } from 'prop-types'
 
 class SourcePicker extends Component {
   constructor(props) {
     super(props)
-    this.state = { activeProvider: 'github' }
-    this.onSelectComponent = this.onSelectComponent.bind(this)
+    this.state = {}
     this.onChangeComponent = this.onChangeComponent.bind(this)
-    this.onClick = this.onClick.bind(this)
   }
 
-  onSelectComponent(value, tool) {
-    const [namespace, name] = value.name.split('/')
-    const component = new EntitySpec(value.type, value.provider, namespace, name)
-    component.tool = tool
-    this.setState({ selectedComponent: component })
+  static propTypes = {
+    token: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired
   }
 
-  onChangeComponent(component, newComponent) {
+  onChangeComponent(newComponent) {
     this.setState({ selectedComponent: newComponent })
   }
 
-  onClick(event) {
-    const activeProvider = event.target.name
-    this.setState({ activeProvider })
-  }
-
-  renderProviderButtons() {
-    const { activeProvider } = this.state
-    return (
-      <ButtonGroup>
-        <Button name="github" onClick={this.onClick} active={activeProvider === 'github'}>
-          GitHub
-        </Button>
-      </ButtonGroup>
-    )
-  }
-
   renderActionButton() {
     const { onChange, onClose } = this.props
     return (
@@ -60,35 +40,18 @@ class SourcePicker extends Component {
     )
   }
 
-  commitChanged(component, value) {
-    const newComponent = clone(component)
-    newComponent.revision = value ? value.sha : null
-    this.onChangeComponent(component, newComponent)
-  }
-
   render() {
-    const { activeProvider, selectedComponent } = this.state
-    const { value } = this.props
+    const { selectedComponent } = this.state
+    const { value, token } = this.props
     return (
       <Grid className="main-container" id="source-picker">
-        <div>{this.renderProviderButtons()}</div>
-        <div>{activeProvider === 'github' && <GitHubSelector onChange={this.onSelectComponent} />}</div>
-        <div>
-          {selectedComponent && activeProvider === 'github' && (
-            <GitHubCommitPicker
-              allowNew
-              request={selectedComponent}
-              getGitHubRevisions={path => getGitHubRevisions(this.props.token, path)}
-              onChange={this.commitChanged.bind(this, selectedComponent)}
-            />
-          )}
-        </div>
-        <div className="source-picker__current-source">
-          <a href={selectedComponent ? selectedComponent.url : value} target="_blank" rel="noopener noreferrer">
-            {selectedComponent ? selectedComponent.url : value}
-          </a>
-          {this.renderActionButton()}
-        </div>
+        <SourceLocationPicker
+          token={token}
+          value={value}
+          selectedComponent={selectedComponent}
+          onChangeComponent={this.onChangeComponent}
+        />
+        {this.renderActionButton()}
       </Grid>
     )
   }