Refactor purgatory list items into own component

ui/src/auth/Purgatory.js

@@ -5,7 +5,7 @@ import {withRouter} from 'react-router'
 
 import {meChangeOrganizationAsync} from 'shared/actions/auth'
 
-import {MEMBER_ROLE} from 'src/auth/Authorized'
+import PurgatoryAuthItem from 'src/auth/PurgatoryAuthItem'
 
 const getRoleNameByOrgID = (id, roles) => {
   const role = roles.find(r => r.organization === id)
@@ -60,34 +60,12 @@ class Purgatory extends Component {
               </h6>
               {rolesAndOrgs.length
                 ? <div className="auth--list">
-                    {rolesAndOrgs.map(rag =>
+                    {rolesAndOrgs.map((rag, i) =>
-                      <div
+                      <PurgatoryAuthItem
-                        key={rag.organization.id}
+                        key={i}
-                        className={
+                        roleAndOrg={rag}
-                          rag.currentOrganization
+                        onClickLogin={this.handleClickLogin}
-                            ? 'auth--list-item current'
+                      />
-                            : 'auth--list-item'
-                        }
-                      >
-                        <div className="auth--list-info">
-                          <div className="auth--list-org">
-                            {rag.organization.name}
-                          </div>
-                          <div className="auth--list-role">
-                            {rag.role}
-                          </div>
-                        </div>
-                        {rag.role === MEMBER_ROLE
-                          ? <span className="auth--list-blocked">
-                              Contact your Admin<br />for access
-                            </span>
-                          : <button
-                              className="btn btn-sm btn-primary"
-                              onClick={this.handleClickLogin(rag.organization)}
-                            >
-                              Login
-                            </button>}
-                      </div>
                     )}
                   </div>
                 : <p>You are a Lost Soul</p>}

ui/src/auth/PurgatoryAuthItem.js

@@ -0,0 +1,47 @@
+import React, {PropTypes} from 'react'
+
+import {MEMBER_ROLE} from 'src/auth/Authorized'
+
+const PurgatoryAuthItem = ({roleAndOrg, onClickLogin}) =>
+  <div
+    className={
+      roleAndOrg.currentOrganization
+        ? 'auth--list-item current'
+        : 'auth--list-item'
+    }
+  >
+    <div className="auth--list-info">
+      <div className="auth--list-org">
+        {roleAndOrg.organization.name}
+      </div>
+      <div className="auth--list-role">
+        {roleAndOrg.role}
+      </div>
+    </div>
+    {roleAndOrg.role === MEMBER_ROLE
+      ? <span className="auth--list-blocked">
+          Contact your Admin<br />for access
+        </span>
+      : <button
+          className="btn btn-sm btn-primary"
+          onClick={onClickLogin(roleAndOrg.organization)}
+        >
+          Login
+        </button>}
+  </div>
+
+const {bool, func, shape, string} = PropTypes
+
+PurgatoryAuthItem.propTypes = {
+  roleAndOrg: shape({
+    organization: shape({
+      name: string,
+      id: string,
+    }),
+    role: string,
+    currentOrganization: bool,
+  }).isRequired,
+  onClickLogin: func.isRequired,
+}
+
+export default PurgatoryAuthItem