add toggle form

src/client/js/components/OutsideShareLinkModal.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -16,8 +16,11 @@ import ShareLinkList from './ShareLinkList';
 import ShareLinkForm from './ShareLinkForm';
 
 const OutsideShareLinkModal = (props) => {
+  const [isOpenShareLinkForm, setIsOpenShareLinkForm] = useState(false);
 
-  /* const { t } = props; */
+  function toggleShareLinkFormHandler() {
+    setIsOpenShareLinkForm(!isOpenShareLinkForm);
+  }
 
   return (
     <Modal size="lg" isOpen={props.isOpen} toggle={props.onClose} className="grw-create-page">
@@ -32,8 +35,14 @@ const OutsideShareLinkModal = (props) => {
 
           <div>
             <ShareLinkList />
-            <button className="btn btn-outline-secondary d-block mx-auto px-5 mb-3" type="button">+</button>
-            <ShareLinkForm />
+            <button
+              className="btn btn-outline-secondary d-block mx-auto px-5 mb-3"
+              type="button"
+              onClick={toggleShareLinkFormHandler}
+            >
+              {isOpenShareLinkForm ? 'Close' : 'New'}
+            </button>
+            {isOpenShareLinkForm && <ShareLinkForm />}
           </div>
         </div>
       </ModalBody>