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;

src/components/Applications.js

@@ -1,13 +1,24 @@
+import { useEffect, useState } from 'react';
 import AppItem from './AppItem';
-import { getApps } from '../assets/functions';
 
-const Applications = () => {
-  let data = (getApps()).apps;
+function Applications() {
+  const [state, setState] = useState([]);
+
+  const getData = async () => {
+    const response = await fetch("/sui/api/apps");
+    const data = await response.json();
+    setState(data);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
   return (
     <section id="apps">
       <h3>Applications</h3>
       <div id="apps_loop">
-      {data.map((data) => (
+      {state.map((data) => (
         <AppItem
           key={data.name}
           name={data.name}

src/components/BookmarkSettings.js

@@ -1,31 +1,42 @@
+import { useEffect, useState } from 'react';
 import BookmarkGroups from './BookmarkGroups';
-import { getLinks } from '../assets/functions';
 
 const BookmarksSettings = () => {
-    let groups = (getLinks()).bookmarks;
-    const handleSubmit = (e) => {
-      e.preventDefault();
-    };
-    return (
-      <div id="settings-panel">
-        <div id="settings-panel-header">
-            <h1>Bookmarks</h1>
-        </div>
-        <form id="bookmarkForm">
-          <div>
-            {groups.map((groups) => (
-              <BookmarkGroups
-                key={groups.category}
-                category={groups.category}
-                links={groups.links}
-              />
-            ))}
-          </div>
-        </form>
-        <button onClick={handleSubmit} type="submit" form="bookmarkForm" value="submit">Save</button>
+  const [state, setState] = useState([]);
+
+  const getData = async () => {
+    const response = await fetch("/sui/api/links");
+    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>Bookmarks</h1>
       </div>
-      
-    );
+      <form id="bookmarkForm">
+        <div>
+          {state.map((groups) => (
+            <BookmarkGroups
+              key={groups.category}
+              category={groups.category}
+              links={groups.links}
+            />
+          ))}
+        </div>
+      </form>
+      <button onClick={handleSubmit} type="submit" form="bookmarkForm" value="submit">Save</button>
+    </div>
+    
+  );
 }
 
 export default BookmarksSettings;

src/components/Bookmarks.js

@@ -1,22 +1,33 @@
+import { useEffect, useState } from 'react';
 import LinkGroups from './LinkGroups';
-import { getLinks } from '../assets/functions';
 
 function Links() {
-    let bookmarkList = (getLinks()).bookmarks;
-    return (
-      <section id="links">
-        <h3>Bookmarks</h3>
-        <div id="links_loop">
-          {bookmarkList.map((bookmarkList) => (
-            <LinkGroups
-              key={bookmarkList.category}
-              category={bookmarkList.category}
-              links={bookmarkList.links}
-            />
-          ))}
-        </div>
-      </section>
-    );
-  }
+  const [state, setState] = useState([]);
+
+  const getData = async () => {
+    const response = await fetch("/sui/api/links");
+    const data = await response.json();
+    setState(data);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <section id="links">
+      <h3>Bookmarks</h3>
+      <div id="links_loop">
+        {state.map((bookmarkList) => (
+          <LinkGroups
+            key={bookmarkList.category}
+            category={bookmarkList.category}
+            links={bookmarkList.links}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
 
 export default Links;

src/components/MessageInfo.js

@@ -1,21 +1,32 @@
+import { useEffect, useState } from 'react';
 import Messages from './Messages';
 
 function MessageInfo() {
-    let greetings = (require('../messages.json')).messages;
-    console.log(greetings);
-    return (
-      <div id="messageForm">
-        {greetings.map((greetings, index) => (
-            <Messages
-              key={index}
-              group={index+1}
-              index={greetings.index}
-              greeting={greetings.message}
-              easterEgg={greetings.easteregg}
-            />
-        ))}
-      </div>
-    );
+  const [state, setState] = useState([]);
+
+  const getData = async () => {
+    const response = await fetch("/sui/api/messages");
+    const data = await response.json();
+    setState(data);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+  
+  return (
+    <div id="messageForm">
+      {state.map((greetings, index) => (
+          <Messages
+            key={index}
+            group={index+1}
+            index={greetings.index}
+            greeting={greetings.message}
+            easterEgg={greetings.easteregg}
+          />
+      ))}
+    </div>
+  );
 }
 
 export default MessageInfo

src/components/PersonalInfo.js

@@ -1,15 +1,26 @@
+import { useEffect, useState } from 'react';
 import PersonalFormInput from './PersonalFormInput';
-import { getPersonalData } from '../assets/functions';
 
 function PersonalInfo() {
-    var personalData = getPersonalData();
-    return (
-        <PersonalFormInput
-          fname={personalData.fname}
-          lname={personalData.lname}
-          email={personalData.email}
-        />
-    );
+  const [state, setState] = useState([]);
+
+  const getData = async () => {
+    const response = await fetch("/sui/api/personaldata");
+    const data = await response.json();
+    setState(data);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+      <PersonalFormInput
+        fname={state.fname}
+        lname={state.lname}
+        email={state.email}
+      />
+  );
 }
 
 export default PersonalInfo;

src/components/ProviderSettings.js

@@ -1,30 +1,40 @@
+import { useEffect, useState } from 'react';
 import ProviderDetails from './ProviderDetails';
-import { getProviders } from '../assets/functions';
 
 function ProviderSettings() {
-    let providers = (getProviders()).providers;
-    const handleSubmit = (e) => {
-      e.preventDefault();
-    };
-    return (
-      <div id="settings-panel">
-        <div id="settings-panel-header">
-            <h1>Providers</h1>
-        </div>
-        <form id="providersForm">
-          {providers.map((providers) => (
-            <ProviderDetails
-              key={providers.name}
-              name={providers.name}
-              url={providers.url}
-              prefix={providers.prefix}
-            />
-          ))}
-        </form>
-        <button onClick={handleSubmit} type="submit" form="providersForm" value="submit">Save</button>
+  const [state, setState] = useState([]);
+
+  const getData = async () => {
+    const response = await fetch("/sui/api/providers");
+    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>Providers</h1>
       </div>
-      
-    );
+      <form id="providersForm">
+        {state.map((providers) => (
+          <ProviderDetails
+            key={providers.name}
+            name={providers.name}
+            url={providers.url}
+            prefix={providers.prefix}
+          />
+        ))}
+      </form>
+      <button onClick={handleSubmit} type="submit" form="providersForm" value="submit">Save</button>
+    </div>
+    
+  );
 }
 
 export default ProviderSettings;

src/components/ThemesSettings.js

@@ -1,27 +1,38 @@
-import { getThemes, updateTheme } from "../assets/functions";
+import { useEffect, useState } from 'react';
+import { updateTheme } from "../assets/functions";
 
 function ThemesSettings() {
-    let themes = (getThemes()).themes;
-    console.log(themes[0].colorbackground);
-    return (
-      <div id="settings-panel">
-        <h1>Themes</h1>
-        <div id="modal-theme">
-          {themes.map((themes) => (
-              <div className="theme-row">
-                <button data-theme={themes.name} className={"theme-button theme-" + themes.name} onClick={updateTheme}>{themes.name}</button>
-                <div className="theme-palette">
-                  <div className="swatch" style={{background: themes.colorbackground}}></div>
-                  <div className="swatch" style={{background: themes.colorserachbackground}}></div>
-                  <div className="swatch" style={{background: themes.colortextpri}}></div>
-                  <div className="swatch" style={{background: themes.colortextacc}}></div>
-                  <div className="swatch" style={{background: themes.colorborder}}></div>
-                </div>
+  const [state, setState] = useState([]);
+
+  const getData = async () => {
+    const response = await fetch("/sui/api/themes");
+    const data = await response.json();
+    setState(data);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <div id="settings-panel">
+      <h1>Themes</h1>
+      <div id="modal-theme">
+        {state.map((themes) => (
+            <div className="theme-row">
+              <button data-theme={themes.name} className={"theme-button theme-" + themes.name} onClick={updateTheme}>{themes.name}</button>
+              <div className="theme-palette">
+                <div className="swatch" style={{background: themes.colorbackground}}></div>
+                <div className="swatch" style={{background: themes.colorserachbackground}}></div>
+                <div className="swatch" style={{background: themes.colortextpri}}></div>
+                <div className="swatch" style={{background: themes.colortextacc}}></div>
+                <div className="swatch" style={{background: themes.colorborder}}></div>
               </div>
-          ))}
-        </div>
+            </div>
+        ))}
       </div>
-    );
+    </div>
+  );
 }
 
 export default ThemesSettings;