projectlistselector

Author: lucassabreu

src/Components/ProjectListSelector.css

@@ -0,0 +1,18 @@
+.ProjectListSelector .Select-control {
+    height: 2.5rem
+}
+
+.ProjectListSelector .Select-value-label,
+.ProjectListSelector .Select-placeholder {
+    line-height: 2.5rem
+}
+
+.ProjectListSelector .btn-apply-labels {
+    width: 100%;
+}
+
+@media (max-width: 768px) {
+    .ProjectListSelector .btn-apply-labels {
+        margin: 1rem 0;
+    }
+}

src/Components/ProjectListSelector.js

@@ -0,0 +1,73 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Select from 'react-select';
+import 'react-select/dist/react-select.css';
+
+import './ProjectListSelector.css';
+
+const projectShape = PropTypes.shape({
+  value: PropTypes.any.isRequired,
+  label: PropTypes.string.isRequired,
+});
+
+export default class ProjectListSelector extends React.Component {
+  static propTypes = {
+    onApply: PropTypes.func.isRequired,
+    projects: PropTypes.arrayOf(projectShape),
+    selected: projectShape,
+    disabled: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    selected: null,
+    disabled: false
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedOption: this.props.selected
+    };
+  }
+
+  componentWillReceiveProps({ selected }) {
+    this.setState({ selectedOption: selected });
+  }
+
+  handleSelect(selectedOption) {
+    this.setState({ selectedOption })
+  }
+
+  handleClick() {
+    this.props.onApply(this.state.selectedOption)
+  }
+
+  render() {
+    const { projects, disabled, className } = this.props;
+
+    const selectedOption = this.state.selectedOption && this.state.selectedOption.value
+    const sortedProjects = projects.slice().sort((a, b) => a.label.toLocaleLowerCase() > b.label.toLocaleLowerCase() ? 1 : -1);
+
+    return (
+      <div className={`ProjectListSelector row ${className}`}>
+        <div className="col-md-10">
+          <Select
+            value={selectedOption}
+            onChange={(e) => this.handleSelect(e)}
+            options={sortedProjects}
+            disabled={disabled}
+          />
+        </div>
+        <div className="col-md-2">
+          <button className="btn btn-apply-labels btn-primary"
+            disabled={selectedOption === null || disabled}
+            onClick={() => this.handleClick()}
+          >
+            Apply
+          </button>
+        </div>
+      </div>
+    );
+  }
+}

src/GitHub/GitHub.css

@@ -10,18 +10,8 @@
     width: 100%;
 }
 
-.GitHub .Select-control {
-    height: 2.5rem
-}
-
-.GitHub .btn-apply-labels {
-    width: 100%;
-}
-
-@media (max-width: 768px) {
-    .GitHub .btn-apply-labels {
-        margin: 1rem 0;
-    }
+.GitHub .applying-status {
+    margin: 1rem 0;
 }
 
 .GitHub .labels .label-item [type=checkbox] {

src/GitHub/GitHub.js

@@ -1,8 +1,7 @@
 import React from 'react'
 import Loading from '../Components/Loading';
+import ProjectListSelector from '../Components/ProjectListSelector';
 import { withGithubRepositories } from './withGitHubRepositories';
-import Select from 'react-select';
-import 'react-select/dist/react-select.css';
 import LABELS_TO_ADD from '../Labels';
 import invertColor from '../invertColor';
 import './GitHub.css';
@@ -11,18 +10,20 @@ class GitHub extends React.Component {
 
   constructor(props) {
     super(props)
-    this.state = { selectedOption: null }
+    this.state = {
+      selectedOption: null,
+      applying: false,
+    }
   }
 
-  handleSelect(selectedOption) {
-    this.setState({ selectedOption })
+  handleApply(selectedOption) {
+    console.log(selectedOption)
+    this.setState({ selectedOption, applying: true })
   }
 
   render() {
     const { loading, repositories } = this.props;
-    const selectedOption = this.state.selectedOption && this.state.selectedOption.value
 
-    repositories.sort((a, b) => a.full_name.toLocaleLowerCase() > b.full_name.toLocaleLowerCase() ? 1 : -1)
     return (
       <div className="GitHub">
         {loading ?
@@ -32,21 +33,20 @@ class GitHub extends React.Component {
           </section>
           :
           <section>
-            <div className="row select-group">
-              <div className="col-md-10">
-                <Select
-                  value={selectedOption}
-                  onChange={(e) => this.handleSelect(e)}
-                  options={repositories.map(r => Object.assign(r, {
-                    value: r.full_name,
-                    label: r.full_name,
-                  }))}
-                />
+            <ProjectListSelector className="select-group"
+              disabled={this.state.applying}
+              selected={this.state.selectedOption}
+              projects={repositories.map(r => Object.assign(r, {
+                value: r.full_name,
+                label: r.full_name,
+              }))}
+              onApply={(selected) => this.handleApply(selected)}
+            />
+            {!this.state.applying ? null :
+              <div className="row applying-status">
+                <div className="col-md-12"><Loading /></div>
               </div>
-              <div className="col-md-2">
-                <button className="btn btn-apply-labels btn-primary">Apply</button>
-              </div>
-            </div>
+            }
             <div className="row labels">
               {LABELS_TO_ADD.map(({ name, color }) => (
                 <div key={name} className="col-md-4">

src/index.css

@@ -18,6 +18,10 @@ body {
     box-sizing: inherit;
 }
 
+.bg-primary {
+    background-color: var(--primary)!important;
+}
+
 .pull-right {
     float: right!important;
 }