data now retrieved through node

api/server.js

@@ -0,0 +1,45 @@
+const express = require("express");
+const cors = require("cors");
+
+const applications = require('../src/apps.json');
+const links = require('../src/links.json');
+const providers = require('../src/providers.json');
+const themes = require('../src/themes.json');
+const personaldata = require('../src/personaldata.json');
+const messages = require('../src/messages.json');
+
+// initializing app
+const app = express();
+
+// initializing cors middleware for all routes
+app.use(cors());
+
+// creating route to make request to server for API
+app.get("/sui/api/apps", (req, res) => {
+    res.status(200).send(applications.apps);
+});
+
+app.get("/sui/api/links", (req, res) => {
+    res.status(200).send(links.bookmarks);
+});
+
+app.get("/sui/api/providers", (req, res) => {
+    res.status(200).send(providers.providers);
+});
+
+app.get("/sui/api/themes", (req, res) => {
+    res.status(200).send(themes.themes);
+});
+
+app.get("/sui/api/personaldata", (req, res) => {
+    res.status(200).send(personaldata);
+});
+
+app.get("/sui/api/messages", (req, res) => {
+    res.status(200).send(messages.messages);
+});
+
+// app is listening on port 5000
+app.listen(5000, () => {
+    console.log("node server is running on port 5000");
+});

package-lock.json

@@ -10,6 +10,8 @@
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.8.3",
+        "cors": "^2.8.5",
+        "express": "^4.17.2",
         "history": "^5.1.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -4576,29 +4578,29 @@
       "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw=="
     },
     "node_modules/body-parser": {
-      "version": "1.19.0",
+      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.1.tgz",
-      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "integrity": "sha512-8ljfQi5eBk8EJfECMrgqNGWPEY5jWP+1IzkzkGdFFEwFQZZyaZ21UqdaHktgiMlH0xLHqIFtE/u2OYE5dOtViA==",
       "dependencies": {
-        "bytes": "3.1.0",
+        "bytes": "3.1.1",
         "content-type": "~1.0.4",
         "debug": "2.6.9",
         "depd": "~1.1.2",
-        "http-errors": "1.7.2",
+        "http-errors": "1.8.1",
         "iconv-lite": "0.4.24",
         "on-finished": "~2.3.0",
-        "qs": "6.7.0",
+        "qs": "6.9.6",
-        "raw-body": "2.4.0",
+        "raw-body": "2.4.2",
-        "type-is": "~1.6.17"
+        "type-is": "~1.6.18"
       },
       "engines": {
         "node": ">= 0.8"
       }
     },
     "node_modules/body-parser/node_modules/bytes": {
-      "version": "3.1.0",
+      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
+      "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==",
       "engines": {
         "node": ">= 0.8"
       }
@@ -5384,16 +5386,35 @@
       "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U="
     },
     "node_modules/content-disposition": {
-      "version": "0.5.3",
+      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
-      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
       "dependencies": {
-        "safe-buffer": "5.1.2"
+        "safe-buffer": "5.2.1"
       },
       "engines": {
         "node": ">= 0.6"
       }
     },
+    "node_modules/content-disposition/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/content-type": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
@@ -5411,9 +5432,9 @@
       }
     },
     "node_modules/cookie": {
-      "version": "0.4.0",
+      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
-      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
+      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -5489,6 +5510,18 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
@@ -7799,16 +7832,16 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/express": {
-      "version": "4.17.1",
+      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.2.tgz",
-      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "integrity": "sha512-oxlxJxcQlYwqPWKVJJtvQiwHgosH/LrLSPA+H4UxpyvSS6jC5aH+5MoHFM+KABgTOt0APue4w66Ha8jCUo9QGg==",
       "dependencies": {
         "accepts": "~1.3.7",
         "array-flatten": "1.1.1",
-        "body-parser": "1.19.0",
+        "body-parser": "1.19.1",
-        "content-disposition": "0.5.3",
+        "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.4.0",
+        "cookie": "0.4.1",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "~1.1.2",
@@ -7822,13 +7855,13 @@
         "on-finished": "~2.3.0",
         "parseurl": "~1.3.3",
         "path-to-regexp": "0.1.7",
-        "proxy-addr": "~2.0.5",
+        "proxy-addr": "~2.0.7",
-        "qs": "6.7.0",
+        "qs": "6.9.6",
         "range-parser": "~1.2.1",
-        "safe-buffer": "5.1.2",
+        "safe-buffer": "5.2.1",
-        "send": "0.17.1",
+        "send": "0.17.2",
-        "serve-static": "1.14.1",
+        "serve-static": "1.14.2",
-        "setprototypeof": "1.1.1",
+        "setprototypeof": "1.2.0",
         "statuses": "~1.5.0",
         "type-is": "~1.6.18",
         "utils-merge": "1.0.1",
@@ -7856,6 +7889,25 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "node_modules/express/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/ext": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/ext/-/ext-1.6.0.tgz",
@@ -8962,25 +9014,20 @@
       "integrity": "sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc="
     },
     "node_modules/http-errors": {
-      "version": "1.7.2",
+      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
-      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
       "dependencies": {
         "depd": "~1.1.2",
-        "inherits": "2.0.3",
+        "inherits": "2.0.4",
-        "setprototypeof": "1.1.1",
+        "setprototypeof": "1.2.0",
         "statuses": ">= 1.5.0 < 2",
-        "toidentifier": "1.0.0"
+        "toidentifier": "1.0.1"
       },
       "engines": {
         "node": ">= 0.6"
       }
     },
-    "node_modules/http-errors/node_modules/inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
-    },
     "node_modules/http-parser-js": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.5.tgz",
