data now retrieved through node

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;