Adding create and delete API and linking with the React components.

swarad07 · Dec 21, 2021 · 5d875e8 · 5d875e8
1 parent 276498c
commit 5d875e8
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 14 deletions.
diff --git a/js/src/components/apiHelper.js b/js/src/components/apiHelper.js
diff --git a/js/src/components/dashboard/index.js b/js/src/components/dashboard/index.js
@@ -34,7 +34,7 @@ const Dashboard = () => {
         const { attributes } = site;
         sites.push(
           <SiteTile
-            id={site.id}
+            id={attributes.drupal_internal__id}
             name={attributes.name}
             url={attributes.siteUrl}
             endpoint={attributes.siteAPIUrl}

diff --git a/js/src/components/site-add-form/index.js b/js/src/components/site-add-form/index.js
@@ -1,16 +1,35 @@
 import React, { useState } from 'react';
 import TextField from '../textfield';
-import Popup from "reactjs-popup";
-import SiteDeleteConfirm from "../site-delete-confirm";
+import Popup from 'reactjs-popup';
+import SiteDeleteConfirm from '../site-delete-confirm';
+import axios from 'axios';
 
 const SiteAddForm = ({ closeModalCallback, id, name, faviconUrl, url, endpoint, token }) => {
   const [deleteSiteOpen, setDeleteSiteModalOpen] = useState(false);
   const closeDeleteSiteModal = () => setDeleteSiteModalOpen(false);
 
-  const saveNewSite = () => {
-    // @todo: Save new site API.
-    console.log('New site added!');
-    closeModalCallback();
+  const saveNewSite = (e) => {
+    e.preventDefault();
+    if (id === undefined || id === null) {
+      const sitedash = {
+        'name': document.getElementById('site-dash-field-site-name').value,
+        'url': document.getElementById('site-dash-field-site-url').value,
+        'faviconUrl': document.getElementById('site-dash-field-site-favicon-url').value,
+        'endpoint': document.getElementById('site-dash-field-site-endpoint-url').value,
+        'token': document.getElementById('site-dash-field-site-token').value,
+      };
+      axios.post('/sitedash/api/v1/operations', sitedash)
+      .then(response => {
+        if (response.entity_saved_flag === 1) {
+          // Success.
+          console.log('Entity saved successfully!');
+        } else {
+          // Display error.
+        }
+      });
+      closeModalCallback();
+      window.location.reload();
+    }
   };
 
   return (
@@ -48,7 +67,7 @@ const SiteAddForm = ({ closeModalCallback, id, name, faviconUrl, url, endpoint,
         />
       </div>
       <div className="actions">
-        <button className="site-tile-btn primary" onClick={() => saveNewSite()} type="submit">Save</button>
+        <button className="site-tile-btn primary" onClick={(e) => saveNewSite(e)} type="submit">Save</button>
         <button className="site-tile-btn secondary" onClick={() => closeModalCallback() }>Cancel</button>
         {id !== undefined &&
           <button className="site-tile-btn tertiary" onClick={() => setDeleteSiteModalOpen(o => !o)}>Delete
@@ -63,7 +82,7 @@ const SiteAddForm = ({ closeModalCallback, id, name, faviconUrl, url, endpoint,
         open={deleteSiteOpen}
         onClose={closeDeleteSiteModal}
       >
-        <SiteDeleteConfirm closeModalCallback={closeModalCallback} closeDeleteSiteModal={closeDeleteSiteModal} />
+        <SiteDeleteConfirm id={id} 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,12 +1,20 @@
 import React from 'react';
 import './site-delete-confirm.css';
+import axios from "axios";
+
+const SiteDeleteConfirm = ({ id, closeModalCallback, closeDeleteSiteModal }) => {
+  const deleteSiteCallback = (e) => {
+    e.preventDefault();
+    const sitedash = {
+      'id': id,
+    };
+
+    axios.delete('/sitedash/api/v1/operations', { data: sitedash })
+    .then(response => console.log('site deleted'));
 
-const SiteDeleteConfirm = ({ closeModalCallback, closeDeleteSiteModal }) => {
-  const deleteSiteCallback = () => {
-    // @todo: Call delete site API.
-    console.log('site deleted');
     closeDeleteSiteModal();
     closeModalCallback();
+    window.location.reload();
   };
 
   return (
@@ -17,7 +25,7 @@ const SiteDeleteConfirm = ({ closeModalCallback, closeDeleteSiteModal }) => {
         </div>
       </div>
       <div className="actions">
-        <button className="site-tile-btn tertiary" onClick={() => deleteSiteCallback()} type="submit">I Confirm, Delete this Site</button>
+        <button className="site-tile-btn tertiary" onClick={(e) => deleteSiteCallback(e)} type="submit">I Confirm, Delete this Site</button>
         <button className="site-tile-btn secondary" onClick={() => closeDeleteSiteModal() }>Cancel</button>
       </div>
     </div>