@@ -14690,11 +14737,14 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.7.0",
+      "version": "6.9.6",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
-      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
+      "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==",
       "engines": {
         "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/query-string": {
@@ -14769,12 +14819,12 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "2.4.0",
+      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.2.tgz",
-      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "integrity": "sha512-RPMAFUJP19WIet/99ngh6Iv8fzAbqum4Li7AD6DtGaW2RpMB/11xDoalPiJMTbu6I3hkbMVkATvZrqb9EEqeeQ==",
       "dependencies": {
-        "bytes": "3.1.0",
+        "bytes": "3.1.1",
-        "http-errors": "1.7.2",
+        "http-errors": "1.8.1",
         "iconv-lite": "0.4.24",
         "unpipe": "1.0.0"
       },
@@ -14783,9 +14833,9 @@
       }
     },
     "node_modules/raw-body/node_modules/bytes": {
-      "version": "3.1.0",
+      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
+      "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==",
       "engines": {
         "node": ">= 0.8"
       }
@@ -16070,9 +16120,9 @@
       }
     },
     "node_modules/send": {
-      "version": "0.17.1",
+      "version": "0.17.2",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz",
-      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "integrity": "sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==",
       "dependencies": {
         "debug": "2.6.9",
         "depd": "~1.1.2",
@@ -16081,9 +16131,9 @@
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
         "fresh": "0.5.2",
-        "http-errors": "~1.7.2",
+        "http-errors": "1.8.1",
         "mime": "1.6.0",
-        "ms": "2.1.1",
+        "ms": "2.1.3",
         "on-finished": "~2.3.0",
         "range-parser": "~1.2.1",
         "statuses": "~1.5.0"
@@ -16106,9 +16156,9 @@
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "node_modules/send/node_modules/ms": {
-      "version": "2.1.1",
+      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/serialize-javascript": {
       "version": "5.0.1",
@@ -16173,14 +16223,14 @@
       "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
     },
     "node_modules/serve-static": {
-      "version": "1.14.1",
+      "version": "1.14.2",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.2.tgz",
-      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "integrity": "sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==",
       "dependencies": {
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.17.1"
+        "send": "0.17.2"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -16230,9 +16280,9 @@
       "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
     },
     "node_modules/setprototypeof": {
-      "version": "1.1.1",
+      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
     "node_modules/sha.js": {
       "version": "2.4.11",
@@ -17631,9 +17681,9 @@
       }
     },
     "node_modules/toidentifier": {
-      "version": "1.0.0",
+      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
       "engines": {
         "node": ">=0.6"
       }
@@ -23717,26 +23767,26 @@
       "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw=="
     },
     "body-parser": {
-      "version": "1.19.0",
+      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.1.tgz",
-      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "integrity": "sha512-8ljfQi5eBk8EJfECMrgqNGWPEY5jWP+1IzkzkGdFFEwFQZZyaZ21UqdaHktgiMlH0xLHqIFtE/u2OYE5dOtViA==",
       "requires": {
-        "bytes": "3.1.0",
+        "bytes": "3.1.1",
         "content-type": "~1.0.4",
         "debug": "2.6.9",
         "depd": "~1.1.2",
-        "http-errors": "1.7.2",
+        "http-errors": "1.8.1",
         "iconv-lite": "0.4.24",
         "on-finished": "~2.3.0",
-        "qs": "6.7.0",
+        "qs": "6.9.6",
-        "raw-body": "2.4.0",
+        "raw-body": "2.4.2",
-        "type-is": "~1.6.17"
+        "type-is": "~1.6.18"
       },
       "dependencies": {
         "bytes": {
-          "version": "3.1.0",
+          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
-          "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+          "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg=="
         },
         "debug": {
           "version": "2.6.9",
@@ -24407,11 +24457,18 @@
       "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U="
     },
     "content-disposition": {
-      "version": "0.5.3",
+      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
-      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
       "requires": {
-        "safe-buffer": "5.1.2"
+        "safe-buffer": "5.2.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+        }
       }
     },
     "content-type": {
@@ -24428,9 +24485,9 @@
       }
     },
     "cookie": {
-      "version": "0.4.0",
+      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
-      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA=="
     },
     "cookie-signature": {
       "version": "1.0.6",
@@ -24496,6 +24553,15 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
     "cosmiconfig": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
@@ -26369,16 +26435,16 @@
       }
     },
     "express": {
-      "version": "4.17.1",
+      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.2.tgz",
-      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "integrity": "sha512-oxlxJxcQlYwqPWKVJJtvQiwHgosH/LrLSPA+H4UxpyvSS6jC5aH+5MoHFM+KABgTOt0APue4w66Ha8jCUo9QGg==",
       "requires": {
         "accepts": "~1.3.7",
         "array-flatten": "1.1.1",
-        "body-parser": "1.19.0",
+        "body-parser": "1.19.1",
-        "content-disposition": "0.5.3",
+        "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.4.0",
+        "cookie": "0.4.1",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "~1.1.2",
@@ -26392,13 +26458,13 @@
         "on-finished": "~2.3.0",
         "parseurl": "~1.3.3",
         "path-to-regexp": "0.1.7",
-        "proxy-addr": "~2.0.5",
+        "proxy-addr": "~2.0.7",
-        "qs": "6.7.0",
+        "qs": "6.9.6",
         "range-parser": "~1.2.1",
-        "safe-buffer": "5.1.2",
+        "safe-buffer": "5.2.1",
-        "send": "0.17.1",
+        "send": "0.17.2",
-        "serve-static": "1.14.1",
+        "serve-static": "1.14.2",
-        "setprototypeof": "1.1.1",
+        "setprototypeof": "1.2.0",
         "statuses": "~1.5.0",
         "type-is": "~1.6.18",
         "utils-merge": "1.0.1",
@@ -26422,6 +26488,11 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
         }
       }
     },
@@ -27333,22 +27404,15 @@
       "integrity": "sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc="
     },
     "http-errors": {
-      "version": "1.7.2",
+      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
-      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
       "requires": {
         "depd": "~1.1.2",
-        "inherits": "2.0.3",
+        "inherits": "2.0.4",
-        "setprototypeof": "1.1.1",
+        "setprototypeof": "1.2.0",
         "statuses": ">= 1.5.0 < 2",
-        "toidentifier": "1.0.0"
+        "toidentifier": "1.0.1"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
-        }
       }
     },
     "http-parser-js": {
@@ -31950,9 +32014,9 @@
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
     },
     "qs": {
-      "version": "6.7.0",
+      "version": "6.9.6",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
-      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+      "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ=="
     },
     "query-string": {
       "version": "4.3.4",
@@ -32014,20 +32078,20 @@
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
     },
     "raw-body": {
-      "version": "2.4.0",
+      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.2.tgz",
-      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "integrity": "sha512-RPMAFUJP19WIet/99ngh6Iv8fzAbqum4Li7AD6DtGaW2RpMB/11xDoalPiJMTbu6I3hkbMVkATvZrqb9EEqeeQ==",
       "requires": {
-        "bytes": "3.1.0",
+        "bytes": "3.1.1",
-        "http-errors": "1.7.2",
+        "http-errors": "1.8.1",
         "iconv-lite": "0.4.24",
         "unpipe": "1.0.0"
       },
       "dependencies": {
         "bytes": {
-          "version": "3.1.0",
+          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
-          "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+          "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg=="
         }
       }
     },
