change into class componet

src/client/js/components/OutsideShareLinkModal.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -15,40 +15,55 @@ import PageContainer from '../services/PageContainer';
 import ShareLinkList from './ShareLinkList';
 import ShareLinkForm from './ShareLinkForm';
 
-const OutsideShareLinkModal = (props) => {
-  const [isOpenShareLinkForm, setIsOpenShareLinkForm] = useState(false);
+class OutsideShareLinkModal extends React.Component {
 
-  function toggleShareLinkFormHandler() {
-    setIsOpenShareLinkForm(!isOpenShareLinkForm);
+  constructor() {
+    super();
+    this.state = {
+      isOpenShareLinkForm: false,
+    };
+
+    this.toggleShareLinkFormHandler = this.toggleShareLinkFormHandler.bind(this);
   }
 
-  return (
-    <Modal size="lg" isOpen={props.isOpen} toggle={props.onClose}>
-      <ModalHeader tag="h4" toggle={props.onClose} className="bg-primary text-light">Title
-      </ModalHeader>
-      <ModalBody>
-        <div className="container">
-          <div className="form-inline mb-3">
-            <h4>Shared Link List</h4>
-            <button className="ml-auto btn btn-danger" type="button">Delete all links</button>
-          </div>
+  toggleShareLinkFormHandler() {
+    this.setState({ isOpenShareLinkForm: !this.state.isOpenShareLinkForm });
+  }
+
+  deleteAllLinksHandler() {
+    console.log('hoge');
+  }
 
-          <div>
-            <ShareLinkList />
-            <button
-              className="btn btn-outline-secondary d-block mx-auto px-5 mb-3"
-              type="button"
-              onClick={toggleShareLinkFormHandler}
-            >
-              {isOpenShareLinkForm ? 'Close' : 'New'}
-            </button>
-            {isOpenShareLinkForm && <ShareLinkForm onCloseForm={toggleShareLinkFormHandler} />}
+  render() {
+    return (
+      <Modal size="lg" isOpen={this.props.isOpen} toggle={this.props.onClose}>
+        <ModalHeader tag="h4" toggle={this.props.onClose} className="bg-primary text-light">Title
+        </ModalHeader>
+        <ModalBody>
+          <div className="container">
+            <div className="form-inline mb-3">
+              <h4>Shared Link List</h4>
+              <button className="ml-auto btn btn-danger" type="button" onClick={this.deleteAllLinksHandler}>Delete all links</button>
+            </div>
+
+            <div>
+              <ShareLinkList />
+              <button
+                className="btn btn-outline-secondary d-block mx-auto px-5 mb-3"
+                type="button"
+                onClick={this.toggleShareLinkFormHandler}
+              >
+                {this.state.isOpenShareLinkForm ? 'Close' : 'New'}
+              </button>
+              {this.state.isOpenShareLinkForm && <ShareLinkForm onCloseForm={this.toggleShareLinkFormHandler} />}
+            </div>
           </div>
-        </div>
-      </ModalBody>
-    </Modal>
-  );
-};
+        </ModalBody>
+      </Modal>
+    );
+  }
+
+}
 
 /**
  * Wrapper component for using unstated