export to pure reusable component

Author: lucassabreu

src/App.js

@@ -5,7 +5,7 @@ import './App.css';
 import CoderockrLogo from './assets/images/hand-yellow.svg'
 import Home from './Home'
 import Footer from './Footer';
-import GitHub from './GitHub/GitHub';
+import GitHub from './Origins/GitHub';
 
 const App = () => (
   <div className="CWSPApp">

src/Components/ProjectListApplyer.css

@@ -0,0 +1,28 @@
+.ProjectListApplyer .select-group {
+    margin-bottom: 1rem;
+}
+
+.ProjectListApplyer .labels .label-item {
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+}
+
+.ProjectListApplyer .applying-status {
+    margin: 1rem 0;
+}
+
+.ProjectListApplyer .labels h2 {
+    font-size: 1.5rem;
+}
+
+.ProjectListApplyer .labels .label-item .label-icon {
+    margin: .5rem;
+    display: inline-block;
+}
+
+.ProjectListApplyer .labels .label-item .label-name {
+    vertical-align: super;
+}

src/Components/ProjectListApplyer.js

@@ -0,0 +1,116 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Alert } from 'reactstrap'
+import Loading from '../Components/Loading'
+import ProjectListSelector from './ProjectListSelector'
+import LABELS_TO_ADD from '../Labels'
+import invertColor from '../invertColor'
+import projectShape from './projectShape'
+
+import './ProjectListApplyer.css'
+
+const LabelList = ({ header, labels, className, applyedLabels }) => (
+  <div className={`row labels ${className}`}>
+    <h2 className="col-md-12">{header}</h2>
+    {labels.map(({ name, color }) => (
+      <div key={name} className="col-md-4">
+        <label alt={name} className="label-item"
+          style={{ backgroundColor: '#' + color, color: invertColor('#' + color) }}
+        >
+          <i className="material-icons label-icon">
+            {applyedLabels.indexOf(name) > -1 ? 'check_box' : 'check_box_outline_blank'}
+          </i>
+          <span className="label-name" children={name} />
+        </label>
+      </div>
+    ))}
+  </div>
+)
+
+const ProjectListApplyer = ({
+  className,
+  loading,
+  projects,
+  selectedPreject,
+  applying,
+  applyedLabels,
+  applyingStatus,
+  onApply,
+  labelsToRemove,
+  alert
+}) => (
+    <div className={`ProjectListApplyer ${className}`}>
+      {loading ?
+        <section>
+          <h2>Loading...</h2>
+          <Loading />
+        </section>
+        :
+        <section>
+          <ProjectListSelector className="select-group"
+            disabled={applying}
+            selected={selectedPreject}
+            projects={projects}
+            onApply={(selected) => onApply(selected)}
+          />
+          {!alert ? null :
+            <Alert
+              color={alert.type}
+              children={alert.message}
+            />
+          }
+          {!applying ? null :
+            <div className="row applying-status">
+              <div className="col-md-12"><Loading status={applyingStatus} /></div>
+            </div>
+          }
+          {labelsToRemove.length === 0 ? null :
+            <LabelList
+              header="Labels to Remove:"
+              className="labels-to-remove"
+              labels={labelsToRemove}
+              applyedLabels={applyedLabels}
+            />
+          }
+          <LabelList
+            header="Labels to Add:"
+            className="labels-to-add"
+            labels={LABELS_TO_ADD}
+            applyedLabels={applyedLabels}
+          />
+        </section>
+      }
+    </div>
+  );
+
+ProjectListApplyer.propTypes = {
+  className: PropTypes.string,
+  loading: PropTypes.bool,
+
+  applying: PropTypes.bool,
+  applyingStatus: PropTypes.string,
+  applyedLabels: PropTypes.arrayOf(PropTypes.string).isRequired,
+  alert: PropTypes.shape({
+    type: PropTypes.oneOf(['success', 'danger']).isRequired,
+    message: PropTypes.string.isRequired
+  }),
+  onApply: PropTypes.func.isRequired,
+
+  projects: PropTypes.arrayOf(projectShape).isRequired,
+  selectedPreject: projectShape,
+
+  labelsToRemove: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    color: PropTypes.string.isRequired,
+  })).isRequired,
+}
+
+ProjectListApplyer.defaultProps = {
+  className: "",
+  applying: false,
+  loading: false,
+  applyedLabels: [],
+  labelsToRemove: [],
+}
+
+export default ProjectListApplyer

src/Components/ProjectListSelector.js

@@ -3,14 +3,10 @@ import PropTypes from 'prop-types'
 
 import Select from 'react-select';
 import 'react-select/dist/react-select.css';
+import projectShape from './projectShape'
 
 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,

src/Components/projectShape.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types'
+
+const projectShape = PropTypes.shape({
+  value: PropTypes.any.isRequired,
+  label: PropTypes.string.isRequired,
+});
+
+export default projectShape