@@ -33098,9 +33162,9 @@
       "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ=="
     },
     "send": {
-      "version": "0.17.1",
+      "version": "0.17.2",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz",
-      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "integrity": "sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==",
       "requires": {
         "debug": "2.6.9",
         "depd": "~1.1.2",
@@ -33109,9 +33173,9 @@
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
         "fresh": "0.5.2",
-        "http-errors": "~1.7.2",
+        "http-errors": "1.8.1",
         "mime": "1.6.0",
-        "ms": "2.1.1",
+        "ms": "2.1.3",
         "on-finished": "~2.3.0",
         "range-parser": "~1.2.1",
         "statuses": "~1.5.0"
@@ -33133,9 +33197,9 @@
           }
         },
         "ms": {
-          "version": "2.1.1",
+          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
         }
       }
     },
@@ -33198,14 +33262,14 @@
       }
     },
     "serve-static": {
-      "version": "1.14.1",
+      "version": "1.14.2",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.2.tgz",
-      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "integrity": "sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==",
       "requires": {
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.17.1"
+        "send": "0.17.2"
       }
     },
     "set-blocking": {
@@ -33245,9 +33309,9 @@
       "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
     },
     "setprototypeof": {
-      "version": "1.1.1",
+      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
     "sha.js": {
       "version": "2.4.11",
@@ -34418,9 +34482,9 @@
       }
     },
     "toidentifier": {
-      "version": "1.0.0",
+      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
     },
     "tough-cookie": {
       "version": "4.0.0",

package.json

@@ -2,11 +2,14 @@
   "name": "home-page",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:5000",
   "homepage": "https://home.halfaperture.com/sui",
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "cors": "^2.8.5",
+    "express": "^4.17.2",
     "history": "^5.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/assets/functions.js

@@ -40,26 +40,10 @@ export function greet() {
       return easterEggs[easterEggText].message;
     }
 }
