POST for Application Settings working

.gitignore

@@ -0,0 +1 @@
+node_modules

api/server.js

@@ -1,8 +1,8 @@
 const express = require("express");
+const bodyParser = require("body-parser");
 const cors = require("cors");
 const fs = require("fs");
 
-const applications = require('../src/apps.json');
 const links = require('../src/links.json');
 const providers = require('../src/providers.json');
 const themes = require('../src/themes.json');
@@ -14,10 +14,16 @@ const app = express();
 
 // initializing cors middleware for all routes
 app.use(cors());
+var jsonParser = bodyParser.json();
 
 // creating route to make request to server for API
 app.get("/sui/api/apps", (req, res) => {
-    res.status(200).send(applications.apps);
+    fs.readFile('../src/apps.json', (err, data) => {
+        if (err) throw err;
+        let test = JSON.parse(data);
+        res.status(200).send(test.apps);
+    });
+    
 });
 
 app.get("/sui/api/links", (req, res) => {
@@ -40,6 +46,13 @@ app.get("/sui/api/messages", (req, res) => {
     res.status(200).send(messages.messages);
 });
 
+app.post("/sui/api/appUpdate", jsonParser, (req, res) => {
+    let data = JSON.stringify(req.body)
+    fs.writeFileSync('../src/apps.json',data)
+    var applications = require('../src/apps.json');
+    res.status(200).send(applications.apps)
+});
+
 
 
 // app is listening on port 5000

package.json

@@ -8,14 +8,18 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "body-parser": "^1.20.0",
+    "chokidar": "^3.5.3",
     "cors": "^2.8.5",
-    "express": "^4.17.2",
+    "express": "^4.18.1",
+    "formik": "^2.2.9",
     "history": "^5.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.1.1",
     "react-scripts": "4.0.3",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^1.1.2",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",

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">

src/index.css

@@ -537,26 +537,45 @@ table a{
 #applicationForm {
 	display: grid;
 	grid-column-gap: 1vh;
-	grid-row-gap: 1vh;
 	grid-template-columns: 1fr;
 	width: 100vh;
 	text-align: end;
+	border-radius: 1em;
+	background-color: #FFFFFF33;
+	padding-bottom: 2em;
 }
-#applicationForm label {
-	width: 100%;
+#applicationForm div {
+	font-size: larger;
+	padding-left: 1em;
 	padding-right: 1em;
+	padding-top: 1em;
+	text-align: center;
 }
 #applicationForm input {
-	border: var(--color-border);
-	padding-left: 1em;
+	padding: 1em;
+	margin-left: 1em;
+	margin-right: 1em;
 }
-#applicationForm input:focus {
-	border: var(--color-border);
+.settingsCheckbox:focus{
+	outline: none;
+	outline-style: none;
+}
+.settingsText:focus{
+	outline: auto;
+	outline-style: solid;
+	outline-color: var(--color-text-pri);
+}
+#applicationHeader {
+	display: grid;
+	grid-template-columns: 15% 40% 15% 15% 15%;
+	padding-left: 1em;
+	padding-right: 1em;
 }
 #applicationGrid {
 	display: grid;
-	grid-template-columns: 5% 10% 5% 30% 5% 10% 10% 10% 5% 5%;
-	grid-row-gap: 1vh;
+	grid-template-columns: 15% 40% 15% 15% 15%;
+	padding-left: 1em;
+	padding-right: 1em;
 }
 
 /* Bookmark Form */
@@ -572,6 +591,7 @@ table a{
 #bookmarkForm label {
 	width: 100%;
 	padding-right: 1em;
+	padding-top: 1em;
 }
 #bookmarkForm input {
 	border: var(--color-border);