POST for Application Settings working

src/components/ApplicationDetails.js

@@ -8,18 +8,14 @@ function ApplicationDetails(props) {
   } else {
     nsfwChecked = false;
   }
+
   return (
     <div id="applicationGrid" title={props.name}>
-      <label htmlFor="name">Name</label>
-      <input id="name" type="text" defaultValue={props.name}></input>
-      <label htmlFor="url">URL</label>
-      <input id="url" type="text" defaultValue={props.url}></input>
-      <label htmlFor="icon">Icon</label>
-      <input id="icon" type="text" defaultValue={props.icon}></input>
-      <label htmlFor="baseurl">Base URL</label>
-      <input id="baseurl" type="text" defaultValue={props.urlbase}></input>
-      <label htmlFor="NSFW">NSFW</label>
-      <input id="NSFW" type="checkbox" defaultChecked={nsfwChecked}></input>
+      <input id="name" className="settingsText" type="text" defaultValue={props.name}></input>
+      <input id="url" className="settingsText" type="text" defaultValue={props.url}></input>
+      <input id="icon" className="settingsText" type="text" defaultValue={props.icon}></input>
+      <input id="baseurl" className="settingsText" type="text" defaultValue={props.urlbase}></input>
+      <input id="NSFW" className="settingsCheckbox" type="checkbox" defaultChecked={nsfwChecked}></input>
     </div>
   );
 }

src/components/ApplicationSettings.js

@@ -10,19 +10,85 @@ const ApplicationSettings = () => {
     setState(data);
   };
 
+  const addRow = () => {
+    setState([
+      ...state,
+      { key: state.length +1,name: "", url: "home.halfaperture.com/", icon: "", urlbase: "/", NSFW: false}
+    ]);
+  };
+
   useEffect(() => {
     getData();
   }, []);
 
   const handleSubmit = (e) => {
     e.preventDefault();
+    let names = []
+    let urls = []
+    let icons = []
+    let urlbases = []
+    let NSFWs = []
+    let exportData = {
+      apps: []
+    }
+    for (const item of e.target.form) {
+      if (item.type === "text") {
+        switch (item.id) {
+          case "name":
+            names.push(item.value)
+            break;
+          case "url":
+            urls.push(item.value)
+            break;
+          case "icon":
+            icons.push(item.value)
+            break;
+          case "baseurl":
+            urlbases.push(item.value)
+            break;
+          default:
+            break;
+        }
+      } else if (item.type === "checkbox") {
+        if (item.checked) {
+          NSFWs.push("NSFW")
+        } else {
+          NSFWs.push("SAFE")
+        }
+      }
+    }
+    for (let index = 0; index < names.length; ++index) {
+      exportData.apps.push({
+        "name"     : names[index],
+        "url"     : urls[index],
+        "icon"    : icons[index],
+        "baseurl"  : urlbases[index],
+        "NSFW"    : NSFWs[index]
+      });
+    }
+    let exportJSON = JSON.stringify(exportData)
+    const requestOptions = {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: exportJSON
+    };
+    fetch("/sui/api/appUpdate", requestOptions)
+      .then(getData())
   };
+
   return (
     <div id="settings-panel">
       <div id="settings-panel-header">
           <h1>Applications</h1>
       </div>
       <form id="applicationForm">
+      <div id="applicationHeader">
+        <div>Name</div>
+        <div>URL</div>
+        <div>Icon</div>
+        <div>Base URL</div>
+        <div>Hideable</div>
+      </div>
         {state.map((apps) => (
           <ApplicationDetails
             key={apps.name}
@@ -33,7 +99,9 @@ const ApplicationSettings = () => {
             NSFW={apps.NSFW}
           />
         ))}
+        
       </form>
+      <button onClick={addRow} className="addRow">Add Application</button>
       <button onClick={handleSubmit} type="submit" form="applicationForm" value="submit">Save</button>
     </div>
     

src/components/Applications.js

@@ -6,6 +6,7 @@ function Applications() {
 
   const getData = async () => {
     const response = await fetch("/sui/api/apps");
+    console.log(response)
     const data = await response.json();
     setState(data);
   };

src/components/BookmarkSettings.js

@@ -16,6 +16,7 @@ const BookmarksSettings = () => {
 
   const handleSubmit = (e) => {
     e.preventDefault();
+    console.log(e);
   };
   return (
     <div id="settings-panel">