change to use component

src/client/js/components/OutsideShareLinkModal.jsx

@@ -12,6 +12,9 @@ import { createSubscribedElement } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
 import PageContainer from '../services/PageContainer';
 
+import ShareLinkList from './ShareLinkList';
+import ShareLinkForm from './ShareLinkForm';
+
 const OutsideShareLinkModal = (props) => {
 
   /* const { t } = props; */
@@ -27,77 +30,10 @@ const OutsideShareLinkModal = (props) => {
             <button className="col btn btn-danger" type="button">Delete all links</button>
           </div>
 
-          <div className="">
-            <div className="table-responsive">
-              <table className="table table-bordered">
-                <thead>
-                  <tr>
-                    <th>Link</th>
-                    <th>Expiration</th>
-                    <th>Description</th>
-                    <th>Order</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td>test/link</td>
-                    <td>6 Days</td>
-                    <td>foobar</td>
-                    <td>
-                      <button className="btn btn-warning" type="button">
-                        <i className="icon-trash"></i>Delete
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+          <div>
+            <ShareLinkList />
             <button className="btn btn-outline-secondary d-block mx-auto px-5 mb-3" type="button">+</button>
-
-            <div className="share-link-form border">
-              <h4 className="ml-3">Expiration Date</h4>
-              <form>
-                <div className="form-group">
-                  <div className="custom-control custom-radio offset-4 mb-2">
-                    <input id="customRadio1" name="customRadio" type="radio" className="custom-control-input"></input>
-                    <label className="custom-control-label" htmlFor="customRadio1">Unlimited</label>
-                  </div>
-
-                  <div className="custom-control custom-radio offset-4 mb-2">
-                    <input id="customRadio2" name="customRadio" type="radio" className="custom-control-input"></input>
-                    <label className="custom-control-label" htmlFor="customRadio2">
-                      <div className="row align-items-center m-0">
-                        <input className="form-control col-2" type="number" min="1" max="7" value="7"></input>
-                        <span className="col-auto">Days</span>
-                      </div>
-                    </label>
-                  </div>
-
-                  <div className="custom-control custom-radio offset-4 mb-2">
-                    <input id="customRadio3" name="customRadio" type="radio" className="custom-control-input"></input>
-                    <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"></input>
-                    </div>
-                  </div>
-
-                  <div className="form-group row">
-                    <div className="offset-8 col">
-                      <button type="button" className="btn btn-primary">Issue</button>
-                    </div>
-                  </div>
-                </div>
-              </form>
-            </div>
+            <ShareLinkForm />
           </div>
         </div>
       </ModalBody>

src/client/js/components/ShareLinkForm.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from './UnstatedUtils';
+
+
+import AppContainer from '../services/AppContainer';
+import PageContainer from '../services/PageContainer';
+
+const ShareLinkForm = (props) => {
+  return (
+    <div className="share-link-form border">
+      <h4 className="ml-3">Expiration Date</h4>
+      <form>
+        <div className="form-group">
+          <div className="custom-control custom-radio offset-4 mb-2">
+            <input id="customRadio1" name="customRadio" type="radio" className="custom-control-input"></input>
+            <label className="custom-control-label" htmlFor="customRadio1">Unlimited</label>
+          </div>
+
+          <div className="custom-control custom-radio offset-4 mb-2">
+            <input id="customRadio2" name="customRadio" type="radio" className="custom-control-input"></input>
+            <label className="custom-control-label" htmlFor="customRadio2">
+              <div className="row align-items-center m-0">
+                <input className="form-control col-2" type="number" min="1" max="7" value="7"></input>
+                <span className="col-auto">Days</span>
+              </div>
+            </label>
+          </div>
+
+          <div className="custom-control custom-radio offset-4 mb-2">
+            <input id="customRadio3" name="customRadio" type="radio" className="custom-control-input"></input>
+            <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"></input>
+            </div>
+          </div>
+
+          <div className="form-group row">
+            <div className="offset-8 col">
+              <button type="button" className="btn btn-primary">Issue</button>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+const ShareLinkFormWrapper = (props) => {
+  return createSubscribedElement(ShareLinkForm, props, [AppContainer, PageContainer]);
+}
+
+export default withTranslation()(ShareLinkFormWrapper);

src/client/js/components/ShareLinkList.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from './UnstatedUtils';
+
+import AppContainer from '../services/AppContainer';
+
+const ShareLinkList = (props) => {
+
+  function getShareLinkList() {
+    return ['Replace with API'];
+  }
+
+  return (
+    <div className="table-responsive">
+      <table className="table table-bordered">
+        <thead>
+          <tr>
+            <th>Link</th>
+            <th>Expiration</th>
+            <th>Description</th>
+            <th>Order</th>
+          </tr>
+        </thead>
+        <tbody>
+          {
+            getShareLinkList().map(shareLink => {
+              return (
+                <>
+                  <td>{ shareLink }</td>
+                  <td>{ shareLink }</td>
+                  <td>{ shareLink }</td>
+                  <td>{ shareLink }</td>
+                </>
+              )
+            })
+          }
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+const ShareLinkListWrapper = (props) => {
+  return createSubscribedElement(ShareLinkList, props, [AppContainer]);
+}
+
+export default withTranslation()(ShareLinkListWrapper);