Add Bookmark Listing React Component

adilk0728 · Feb 16, 2024 · 0813743 · 0813743
1 parent 3f5ceed
commit 0813743
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 4 deletions.
diff --git a/frontend-mark-alive/mark-alive/public/index.html b/frontend-mark-alive/mark-alive/public/index.html
@@ -6,7 +6,6 @@
     <title>React App</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
 </html>
diff --git a/frontend-mark-alive/mark-alive/src/App.js b/frontend-mark-alive/mark-alive/src/App.js
@@ -1,7 +1,9 @@
+import BookmarkList from "./components/BookmarkList";
 function App() {
-  return ( <>
-    <h1>First React Component</h1>
-  </>
+  return (
+    <div>
+      <BookmarkList />
+    </div>
   );
 }
 

diff --git a/frontend-mark-alive/mark-alive/src/components/BookmarkList.js b/frontend-mark-alive/mark-alive/src/components/BookmarkList.js
@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+import List from "./List";
+
+const BookmarkList = () => {
+  const [urlList, setUrlList] = useState([]);
+
+  useEffect(() => {
+    fetch("http://localhost:8080/bookmarks")
+      .then((resp) => resp.json())
+      .then((data) => setUrlList(data));
+  }, [urlList]);
+  return (
+    <div>
+      <List Headers={["ID", "URLs"]} data={urlList} />
+    </div>
+  );
+};
+
+export default BookmarkList;
diff --git a/frontend-mark-alive/mark-alive/src/components/list.js b/frontend-mark-alive/mark-alive/src/components/list.js
@@ -0,0 +1,25 @@
+export const List = ({ Headers, data }) => {
+  return (
+    <div>
+      <table>
+        <thead>
+          <tr>
+            {Headers.map((element, index) => (
+              <th key={index}>{element}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((element, index) => (
+            <tr key={element.id}>
+              <td>{element.id}</td>
+              <td>{element.url}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default List;