refactor expirationType

src/client/js/components/ShareLinkForm.jsx

@@ -13,13 +13,12 @@ class ShareLinkForm extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isGoing: true,
-      numberOfGuests: 1,
+      expirationType: 'unlimited',
       text: ' ',
     };
 
     this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleChange = this.handleChange.bind(this);
+    this.handleChangeExpirationType = this.handleChangeExpirationType.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
@@ -33,9 +32,12 @@ class ShareLinkForm extends React.Component {
     });
   }
 
-  handleChange(event) {
-    this.setState({ text: event.target.value });
-    console.log(event.target.value);
+  /**
+   * change expirationType
+   * @param {string} expirationType type of expiration
+   */
+  handleChangeExpirationType(expirationType) {
+    this.setState({ expirationType });
   }
 
   handleSubmit(event) {
@@ -43,95 +45,102 @@ class ShareLinkForm extends React.Component {
     console.log('発行する!');
   }
 
-  render() {
-    return (
-      <div className="share-link-form border">
-        <h4 className="ml-3">Expiration Date</h4>
-        <form onSubmit={this.handleSubmit}>
-          <div className="form-group">
-            <div className="custom-control custom-radio offset-4 mb-2">
-              <input
-                type="radio"
-                className="custom-control-input"
-                id="customRadio1"
-                name="isGoing"
-                value="customRadio1"
-                checked={this.state.isGoing}
-                onChange={this.handleInputChange}
-              />
-              <label className="custom-control-label" htmlFor="customRadio1">Unlimited</label>
-            </div>
+  renderExpirationTypeOptions() {
+    const { expirationType } = this.state;
 
-            <div className="custom-control custom-radio offset-4 mb-2">
+    return (
+      <div className="form-group">
+        <div className="custom-control custom-radio offset-4 mb-2">
+          <input
+            type="radio"
+            className="custom-control-input"
+            id="customRadio1"
+            name="expirationType"
+            value="customRadio1"
+            checked={expirationType === 'unlimited'}
+            onChange={() => { this.handleChangeExpirationType('unlimited') }}
+          />
+          <label className="custom-control-label" htmlFor="customRadio1">Unlimited</label>
+        </div>
+
+        <div className="custom-control custom-radio offset-4 mb-2">
+          <input
+            type="radio"
+            className="custom-control-input"
+            id="customRadio2"
+            value="customRadio2"
+            checked={expirationType === 'numberOfDays'}
+            onChange={() => { this.handleChangeExpirationType('numberOfDays') }}
+            name="expirationType"
+          />
+          <label className="custom-control-label" htmlFor="customRadio2">
+
+            <div className="row align-items-center m-0">
               <input
-                type="radio"
-                className="custom-control-input"
-                id="customRadio2"
-                value="customRadio2"
-                checked={this.state.isGoing}
+                type="number"
+                min="1"
+                max="7"
+                className="form-control col-4"
+                name="numberOfGuests"
+                value={this.state.numberOfGuests}
                 onChange={this.handleInputChange}
-                name="isGoing"
               />
-              <label className="custom-control-label" htmlFor="customRadio2">
-
-                <div className="row align-items-center m-0">
-                  <input
-                    type="number"
-                    min="1"
-                    max="7"
-                    className="form-control col-4"
-                    name="numberOfGuests"
-                    value={this.state.numberOfGuests}
-                    onChange={this.handleInputChange}
-                  />
-                  <span className="col-auto">Days</span>
-                </div>
-              </label>
+              <span className="col-auto">Days</span>
             </div>
+          </label>
+        </div>
+
+        <div className="custom-control custom-radio offset-4 mb-2">
+          <input
+            type="radio"
+            className="custom-control-input"
+            id="customRadio3"
+            name="expirationType"
+            value="customRadio3"
+            checked={expirationType === 'custom'}
+            onChange={() => { this.handleChangeExpirationType('custom') }}
+          />
+          <label className="custom-control-label" htmlFor="customRadio3">
+            Custom
+            <div className="date-picker">Date Picker</div>
+          </label>
+        </div>
+      </div>
+    );
 
-            <div className="custom-control custom-radio offset-4 mb-2">
-              <input
-                type="radio"
-                className="custom-control-input"
-                id="customRadio3"
-                name="isGoing"
-                value="customRadio3"
-                checked={this.state.isGoing}
-                onChange={this.handleInputChange}
-              />
-              <label className="custom-control-label" htmlFor="customRadio3">
-                Custom
-                <div className="date-picker">Date Picker</div>
-              </label>
-            </div>
+  }
 
-            <hr />
-
-            <div className="form-group row">
-              <label htmlFor="inputDesc" className="col-md-4 col-form-label">Description</label>
-              <div className="col-md-4">
-                <input
-                  type="text"
-                  className="form-control"
-                  id="inputDesc"
-                  placeholder="Enter description"
-                  value={this.state.text}
-                  onChange={this.handleChange}
-                />
-              </div>
-            </div>
+  render() {
+    return (
+      <div className="share-link-form border">
+        <h4 className="m-3">Expiration Date</h4>
+
+        {this.renderExpirationTypeOptions()}
+
+        <hr />
+
+        <div className="form-group row">
+          <label htmlFor="inputDesc" className="col-md-4 col-form-label">Description</label>
+          <div className="col-md-4">
+            <input
+              type="text"
+              className="form-control"
+              id="inputDesc"
+              placeholder="Enter description"
+              value={this.state.text}
+              onChange={this.handleChange}
+            />
+          </div>
+        </div>
 
-            <div className="form-group row">
-              <div className="offset-8 col">
-                <button type="button" className="btn btn-primary">
+        <div className="form-group row">
+          <div className="offset-8 col">
+            <button type="button" className="btn btn-primary">
                   Issue
-                </button>
-              </div>
-            </div>
+            </button>
           </div>
-        </form>
+        </div>
       </div>
-
     );
   }