Adding callbacks for add and delete sites.

swarad07 · Dec 10, 2021 · 11c9b5d · 11c9b5d
1 parent f92ea3a
commit 11c9b5d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/js/src/components/overview/index.js b/js/src/components/overview/index.js
@@ -19,7 +19,7 @@ const Overview = ({ closeOverviewModal }) => {
     <div className="overview-wrapper">
       <div className="header">
         <h2>Site Overview</h2>
-        <button className="site-tile-btn tertiary" onClick={() => closeOverviewModal}>Close</button>
+        <button className="site-tile-btn tertiary" onClick={() => closeOverviewModal()}>Close</button>
       </div>
       <div className="tabs">
         <ul>

diff --git a/js/src/components/site-add-form/index.js b/js/src/components/site-add-form/index.js
@@ -7,6 +7,12 @@ const SiteAddForm = ({ closeModalCallback, id, name, faviconUrl, url, endpoint,
   const [deleteSiteOpen, setDeleteSiteModalOpen] = useState(false);
   const closeDeleteSiteModal = () => setDeleteSiteModalOpen(false);
 
+  const saveNewSite = () => {
+    // @todo: Save new site API.
+    console.log('New site added!');
+    closeModalCallback();
+  };
+
   return (
     <div className="site-add-form">
       <div className="form-elements">
@@ -36,9 +42,12 @@ const SiteAddForm = ({ closeModalCallback, id, name, faviconUrl, url, endpoint,
         />
       </div>
       <div className="actions">
-        <button className="site-tile-btn primary" type="submit">Save</button>
+        <button className="site-tile-btn primary" onClick={() => saveNewSite()} type="submit">Save</button>
         <button className="site-tile-btn secondary" onClick={() => closeModalCallback() }>Cancel</button>
-        <button className="site-tile-btn tertiary" onClick={() => setDeleteSiteModalOpen(o => !o)}>Delete Site</button>
+        {id !== undefined &&
+          <button className="site-tile-btn tertiary" onClick={() => setDeleteSiteModalOpen(o => !o)}>Delete
+            Site</button>
+        }
       </div>
       <Popup
         closeOnEscape
@@ -48,7 +57,7 @@ const SiteAddForm = ({ closeModalCallback, id, name, faviconUrl, url, endpoint,
         open={deleteSiteOpen}
         onClose={closeDeleteSiteModal}
       >
-        <SiteDeleteConfirm closeModalCallback={closeDeleteSiteModal} />
+        <SiteDeleteConfirm closeModalCallback={closeModalCallback} closeDeleteSiteModal={closeDeleteSiteModal} />
       </Popup>
     </div>
   )

diff --git a/js/src/components/site-delete-confirm/index.js b/js/src/components/site-delete-confirm/index.js
@@ -1,7 +1,14 @@
 import React from 'react';
 import './site-delete-confirm.css';
 
-const SiteDeleteConfirm = ({ closeModalCallback }) => {
+const SiteDeleteConfirm = ({ closeModalCallback, closeDeleteSiteModal }) => {
+  const deleteSiteCallback = () => {
+    // @todo: Call delete site API.
+    console.log('site deleted');
+    closeDeleteSiteModal();
+    closeModalCallback();
+  };
+
   return (
     <div className="site-delete-form">
       <div className="form-elements">
@@ -10,8 +17,8 @@ const SiteDeleteConfirm = ({ closeModalCallback }) => {
         </div>
       </div>
       <div className="actions">
-        <button className="site-tile-btn tertiary" type="submit">I Confirm, Delete this Site</button>
-        <button className="site-tile-btn secondary" onClick={() => closeModalCallback() }>Cancel</button>
+        <button className="site-tile-btn tertiary" onClick={() => deleteSiteCallback()} type="submit">I Confirm, Delete this Site</button>
+        <button className="site-tile-btn secondary" onClick={() => closeDeleteSiteModal() }>Cancel</button>
       </div>
     </div>
   )