data now retrieved through node

src/components/ApplicationSettings.js

@@ -1,33 +1,43 @@
-import { getApps } from '../assets/functions.js';
+import { useEffect, useState } from 'react';
 import ApplicationDetails from './ApplicationDetails'
 
 const ApplicationSettings = () => {
-    let apps = (getApps()).apps;
-    console.log(apps);
-    const handleSubmit = (e) => {
-      e.preventDefault();
-    };
-    return (
-      <div id="settings-panel">
-        <div id="settings-panel-header">
-            <h1>Applications</h1>
-        </div>
-        <form id="applicationForm">
-          {apps.map((apps) => (
-            <ApplicationDetails
-              key={apps.name}
-              name={apps.name}
-              url={apps.url}
-              icon={apps.icon}
-              urlbase={apps.urlbase}
-              NSFW={apps.NSFW}
-            />
-          ))}
-        </form>
-        <button onClick={handleSubmit} type="submit" form="applicationForm" value="submit">Save</button>
+  const [state, setState] = useState([]);
+
+  const getData = async () => {
+    const response = await fetch("/sui/api/apps");
+    const data = await response.json();
+    setState(data);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+  };
+  return (
+    <div id="settings-panel">
+      <div id="settings-panel-header">
+          <h1>Applications</h1>
       </div>
-      
-    );
+      <form id="applicationForm">
+        {state.map((apps) => (
+          <ApplicationDetails
+            key={apps.name}
+            name={apps.name}
+            url={apps.url}
+            icon={apps.icon}
+            urlbase={apps.urlbase}
+            NSFW={apps.NSFW}
+          />
+        ))}
+      </form>
+      <button onClick={handleSubmit} type="submit" form="applicationForm" value="submit">Save</button>
+    </div>
+    
+  );
 }
 
 export default ApplicationSettings;