Extract presence select in its own component

partio-scout · Jul 24, 2016 · 24799be · 24799be
1 parent bbdf291
commit 24799be
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 36 deletions.
diff --git a/src/client/components/ParticipantDetailsPage/ParticipantDetailsPage.jsx b/src/client/components/ParticipantDetailsPage/ParticipantDetailsPage.jsx
@@ -2,13 +2,13 @@ import React from 'react';
 import _ from 'lodash';
 import moment from 'moment';
 import Spinner from 'react-spinner';
-import { Row, Col, Panel, Input } from 'react-bootstrap';
+import { Row, Col, Panel } from 'react-bootstrap';
 import { Presence } from '../../components';
 import { ParticipantDates } from './ParticipantDates';
 import { PresenceHistory } from '../../components';
 import { PropertyTextArea } from '../../components';
 import { LoadingButton } from '../../components';
-import { getPresenceLabel } from '../../components';
+import { PresenceSelector } from '../../components';
 
 export function getParticipantDetailsPage(participantStore, participantActions) {
 
@@ -144,10 +144,6 @@ export function getParticipantDetailsPage(participantStore, participantActions)
           return <dl className="margin-top-0"><dt>{ _.head(selection).groupName }</dt>{ rows }</dl>;
         });
 
-        const presenceLabel = getPresenceLabel(1);
-        const tmpOutCampLabel = getPresenceLabel(2);
-        const outCampLabel = getPresenceLabel(3);
-
         return (
           <div>
             <Row>
@@ -227,17 +223,10 @@ export function getParticipantDetailsPage(participantStore, participantActions)
               <Col md={ 9 }>
                 <Panel header="Läsnäolo">
                  <Presence value={ presence } />
-                 <div>
                  <form className="form-inline">
-                   <Input type="select" label="Muuta tilaa" defaultValue="null" onChange={ this.onPresenceChange }>
-                     <option value="null"></option>
-                     <option value="1">{ presenceLabel }</option>
-                     <option value="2">{ tmpOutCampLabel }</option>
-                     <option value="3">{ outCampLabel }</option>
-                   </Input>
+                   <PresenceSelector onChange={ this.onPresenceChange } label="Muuta tilaa" />
                    <LoadingButton loading={ this.state.presenceSaving } onClick={ this.savePresence } bsStyle="primary" label="Tallenna" labelWhileLoading="Tallennetaan…"/>
                  </form>
-                 </div>
                  <PresenceHistory value={ presenceHistory } />
                 </Panel>
                 <Panel header="Ilmoittautumispäivät">

diff --git a/src/client/components/ParticipantListPage/ParticipantListPage.jsx b/src/client/components/ParticipantListPage/ParticipantListPage.jsx
@@ -7,8 +7,8 @@ import { getListOffsetSelectorContainer } from './containers/ListOffsetSelectorC
 import { getParticipantRowsContainer } from './containers/ParticipantRowsContainer';
 import { getQuickFilterContainer } from './containers/QuickFilterContainer';
 import { getParticipantCount } from './containers/ParticipantCount';
-import { getPresenceLabel } from '../../components';
 import { LoadingButton } from '../../components';
+import { PresenceSelector } from '../../components';
 
 function getOrder(query) {
   try {
@@ -72,18 +72,10 @@ export function getMassEdit(participantStore) {
     }
 
     render() {
-      const presenceLabel = getPresenceLabel(1);
-      const tmpOutCampLabel = getPresenceLabel(2);
-      const outCampLabel = getPresenceLabel(3);
       return (
         <form className="form-inline" onSubmit={ this.onSubmit }>
           <p>{ this.props.count } { (this.props.count == 1 ? 'henkilö' : 'henkilöä') } valittu</p>
-          <Input type="select" label="Tila" defaultValue="null" onChange={ this.onChange }>
-            <option value="null">---</option>
-            <option value="1">{ presenceLabel }</option>
-            <option value="2">{ tmpOutCampLabel }</option>
-            <option value="3">{ outCampLabel }</option>
-          </Input>
+          <PresenceSelector label="Tila" onChange={ this.onChange }/>
           <LoadingButton loading={ this.state.loading } bsStyle="primary" label="Tallenna" labelWhileLoading="Tallennetaan…"/>
         </form>
       );

diff --git a/src/client/components/ParticipantListPage/containers/PresenceFilterContainer.jsx b/src/client/components/ParticipantListPage/containers/PresenceFilterContainer.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Input } from 'react-bootstrap';
-import { getPresenceLabel } from '../../../components';
+import { PresenceSelector } from '../../../components';
 
 export function getPresenceFilterContainer() {
   const property = 'presence';
@@ -17,17 +16,8 @@ export function getPresenceFilterContainer() {
     }
 
     render() {
-      const presenceLabel = getPresenceLabel(1);
-      const tmpOutCampLabel = getPresenceLabel(2);
-      const outCampLabel = getPresenceLabel(3);
-
       return (
-        <Input type="select" label="Tila" value={ this.props.currentSelection[property] } onChange={ this.onChange }>
-          <option value=""></option>
-          <option value="1">{ presenceLabel }</option>
-          <option value="2">{ tmpOutCampLabel }</option>
-          <option value="3">{ outCampLabel }</option>
-        </Input>
+        <PresenceSelector label="Tila" onChange={ this.onChange } value={ this.props.currentSelection[property] }/>
       );
     }
   }

diff --git a/src/client/components/Util/PresenceSelector.jsx b/src/client/components/Util/PresenceSelector.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Input } from 'react-bootstrap';
+import { getPresenceLabel } from '../../components';
+
+export function PresenceSelector({ onChange, label, value }) {
+  const presenceLabel = getPresenceLabel(1);
+  const tmpOutCampLabel = getPresenceLabel(2);
+  const outCampLabel = getPresenceLabel(3);
+
+  return (
+    <Input type="select" label={ label } defaultValue="null" onChange={ onChange } value={ value }>
+      <option value="null"></option>
+      <option value="1">{ presenceLabel }</option>
+      <option value="2">{ tmpOutCampLabel }</option>
+      <option value="3">{ outCampLabel }</option>
+    </Input>
+  );
+}
+
+PresenceSelector.propTypes = {
+  onChange: React.PropTypes.function,
+  label: React.PropTypes.string,
+  value: React.PropTypes.object,
+};
diff --git a/src/client/components/index.js b/src/client/components/index.js
@@ -28,3 +28,4 @@ export { getLogin } from './OfflineLogin';
 export { PropertyTextArea } from './PropertyTextArea';
 export { LoadingButton } from './Util/LoadingButton';
 export { TdWithTitle } from './Util/TdWithTitle';
+export { PresenceSelector } from './Util/PresenceSelector';