-export function getApps() {
-    let applications = require('../apps.json');
-    return applications;
-}
-export function getLinks() {
-    let links = require('../links.json');
-    return links;
-}
-export function getProviders() {
-    let providers = require('../providers.json');
-    return providers;
-}
 export function getThemes() {
     let themes = require('../themes.json');
     return themes;
 }
-export function getPersonalData() {
-    let personaldata = require('../personaldata.json');
-    return personaldata;
-}
 export function updateTheme(e) {
     var themes = getThemes();
     var themeName = e.target.innerHTML.toLowerCase();

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;
+  const [state, setState] = useState([]);
-    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>
-      </div>
 
-    );
+  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 = () => {
+function Applications() {
-  let data = (getApps()).apps;
+  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 [state, setState] = useState([]);
-    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>
-      </div>
 
-    );
+  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;
+  const [state, setState] = useState([]);
-    return (
+
-      <section id="links">
+  const getData = async () => {
-        <h3>Bookmarks</h3>
+    const response = await fetch("/sui/api/links");
-        <div id="links_loop">
+    const data = await response.json();
-          {bookmarkList.map((bookmarkList) => (
+    setState(data);
-            <LinkGroups
+  };
-              key={bookmarkList.category}
+
-              category={bookmarkList.category}
+  useEffect(() => {
-              links={bookmarkList.links}
+    getData();
-            />
+  }, []);
-          ))}
+
-        </div>
+  return (
-      </section>
+    <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;
+  const [state, setState] = useState([]);
-    console.log(greetings);
+
-    return (
+  const getData = async () => {
-      <div id="messageForm">
+    const response = await fetch("/sui/api/messages");
-        {greetings.map((greetings, index) => (
+    const data = await response.json();
-            <Messages
+    setState(data);
-              key={index}
+  };
-              group={index+1}
+
-              index={greetings.index}
+  useEffect(() => {
-              greeting={greetings.message}
+    getData();
-              easterEgg={greetings.easteregg}
+  }, []);
-            />
+  
-        ))}
+  return (
-      </div>
+    <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();
+  const [state, setState] = useState([]);
-    return (
+
-        <PersonalFormInput
+  const getData = async () => {
-          fname={personalData.fname}
+    const response = await fetch("/sui/api/personaldata");
-          lname={personalData.lname}
+    const data = await response.json();
-          email={personalData.email}
+    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 [state, setState] = useState([]);
-    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>
-      </div>
 
-    );
+  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;
+  const [state, setState] = useState([]);
-    console.log(themes[0].colorbackground);
+
-    return (
+  const getData = async () => {
-      <div id="settings-panel">
+    const response = await fetch("/sui/api/themes");
-        <h1>Themes</h1>
+    const data = await response.json();
-        <div id="modal-theme">
+    setState(data);
-          {themes.map((themes) => (
+  };
-              <div className="theme-row">
+
-                <button data-theme={themes.name} className={"theme-button theme-" + themes.name} onClick={updateTheme}>{themes.name}</button>
+  useEffect(() => {
-                <div className="theme-palette">
+    getData();
-                  <div className="swatch" style={{background: themes.colorbackground}}></div>
+  }, []);
-                  <div className="swatch" style={{background: themes.colorserachbackground}}></div>
+
-                  <div className="swatch" style={{background: themes.colortextpri}}></div>
+  return (
-                  <div className="swatch" style={{background: themes.colortextacc}}></div>
+    <div id="settings-panel">
-                  <div className="swatch" style={{background: themes.colorborder}}></div>
+      <h1>Themes</h1>
-                </div>
+      <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;